designing better web hosting sites
DESCRIPTION
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.TRANSCRIPT
![Page 1: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/1.jpg)
Designing better web hosting sitesBy Ian Ryde
![Page 2: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/2.jpg)
“There are three responses to a piece of design – yes, no, and
WOW! Wow is the one to aim for.” - Milton
Glaser.
![Page 3: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/3.jpg)
ABOUT ME
![Page 4: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/4.jpg)
ABOUT ME
![Page 5: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/5.jpg)
No tertiary graphic design educationI was winging it a little bit!
(and I know a lot of designers who are too!)
ABOUT ME - 2003
![Page 6: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/6.jpg)
MY 1ST DESIGN JOB
![Page 7: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/7.jpg)
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.
![Page 8: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/8.jpg)
WHAT HAPPENED?
![Page 9: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/9.jpg)
WHAT I HAD TO DO
“Unlearn what you have learned”
Yoda – Empire Strikes Back
![Page 10: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/10.jpg)
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
![Page 11: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/11.jpg)
What I want to shareELEMENTS OF WEB DESIGN
HUMAN PSYCHOLOGY
DESIGN THEORY & TECHNIQUES
UI/UX PRACTICES
![Page 12: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/12.jpg)
Grid systems
DESIGN THEORY & TECHNIQUES
![Page 13: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/13.jpg)
FAMOUS GRIDS
![Page 14: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/14.jpg)
GRID SYSTEMS ON THE WEB
![Page 15: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/15.jpg)
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.
![Page 16: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/16.jpg)
Geometry / Composition
DESIGN THEORY & TECHNIQUES
![Page 17: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/17.jpg)
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.
![Page 18: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/18.jpg)
![Page 19: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/19.jpg)
![Page 20: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/20.jpg)
RULE OF THIRDS / QUARTERS / FIFTHS
Thirds Quarters Fifths
![Page 21: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/21.jpg)
Typography
DESIGN THEORY & TECHNIQUES
![Page 22: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/22.jpg)
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
![Page 23: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/23.jpg)
USE SIZE TO CREATE HIERACHY & REPETITION
![Page 24: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/24.jpg)
C.R.A.P.
DESIGN THEORY & TECHNIQUES
![Page 25: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/25.jpg)
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
![Page 26: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/26.jpg)
COLOUR
![Page 27: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/27.jpg)
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
![Page 28: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/28.jpg)
COLOUR
![Page 29: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/29.jpg)
UI/UX BasicsDesign psychology
![Page 30: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/30.jpg)
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.
![Page 31: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/31.jpg)
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
![Page 32: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/32.jpg)
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
![Page 33: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/33.jpg)
VS
![Page 34: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/34.jpg)
![Page 35: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/35.jpg)
O2 Pay as you Go£10 credit per month
Unlimited Data Unlimited Texts
Unlimited Boredom
![Page 36: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/36.jpg)
UI/UX BasicsUX/UI BasicsUX/UI Basics
![Page 37: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/37.jpg)
UI/UX BasicsWireframing /
Conceptualising
![Page 38: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/38.jpg)
Call to actionsWIREFRAMING / CONCEPTUALISING
![Page 39: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/39.jpg)
Call to actionsWIREFRAMING / CONCEPTUALISING
![Page 40: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/40.jpg)
UI/UX BasicsResponsive Design
![Page 41: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/41.jpg)
UI/UX BasicsCall to action
![Page 42: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/42.jpg)
Call to actionsCALL TO ACTION
![Page 43: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/43.jpg)
Call to actions
Put the call to actions in clear places, consider surroundings and colour scheme, and make them stand out.
CALL TO ACTION
![Page 44: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/44.jpg)
Call to actionsCALL TO ACTION
![Page 45: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/45.jpg)
UI/UX BasicsComparison Charts
![Page 46: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/46.jpg)
Comparison ChartsCOMPARISON CHARTS
![Page 47: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/47.jpg)
COMPARISON CHARTS
![Page 48: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/48.jpg)
Comparison ChartsCOMPARISON CHARTS
![Page 49: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/49.jpg)
COMPARISON CHARTS
![Page 50: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/50.jpg)
Comparison ChartsCOMPARISON CHARTS
![Page 51: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/51.jpg)
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.
![Page 52: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/52.jpg)
UI/UX BasicsOther nuggets of wisdom
![Page 53: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/53.jpg)
• 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
![Page 54: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/54.jpg)
• 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
![Page 55: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/55.jpg)
KEEPING UP WITH THE JONES'
![Page 56: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/56.jpg)
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
![Page 57: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/57.jpg)
“Good design is the process of making the right decisions to limit
the limitless.”
SUMMARY
![Page 58: Designing better web hosting sites](https://reader033.vdocuments.mx/reader033/viewer/2022051412/5485efbdb4af9fd0668b4614/html5/thumbnails/58.jpg)
Thanks for listening
SUMMARY