I. Know your audience: Who is coming to your site and why?

II. Outline site goals, content, functionality, look and feel: What are your site objectives? Detail the types of content, tools and site sensibility. Map out the site sections.

III. Establish logical information architecture: How is information organized, categorized? What is most important, less important? Clarity and consistency are key, followed by creativity.

IV. Understand visual logic: Use principles of visual logic to establish hierarchy and communicate relative importance of content

V. Create clear, intuitive navigation: Will users move easily through the site? Is content navigable topically? chronologically?

VI. Use clean, scannable, responsive layouts: How are the elements arranged most logically and effectively on the page? Design for multiple platforms.

VII. Avoid clutter, aim for simplicity, use white space:Avoid unnecessary design elements. The white space between graphics, fonts, etc is as important as the elements themselves.

VIII. Use appropriate font types and styles: What do your font types, sizes, colors communicate to the users about your organizational ethos and purposes? Is your content readable? Is the emphasis accurate?

IX. Use a site color palette to increase clarity and coherence: Use color systematically to make certain text or graphical items stand out.

X. Concentrate on consistency and usability: How do your design choices sync with user behavior online? Are you designing for users or for your peers?

I. Know Your Audience

* Identify the ages, interests, background and expectations of your potential visitors. This will impact the graphics you create, the colors, fonts, tone and visual metaphors for your site.

* Successful sites are those that blend design with functionality: sites that begin by defining an audience during the initial design stage and then continue to keep the audience in mind throughout the development process.

II. Outline Site Goals, Content, Functionality, Look and Feel

Creating a Site Map or Navigational Flowchart

*Map out your site, indicating hierarchy — primary, secondary, tertiary content — and how users will navigate from one page to the next.

*Two typical programs used to design site maps are Omnigraffle and Microsoft Visio

* Draft a design brief in which you specify the general look and feel of the site: fonts, color palette.

III. Establish a Clear Information Architecture

As in every medium, structure and organization are the starting points for an online site, whether it is a daily news site, special project or documentary. The key is to use the structure of the site to guide users, tell them what is most important and how things are related.

Clearly identify and define the different types of content on your site. Prioritize and group this content in a logical fashion. In the example of WordPress, think about the topical content categories vs. static background information found on pages vs. key word tagged content.

“Don’t Make Me Think”

IV. Principles of Design

“Through placement and grouping and hierarchy, good design frees up mental space so users can think about content, and not where they’re supposed to be looking and how to interpret what they’re seeing.” — ProPublica Principles of Design

Why do we look at things the way we do? The answer is a combination of nature and training. When presented with a range of visual stimuli, the eye tends to look at certain things before others. A rule of thumb:

Big to small: We see big things first, small things second.
Top to bottom: We start at the top and go to the bottom, assigning characteristics to content in both locations.
Left to right: Many of us have learned to read from left to right, this carries over into web scanning.
Dark to light: We look at darker items first and lighter items second because the former are easier to see.Designers must use these principles of visual logic to establish hierarchy and communicate relative importance of content to users. Source: Web Journalism, James Stovall

Contrasting color, size and typography can enhance a design and draw attention to an area of the page by creating emphasis.

While We Were Young

L’Antiheros

Repetition and consistency of your design elements help users navigate your site.

The Nature Conservancy

Alignment

War Ink

V. Create Clear, Consistent Navigation

Online news content can be organized in a myriad of ways, simultaneously, by topic, chronology, geography, popularity, audience and content type. There can be any number of levels of navigation — primary, secondary, tertiary — and functional options – pulldowns, breadcrumbing, tabs, carousels, pulldown menus, accordions, search, pages, thumbnails, graphics, maps.

Linear vs. interactive experience

The print version of the NYT front page is primarily content, offering five section blurbs at the bottom. Online news is much more exploratory and interactive in nature. With over 100 choices on the home page of the nytimes.com, an individual user’s behavior will be unique and subjective.

NYT online lists 17 primary sections, with 26 subsections, and over 100 stories.

Principles of navigation:

Logos and navigation should be in the same place and have the same functionality from one section of the site to the next. Make sure users can always get where they want by adding additional navigation such bread-crumbing and “back to the top” on long pages.

