Wireframing Ideas
Need some examples of wireframes? Check out the Wireframing Tumblelog. Jason Santa Maria shares his Grey Box Method of wireframing The future of wireframes update 2010-03-04 All the wireframing-related links you could ever want
Quote of the Day
I prefer drawing to talking. Drawing is faster, and leaves less room for lies.
— Le Corbusier
Continued…The BBC walks through the process of re-designing their website. This is a perfect example of how designing for the web is about creating flexible systems. Expression Engine shares their re-design process. CSS Mastery, Chapter 11, Case study.
Continued…A couple people have asked about how wide they should make their website
The traditional maximum width for a website is 960px You can design for your audience using Google’s browser size tool. This gives average screen sizes for everyone that visits Google (hint: that’s nearly everyone).
Since the web is a scrolling medium, try thinking of wireframing [...]
Continued…display
Trying to figure out the CSS display: property? Check out the QuirksMode page on display:. QuirksMode is a great resource for exploring CSS and browser support.
Site Width
Wondering what the optimal max width for a site is? Common wisdom says 960px or less. By the way, all design for the web (or screen in general) is [...]
Continued…Download the Menus Stub (.zip).
Class Notes
What is Affordance? Why is it important in Interaction design? How can you give your users affordances in your design?
Quote of the Day
Good design is thorough, down to the last detail. Nothing must be arbitrary or left to chance. Care and accuracy in the design process show respect [...]
Continued…CSS Mastery, Chapter 6, Styling Lists and Creating Nav Bars
Extra street cred
What would you use as an icon for the action “clear”? Check out the Wikipedia article on Affordance
Continued…Due: Feb 17.
Class on the 15th will be devoted to lab time.
Project Requirements
Wireframes for:
Site
Headers Main navigation Sidebars Footers
Main page Single Portfolio Item Page Content Page (For about page, etc)
Your wireframes should map out with boxes and labels where all major pieces of information will be on the page.
Here’s an example of a very simple wireframe I put together in Photoshop:
Your [...]
Continued…