Tuesday, February 21, 2012

References for Tuesday, 2/21

Now we'll take your wireframes to the next step – actually doing layout and design, using the content you set down in the wireframe as a guide. Ultimately, I want to see two distinct design variations for your site, and I want to see a homepage design and a second-level page design (since you're making two contrasting designs, this will total 4 pages of design mock-ups: style 1, homepage and second-level page, and style 2, homepage and second-level page).

Before starting on your designs, I want you to make a post on this blog, focusing on the design of one site that you flagged as being in the genre of the site you're making – pick the one that has the most appealing design to you. In the blogpost, list out at least five specific, concrete elements of that design. I'd like you to use those elements as a sort of guide for one of your designs. It's important that you can identify the successful elements of that design – without duplicating the design itself. This is basically an exercise in slowing your eye down, and helping make you more aware of design choices, so that you can be more conscious in your own design choices.

Once you've worked out one design, I want you to start on a design where you're making deliberately different choices, for a different look and feel. Some areas to focus on could be:

Different palette
Different font choices
Different layout of elements
Different images or relationship of images to text



Here are some resources that we'll look into during class:

The 960 Grid System

960 grid examples here

Breaking out of the grid

Palettes

Fonts

Free stock photos

A good guideline for the "above the fold" dimensions of your site would be 960x600 pixels.

No comments: