Designing better web hosting sites

Designing better web hosting sites
By Ian Ryde

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

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

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.

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

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.

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

DESIGN THEORY & TECHNIQUES
Grid systems

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/

Geometry / Composition

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.

Designing better web hosting sites

RULE OF THIRDS / QUARTERS / FIFTHS
Thirds Quarters Fifths

Typography

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.

USE SIZE TO CREATE HIERACHY & REPETITION

C.R.A.P.

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

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

UI/UX Basics
Design psychology

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.

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.

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.

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

UI/UX Basics
Wireframing / Conceptualising

WIREFRAMING / CONCEPTUALISING
Call to actions

Responsive Design
UI/UX Basics

Call to actions
CALL TO ACTION

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

UI/UX Basics
Comparison Charts

COMPARISON CHARTS
Comparison Charts

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.

UI/UX Basics
Other nuggets of wisdom

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

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

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

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

Designing better web hosting sites

More Related Content

What's hot (12)

Similar to Designing better web hosting sites (20)

More from heartinternet (12)

Recently uploaded (20)

Designing better web hosting sites