Bad Website Design - Recognizing and Understanding the Features

1. A presentation by Think Creative

2. Presentation Aims • By the end of this session you will be able to: • Recognise bad website design and describe the features of what make it bad and why • Recognise good website design and describe the features of what makes it good and why • Describe the difference between a responsive and adaptive website and understand its importance • Decide whether your social media platforms need to be integrated into your website

3. Bad Website Design

4. Bad Website Design

5. Bad Website Design

6. Bad Website Design

7. Bad Website Design

8. Text Small text that is difficult to read, Illegible fonts (i.e. fonts that look handwritten), Text that appears crowded together, Text colour contrast makes it difficult to read, Underlined text that is not a link, Coloured text that is not a link, Paragraphs in all caps/bold/italic Navigation Poor navigation, Unclear navigation, Complicated (and unnecessary) navigation, Broken links, Pages/post titles that don’t properly explain what they are about, Endless scrolling, No search bar, Bad Website Design

9. Bad Website Design Function Websites that don’t work (or have major issues) on certain browsers, Websites that don’t work or appear incorrectly on mobile/tablet devices, Backgrounds Busy, distracting web backgrounds that take the attention away from the content, Backgrounds used under text that make it hard/impossible to read Links Dead and broken links, Links that aren’t easy to see due to a low contrast in colour, Links that are the same colour as your text (how will people find them!), Undescriptive links,

10. Bad Website Design • Images • Large images that take a long time to load, • Images that are bigger than the users screen, • Images with no Alt tags, • Large (file size) thumbnail images, • Unnecessary clutter • Excessive amount of adverts, • Meaningless awards mentioned on every page (who cares you were voted best local website in 1998?) • Pageview counters, • Too many links in the sidebar, • Anything that flashes or blinks, • Automatic video/audio that starts when you open a page,

11. Good Website Design

12. Good Website Design • It's easy to consume. There is much debate on whether short or long homepages work better. If you choose to do the latter, you need to make it easy to scroll and read -- and that's exactly what this site does. It almost acts like a story. • There's great use of contrast and positioning with the primary calls-to-action; it’s clear what the company wants you to convert on when you arrive. • The copy used in the calls-to-action "Try it Free for 30 Days" is very compelling. • The sub-headline is also great: "Join 5 million people using FreshBooks to painlessly send invoices, track time and capture expenses." It zeros in on a common pain point for freelancers and small businesses (FreshBooks' target audience) -- typically accounting software is often "painfully complex."

13. Good Website Design

14. Good Website Design

15. Good Website Design • It's simple and straight to the point -- from the headline and sub-headline, it's clear exactly what Jill Konrath does (and how she can help your business). • It also gives easy access to Jill's thought leadership materials, which is important to establishing her credibility as a keynote speaker. • It's easy to subscribe to the newsletter and get in touch, two of her primary calls-to-action. • The imagery sets the scene as to what Gill does

16. Good Website Design

17. Good Website Design • Dropbox's homepage and website is the ultimate example of simplicity. It limits its use of copy and visuals, and embraces whitespace. • Their headline, "Your stuff, anywhere" is simple, yet powerful. No need to decode jargon to figure out what Dropbox really does. • It has a focus on one primary call-to-action: "Sign up" ... But if you want to learn more first, that's easy, too. Click "Learn more," and see how Dropbox describes its primary benefits with four, easy-to-scan statements directly below the primary CTA.

18. Good Website Design

19. Good Website Design • Makes you feel really hungry. Great photography, the headline "Brisket. 18 years to master. Yours to savor." sounds like an experience worth trying • The parallax scrolling guides you on a tour through their services, menu, and people having a great time.

20. Questions to consider when designing a website • Does the website quickly (in 3 seconds?) set the scene and tell visitors exactly what you do/what the website is about? • Is the website easy to read and navigate? • Does the website have a compelling value proposition? • Does the website make you look credible? • Does the website have a clear call to action? • Does the website take more than 4 seconds to load? • Does the website work on all browsers and mobile devices? • Has someone other than you answered these questions?

21. Social Media

22. Credits As part of my research into designing this presentation, my thanks goes to Web Pages that Suck for examples of very terrible web design and to HubSpot for examples of very good web design although, to be honest, the best website designs can be found on the Think Creative Portfolio (but we hate to brag).