Wrap-up: Foundations of Web Design (Mentorship Series)

Following is a summary of topics discussed during January 2009’s Dreamweaver Meetup Mentorship series

Print vs. Web

We had a lively discussion on print vs. web design. Many examples of differences were tossed out, including typographical quality (150+ ppi vs. 72/96 ppi), fixed layouts & typefaces, interactivity, etc. The key to remember for web designers with a print background is that instead of controlling the design, you must allow the user to control the design. Therefore, designs must be created with a level of flexibility in mind.

Web Standards

We discussed how, by leveraging Web Standards, you gain in efficiency and flexibility. The power is unlimited. One example discussed was the ability to redesign an entire site by just recoding the CSS file, and never touching the content or HTML. The example discussed and displayed was the CSS Zen Garden.

One question that came up was an explanation on semantic HTML. Paraphrasing Wikipedia, “Semantic HTML refers to markup following intention, rather than specifying layout details directly. For example, the use of <em> denoting “emphasis” rather than <i>, which specifies italics. Layout details are left up to the browser, in combination with Cascading Style Sheets. Ideally, semantics would define content to the level of elements, like prices, but this is not available today. Unofficially, there is a movement, leveraging Microformats, that represents an unofficial attempt to extend HTML syntax to create machine-readable semantic markup about objects such as retail stores and items for sale.”

  • Check out Jeffrey Zeldman’s website at www.zeldman.com. You might also check out his A List Apart website, which features articles on the best of web site development.

Information Architecture

The last topic, briefly covered, was Information Architecture. The takeaway from this discussion was that after content, Information Architecture drives the structure and navigation of the site. Information Architecture is an important part of the web design work flow, which will be discussed more during February’s Dreamweaver Meetup.

Miscellaneous

We had a lot of people ask about the best way to learn how to do web design, HTML, CSS, Dreamweaver, etc. Here’s some of the best resources. Share via the comments if you know of others.

HTML

Cascading Style Sheets

  • W3Schools: Learn how to code CSS. Allows you to follow along, typing and seeing the results.
  • CSS Training Courses: Subscription-based online tutorials from Lynda.com. Free previews.
  • CSS Zen Garden: This demonstration site illustrates the power that CSS can have; by redesigning different external CSS files, you can completely redesign a website, with drastically differently look & feel.

Other Miscellaneous

Next month, we look at the web design workflow, from start to finish. Look for that posting soon.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s