*Navigation reflects information hierarchy
*Global navigation is found on every page of your site
*Logo or header should always be linked to the home page
*Traditionally, footer text navigation duplicate the global navigation
*Top and left-hand navigation are most typical, following most people’s tendency to read top to bottom, left to right
*Other types of navigation include carousels, tabs, fat footers, breadcrumbing
*A site map or site index is often included in larger sites. It lists all content in a traditional outline format, providing an easy way to find content and also aids in search engine recognition.

Examples of types of navigation:

1) Global: These are the primary level links found on every page. In the case of newspapers, these are often text links to the main sections.

Some sites using horizontal navigation use a tab-like sublevel nav as well.

2) Secondary: These are links to second-level or sub-sections. They can also be supporting information such as “Contact Us”, “About Us”.

3) Site logo: Linking the site logo to the home page is standard practice.

4) Breadcrumbing:

The Guardian (UK)

The Guardian newspaper has a very colorful treatment of breadcrumbs.

5) Carousels:

The Daily Beast

Frontline

Frontline uses a slightly different format for its carousel: a horizontal slide navigation.

The Wall Street Journal

The Wall Street Journal uses a top carousel for the day’s stories.

A video slider

6) Tabs

The New York Times

The Wall Street Journal

The Wall Street Journal uses tabs to navigate types of content within a story.

VI. Use Clean, Scannable, Responsive Layouts

960 Grid

One way to group items and use white space appropriately is to start with a grid. A grid-based layout, with appropriate gutter sizes, allows for plenty of room between sections, and in many cases it forces the designer to implement principles of proximity without even thinking about it.

12 Column Grid demo This site shows you the different ways you can break down content using the grid.

Resources: The Grid: The Structure of Design, Designing With Grid-Based Approach

How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds

Most news web sites use a grid layout. One reason for this is the vast amount of content being presented and the need to organize it by topic, media type.

Create balance

Elements should seem balanced and well-proportioned on the page. This does not mean they need to be symmetrical, but neither side should feel heavier or weighed down by elements than the other.

When a design can be centered or evenly divided both vertically and horizontally it has the most complete symmetry possible. Symmetrical balance generally lends itself to more formal, orderly layouts. They often convey a sense of tranquility or familiarity or elegance or serious contemplation.

Asymmetrical layouts are generally more dynamic and by intentionally ignoring balance the designer can create tension, express movement, or convey a mood such as anger, excitement, joy, or casual amusement.

Magazine and television sites: While still using a grid, many online magazines or television sites are visually distinct, varying the traditional newspaper layout.

Online Magazines with Interesting Design

Wired
WSJ Magazine
Vanity Fair
T Magazine
Interview Magazine

Responsive Design

One aspect of the user experience which is out of the web designer’s hands is the platform being used to view the site. Aim to create a design that will adapt across platforms. This may mean changing navigation and functionality entirely for different screens.

You can test the “responsiveness” of designs on Firefox by using Tools > Developer > Responsive Design View

VII. Avoid Clutter, Aim for Simplicity, Use White Space

Avoid unnecessary design elements. The white space between graphics, fonts, etc. is as important as the elements themselves.

This may not mean literally “white” but rather empty space, places on the page with minimal activity. By leaving breathing room, you allow site visitors to focus on the main content without appearing cluttered or amateur.

This study found that by adding white space through making text more concise, adding bulleted items subheadlines and tighter writing increased the reader’s comprehension and enjoyment of online articles.

Resource:
Whitespace: The Underutilized Design Element
Nielsen Eyetrack Study

VIII. Use Appropriate Font Types and Styles

Fonts Convey Character
Use fonts judiciously and consistently throughout the site. Fonts do more than spell out your copy — they are strong design elements that communicate a site ethos to users.

Samples of sans serif typefaces
Samples of serif typefaces
Samples of monospaced typefaces

Think of your typography as a hierarchy
When you’re assigning your fonts, sizes, and colors to your text, the more hierarchical you are the more effective your pages will be. By using a hierarchy of typography, you make it easier for your readers to find exactly what they are looking for on the page.

