$30 off During Our Annual Pro Sale. View Details »

Web Design Check-up – Top 10 mistakes and how to fix them

Web Design Check-up – Top 10 mistakes and how to fix them

When you’re just starting out with your business, you often don’t have the budget to hire a professional designer to structure your content, craft a message and create your website. So you do it on your own, feeling a bit uncertain about the quality of the result and wondering what you could do better to gain more impact and stand out from the competition.

If you feel this way, this talk is just right for you. It will guide you through the top ten mistakes in web design and teach you how to avoid them, giving you the skills to improve your next project.

Top 10 web design mistakes:
1. No goals set
2. Not answering user questions
3. Missing story line
4. Confusing navigation
5. Poor structure
6. Bad usability
7. Cluttered pages
8. Bad Typography
9. No optimization for mobile
10. Forgetting to test

Oliver Schöndorfer

November 08, 2017

More Decks by Oliver Schöndorfer

Other Decks in Design


  1. Web Design Check-up Top 10 web design mistakes and how

    to cure them
  2. 86/60 Oliver Schöndorfer glyphe

  3. glyphe There is always a good reason for bad web

  4. glyphe ?

  5. Can I orientate myself? glyphe What is it about? Is

    the atmosphere appealing? II. I. III.
  6. II. I. III. Can I orientate myself? glyphe What is

    it about? Is the atmosphere appealing? II. Structure & Navigation I. Content III. Design
  7. glyphe 10

  8. Content

  9. glyphe – It’s the most important part of your website

    – Not just text, also images, videos, audio files, etc. – Good quality, well structured and well wri en – Should consider SEO (Search Engine Optimization) Content is the heart of you website
  10. No goals set 1

  11. glyphe steman.at

  12. glyphe steman.at Focus on returning visitors and the needs they

    might have
  13. glyphe sensomotorische-koerpertherapie.at Guiding users 
 to the form to set

    an appointment
  14. glyphe – What do you want to achieve with your

    website? – How do you want to connect with your customers or audience? – How could your website help you with your daily business? Set goals for your website
  15. Not answering user questions 2

  16. glyphe polizei.gv.at

  17. glyphe polizei.gv.at Where can I find the next police station?

  18. glyphe streamtimeapp.tv

  19. glyphe streamtimeapp.tv Answering user questions where they could come up

  20. glyphe – What is it about? – Why do I

    need it? What does it help me with? – What makes it special? (USP?) – What options do I have? What am I supposed to do? Answer user questions
  21. Missing story line 3

  22. glyphe betterspot.com

  23. glyphe betterspot.com

  24. glyphe betterspot.com

  25. glyphe betterspot.com

  26. glyphe betterspot.com

  27. glyphe betterspot.com Attention What is it? What solves is? Interest

    In the topic privacy & security Desire Show features, app and ease of use Action Buy now
  28. glyphe AIDA

  29. glyphe – Think about what you want to tell your

    users – User the AIDA model – End with a call to action Craft a sound story line
  30. Structure & Navigation

  31. glyphe – Navigation gives orientation (where am I, where can

    I go?) – Structure brings order to chaos – Setting priorities helps to focus on what’s most important to you and your users Make it easy
  32. Confusing navigation 4

  33. glyphe kokua.de Cluttered navigation

  34. glyphe hubblecontacts.com Simple navigation that is easy to process

  35. glyphe avia-law.at Visible navigation on mobile makes it easy to

  36. glyphe – Five to seven items at most – Use

    short words – Think about mobile – Should always be accessible and at the same place Implement an easy to use navigation
  37. Poor structure 5

  38. glyphe 4connect-e.com

  39. glyphe 4connect-e.com

  40. glyphe forit.iondigi.com

  41. glyphe forit.iondigi.com

  42. glyphe forit.iondigi.com Obvious start of new page sections

  43. glyphe giromatch.com Too many different elements and missing structure

  44. glyphe microsoft.com Well structured footer due to the use of

  45. glyphe More

  46. glyphe View our services

  47. glyphe – Clearly structure pages in sections – User headings

    and text emphasis – Provide speaking links Build a solid page structure
  48. Bad usability 6

  49. glyphe more-ohr-less.com What is a link? Heading Heading Link

  50. glyphe forward-festival.com Unfamiliar usability patterns in various places

  51. glyphe forward-festival.com Problematic drop down navigation

  52. glyphe – Use conventional, familiar usability pa erns – Elements

    should behave in an expected way – Keep accessibility in mind Provide great usability
  53. None
  54. Design

  55. glyphe – You can not not design something – It

    sets the mood and shows professionalism – Sometimes very obvious, sometimes subtle – Design alone can not save you Design is everywhere
  56. Cluttered pages 7

  57. glyphe leo-hillinger.com Crammed page that makes it hard to orientate

  58. glyphe leo-hillinger.com Crammed page that makes it hard to orientate

  59. glyphe leo-hillinger.com Unnecessary instructions on every page Very dense layout

    even on pages with little content
  60. glyphe hubblecontacts.com Easy to catch process

  61. glyphe – One key message per area – Structure your

    content – Add hierarchy and structure by utilizing space and size Tidy up your web design
  62. Bad Typography 8

  63. glyphe oolipo.com Very light text is hard to read

  64. glyphe gosepp.com Very light text is hard to read

  65. glyphe steigenberger.com Too small text on desktop (11 px)

  66. glyphe tickets.oebb.at Bad readability due to small font size and

    low contrast
  67. glyphe wien.gv.at Inappropriate typeface on iOS that appears smaller and

    makes is harder to read compared to Android  iOS Android
  68. glyphe phpconference.com Dense and unequal typography doesn’t invite users to

    read the text
  69. glyphe comstocksmag.com Inviting text well structured, easy to read

  70. glyphe edenspiekermann.com Good typography through clear hierarchy, sufficient font size

    and contrast
  71. glyphe – Use a robust text typeface – Provide clear

    hierarchy – Pay a ention to good contrast – Set text in sufficient size (16 px at least) Care about typography
  72. No optimization for mobile 9

  73. glyphe giromatch.com

  74. glyphe giromatch.com Not obviously comparable options on mobile

  75. glyphe gourban.at

  76. glyphe gourban.at Navigation on mobile is hard to read

  77. glyphe gourban.at

  78. glyphe gourban.at Problematic hierarchy and too big text for mobile

  79. glyphe – Content should fit and work on mobile –

    Same content for mobile as for desktop – Page should load fast even on mobile connections Think mobile first
  80. Final Approval

  81. Forgetting to test 10

  82. glyphe tickets.oebb.at Wrong error messages

  83. glyphe ragusa.swiss  iPhone SE  iPhone 6 Content does

    not fit
 on smaller screens
  84. glyphe – Let people try it out and watch them

    while doing it – On various devices and screen sizes – In different situations (fast and slow connections) – With specific goals in mind (e.g. new visitor, returning visitor) Test your website
  85. Can I orientate myself? glyphe What is it about? Is

    the atmosphere appealing? II. I. III.
  86. glyphe 1 Set your goals 2 Answer user questions 3

    Use a story line 4 Provide a simple navigation 5 Clearly structure your page 6 Provide good usability 7 Tidy up your design 8 Care about typography 9 Think mobile first 10 Test, test, test Web design checklist
  87. Icons by hunotika from the Noun Project Let’s cure the

    web together! Oliver Schöndorfer glyphe www.8660.at