Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Good web design is  not rocket science So shoot me if I talk like it is
Learning how not to do it with WebPagesThat Suck.com <ul><li>“ Unless you’re abnormally gifted, the best way to learn a cr...
<ul><li>We’ve designed our site to meet our organization’s needs (eg: more sales/contributions) rather than meeting the ne...
No Ease of navigation No Credible No User driven Yes Clear focus
No Ease of navigation No Credible No User driven Yes Clear focus
No Ease of navigation No Credible No User driven Yes Clear focus
<ul><li>The home page tells me what business this organisation is in </li></ul><ul><li>It tells me what problem it solves:...
 
 
 
 
 
 
 
Navigation, navigation, navigation <ul><li>Beyond the home page it is crucial that I,  the user, understands: </li></ul><u...
Beyond the fold To scroll or not to scroll Proportion of users 10% 800 x 600 pixels 50% 1024 x 768 pixels 26% 1280 x 1024 ...
There is no fold! In the sense that you can’t know where it is <ul><li>Don’t try to squeeze your web page and make it more...
Give each page a clear focus Remember search engines are users   <ul><li>Write each page so it can be found by search engi...
Design on a shoestring Free and nearly free stuff   Wordpress is a free publishing platform with a focus on web standards ...
This presentation available at  www.slideshare.net/tag/impact-071031
Upcoming SlideShare
Loading in …5
×

Good web design is not rocket science: So shoot me if I talk like it is

3,529 views

Published on

A primer on the essentials of good web design for small businesses in the Gosport area of the UK.

NB: In the online Flash version of this presentation, some slide content is obscured due to the use of animations which don't translate automatically into Flash. The same is true of embedded URLs. Download the source file for the full effect!

Published in: Business, Technology

Good web design is not rocket science: So shoot me if I talk like it is

  1. Good web design is not rocket science So shoot me if I talk like it is
  2. Learning how not to do it with WebPagesThat Suck.com <ul><li>“ Unless you’re abnormally gifted, the best way to learn a craft thoroughly is to learn not only its central tenets but also its pitfalls.” </li></ul>149 mortal sins, 82 possible mortal sins and 2 ultimate web design checklists
  3. <ul><li>We’ve designed our site to meet our organization’s needs (eg: more sales/contributions) rather than meeting the needs of our visitors </li></ul><ul><li>It takes longer than four seconds for the man from Mars to understand what our site is about </li></ul><ul><li>Our site doesn’t make us look like credible professionals </li></ul><ul><li>Our site’s navigation is Flash-based </li></ul><ul><li>Our site uses Mystery Meat Navigation </li></ul>The biggest mistakes of 2007 According to WebPagesThatSuck.com <ul><li>We’ve designed our site to meet our organization’s needs (eg: more sales/contributions) rather than meeting the needs of our visitors </li></ul><ul><li>It takes longer than four seconds for the man from Mars to understand what our site is about </li></ul><ul><li>Our site doesn’t make us look like credible professionals </li></ul><ul><li>Our site’s navigation is Flash-based </li></ul><ul><li>Our site uses Mystery Meat Navigation </li></ul>
  4. No Ease of navigation No Credible No User driven Yes Clear focus
  5. No Ease of navigation No Credible No User driven Yes Clear focus
  6. No Ease of navigation No Credible No User driven Yes Clear focus
  7. <ul><li>The home page tells me what business this organisation is in </li></ul><ul><li>It tells me what problem it solves: what benefit I can derive here </li></ul><ul><li>It gives me clear signposting: </li></ul><ul><ul><li>I understand where I can go and why </li></ul></ul><ul><ul><li>There is a call to action </li></ul></ul>The 4 second test Home pages that don’t suck!
  8.  
  9.  
  10.  
  11.  
  12.  
  13.  
  14.  
  15. Navigation, navigation, navigation <ul><li>Beyond the home page it is crucial that I, the user, understands: </li></ul><ul><ul><li>Where I am </li></ul></ul><ul><ul><li>Where I can go and why </li></ul></ul><ul><ul><li>Where the home page is </li></ul></ul><ul><ul><li>Where I have been </li></ul></ul><ul><li>Use clear design conventions to style hyperlinks </li></ul><ul><li>And don’t confuse that convention with similarly styled elements that aren’t </li></ul>
  16. Beyond the fold To scroll or not to scroll Proportion of users 10% 800 x 600 pixels 50% 1024 x 768 pixels 26% 1280 x 1024 pixels
  17. There is no fold! In the sense that you can’t know where it is <ul><li>Don’t try to squeeze your web page and make it more compact </li></ul><ul><li>Visitors will scroll all the way to the bottom of your web page </li></ul><ul><ul><li>So make life easier for them by dividing your layout into clear sections for easy scanning </li></ul></ul><ul><li>Encourage your visitors to scroll down by using a ‘cut-off’ layout </li></ul>ClickTale’s research helps unfold the myth of the fold
  18. Give each page a clear focus Remember search engines are users <ul><li>Write each page so it can be found by search engines </li></ul><ul><ul><li>We’ll talk about this later </li></ul></ul><ul><li>Aim to meet the user’s expectations when they land there </li></ul><ul><ul><li>They may not land on your home page </li></ul></ul><ul><li>Engage with the user </li></ul><ul><li>Give them reasons to come back </li></ul>
  19. Design on a shoestring Free and nearly free stuff Wordpress is a free publishing platform with a focus on web standards and a host of ready made templates. Take a look at… www.wordpress.com/features iStockPhoto has over 2 million high quality photos, illustrations and more from only $1 at… www.istockphoto.com
  20. This presentation available at www.slideshare.net/tag/impact-071031

×