際際滷

際際滷Share a Scribd company logo

Designing better web hosting sites

Download as PPTX, PDF
heartinternet
heartinternet

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

1 of 58
Downloaded 17 times
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.
ABOUT ME
ABOUT ME
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
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 TODAY What I want to share Give an insight into what Ive 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
FAMOUS GRIDS
GRID SYSTEMS ON THE WEB
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/
DESIGN THEORY & TECHNIQUES 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
Designing better web hosting sites
RULE OF THIRDS / QUARTERS / FIFTHS Thirds Quarters Fifths
DESIGN THEORY & TECHNIQUES 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
DESIGN THEORY & TECHNIQUES 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 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
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.
VS
Designing better web hosting sites
O2 Pay as you Go 贈10 credit per month Unlimited Data Unlimited Texts Unlimited Boredom
UI/UX Basics UX/UI Basics
UI/UX Basics Wireframing / Conceptualising
WIREFRAMING / CONCEPTUALISING Call to actions
WIREFRAMING / CONCEPTUALISING Call to actions
Responsive Design UI/UX Basics
UI/UX Basics Call to action
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.
Call to actions CALL TO ACTION
UI/UX Basics Comparison Charts
COMPARISON CHARTS Comparison Charts
COMPARISON CHARTS
COMPARISON CHARTS Comparison Charts
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 whats 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
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 USPs 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

More Related Content

Designing better web hosting sites

  • 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.
  • 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
  • 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.
  • 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 Ive 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
  • 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
  • 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
  • 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
  • 37. UI/UX Basics Wireframing / Conceptualising
  • 38. WIREFRAMING / CONCEPTUALISING Call to actions
  • 39. WIREFRAMING / CONCEPTUALISING Call to actions
  • 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
  • 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 whats 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 USPs 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