WEB 200: Week 06
Week 6: Feb 6 (no TH class)
Lecture: Wireframes (cont’d) and Design Principles (ppt from DropBox)
Reading: Readability and web typography, Smashing Magazine
Due Thursday: feedback (see below, no class)
Due Sunday: revised wireframes (now professionally produced)
Next Week: online assignment for the 13th will be available in Slack on the 12th / class on the 15th
Last week’s class video is accessible via Canvas > Announcements.
- Student staging links
- Look at everyone’s wireframes — send me an email (kegill / gmail) with a comment about each of them. I’ll put them together (anonymous) and send the feedback. We’ll work on this for a short time, but the email is due to me by 8:15 pm on Thursday.
- General comments > grids (missing), very wide and narrow images (but not hero)
- As you refine these for Sunday, consider trying a tool like Balsamiq or Invision (both have free accounts, are SaaS, and are used in industry)
Design principles lecture
In-class assignment – hand in at end of class
- Everyone look at this layout – now draw the grid that supports this design (pull into Photoshop/Illustrator or do it by hand if we can figure out how to print)
- Take your home page and your top-level section pages … draw your grid lines on top of the design. Send to me (scan or take a clear photo).
- What is your unique selling point – the ONE thing that makes you stand out? How does your home page design communicate this?
- 960 grid
- Flexible 960 grid (CSS)
- Grid layout generator for CSS
- Grid resources/tools
- Six-column grid for mobile (example, it’s a Sketch template)
Mobile wireframes (due Sunday): pick a mobile device and wireframe goes inside this container