- Try to use no more than three different types per site. Instead vary weight, size, caps, etc.
- Pick one font type and style for each element of your site: headlines, subheads, captions, body text.
- Don’t randomly change text types or line spacing.
- Serif fonts for headlines and sans-serif for body text can provide good contrast between the two.
- Avoid Papyrus and other whimsical fonts unless you are writing something about Egyptians.
- Italics are hard to read online and ALL CAPS scream out your message.
- Use bold or blockquote to emphasize.
- Sans serif fonts can be easier to read online (for example Arial)
- Be aware that readers can easily change the font size with their browsers.

Typography conveys tone, mood and emotion
This chart illustrates some of the visual cues fonts can convey to readers. If you choose to go with a more stylized font, choose one that is in sync with your content and the tone of your story.

Purple Comic Sans

Legibility is Critical
You site may be colorful, but if visitors can’t read your copy, or if it strains their eyes, it is working against you. Black (or dark) text on a light background is the easiest to read. White text on black background “vibrates” and can strain the eyes.

When compared to reading light text on a dark background, people read black text on a white background up to 32 percent faster. In general, the greater the contrast between the text and background, the easier the text is to read.

– www.usability.gov

Another example of illegible text:

Typetester.org

You can use this tool to compare fonts side by side.

Periodic Table of Fonts

Sites with creative usage of fonts:

New Yorker

Quipsologies

Words Are Pictures

IX. Use a Color Palette to Increase Clarity, Consistency and Coherence

Use color systematically to make certain text or graphical items stand out and to help users navigate your site. Adding color backgrounds to different site sections, for example, can help identify them as a group. Color contrast with text is critical for readability. But certain color combinations make reading difficult.

AIGA: Celebrate Design

Killing Kennedy

All images must be in RGB color mode, with all graphics, backgrounds and text created using hexadecimal values: the name given to a color’s web equivalent comprised of a combination of six letters and numbers consisting of A-F and 0-9.

The foreground and background colors should be contrasting
A light background color (preferably white, very light shade of gray or pale yellow) is ideal when the text is in a dark color (black). This creates a good contrast and is easy on the eyes; especially true if the web site has lots of textual content.

Harmonizing colors
The colors of the different sections of the site should harmonize. If not, it creates a very blocky effect and can be a major eyesore. When working with colors you need to create a balance – make the web page a single identity rather than segregating it (visually) with different colors.

Understanding color theory will help you to understand how color works on Web pages. And one of the first places to start learning color theory is with the color wheel. Sir Isaac Newton first put together a circular diagram of colors in 1666. This color wheel allows you to see groupings of colors that are harmonious together and other colors that might clash.

Primary Colors
The primary colors are RED, YELLOW, and BLUE. These colors, in traditional color theory, cannot be formed by mixing any other color. All other colors are derived by combinations of these colors. They are represented in HTML as:

Red: #ff0000 or #f00 in CSS
Yellow: #ffff00 or #ff0 in CSS
Blue: #0000ff or #00f in CSS

Secondary Colors

Secondary colors are ORANGE, GREEN, and , PURPLE. These colors are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple). They are represented in HTML as:

Orange: #ff9900 or #f90 in CSS
Green: #00ff00 or #0f0 in CSS
Purple: #ff00ff or #f0f in CSS

Tertiary Colors

Tertiary colors are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colors. They are represented in HTML as:

Yellow-Orange: #ffcc00 or #fc0 in CSS
Red-Orange: #ff6600 or #f60 in CSS
Red-Purple: #cc00cc or #c0c in CSS
Blue-Purple: #9900ff or #90f in CSS
Blue-Green: #00cccc or #0cc in CSS
Yellow-Green: #ccff00 or #cf0 in CSS

Monochromatic colors
Using colors of the same hue. They may have different tints or shades depending upon how much white or black is added. Monochromatic color schemes are often the easiest on the eyes of all the color schemes. The gentle changes in tint and shade make the colors flow into one another better. Use this color scheme to make your site appear more fluid and collected.

Analogous Colors
These are the colors that sit next to each other on the color wheel. For example: green, yellow-green, and yellow; or red, red-orange, and orange. Play with the hues and saturation of analogous colors to create a harmonious color scheme.

Complementary Colors

Complementary colors are those colors that are opposite one another on the color wheel. By using colors that are opposite one another, you create color schemes that have high contrast and so are brighter and more vivid. Some contrasting colors are: red and green or blue and orange. Photoshop makes it easy to get the complementary color – simply select the area of color that you want the complement of and hit Ctrl-I. Complementary color schemes are often a lot more striking than other color schemes, so use them with care. They are most often used on pieces that need to stand out.

