This document includes links to a select set of resources related to the topics of the November 13, 2010 Brown Bag seminar, “Tips for Effective Web Design: How to Avoid A Big Hot Mess,” presented at the Center for History and New Media. An swf slideshow [18MB] of the seminar is also available here.
— Chris A. Raymond, PhD, Senior Web Designer/Creative Lead, CHNM
1.0 /// Wireframing
- The Importance of Wireframes and 9 Tools to Create Them
- UX 101: The Wireframe
- A checklist for helping clients evaluate your wireframes effectively
- 35 excellent wireframing resources
2.0 /// Mood Boards
- How moodboards can save time, money and your sanity!
- Website Mood Boards: A Successful Precursor to Visual Prototyping
- Why Mood Boards Matter
3.0 /// Typography
3.1 On your way to excellent typography
- A guide to typography for people who are not professional typographers.
- Typographic hierarchy explained and illustrated.
- Web design is 95% typography, this article argues.
- Typographic hierarchy: size (via the Wayback Archive)
- Behind the scenes of exquisite web typography, one of a series of articles at Inspiration Bit that focus on font stacks in use on the web
- An analysis of typography on the web, with links and examples
- 6 ways to improve your web typography
- Typosetter
An online tool that will generate css for your typography and use asymmetrical margins to keep a vertical rhythm.
- Better css font stacks.
Learn how to build a stack of web-safe fonts that are similar in character and cover the bases of Mac, PC, and Unix installed fonts.
Download a css typography file with several possible font stacks.
- A fun, illustrated article on how to mix fonts.
- Another illustrated article on how to combine typefaces by looking at their personalities, physical characteristics, and context, among other factors.
Download a starter css typography file for a 20px baseline grid.
3.2 General notes on web typography
Deprecated elements and attributes to avoid:
- applet
- embed
- i, u, b
- center
Some general guidelines for correctly applying html tags to content:
Do not nest a paragraph tag inside any h tag; this will cause the page not to validate and may cause browser display problems
Do not nest a blockquote tag inside a p tag; this will cause the page not to validate and may cause browser display problems. You can, however, nest a p tag inside a blockquote.
Similarly, do not use blockquote to indent text; indents are achieved through the style sheet. (“The misuse of markup to achieve a formatting effect can give undesirable results. For example, <blockquote> is often displayed indented in graphical browsers. However, in speech browsers it may be spoken in a different voice. This means that a formatting effect in visual media is creating unwanted side effects in non-visual media. There is also no guarantee that every visual browser will display block quotations indented. By using stylesheets, the text could still be displayed indented in visual media, while being presented as a normal paragraph in non-visual media.” Excerpted from Durham University’s web style guide.)
Do not use <center> to center a line of text. This is a deprecated tag. Centering is achieved through the style sheet.
Use <strong> </strong> for bolded type
Use <em> </em> for italic type
Be sure to close your tags! Even the break tag must be closed to be valid xhtml:
<br /> NOT <br> <img src="name.jpg" /> NOT <img src="name.jpg">
3.3 Special characters and text editors
All special characters should be marked up using the correct named entity or Unicode equivalent for the page to display correctly across browsers and to validate. In particular, use the following codes for common special characters:
| Name | Symbol | Code |
|---|---|---|
| Ampersand | & | & |
| Apostrophe | ’ | ’ OR ’ |
| Left Double Quote | “ | “ OR “ |
| Right Double Quote | ” | ” OR &rdsquo; |
| Less Than | < | ‹ OR < |
| Greater Than | > | › OR > |
| en-dash | - | – OR – |
| em-dash | – | — OR — |
| Ellipsis | … | … OR … |
Take special care when pasting content created in a word processor. DO NOT import or paste text directly from a formatted Word document! Convert the Word-formatted text to plain text FIRST, or copy and paste Word-formatted text into Notepad or another plain-text application before inputting the text into the Omeka/CYH dashboard.
Use en dashes to indicate a range, such as 1900–1910.
Use em dashes to indicate a pause or a parenthetical phrase, such as in the following sentence:
She was copying and pasting Word files into Omeka—but then she realized that was a bad thing to do.
4.0 /// Design Principles
- Visible Narratives: Understanding Visual Organization
- Graphic Design Basics: Hierarchy
This site is an online version of a book and includes interesting exercises to illuminate design principles
- Applying Interior Design Principles to the Web
- Smashing Magazine: 10 Principles of Effective Web Design
- 7 Key Principles That Make a Web Design Look Good
- Using Scale: Real World Examples
- Fully Understanding Contrast in Design [for the web]
- Understanding Visual Hierarchy in Web Design
- Gestalt for Visual Hierarchy in Web Design
- Five easy steps to a simpler blog design
- Grid-based design: overview and examples
- Ultimate guide to grid-based web design: Principles, techniques, examples, and resources
4.1 Website redux
Some real world examples of redesigns using design principles
- Andy Rutledge: Wall Street Journal
- Andy Rutledge: Carmax
- Redesigning Craigslist for usability
- Another take on Craigslist
5.0 /// A Few Web Design Blogs and Other Useful Learning Resources
- A List Apart
- Six Revisions
- Smashing Magazine
- Andy Rutledge’s Design View
- Think Vitamin
- UX Mag
- CSS Tricks
- Viget Labs Advance: User Experience Design
- Viget Labs Inspire: Web Design Standards
- Before & After Magazine
B&A is both a subscription magazine (print and online) and a forum to discuss design principles. They often include articles on web design, logo design, and designing only with type.