Skip to Navigation | Skip to Content

MAT 235 - Web Design 3: Site design and Architecture

Menu

Class Schedule

Week 1 (1/22)

AGENDA

  • Introduction to the class
  • Discussion of team projects/Working in a team (eval)
  • Student Interest and Team Formation Survey
  • Self publishing a website sketchbook or "sketchblog"
  • Theme and graphic resource development for the "sketchblog"
  • Brief Dreamweaver/HTML/CSS Review
  • Using Inspect Element and the Web Developer Toolbar
  • Connecting to the Server via FTP

Links & Resources

Thematic Website sketchbook/sketch blog (Due 1/29)

Design a one-page "sketch-blog" or "blog like" website that will serve as an index for all of your work in this class, based on the theme of "Choose Your Decade" as identified by the class (Choose a style/theme for your sketch blog based on your chosen decade, such as the 1800s, 1920s, 1980s for examples).

Use a simple CSS Reset to zero out browser preset margins and padding. Use appropriate and semantic HTML5 markup (for content/structure) and CSS coding (for presentation/formatting). Feel free to play around and experiment with styles, colors, typography, web fonts, and images if you like, but the page does not need to be overly complex. Make sure the page can support easy updates. In the end, this will be the "index.htm" page for your folder on the MAT server and it should contain links and/or information to everything else you do in the class. Thus, it should be scalable to accommodate new content and include dates and titles for the "posts" that you will be adding. Save the page as "index.hml" and upload it to your Lastname_Firstname folder on the MAT server. See Connecting to the Server via FTP for FTP instructions.

LAb/Homework

  • In your sketchblog, research and write a short post that reflects on the following: User Interface (UI) and User Experience (UX) are often mentioned together or separated by a slash (/), such as job listings asking for UI/UX experience. This suggests that UI and UX design are nearly the same thing or flip sides of the same coin. Is this true? If not, what are UI and UX design and what is the difference between them? What do UI and UX designers do? Include links to any sources you may cite and/or good resources that you may find in your research.

> Go to Top

Week 2 (1/27 + 1/29)

AGENDA (1/27)

  • Introduction/overview to the class (continued)
  • Self publishing a website sketchbook or "sketchblog"
  • Theme and graphic resource development for the "sketchblog"
  • Brief Dreamweaver/HTML/CSS Review
  • Using Inspect Element and the Web Developer Toolbar
  • Lab time for sketch blog

AGENDA (1/29)

  • Working with FTP in Dreamweaver
  • A peak at the sketchblogs
  • CSS and Typography on the Web
  • New Possibilities for Web Fonts and Typography on the Web
  • CSS3 techniques for typography and layout

Web Typography Exercise/Investigation (Due 2/26)

