Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Design Check-up – Top 10 mistakes and how t...

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
Tweet

More Decks by Oliver Schöndorfer

Other Decks in Design

Transcript

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

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

    it about? Is the atmosphere appealing? II. Structure & Navigation I. Content III. Design
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. glyphe – Clearly structure pages in sections – User headings

    and text emphasis – Provide speaking links Build a solid page structure
  11. glyphe – Use conventional, familiar usability pa erns – Elements

    should behave in an expected way – Keep accessibility in mind Provide great usability
  12. 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
  13. glyphe – One key message per area – Structure your

    content – Add hierarchy and structure by utilizing space and size Tidy up your web design
  14. glyphe wien.gv.at Inappropriate typeface on iOS that appears smaller and

    makes is harder to read compared to Android  iOS Android
  15. 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
  16. 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
  17. 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
  18. Can I orientate myself? glyphe What is it about? Is

    the atmosphere appealing? II. I. III.
  19. 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
  20. Icons by hunotika from the Noun Project Let’s cure the

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