Webdesign(updated)
Download as PPT, PDF0 likes680 views
The document provides guidelines for designing effective websites. It recommends using a consistent layout with predictable interaction and clear instruction. Visual elements like graphics and text should be easy to understand and support the site's purpose. The principles of layout, color schemes, headers, navigation and tabbed content from popular newspaper websites are discussed. Effective business web design uses simple centered layouts, draws attention to the content with strong focal colors, utilizes white space and uses larger text sizes to emphasize important information.
Webdesign(updated)
- 1. Designing for the Web Media Design Strauch
- 2. What do users like? • Easy to Use • Speedy • Practical • Simple • Credible • Support
- 6. General Principles • Consistency • same basic layout grids • same graphic themes • same hierarchies of organization
- 7. General Principles, cont. • Interaction • predictable • visible • reversible
- 8. General principles, cont. • Instruction • tell them what to do; don't make them guess
- 9. * more than one way to find what they're looking for
- 10. • Navigation • hierarchical • sequential
- 11. Hierarchy
- 12. • Control • allow them to personalize
- 14. Visual principles • Graphics • tell at a glance if it's decorative or a link • Don’t use it if it doesn’t have a purpose • keep in mind global audience
- 16. • Text • organize into small, digestible pieces • scannable • sans serif rather than serif for body text • roman rather than italic
- 17. • 9-11 pts for body text; 14-28 for headlines • upper and lower case rather than all caps • line lengths of less than 50 or 60 characters long. • High contrast between text and background colors.
- 18. Layout • use graphics to illustrate, inform and aid in navigation • use white space with visual "breathing room" to visually organize the page • invisible table lines, rather than visible ones
- 19. Multiple points of entry • Point of entry = any way to get further into your site
- 21. Getting started • First, know your purpose, your audience and your content • Sketch it out. (Wireframe) • Grid layout
- 25. More terms to know • Cascading Style Sheets • HTML5 • Responsive web design • http://foodsense.is/ • http://www.bostonglobe.com/
- 26. Newspaper Website Trends From Smashing Magazine
- 27. Color Schemes • dark text on a white background. • blue and red colors in addition to a dark gray or black for text. • Blue = headlines, article titles and links. Red = sparingly as an accent color. • Some news websites also mix in more colors in other places, such as in the navigation.
- 29. Header and Sidebar Banners • Some websites use banner ads on all pages, and others exclude banners on the home page but display them above the header on other pages. • News websites commonly use 300 by 250 banners or tall skyscrapers. Many of the websites mix in some AdSense or other text link ads.
- 31. Top Navigation • Most news websites put their primary navigation menu just below the header and above the content. • The New York Times and MSNBC are two of the exceptions, as they both use the left sidebar for the main navigation.
- 33. Tabbed Content Areas • tabbed content areas allow visitors to see popular articles, recent articles, most commented articles, etc. • sometimes used in the sidebar • more control by users over what content and links they see, and it can save space in the design by making more content accessible in a specific area.
- 35. Grid Based Layouts • The grid is a popular choice not only because of the sharp look it creates but because it’s one of the most effective ways to manage and organize a large amount of content.
- 54. Good Business Web Design From http://www.webdesignfromscratch.com /current-style.php
- 55. Simple layout • 1-2 columns • But 3 column grid also popular
- 57. Design the content, not the page • Freer, less boxed-in page layouts • Softer, simpler, receding page "furniture" • Strong color and 3D effects used to draw attention to the content itself, including the main branding • The focus is on making the site's subject look good, rather than making the web designer look good (which is better for the designer in the long-term!)
- 59. Soft, neutral background colors • plain background, the most popular being white and greyscale fades. • These give a cool, neutral, soft base against which you can flash strong color to draw the eye.
- 60. Strong color used sparingly • A soft, stylish background is the perfect base for adding eye-catching features. Strong colours and tonal constrast are great for drawing the eye to the more important elements on the page.
- 61. White Space • Your eye needs space (guttering in typo language) round stuff to help you clearly and cleanly identify things. • Of course, "white" space doesn't have to be white. But it does have to be space! • “It's very rare that I look at a page and think: ‘Gosh, they really need to cram that page up a bit!’” • Law of proximity – pull related items together and then have a larger bit of white space between that item and the next related items.
- 63. Nice big text • small text is fine for reading text; we tend to take in more when text is a bit smaller. • But…Make the most important text on the page bigger than normal text • If all your text is big, then none of your text is big. • Use bigger text to help your visitors see quickly what the page is about, what's most important, and figure out where they want to look next to find what they want.