designing better web hosting sites

Designing better web hosting sitesBy Ian Ryde

“There are three responses to a piece of design – yes, no, and

WOW! Wow is the one to aim for.” - Milton

Glaser.

ABOUT ME

ABOUT ME

No tertiary graphic design educationI was winging it a little bit!

(and I know a lot of designers who are too!)

ABOUT ME - 2003

MY 1ST DESIGN JOB

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 HAPPENED?

WHAT I HAD TO DO

“Unlearn what you have learned”

Yoda – Empire Strikes Back

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.

WHAT I WANT TO SHARE TODAY

What I want to shareELEMENTS OF WEB DESIGN

HUMAN PSYCHOLOGY

DESIGN THEORY & TECHNIQUES

UI/UX PRACTICES

Grid systems

DESIGN THEORY & TECHNIQUES

FAMOUS GRIDS

GRID SYSTEMS ON THE WEB

BASELINE GRIDS

http://www.thegridsystem.org/

• Used to build vertical rhythm

• Prescribes how a design is read

• Like music, the silence is as important as the notes.

Geometry / Composition

DESIGN THEORY & TECHNIQUES

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.

RULE OF THIRDS / QUARTERS / FIFTHS

Thirds Quarters Fifths

Typography

DESIGN THEORY & TECHNIQUES

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.

TYPOGRAPHY

USE SIZE TO CREATE HIERACHY & REPETITION

C.R.A.P.

DESIGN THEORY & TECHNIQUES

The big four: CRAPC.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

COLOUR

COLOUR

UI/UX BasicsDesign 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.

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.

DESIGN PSYCHOLOGY AND 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.

SELLING THE SIZZLE OF WEB HOSTING

VS

O2 Pay as you Go£10 credit per month

Unlimited Data Unlimited Texts

Unlimited Boredom

UI/UX BasicsUX/UI BasicsUX/UI Basics

UI/UX BasicsWireframing /

Conceptualising

Call to actionsWIREFRAMING / CONCEPTUALISING

Call to actionsWIREFRAMING / CONCEPTUALISING

UI/UX BasicsResponsive Design

UI/UX BasicsCall to action

Call to actionsCALL TO ACTION

Call to actions

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

CALL TO ACTION

Call to actionsCALL TO ACTION

UI/UX BasicsComparison Charts

Comparison ChartsCOMPARISON CHARTS

COMPARISON CHARTS

Comparison ChartsCOMPARISON CHARTS

COMPARISON CHARTS

Comparison ChartsCOMPARISON CHARTS

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

UI/UX HINTS & TIPS

Communicate what’s

happening

Consider common options

Make sure the design fulfils a

need

Handhold with hidden

information.

UI/UX BasicsOther nuggets of wisdom

• 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

THE RIGHT CMS FOR YOUR BRAND

• 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

FRAMEWORKS

KEEPING UP WITH THE JONES'

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

Thanks for listening

SUMMARY