Advanced Webpage Design

Webmaster Career Skills

Webpage Careers

• Web designer: Responsible for creating the look and feel of a webpage.

– Average Utah Salary: $81,000

– Most work for small businesses or freelance.

– Only 3% of web designers are unemployed (national unemployment is 8%.

• Webmaster: Responsible for the upkeep of a webpage as well as the organization’s web presence including web marketing and search engine optimization.

– Average Utah Salary: $66,000

General Employee Skills

• Be on time.

• Work quickly and efficiently.

– Deadlines will come!

• Put forth extra effort.

– How will you stand out?

– Ask “What can I do now?”

– If you think you’re done, add more.

• Become an expert in your industry.

– READ!

– Research

– Ask questions

Design

Design Principles

CRAP

• Contrast

• Repetition

• Alignment

• Proximity

BURP

• Balance

• Unity

• Rhythm

• Proportion

Balance/Alignment: an equal distribution of weight: symmetric, asymmetric, radial • Items on the page are lined up with

each other.

• Choose one alignment and use it on the entire page; don’t mix alignments

• Alignment doesn’t mean that everything is aligned along the same edge. It just means that everything has the same alignment.

• Center alignment isn’t always best because the edges have no definition.

• Alignment prevents the visitor’s eyes from wandering.

Unity/Contrast: how the elements of a page seem to fit or belong together • Purpose is to draw your eye into

a page and pull you in.

• Contrasting elements guide your eyes around the page, create a hierarchy of information, and enable you to skim through the information to find what you need.

• If two elements, such as type, rules, graphics, color, texture, etc., are not the same, make them very different– don’t make them almost the same.

• Create a focal point to be the dominating force. – If everything has the same priority,

then nothing has priority. Something should be the most important.

Repetition/Rhythm: a pattern that is created by repeating or varying elements

• Each page in the web site should look like it belongs to the same web site, the same company, the same concept.

• A consistent navigation system helps visitors use the site because they don’t have to learn their way around each page.

• Each page doesn’t have to look the same, just similar.

Proportion/Proximity: the relation of one part to another or to the whole

• Group items together that belong together.

• Format different sections in order of importance.

– Size

– Color

Layout

• Be consistent!

– Keep color scheme the same throughout.

– Keep navigation in the same place.

• Use of tables for now

– Use of CSS & Div tags

– Tables should only be used for information that looks good in tables (lists, charts).

• Framesets: when a stationary part of a webpage stays put while you scroll through another part.

Background

• Choose a solid color OR a textured pattern to add dimension.

STOP USING AN IMAGE THAT USERS CANNOT SEE THE WHOLE IMAGE OR THAT IS TOO SMALL SO IT BEGINS TO TILE!

– Don’t be afraid of a solid color. You can add interest other ways.

– If your user cannot see the entire image, then add it somewhere else.

– Avoid using black as a background, unless it is appropriate for the theme.

– If you are going to use texture or a picture as a background, it should be very light and not distract from the contents on the web page.

Background Examples

COLORS!

• Use pleasing color combinations.

– Use throughout the whole site.

– https://kuler.adobe.com/

• Psychology of colors:

Adding Text to Webpages

• Use italics ONLY in certain situations. It may be hard to read.

• Don’t type in ALL CAPS (shouting)--even headlines. There are other ways to make the text stand out.

• Avoid having text that is italicized, grey, or blinking.

• Reading flows from top to bottom, left to right.

• Does the site entice people to buy the product/service?

• Within 5 seconds, the reader should know the topic of the page.

Other tips

• PROOFREAD!

– For spelling, grammar, punctuation, typos.

– Make sure links work, pictures appear, emails are correct.

• Avoid blinking text and constant animated gifs.

• Don’t use “Click Here.”

• Don’t use under construction signs!

• Sounds, scrolling java, animations can get annoying.

• Graphics must have a purpose, don’t use them just because they are “cool” or look “cool.”

More miscellaneous tips

• View your page on different machines and different browsers.

• Make sure the style of the web page fits the subject matter.

• Don’t trick your user with objects that look like buttons but aren’t.

Not-So-Good Design & So-Much-Better Design Checklists

Quiz

1. What does BURP stand for?

2. Which principle prevents the user’s eyes from wandering?

3. Which design principle draws your eye in with a focal point?

4. Why would having a blue background be a bad idea?

5. T/F: Layout & navigation should be consistent throughout all pages of the site.

6. What do you do if your background image is tiled?

7. What are a few common mistakes with text?

Sites to Critique

• http://www.mrbottles.com/

– What are they selling?

• http://www.lingscars.com/

– Just because you can blink, blink, doesn’t mean you should!

• http://www.iccm-1.org/

– Voted the most intense website intro ever!

Sites to Critique www.airforce.com

• Excellent use of flash.

• Excellent choice of color

• Encourages enlistment.

• Very informative

www.pillsbury.com

• Wonderful Use of Color and Pictures—Makes me Hungry!

• Easy to Get to Information/Recipes

• Excellent Use of Navigational

http://www.badgerprints.com/

• Use of Flash

• Examples of products

• Clever Named Anchor (Beam me up)

• Obviously created by designers

Design Critique

• 2 good, 1 bad

• http://www.webpagesthatsuck.com/

• PDP

Sources

• The Non-Designer’s Web Book, 3rd edition by Robin Williams & John Tollett

• Good Web Design PowerPoint, Nebo School District teachers

• http://adsensejointventure.com/wp-content/uploads/2012/10/do-dont-adsense.jpg