Webdesign handout engl.


Published on

This paper describes the most important thougths about creating a design for a successful website. Today, especially in times of web 2.0 the focus lies on usability and conversion to maintain effective e-commerce.

Published in: Business
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Webdesign handout engl.

  1. 1. Scheibenstraße 119 · 48153 Münster Telefon: (02 51) 9 19 59- 0 Telefax: (02 51) 9 19 59- 15 www.interface-medien.de Webdesign in 2010 Marc Wittenbrink 1. Width and Alignment • Most modern websites follow these basic design-standards: o static width o optimized for a screen resolution of 1024x768 pixels (alternative: 800 x 600 pixel) o centered alignment • Because of a significantly increased market-share of portable devices (such as netbooks, laptops, smartphones) it is to assume that this average width will not increase in the forseeable future. • Websites with a dynamic width offer limited possibilies for design elements (i.e. header pictures that usually have a static width). 2. Fonts and Typography • Most common fonts for continuous text: o Arial (Win, Mac) / Helvetica (Mac) o Verdana (Win, Mac) / Geneva (Mac) • Also usable: o Tahoma, Trebuchet MS, Times (New Roman) , Georgia, Arial Black, Courier New, Palantino • Only fonts that are installed on the visitor's system can be used without further ado. • The latest, CSS3-able browsers (i.e. the not-yet released Internet Explorer 9 and the latest versions of Firefox, Chrome, Opera and Safari) support the use of special fonts that are not installed on the visitor's systems. But it will take some time before these browsers are appropriately widespread. • For a good readability of continuous text, mind the following: o the optimal number of characters per line is 55 to 75 o fonts should have a size of at least 11 pixels, but bigger is often better o the ideal line-height is around 1.5 • Dont't be afraid of big, catchy headlines! • Headlines can be displayed as images, for instance to use a special font, though images can cannot be recognized by search engines. 3. Colours Red: Passion, Love, Anger Black: Mystery, Elegance, Evil Orange: Energy, Happiness, Vitality Gray: Moody, Conservative, Formality Yellow: Happiness, Hope, Deceit Blue: Calm, Responsible, Sadness Green: New Beginnings, Abundance, Nature Brown: Nature, Wholesomeness, Dependability White: Purity, Cleanliness, Virtue Tan or Beige: Conservative, Piety, Dull Purple: Creativity, Royalty, Wealth Cream or Ivory: Calm, Elegant, Purity Handout Webdesign - Page 1 of 2
  2. 2. 4. Navigation • horizontal menu o by this time the most widespread type of a main navigation o ideal for a static number of important menu items • vertical menu o usually found on the left side of the page o ideal for a menu that contains a theoretically infinite (or variable) number of menu items • meta navigation o horizontal navigation on top of the page o contains so-called „orientational links“ (such as contact, imprint, sitemap etc.) • footer menu o an unobtrusive menu at the bottom of the page o usally contains the first and second level of the sitemap o helps experienced visitors to find topics of interest very quickly o supports search engine optimization 5. The Homepage • Should be designed with regard to the „navigation blindness“ of many visitors. The most essential pages of the website should the accessible from the home page without using the navigation. (This should • It should call attention to the most important topics of the website (such as products or services). • These topics should be presented by eye-catchy elements with short text and pictures (teasers). • More relevant elements of a homepage: o header picture / main visual (mostly used to convey emotions or associations) o News / RSS-Feeds / Twitter: convey up-to-dateness, shorten the intervals of search engine bots to visit the website o possibilities for contacting the website-owner: telephone number, link to a contact form, callback-form o direct links to products, services or categories 6. Presenting your products on a website • seperate navigation for product categories (vertical menu) • colour-codes for categories • (homepage-)teasers • product-search, configurator • zoomable photos, animations, videos • downloads (such as a brochure in pdf-format) • enquiry-form, leaflet • E-Mail newsletter Handout Webdesign - Page 2 of 2