Webpage Design Basics for Non-Designers

WEBPAGE DESIGN BASICS FOR NON-DESIGNERSMike Wilcox - July 2011Tweets: @clubajaxBlog: clubajax.org

OMG! GARY IS HERE!!!

THE LOGO

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like.

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!!

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company What mood does it invoke?

The LogoThe Logo should be done ﬁrst. It determineswhat the website will look like. If a client asks for a site before the logo is done... run away!! Logo is the face of the company Should convey either what the company does or its message Ideally, you should interview founders to get the personality of the company What mood does it invoke? Professional, whimsical, emotional, corporate, edgy, artistic

ColorColors are meaningful. You’ll need at least aprimary and secondary.Red PROS: ﬁre, power, passion, importance, energy, excitement CONS: rage, emergency, anger, (and death in China, we know)Orange PROS: happiness, joy, sunshine, cheerfulness, childlike exuberance CONS: ignorance, deceitYellow PROS: joy, intelligence, brightness, energy, optimism, happiness CONS: caution, criticism, laziness, jealousyGreen PROS: nature, healing, growth, harmony, safety CONS: money, greed, jealousy, beginnerBlue PROS: peaceful, calming, stability, trust, dependability CONS: depression, coldness, passivenessPurple PROS: royalty, sophistication, wealth, luxury, spirituality, creativity, magic CONS: gloominess, sadnessBlack PROS: power, elegance, sophistication, depth CONS: death, mystery, the unknown, grief, mourning, sorrowWhite PROS: purity, innocence, cleanliness, safety CONS: cold, distant, winter http://sixrevisions.com/web_design/a-look-into-color-theory-in-web-design/

Color - cont’dUse Kuler, or another color-selection app http://www.techiemania.com/5-awesome-free-tools-to-help-you-choose-your-website-color-scheme.html http://kuler.adobe.com/#create/fromacolor

ThumbnailsYou must use a pencil and paper. Ideas forlogos cannot be done directly in Photoshop (Iknow - Ive tried)

Logo Design Tips

Logo Design Tips Needs to read well and purposefully

Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small

Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small Should have a version in back and white

Logo Design Tips Needs to read well and purposefully Needs to hold up to being very small Should have a version in back and white Should have a CMYK version for printing

LOGO EXAMPLES

Logo Examples

Logo Redesign

DESIGN REFERENCES

Website Galleries

Website Galleries This is where those webpage galleries come in handy

Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it!

Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it! A quick way to learn what is the current trend in design

Website Galleries This is where those webpage galleries come in handy

Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it!

Website Galleries This is where those webpage galleries come in handy Whenever you see a good one, bookmark it! A quick way to learn what is the current trend in design

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do.

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/ http://www.yvettesbridalformal.com/

Le’ BadWhile not a necessary step, it’s fun to see somebad designs and what you shouldn’t do. http://www.rhythmband.com/ http://www.disabilityresources.org/ http://art.yale.edu/ http://www.yvettesbridalformal.com/ http://richardwiseman.wordpress.com/2011/01/06/the-worst-websites- ever/

DESIGN BASICS

LayoutThere are many layout variations, but here arethe most common: http://skyje.com/2011/01/web-layouts/

LayoutThere are many layout variations, but here arethe most common: One column http://skyje.com/2011/01/web-layouts/

LayoutThere are many layout variations, but here arethe most common: One column Two column http://skyje.com/2011/01/web-layouts/

LayoutThere are many layout variations, but here arethe most common: One column Two column Three column http://skyje.com/2011/01/web-layouts/

LayoutThere are many layout variations, but here arethe most common: One column Two column Three column Fixed width (centered) http://skyje.com/2011/01/web-layouts/

LayoutThere are many layout variations, but here arethe most common: One column Two column Three column Fixed width (centered) Fluid / Stretchy http://skyje.com/2011/01/web-layouts/

Color Same rules as the logo applies

Color Same rules as the logo applies Don’t use simple, saturated colors. Looks like your kid did it!

Color Same rules as the logo applies Don’t use simple, saturated colors. Looks like your kid did it! Also be careful of overly muted designs. They may

Design Tips

Design Tips Dont be afraid of whitespace

Design Tips Dont be afraid of whitespace Vary sizes and colors, break up monotony

Design Tips Dont be afraid of whitespace Vary sizes and colors, break up monotony Make the eye "dance" on the page from one element to another

TYPOGRAPHY

Serif vs Sans Serif http://www.alistapart.com/articles/on-web-typography/

Serif vs Sans Serif A serif is a structural detail on the elements of the font. http://www.alistapart.com/articles/on-web-typography/

Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal ﬂow, and therefore make a block of text easier to read. http://www.alistapart.com/articles/on-web-typography/

Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal ﬂow, and therefore make a block of text easier to read. Some studies show that a sans serif is easier to read on monitors, possibly because of the lack of resolution. http://www.alistapart.com/articles/on-web-typography/

Serif vs Sans Serif A serif is a structural detail on the elements of the font. The purpose is to give the font and word more of a horizontal ﬂow, and therefore make a block of text easier to read. Some studies show that a sans serif is easier to read on monitors, possibly because of the lack of resolution. A recent study suggested that neither serif nor sans serif matter as much as the familiarity of the http://www.alistapart.com/articles/on-web-typography/

Font Weight http://www.alistapart.com/articles/on-web-typography/

Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. http://www.alistapart.com/articles/on-web-typography/

Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. Bold text is harder to read in copy, but easier to read in headlines. http://www.alistapart.com/articles/on-web-typography/

Font Weight Bolder text is considered “heavier” or “darker” because it allows less white space to show. Bold text is harder to read in copy, but easier to read in headlines. Use different weights to draw attention to different areas of interest. http://www.alistapart.com/articles/on-web-typography/

Headlines http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Headlines Go bold, go heavy http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Headlines Go bold, go heavy Grab attention http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Headlines Go bold, go heavy Grab attention Use fancy, unordinary fonts http://ilovetypography.com/2008/02/28/a-guide-to-web-typography/

Type - Content http://www.alistapart.com/articles/on-web-typography/

Type - Content Must be lighter http://www.alistapart.com/articles/on-web-typography/

Type - Content Must be lighter Avoid “reversed”colors, like white on black http://www.alistapart.com/articles/on-web-typography/

Type - Content Must be lighter Avoid “reversed”colors, like white on black Must be standard font faces http://www.alistapart.com/articles/on-web-typography/

Type - Content Must be lighter Avoid “reversed”colors, like white on black Must be standard font faces Times, Arial and Helvetica are the most common font not because of their design, but because people are used to reading them http://www.alistapart.com/articles/on-web-typography/

Web Fonts List

Web Fonts List It’s more than just Arial and Times now.

Web Fonts List It’s more than just Arial and Times now. HTML5 fonts take a while to load, but helps differentiate the site.

Web Fonts List It’s more than just Arial and Times now. HTML5 fonts take a while to load, but helps differentiate the site. Recommended that a non-expert stick with the standard fonts list.

Webpage Design Basics for Non-Designers

by Mike Wilcox

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 118

Statistics

Webpage Design Basics for Non-Designers Presentation Transcript

http://clubajax.org	117
http://www.slideshare.net	1