Advanced Webpage Design

Transcription

1 Advanced Webpage Design

2 Webmaster Career Skills

3 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

4 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

5 Design

6 Design Principles CRAP Contrast Repetition Alignment Proximity BURP Balance Unity Rhythm Proportion

7 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.

8 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. 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. 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.

9 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.

10 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

11 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.

12 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.

13 Background Examples

14 COLORS! Use pleasing color combinations. Use throughout the whole site. Psychology of colors:

15 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.

16 Other tips PROOFREAD! For spelling, grammar, punctuation, typos. Make sure links work, pictures appear, s 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.

17 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.

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

19 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?

20 Sites to Critique What are they selling? Just because you can blink, blink, doesn t mean you should! Voted the most intense website intro ever!

21 Sites to Critique Excellent use of flash. Excellent choice of color Encourages enlistment. Very informative Wonderful Use of Color and Pictures Makes me Hungry! Easy to Get to Information/Recipes Excellent Use of Navigational Use of Flash Examples of products Clever Named Anchor (Beam me up) Obviously created by designers

22 Design Critique 2 good, 1 bad PDP

23 Sources The Non-Designer s Web Book, 3 rd edition by Robin Williams & John Tollett Good Web Design PowerPoint, Nebo School District teachers