Journalists' Toolkit

Icon

A training site for multimedia and online journalists

Design Resources

By Mindy McAdams Updated 12 Jan 2011

This page is about 2D design in general. It is meant to serve as a short list to get you started in designing for Web and digital media. See also: HTML and CSS Resources.

These resources should be useful if you are starting to learn HTML and CSS, or if you are trying to design some kind of app or interactive graphic, or if you are trying to present data in an appealing format.

Typography

CSS Typography: Examples, illustrated: See the differences among serif, sans-serif, monospace, here at Journalists’ Toolkit. For beginners.

Typefaces | Web Style Guide 3rd Edition: Introduces basic concepts of uses of typography for the Web and using CSS to specify fonts. It is basic and simple. For beginners. See also: Legibility.

Choosing the Right Font: A Practical Guide to Typography on the Web: If you are just getting started with typography for Web sites, this is an excellent resource for you to study and use.

Five Simple Steps to Better Typography, by Mark Boulton. Some of this applies only to print (e.g., ligatures), but there’s much here that is useful for Web design. The idea of measure and an optimum width that is defined by the number of characters that are in the line is really very important for Web sites and readability of text content.

Jeff Croft: Elegant Web Typography: Tells you everything you need to know about Web typography, except the new CSS3 stuff (see below).

The Advancing Future of Web Fonts (2011): What about CSS3? @font-face is the part of CSS3 that is new for Web typography. This article by Jake Rocheleau explains it. It also explains Google Fonts.

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

Web fonts (from Code Style):

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

On Web Typography, by Jason Santa Maria (2009): Advice on choosing and pairing typefaces.

I Love Typography: A delightful blog all about typography.

TypeCulture: Learn everything about typography at this large site.

Color

Color Theory Tutorial by Worqx: If you’ve never studied art or graphic design (or even if you have), there’s a lot of good information here about choosing and combining colors. See in particular Color & Contrast.

Color Theory for Designers, Part 3: Creating Your Own Color Palettes: A summary of the concepts explained in the Worqx tutorial, plus a step-by-step guide to deciding on your own unique palette.

Use Kuler, Photoshop to make a quick palette: An illustrated guide, here at Journalists’ Toolkit. Professional Web sites have a defined palette of colors.

Web Browsers and Screen Resolution

Note that the screen resolution of the iPad is 1024 x 768. Many netbooks have a resolution of 1024 x 600. When a page is viewed in a Web browser, the buttons, toolbars and frame of the browser make the total viewing area SMALLER than the screen resolution of the device.

Mark Horrell’s browser screen resolution checker: See what your Web page will look like in a browser on a smaller or larger computer screen.

Browser Display Statistics, from W3 Schools: Why we design for 1024 x 768. Note the paragraph that says: “W3Schools.com is for people with an interest for web technologies. This fact indicates that the figures below might not be 100% true for the average internet users. The average user might have a lower screen resolution.”

What Width Should I Make my Website? (2010): The neat thing about this blog post is the list of powerhouse Web sites and the width of their page design. Summary: Less than 1,000 pixels wide.

Page Layout

Page Design | Web Style Guide 3rd Edition: Make sure to look at the complete chapter contents in the box on the right side of this page. See also: Page Structure.

Page Design Basics: A brief look at a standard Web page layout (illustrated), here at Journalists’ Toolkit.

What would a perfect Web page look like? One school of thought is to use the Golden Rectangle to devise the pixel measurements for a perfect page. View a Fibonacci diagram or see an explanation of how to do the measurements.

Design Essentials

9 Essential Principles for Good Web Design: Guidelines to use as you decide what goes on the page, what is left out, where each thing should be, and how all things on the page relate to one another.

Using Grids for Layout

Oh Yeeaahh! (Grids Are Good), by Khoi Vinh, former design director at NYTimes.com. Download the PDF (8 MB) of Vinh’s “Grids Are Good” presentation.

Grid-Based Web Design, Simplified: Walks you through the decision process for creating a grid-based page design.

960 Grid System: Provides commonly used dimensions, based on a page width of 960 pixels. There are two variants: 12 and 16 columns. NOT for beginners. See also: 960 Grid System Is Getting Old.

15 Extremely Useful CSS Grid Layout Generators for Web Designers: An illustrated list.

Usability

10 Usability Tips Based on Research Studies: Design that’s pretty but makes the Web site confusing or difficult to navigate is bad design. Good design is design that helps the site’s users do what they want to do and find what they want to find.

To understand Web site usability, the best instruction is in Steve Krug’s short and very readable book Don’t Make Me Think, 2nd edition (2009).