Design Fundamentals for the Web – Session 6

March 3, 2015

Review

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

Fire up you FTP client
Create a new web page using the template page you've been working on (e.g. index.html)
In addition to the <!doctype html>, <html></html>, <head></head>, <title></title> and <body></body> elements, let's create a wrapper <div></div> holding some additional layout elements, including a <header></header> and another <div></div> to hold our content elements: <nav></nav>, an <article></article>, an <aside></aside>, and a <footer></footer>

Let's open up CSSDeck and experiment with the CSS centering porperties:

Let's open up CSSDeck and experiment with the CSS positioning porperties:

Let's open up CSSDeck and experiment with the CSS positioning porperties:

Fire up your FTP client
Open up the page you created in earlier with the HTML layout elements included
Create a new stylesheet and link it into your HTML page
Using id and tag name selectors, let's apply some style rules to our layout elements
- Use an id selector to center your wrapper <div>
- Use a tag selector to center the headline in your <header>
- Use tag selectors to float your <nav>, <article> & <aside> elements
- Use a tag selector to style your <footer> and clear your floats

Check out Liquidapsive.com to get a better idea of some of the different types of layouts your can make, depending on your users' needs.

Chapters 5 & 7 in Design for Hackers
Create a slide in your Design Notebook and name it Layouts and today's date. Based on your reading, and our discussion in class, define "visual hierarchy" and how layouts help us achieve them.
Surf the web for a while, looking for different types of layouts. Can you indentify any typical patterns of how layouts are used (e.g. list layouts for home pages, article layouts for article/product pages, etc). Include a link out two in your Design Notebook entry for this week.

Share your Design Document and email the link to me at thomesoni@gmail.com. Here's more info on sharing Google Drive documents.

After you have completed the reading assignment, revisit your HTML pages and create a static layout using CSS Positioning.

Create a wrapper <div> to hold the content of your page and center it horizontally.
Create a <header>, a <nav>, an <article> and an <aside>, and finally, a <footer> container at the end of the page.
Recreate your pages from your sitemap using this as your new template & put your page links in the <nav> container.
Re-apply your type treatment appropriately for these new page elements.
Be sure to email me a link to your layout html page (you can use the one you created in class).