Assignment for Monday, Feb 28

Please do the following for Monday:

Review CSS floats and positioning

Floats and positioning are big topics, but it’s likely you’ll need one or both techniques for Project 2. The following articles cover these two topics in different ways and with different amounts of detail; I think those differences will actually help you get a handle on the material faster.

• Handcrafted CSS, Chapter 1. This book is required, but note that you can view Chapter 1 for free with Amazon’s Kindle preview.
• Maxdesign’s Float Tutorial (Especially Tutorials 4 and 8)
• Quirksmode Positioning Demo
• Brainjar on Floats and Positioning – read pages 3 through 5.

Bring in Wireframes for Project 2

By now you should have a fairly clear idea of how you will present the information — whether informational or biographical — in Project 2. The goal of wireframing is to start making decisions about the particular content, layout, and hierarchy of your page(s), without worrying too much about typography or color. Your wireframe can be sketched or drawn in Illustrator or Photoshop, and you can render blocks of text as a few horizontal lines and images as boxes with X’s through them.

You should use the looseness of the format to work out fundamental issues like the sequence, scale, and relationship of your elements. What will your site visitors look at first, and how will they know what they can click on and where they should start reading? Most likely your first few attempts will reveal potential problems in the layout or the hierarchy of the content — give yourself time to go back and try solving the problem in different ways.

I haven’t found very many good articles on wireframing. Instead I’d recommend just browsing this Flickr gallery, Adaptive Path’s sketchboards, Web Design Ledgher’s gallery, and the Wireframes for the Wicked presentation to get an idea of the variety of methods and levels of details that designers use.

Good luck!