Source: About.com, Web Design Basics

Color scheme designer

Adobe Kuler

X. Be Consistent With Look and Feel

Using a wide range of different graphical elements — images, illustrations, symbols, logos, graphs, icons — can liven up a site and add visual variety. However, it is important that all of these elements have the same look and feel.

Eat: The Story of Food
“Whether for meat or sugar, junk food or beer, humanity’s appetite has altered the planet, shaped our history and even altered our future. This six-part series is the epic story behind food and how it made us ‘us.’” – National Geographic

Congruity: Consistency in design

Congruity is having consistency in the relationship of the parts of a design: consistency in the placement of content and in the alignment of the content.

Repetition: Repeating similar decorative units

What if Stop signs came in pink squares, yellow circles, or green triangles, depending on the changing whims of a town and a few of its residents? Imagine the ensuing traffic jams and accidents. Repeating design elements and consistent use of type and graphics styles within a document shows a reader where to go and helps them navigate your designs and layouts safely.

S.F. Quake Quiz

Designers should abide by a general principle: design should offer the readers consistency; content should offer variety. That is, it should be the content — packaged in a consistent design — that gives the site its flavor and uniqueness.

Source: Web Journalism, James Stovall

To summarize:

Unity is the coherence and completeness of a design. Check your design using this list of questions.

* Is your design balanced either symmetrically or asymmetrically?
* Does it contain some repose to give breathing space in the page?
* Is related content consistently placed together?
* Are text and graphics consistent in their alignment with each other?
* Where applied, is your contrast strong enough to create intended emphasis?
* Have you employed repetitive use of colors, fonts, spaces to create continuity?

Inspiration

It can be helpful to collect web site bookmarks of sites that are similar to the type you want to create or that you think are original or creative in their design.

Two places to look for examples of good design:

Commarts Webpicks
Webby awards

Design Resources:

Mobile Patterns
Smashing Magazine: Newspaper Website Design: Trends And Examples
Visual Voice
Color Chart
Gallery of graphic design
Top 10 Resources for Design Inspiration
Interaction Design
Creative Navigation Menus
The Motive Web Design Glossary
Designing With Grid-Based Approach
Beginners Guide to Using the Power of Color in Web Design
Jakob Nielsen Top 10 Mistakes in Web Design
Understanding Visual Hierarchy in Web Design
9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension
Firefox add-ons
OJR: Eyetracking points the way to effective news article design
Journalist’s Toolbox
Tools for News

35 Amazing “Single Letter Logos” – Power of One!

Logo of the Day

20 famous corporate logos that hide secret messages

CUNY examples:

Steps:

1) Choosing the right typeface:
No more than two fonts, no “fun” fonts, for scripts, use your own calligraphy.

type only logos

2) Exploring type variables:
Play with font case, weight, style, spacing, differentiating with color, black/white version

3) Changing one thing
Add a graphical element, change font color, rearrange position of words, change style of some letters

4) Play with type treatments: outline,transparency, warped text, initials

Transparency

Logos with outlines

Circular logos

Text along a path

5) Incorporate clip art, brushes, symbols

6) Use negative space

7) Experiment with lines

Logos that use lines

Banner Design

Step by step tutorial:

Box:

Resources:

Vital Tips For Effective Logo Design

Top 10 Logo Design Inspiration Galleries

Seek Logo

60+ Beautiful Logo Design Tutorials And Resources

Working with layers is analogous to placing portions of a drawing on clear sheets or film, such as those viewed by an overhead projector. Sheets can be edited or rearranged without affecting the others.

1) Click on the following two zip files and open the PSD files in photoshop

Dropbox: beach and layers

2) If the layers panel is not showing, open it as follows Windows > Layers

3) The layers panel lists all the layers in an image, with layer names and thumbnails. You can use the layers panel to hide, view, reposition, delete, rename or merge layers.

You should see all five layers for the working file. Select the background layer to make it active. The lock indicates that the layer is protected. The eye indicates that it is visible.

3) Double click on Beach.psd. This consists of only one layer — it does not have a white or colored background. Click on the layer 1 and rename it Beach.

