Review

Review of the Web Design Process

1. Identify the types of users you need to communicate with
2. Identify what each user type needs to be able to do
3. Organize your content semantically
4. Compose appropriate layouts for your content
5. Create visual hierarchies for your content with type
6. Apply design principles to emphasize relationships between elements
7. Create mood and enhance your visual hierarchies and element relationships using color
8. Breath life into your design with behavioral feedback
9. Test, rinse & repeat!

Basic Design Principles

• Dominance - draws in the user
• Similarity - helps the user figure out how to use your site
• Rhythm - helps move the user through your content
• Texture - helps differentiate your content elements
• Direction - helps focus the users's attention and leads them through your content
• Contrast - helps differentiate your content elements

Controlling Whitespace with CSS Padding & Margins

Whitespace is a key component for establishing dominance of a design element.

Margins

Margins create space on the outside of the HTML element.

• margin: top right bottom left;
• margin-top: xxx px | % | em;
• margin-right: xxx px | % | em;
• margin-bottom: xxx px | % | em;
• margin-left: xxx px | % | em;

Padding

Padding creates space on the inside of the HTML element.

• padding: top right bottom left;
• padding-top: xxx px | % | em;
• padding-right: xxx px | % | em;
• padding-bottom: xxx px | % | em;
• padding-left: xxx px | % | em;

More Info on Margins & Padding

• W3Schools: CSS Margin Properties
• W3Schools: CSS Padding Properties

Exercise

• Go to JSFiddle
• In the HTML pane, create a wrapper <div>, a <nav>, an <article> and an <aside> HTML element
• In the CSS pane, set the widths of each of your elements; the wrapper, the nav, the article & the aside
• Add margins to each of your inner elements (nave, article & aside) to create gutters between them
• What happens to the width?
• Now let's Add a paragraph of text within the <article>
• Where does the text line up?
• Create your own padding for the article element in the CSS pane and see what happens

Styling Lists

Lists are commonly used as navigational elements and are frequently targets for the design principles of similarity, rhythm & direction.

List Direction

Lists can be displayed verically (the default) or horizontally by setting the display CSS property value to inline. For example:

nav li { display:inline;}

Horizontal Menu Demo

JSFiddle

List Styles

• list-style-type: disc | circle | square | etc;
• list-style-position: outside | inside;
• list-style-image: url('your_image_filename') | none;

List Style Menu Demo

JSFiddle

More Info on Styling Lists

• W3Schools: CSS Display Property
• W3Schools: CSS List Style Properties

Styling Links

Links are a critical for effective design because they imply interaction as well as content. Links can be in multiple states, can be internal or external, and can be grouped into categories. All of this information should be presented visually in your design.

Link States

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Text Decoration

It's common practice on the web to underline link text as a means of indicating a link. To toggle between underlined and not underlined, we use the text-decoration CSS property:

• text-decoration: underline | none;

For example: a:link {text-decoration: underline;}

Link Style Demo

JSFiddle

More Info on Styling Links

• W3Schools: CSS Links

Images

Images can be used to create dominance, similarity, texture and contrast. We can use photos as content, icons as design embelishments on text, and anything in between; in the foreground or background.

Here are a number of ways to include images in your pages:

• As a content element using the <img> tag: i.e. <img src="https://drive.google.com/uc?id=0B6Sg_ALpI1HFVnFYMlI0YS1LVXM" alt="robot image">
• As a background style using the background-image CSS property: i.e. #main_header { background-image:url('https://drive.google.com/uc?id=0B6Sg_ALpI1HFVnFYMlI0YS1LVXM'); }
• As a bullet style for a list item: ul.checked li { list-style-image: url('https://drive.google.com/uc?id=0B6Sg_ALpI1HFVDBlVEdsenV3ZHc'); }

Using Google Drive to Host Images

You can host your images on Google Drive and link them into your pages from there using the https://drive.google.com/uc?[your_file_id_here] URL pattern.

Other sources for Images

• openphoto
• photo pin
• shutter stock

Image Demo

JSFiddle

More Info on Images

• W3Schools: Images
• W3Schools: Backgrounds
• W3Schools: CSS list-style-image Property

Vision Document

The Vision Document is where you write down your idea for your project and provide details about what it should do, who it's for and how it should be made. The Vision Document will count toward as your mid-term grade and will be the basis for your final project. It's a living document, in that you can (and probably will) update it over the coming weeks as you work through your final project.

The Vision Document is due next week, Thursday March 6, 2014.

Assignment 6

Reading

• Chapter 6 in Design for Hackers

Design

Write up your Vision Document for your final project

After you have completed the reading assignment, download the Vision Document Template, review it and write your own. You'll need to create some User Personas, User Stories and a site map in support of your Vision Document

The Vision Document is due next week, Thursday March 6, 2014.