Explore web fonts and typographic design on the web using the content and typographic design of a magazine page (or spread) as inspiration. Find a magazine article with compelling (but not overly complex) typography and a clean, interesting layout. Using HTML and CSS, create a webpage that reflects the content/layout of the magazine article. Adhere to the following guidelines:

  1. Try to maintain a connection to the graphic/typographic design of the printed magazine article while creatively adapting the article for web delivery. You do not have to make your webpage design look exactly like the article (or use the same fonts or images), but the design of the magazine article should “inspire” your design.
  2. Focus on high-quality typographic design using modern CSS techniques.
  3. Make sure that you have at least four distinct typographic styles (such as styles for a top-level header, a subhead, a byline, and body copy).
  4. Use appropriate and semantic HTML markup (for content/structure) and CSS coding (for presentation/formatting).
  5. Use a CSS Reset to zero out browser preset margins and padding.
  6. Explore and use Web Fonts by either using a font hosting service (like Google's Web Fonts) or embedding the font using the @font-face declaration (such as available at Font Squirrel) or both.
  7. Optionally, use Image Replacement Techniques to replace text with image on a header (or other elements, but not the body copy).
  8. You are encouraged to explore newer CSS3 styles such as text-shadow, column-count, column-gap, column-width, transforms, CSS Shapes, etc.
  9. You are encouraged to create a responsive design (adapt to mobile), but it is not required.
  10. Be creative and have fun.

Post your exercise/webpage to your sketchblog (as a link from your sketchblog). See these webpages for examples.

Links & Resources

Typography and Web Fonts Resources

Fonts and Web Font Hosting Services

Compare Fonts, Learn About Typography

Articles about Typography on the Web

Lab/Homework

  • Set up your sketchblog/sketchbook index page. Upload or bring your files to class on 1/29.
  • Find a good magazine article/layout to use for the Web Typography Exercise/Investigation (due 2/26)

> Go to Top

Week 3 (2/3 + 2/5)

AGENDA

  • CSS and Typography on the Web
  • New Possibilities for Web Fonts and Typography on the Web
  • CSS3 techniques for typography (such as @font-face font embedding, text-shadow, and columns, transformations, CSS Shapes, and more)
  • CSS Shapes (bee-illustration-transparency.png)
  • Kerning and working with individual letter forms, including review of the Kerning.js and Lettering.js frameworks
  • A look at some useful pseudo classes

AGENDA (2/5)

Links & Resources

Chrome and Firefox Inspectors

JS Frameworks for Kerning and Typography

Pseudo Class Selectors

CSS Columns

CSS Shapes

CSS Transforms

CSS3 Generators/Tutorials

LAb/Homework

  • Choose a "studio name" for your team (by 2/10)
  • Each team member should post (or link to) your chosen "studio/team name" in their Sketchblog (by 2/10)
  • Join Slack and create a "channel" for your team. Invite kcleveland@miracosta.edu to your tema's Slack channel (by 2/12)
  • Begin to think about/create a logo/identity for your team/studio
  • Plan your questions for the client Interviews (in two weeks). As a team, create a client survey of at least 15 questions that address the essentials of what you need to know from your client (due to sketchblogs on 2/12)

> Go to Top

Week 4 (2/10 + 2/12)

AGENDA

  • Information Architecture Discussion

Links & Resources

Contracts

Creative/Communication Brief

Information Architecture

LAb/Homework

  • Select a member of the team to make initial contact with the client and schedule a client interview. Copy me at kcleveland@miracosta.edu on this email. Due by or bfeore 2/12.
  • As a team, prepare for the client interviews next week. This preparation should include doing some basic client research by reviewing their current site (and/or similar kinds of sites) and by preparing at least 15 questions that your team would like to ask during the interview. Each team member should post (or link to) your chosen "studio/team name" and your client survey questions in their Sketchblog. Due by or before 2/17.
  • Work on the Web Typography Exercise/Investigation (due 2/26)

> Go to Top

Week 5 (2/17 + 2/19)

No class on 2/17. It's the presidents' day holiday.

AGENDA (2/19)

  • 10 am - Client Interviews
  • Information Architecture Discussion
  • Classification Schemes
  • Creating Sitemaps and Wireframes
  • User Personas and Scenarios

LINKS & Resources

Survey and MOU

Magazine Exercise / Typography Demos

Creative/Communication Brief

Information Architecture

IA Process, Sitemaps, Wireframes, and Additional Resources and Examples

LAb/Homework

> Go to Top

Week 6 (2/24 + 2/26)

AGENDA

  • Information Architecture (lecture)
  • Classification Schemes
  • Creating Content Inventories, Sitemaps, and Wireframes
  • User Personas and Scenarios
  • Understanding Users and Usability (lecture)
  • Usability - Rules, Laws, and Ideas (lecture)

IN CLASS GROUP ASSIGNMENT/activity

LINKS & Resources

Next Steps for Our Clients (and Class)

Usability

User Personas

LAb/Homework

> Go to Top

Week 7 (3/2 + 3/4)

AGENDA

  • User Research, User Scenarios, and User Personas
  • Usability Testing
  • Usability and Information Architecture Wrap Up and Review
  • Design Research and Creative Investigations
  • Team Meetings

IN CLASS GROUP ASSIGNMENT/activity

LINKS & Resources

IA and Usability Lectures from Last Week

  • Information Architecture (lecture)
  • Understanding Users and Usability (lecture)
  • Usability - Rules, Laws, and Ideas (lecture)

Usability Testing

Content Stategy

LAb/Homework

> Go to Top

Week 8 (3/9 + 3/11)

AGENDA

  • Information Architecture Wrap Up and Review
  • Team Project - Design Phase
  • Design Research and Creative Investigations
  • Review of Web Typography / Magazine Exercises
  • A look at pseudo-classes and pseudo-elements
  • Discussion of Rapid Prototyping and Designing in the Browser
  • Design Principles In-Class Exercise and Discussion
  • Team Meetings

IN-Class Design CHallenge and Design Principles Exercise/Investigation - PART 1 - ON MONDAY

Using the design principle you’ve been assigned/chosen, gain a solid understanding of this principle and find at least one example of an attractive web design that makes use of the design principle (more examples are welcome). Take a screen shot of this website/design and note the URL. Be prepared to show these things on Wednesday.

IN-Class Design CHallenge and Design Principles Exercise/Investigation - PART 2 - ON WeDNESDAY (DUE AT 10:45 am)

In the real world, on occasion, you may be asked to create designs with very short deadlines. Or, when seeking a job, you may be given a design 'test' to create a design within a designated time span. This 'design challenge' will force you to test your design/produiton skills using rapid prototyping (design in the browser) techniques.

Using the design principle you’ve been assigned/chosen, you will have 1:45 hours to design/produce a webpage about your principle.

Create a webpage about the design principle. For content, you can use the content provided or modify, expand on, edit, or write your own version of this content. You can also use screen shots from sites that are good examples of your design principle in action. Adhere to the following guidelines:

  1. Target a "desktop" size baseline width of 960 - 1600 pixels (i.e. mobile optimization not required)
  2. Strive to create a simple, but nice design that describes and reflects the design principle you've chosen.
  3. Include the images/links to the example website(s) you’ve found that reflect/capture the design principle in use. In other words, use a screen shot or two from your example site(s) as graphic assets within your webpage and also create links to the URLs of these sites.
  4. Be creative and have fun.
  5. You must finish by 10:45! This is a time-based challenge and you have a deadline. So, get the basics done first (insert the content and images/links, etc.) and then you can use your remaing time to progessively enhance your design.

By 10:45 am, post your exercise/webpage to a "Design_Principles" folder on the MAT server. Later, also provide a link to your page from your sketchblog.

Next class, be prepared to briefly present/explain the design principle you are exploring, share your webpage about the design principle, and show the links to the example sites that you've found with the class explaining how these sites capture or exemplify your chosen principle in some way.

See this webpage for a design example.

LINKS & Resources

Design Principles

On Rapid Prototyping and Designing in the Browser

Design Showcases

Web Design Magazines/Resources

LAb/Homework

> Go to Top

Spring Break (no class on 3/16 or 3/18)

AGENDA

  • Avoid Agendas
  • Maybe go outside! Maybe a nap! Maybe put your feet in some sand!

> Go to Top

Week 9 (3/23 - 3/29) - Transition Week - No Class

All classes at MiraCosta are 'paused' this week as the campus prepares to transition to online instruction due to the coronavirus. Students have a 2nd week of spring break. All classes will resume in an online format beginning March 30. Note that some assignments and deadlines have been (or will be) revised, including the Creative Investigation (now due on 4/6).

> Go to Top

Week 10 (3/30 + 4/1)

AGENDA (3/30) - ONLINE

  • Reach out to your team to be sure to complete and collaborate on Creative Research and Investigations (now due 4/6)

AGENDA (4/1) - ZOOM at 9:00 am

I plan to maintain 'synchronous' class sessions at our regularly scheduled class times conducted through Zoom. Our first Zoom session is scheduled for Wednesday, 4/1 at 9:00 a.m. View a recording of this session here.

TASKS / HOMEWORK

LINKS & Resources

Design Principles

Style Tiles, Mood Boards, and Comps

> Go to Top

Week 11 (4/6 + 4/8)

AGENDA (Monday, 4/6) - ZOOM at 9:00 am

View a recording of our 4/6 zoom session here.

 

AGENDA (WEdnesday, 4/8) - ZOOM at 9:00 am

View a recording of our 4/8 zoom session here.

See Canvas for the link to join our Zoom Meeting

  • Instructional Activity - Ashley - HTML5 Audio and Video
  • Adobe XD Design Techniques - Wireframing Wordpress Templates, Working with Creative Cloud Libraries
  • Ecommerce Design Sprint - Part 1 - Inspiration + Patterns

 

TASKS / HOMEWORK

 

LINKS & Resources

Studio Press - Genesis Themes

https://www.studiopress.com/

Collapsible, Pop-Out Panel Such as for FAQs

jQuery Video Tutorials

jQuery

Google Hosted Libraries /CDN for jQuery

W3 Schools

jQuery Plugins

> Go to Top

Week 12 (4/13 + 4/15)

AGENDA (Monday, 4/13) - ZOOM at 9:00 am

View a recording of our 4/13 zoom session here. (Access PW: H9.SqN55)

  • Instructional Activity - Rian - Free-ware alternatives to PS and AI
  • Adobe XD Design Techniques - Components and Component States
  • Ecommerce Design Sprint - Part 2

AGENDA (WEDNESDAY, 4/15) - ZOOM at 9:00 am

View a recording of our 4/15 zoom session here.

  • Instructional Activity - Liz - Wordpress Plugins/Tips
  • Review of Rough Comps or Style Tiles from Team Project
  • Adobe XD Design Techniques - E-Commerce Product Display Interactions/Animations (with AutoAnimate)

TASKS / HOMEWORK

  • Team Project - Rough Comps or Style Tile (from each team member - due 4/15)
  • Team Project - Refined Style Tiles or Comps (from each team - due 4/20)

LINKS & Resources

> Go to Top

Week 13 (4/20 + 4/22)

AGENDA (Monday, 4/20) - ZOOM at 9:00 am

View a recording of our 4/20 session here.

  • A look at the Genesis Wordpress framework
  • Customizing pages using Guttenberg blocks in WP
  • Discussion of Style/Tiles Comps
  • Ecommerce Design Sprint - Part 3

TASKS / HOMEWORK

  • Team Project - Refined Style Tiles or Comps (from each team - due 4/20)
  • Team Project - Prepare to deliver your designs to the client on 4/22
    As per my email on 4/22:
  • Create a new user account for yourself. Start by logging in with the admin account provided in the PDF. Then, on the dashboard under Users, choose “Add New”. Each team member should add themselves, using their own email and their own unique password, etc. For the “Role” (the last field in the new user account setup), be sure to set your role as “Administrator” instead of the default of “Subscriber” so that you can get full edit privileges within WordPress.
  • Login out and then log back in with your new, unique to your User account. Then, begin to explore creating new pages and content. Try out the new ‘block editor’ in WordPress to get familiar with its basic functionality.

AGENDA (WEDNESAY, 4/22) - ZOOM at 9:00 am

View a recording of our 4/22 session here.

  • Instructional Activity - Lucia - Interactive PDFs
  • The Genesis Wordpress framework and child themes
  • Discussion of Team/Client Project next steps
  • Ecommerce Design Sprint - Part 4

Links & Resources

WordPress and the Genesis Framework

> Go to Top

Week 14 (4/27 + 4/29)

AGENDA (Monday, 4/27) - ZOOM at 9:00 am

View a recording of the 4/27 session here.

AGENDA (WEDNESDAY, 4/29) - ZOOM at 9:00 am

View a recording of the 4/29 session here.

TASKS / HOMEWORK

  • Team Project - If you haven't done it yet, created your WP user account as per the instructions in my 4/22 email. Then, begin to explore creating new pages and content. Try out the new ‘block editor’ in WordPress to get familiar with its basic functionality.
  • Team Project - Review Genesis Themes. Determine if there is a starter child theme that your team would like to use (by 4/29).
  • Team Project - Move into production on your team project. Set up pages and the navigation menu. Customize the logo, fonts, colors. Explore customization possibilities within your theme.
  • Design Sprint - Based on your content/UI inventory, using XD, create a wireframe layout (or two) that details the information architecture of a 'product' page (due by 5/4)

Links & Resources

WordPress and the Genesis Framework

Plugins - As recommended by Liz

Introduction to CSS Flexbox (my video tutorials about flexbox)

  1. CSS Flexbox - Part 1 - Introducing display: flex (9:39)
  2. CSS Flexbox - Part 2 - Container properites for direction, wrap, flow (8:23)
  3. CSS Flexbox - Part 3 - Container properties for spacing and alignment (14:17)
  4. CSS Flexbox - Part 4 - Item properties for order, sizing, alignment (22:11)

> Go to Top

Week 15 (5/4 + 5/6)

AGENDA (Monday, 5/4) - ZOOM at 9:00 am

View a recording of the 5/4 session.

AGENDA (WeD, 5/6) - ZOOM at 9:00 am

View a recording of our 5/6 session.

TASKS / HOMEWORK

  • Team Project - Work on production on your team project. Set up pages and the navigation menu. Customize the logo, fonts, colors. Explore customization possibilities within your theme. Add and integrate site content. Create a functional/working prototype and prepare to send client a working demo on 5/13 and/or a functional site by 5/18.
  • Design Sprint - Catch up on any assigned Design Sprint Activities that you missed or fell behind on.

Links & Resources

WordPress and the Genesis Framework

> Go to Top

Week 16 (5/11 + 5/13)

AGENDA (Monday, 5/11) - ZOOM at 9:00 am

See Canvas for a link to Zoom session.

AGENDA (WED, 5/13) - ZOOM at 9:00 am

See Canvas for a link to Zoom session.

TASKS / HOMEWORK

Links & Resources

WordPress and the Genesis Framework

> Go to Top

Finals Week (5/18 + 5/20)

AGENDA (Monday, 5/18) - ZOOM at 9:00 am

See Canvas for a link to Zoom session.

AGENDA (WED, 5/20) - ZOOM at 9:00 am

See Canvas for a link to Zoom session.

  • Class Wrap Up
  • Review Final Design Sprint / E-commerce App Prototypes

TASKS / HOMEWORK

The final day to update your sketchblog and turn in any work for grading consideration is FRiday, 5/22. i cannot accept any late work beyond this date.

> Go to Top