Design: Journalists' Toolkit

A training site for multimedia and online journalists

Page Design and Layout

Golden Rectangle: How to use it in Web page and multimedia package design

• A perfect page
• Fibonacci diagram

Designing with Grid-Based Approach

Oh Yeeaahh! (Grids Are Good) -- Khoi Vinh is the design director at NYTimes.com

• Download the PDF (8 MB) of Vinh's "Grids Are Good" presentation

Common Design Elements (planning the page design)

Web browser resolution/sizes:

• Mark Horrell's browser screen resolution checker
• Why we design for 1024 x 768: Browser Display Statistics

Color

Color Theory Tutorial by Worqx

Typography

CSS Typography (examples, illustrated: serif, sans-serif, monospace)

Five Simple Steps to Better Typography

JeffCroft Elegant Web Typography -- Awesome "book" (130-page PowerPoint, saved as a PDF)
Tells you everything you need to know about Web typography

Typetester -- This amazing free tool allows you to compare text font families side by side, on-screen, dynamically

15 Excellent Examples of Web Typography -- Inspiring examples from real Web sites

• The entire blog (I Love Typography) is delightful

Web fonts (from Code Style):

• Most common fonts for Windows
• Most common fonts for Mac

Web fonts (from W3.org): CSS font-family and font styles

• Compare the fonts on a Mac with the fonts on Windows (open the two PNG images side-by-side)

TypeCulture: Learn about typography

Web Design, in General

Design Doing, by Jeremy Keith (Nov. 11, 2007)

Understanding Web Design, by Jeffrey Zeldman (Nov. 20, 2007)

Journalists' Toolkit > Home