Designing better web hosting sites
-
Upload
heartinternet -
Category
Internet
-
view
89 -
download
0
description
Transcript of 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