grassroots


Web Design Basics

pdf version

Basic Tenets:

Web Standards:

"The World Wide Web Consortium (W3C) , along with other groups and standards bodies, has established technologies for creating and interpreting web-based content. These technologies, which we call “web standards,” are carefully designed to deliver the greatest benefits to the greatest number of web users while ensuring the long-term viability of any document published on the Web...

Though leading browser makers have been involved in the creation of web standards since W3C was formed, for many years compliance was observed in the breach. By releasing browsers that failed to uniformly support standards, manufacturers needlessly fragmented the Web, injuring designers, developers, users, and businesses alike...

Though today’s browsers support standards, tens of thousands of professional designers and developers continue to use outdated methods that yoke structure to presentation, in some cases entirely avoiding semantic structures and misusing (X)HTML as a design tool. Highly paid professionals continue to churn out invalid, inaccessible sites filled with structurally meaningless markup, huge image maps, excessively nested tables, and outdated detection scripts that cause the very usability problems they were originally intended to prevent." - Web Standards Project

Layout, Site Maps, and Wireframes:

There are several principles of design pertinent to the Web. Among them are proximity, alignment, repetition, and contrast. These three principles affect how Web pages are perceived when you're thinking about layout for your content and navigation. Use relatively sized layout sections on your Web pages, so that they expand and contract to fit the browser window. Keep screen resolution in mind. While the majority of computer users have moved away from 640x480 resolution, keep that in mind when you're designing.
Site maps are excellent for planning both the broad scope of the site and the details of where each piece of content, navigation, or interactive functionality will appear. What a map does better than just a listing of what's available, is to show relationships and information about the information. This can be done by color coding (red is critical info, grey is neutral info for example), or drawing lines between/around related pages, or grouping related info (think YAHOO), or many other ways.
A “wireframe” is a simple, text-only skeletal version of your design. It is used as a sort of “booster rocket” to help you escape the leaden weight of our own assumptions.. Something magical happens when you can click on a link. Wireframes do nothing but show what this page will contain and has links to other pages. It can be a starting place for your layout and design.

Further Help and Inspiration:

 

design

html

css