4) Click the arrange document button in the application bar so that the two psd files are side by side.

5) Select the move tool and drag the beach image on to the working file. The beach layer now appears directly above the background layer. Close beach.psd without saving changes.

Viewing individual layers

Now the working file has six layers, some visible, some hidden. Click the eye icon next to the pineapple layer to hide the image. You can hide or show a layer by clicking on the icon or in the Show/Hide column. Click again to show it.

Adding a border to a layer

1) Select the Beach layer by clicking on it. To hide the other layers, press Alt (windows) or Option (Mac) as you click the eye icon next to the Beach layer.

2) Choose Layer > Layer Style > Stroke. The layer dialog box opens. Specify the settings: size 5px, position inside, blend mode normal, opacity 100% and color white. Click OK.

Rearranging layers

The order of layers is called stacking order. You can change the order to make certain parts of the image appear in front or behind other layers.

1) Make the remaining layers visible by clicking on the Show/Hide visibility column. Select the beach layer and drag it up between the pineapple and flower layer.

Changing the opacity of a layer

You can reduce the opacity of a layer to let others show through.

1) Select the postage layer and click on the arrow next to opacity. Drag the slider to 25%. Save.

Duplicating a layer and changing the blending mode

Blending modes impact the way that images in one layer blend with layers underneath. First you will increase the intensity of the pineapple and then change the blending mode on the postage layer.

1) Hide all layers except for the pineapple. Right-click or control-click on the pineapple layer, select duplicate layer. A pineapple copy layer appears above the pineapple. Select it and then choose “overlay” in the blending mode pulldown.

2) Select the postage layer and choose multiply from the blending modes menu, making it a little stronger. Save.

Resizing and rotating layers

1) Make the beach layer visible.

2) Choose Edit > Free Transform.

3) Resize the image 50%, holding down the shift key.

4) Drag one corner 15 degrees.

5) Click the “commit transform” in the options bar.

6) Make the flower visible and drag the beach photo so that its corner is tucked beneath.

Using a filter to create artwork

1) Select background layer, followed by clicking on the New Layer button. Name it clouds.

2) In the Tools panel, click on the foreground color and select a sky blue color. R 48, G 138, B 174

3) Select Filter > Render > Clouds.

Adding text

1) Make the Hawaii layer visible. Choose Select > Deselect layers so that no layers are selected.

2) Click on foreground color swatch and select a grassy green color. In the tools panel, select the horizontal type tool. Then choose Window>Character.

4) Choose the following: Birch Std, regular font style, 36 points font size, crisp from anti-aliasing menu, 250 tracking value, all caps and faux bold.

5) Click right below Hawaii and type Island Paradise. Click the commit edits button. Position the text using the move tool.

Applying a gradient to a layer

1) Select the Hawaii layer. Right click or control click the thumbnail in the Hawaii layer and chose select pixels.

2) In the tools panel, select the gradient tool (under the paint can). Select a bright orange color for the foreground. In the options bar, make sure the linear gradient is selected. In the options bar, click the arrow next to the gradient editor to open up the gradient picker and chose the foreground to background swatch.

3) Drag the gradient tool from the bottom of the Hawaii text to the top (hold down Shift for a straight line.) Choose Select > Deselect. Save.

Applying a layer style

You can enhance a layer by adding a shadow, stroke, or satin sheen. You can always hide a layer style by clicking on the eye icon. You can also edit the style or delete it without impacting the original layer.

1) Select the Island Paradise layer. Choose Layer> Layer style> Drop Shadow.

2) In the layer style dialog box, Blend Mode multiply, Opacity 75%, Angle 78 degrees, distance 5px, spread 30%, size 10px.

3) Press Alt (Windows) or Option (Mac) and drag the effects line down to the Hawaii layer.

4) Select the Hawaii layer, click the fx button to add a layer style. Choose stroke from the menu. Settings should read: size 4px, position outside, blend mode normal, opacity 100%, color green. Click OK.

5) Select the flower layer. Choose Layer > Layer Style > Drop Shadow. Setting should read: Opacity 60%, Distance 13px, Spread 9%, Blend mode multiply. Now, select the Satin effect on the left. Select “invert” on the Contour box. Settings: color fuchsia, opacity 20%, distance 22px.

Before:

After: