Ian started tinkering on the web the same year that Google debuted, so he has lots to share. His talk will detail everything he’s learned about about designing for the web hosting industry in a nutshell.

1. Designing better web hosting sites
By Ian Ryde

2. “There are three responses to
a piece of design – yes, no,
and WOW! Wow is the one to
aim for.”
- Milton Glaser.

3. ABOUT ME

4. ABOUT ME

5. No tertiary graphic
design education
I was winging it a little bit!
(and I know a lot of designers who are too!)
ABOUT ME - 2003

6. MY 1ST DESIGN JOB

7. WHAT HAPPENED?
 What was I doing wrong?
 To the trained eye, designs and
compositions felt off and unfinished.
 Comparing it highlighted the problem
 It became a priority to fill the knowledge
gap.

8. WHAT HAPPENED?

9. WHAT I HAD TO DO
“Unlearn what you have
learned”
Yoda – Empire Strikes Back

10. WHAT I WANT TO SHARE TODAY
What I want to share
• Give an insight into what I’ve learned
along the way in designing web hosting
brands and throughout my career
• Inspiring you to fill a knowledge gap
• A simple common sense approach to
design
• Skimming the surface.

11. ELEMENTS OF WEB DESIGN
What I want to share
HUMAN
PSYCHOLOGY
DESIGN THEORY
& TECHNIQUES
UI/UX
PRACTICES

12. DESIGN THEORY & TECHNIQUES
Grid systems

13. FAMOUS GRIDS

14. GRID SYSTEMS ON THE WEB

15. BASELINE GRIDS
• Used to build vertical rhythm
• Prescribes how a design is
read
• Like music, the silence is as
important as the notes.
http://www.thegridsystem.org/

16. DESIGN THEORY & TECHNIQUES
Geometry / Composition

17. GOLDEN RATIO – 1.61803398875
 The Divine Proportion
 Appears many times in
geometry, art, architecture
and other areas.
 Some artists and
architects believe the
Golden Ratio makes the
most pleasing and
beautiful shape.

20. RULE OF THIRDS / QUARTERS / FIFTHS
Thirds Quarters Fifths

21. DESIGN THEORY & TECHNIQUES
Typography

22. Typography
TYPOGRAPHY
• Carefully consider how you
choose and use a typeface
• Go for a typeface that
reflects your brand and
message
Research and consider for
font-pairs.

23. USE SIZE TO CREATE HIERACHY & REPETITION

24. DESIGN THEORY & TECHNIQUES
C.R.A.P.

25. The big four: CRAP
C.R.A.P.
Contrast
Make elements different.
Use line thickness,
shapes, colour, type and
space.
Repetition
Repeat elements to
develop organization,
clarity and unity
Alignment
Everything needs to
be connected and
cohesive
Proximity
Use the space of
between elements to
create and seperate
relationships

26. COLOUR

27. COLOUR
 Colour is important in the hosting industry
 Over-saturation will cause UX problems
 Use a colour scheme to develop your web
hosting design
 Devise a colour scheme using sites like
kuler and colourlovers

28. COLOUR

29. UI/UX Basics
Design psychology

30. EMOTIONAL RESPONSE – MEN VS WOMEN
• Recent eye tracking between men and women
• Eyes tracked to screens of random images
• Food, holiday destinations, attractive people, particular
body parts.
• Men were more inclined to look at…
• Women were more inclined to look at…
• Don't assume with psychology.

31. DESIGN PSYCHOLOGY AND WEB HOSTING
Emotional Design vs Web Hosting
• With tangible products, life for
the designer is easier.
• Web hosting has nothing to
touch and feel, or to associate
with.

32. SELLING THE SIZZLE OF WEB HOSTING
Selling the sizzle of Web Hosting
• Selling the sizzle of hosting
• Evoking an emotional response.
How to you contain a story in the
design of a web hosting site?
• Create an emotional response by
showing your customers what they
want to see.
• Tell a fable of the dream hosting
business, clear pricing, easy set up,
good services and support.

33. VS

35. O2 Pay as you Go
£10 credit per month
 Unlimited Data
 Unlimited Texts
 Unlimited Boredom

36. UI/UX Basics
UX/UI Basics

37. UI/UX Basics
Wireframing / Conceptualising

38. WIREFRAMING / CONCEPTUALISING
Call to actions

39. WIREFRAMING / CONCEPTUALISING
Call to actions

40. Responsive Design
UI/UX Basics

41. UI/UX Basics
Call to action

42. Call to actions
CALL TO ACTION

43. Call to actions
CALL TO ACTION
Put the call to actions in clear places, consider surroundings and colour scheme, and
make them stand out.

44. Call to actions
CALL TO ACTION

45. UI/UX Basics
Comparison Charts

46. COMPARISON CHARTS
Comparison Charts

47. COMPARISON CHARTS

48. COMPARISON CHARTS
Comparison Charts

49. COMPARISON CHARTS

50. COMPARISON CHARTS
Comparison Charts

51. UI/UX HINTS & TIPS
UI Best Practices
 The best interfaces are invisible to the user.
 Avoid unnecessary labels
 Information should be layered, and staged,
keeping decisions simple
 Consistency = Comfortable customers
 Consider scanning and readability
 Communicate what’s happening
 Consider common options
 Make sure the design fulfils a need
 Handhold with hidden information.

52. UI/UX Basics
Other nuggets of wisdom

53. THE RIGHT CMS FOR YOUR BRAND
• Choosing the right CMS for your web hosting brand.
• Heart Internet was late in adopting a CMS, in 2013, using Expression Engine
• Incredibly easy to build dynamic comparison tables, seo friendly website, and
also plug in our own order process.
• Very strong module and add-on community
• Benefits are massive

54. FRAMEWORKS
• HTML, CSS, and JS framework for rapid developing responsive, mobile first projects
on the web.
• Frameworks will cover some of what we have covered, grid systems, typographic
hierachy etc.
• Avoid reinventing the wheel, but create something unique

55. KEEPING UP WITH THE JONES'

56. SUMMARY
• Compare with other web hosts
• Fill in any knowledge gaps
• Take time to research the topic in full,
and apply it to your hosting business
• Tell stories based on USP’s through the
design
• Save time in not re-inventing the wheel
• Keep ahead

57. “Good design is the process of
making the right decisions to
limit the limitless.”
SUMMARY

58. Thanks for listening
SUMMARY