Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

BrightonSEO - Using stunning design to leverage your SEO

5,218 views

Published on

This is a design talk on how and why graphic design is an important part of a website's SEO. Find out why graphic designers, web designers and SEOs should learn more about each other and what each do, for the greater good.

Published in: Design
  • Be the first to comment

BrightonSEO - Using stunning design to leverage your SEO

  1. 1. 1 Meg Fenn @ShakeItCreative Shake It Up Creative Using stunning design to leverage your SEO http://www.slideshare.net/shakeitupcreative
  2. 2. overview Graphic design web projects Bridge the gap @ShakeItCreative #brightonSEO
  3. 3. @ShakeItCreative #brightonSEO overview Graphic design – websites web projects – people Bridge the gap – ux and collaboration
  4. 4. @ShakeItCreative #brightonSEO
  5. 5. @ShakeItCreative #brightonSEO
  6. 6. @ShakeItCreative #brightonSEO
  7. 7. graphic design is The creative spirit Of your website @ShakeItCreative #brightonSEO
  8. 8. I make things “pretty” meg fenn Director Shake It Up Creative @ShakeItCreative #brightonSEO
  9. 9. Meg magic @ShakeItCreative #brightonSEO
  10. 10. website Design Content Navigation Seo @ShakeItCreative #brightonSEO
  11. 11. website @ShakeItCreative #brightonSEO Design helps people trust Design Content Navigation Seo
  12. 12. website Design Content Navigation Seo trust layout / colours / fonts / images / branding / photos / copy / CTAs / meta data / architecture / messaging / client / customers / audience / business goals / story / keywords / links / analytics / speed / conversions / accessibility / mobile / social media / reviews / authenticity / marketing / SERPS / local SEO / pain points / process / learn / delivery @ShakeItCreative #brightonSEO
  13. 13. website Graphic designer seo marketer Web designer developer @ShakeItCreative #brightonSEO
  14. 14. website Graphic designer seo marketer Web designer developer ux designer / consultant copywriter illustrator photographer / videographer animator data analyst @ShakeItCreative #brightonSEO
  15. 15. @ShakeItCreative #brightonSEO
  16. 16. the designer SEO is REALLY important Says the SEO to the designer @ShakeItCreative #brightonSEO
  17. 17. the designer SEO is REALLY important Says the SEO to the designer Design is REALLY important Says the designer to the SEO the SEO @ShakeItCreative #brightonSEO
  18. 18. @ShakeItCreative #brightonSEO
  19. 19. Challenges Websites are complex @ShakeItCreative #brightonSEO
  20. 20. many factors Many people @ShakeItCreative #brightonSEO
  21. 21. @ShakeItCreative #brightonSEO
  22. 22. SEO Design @ShakeItCreative #brightonSEO Dev
  23. 23. How do we bridge that gap Between design and SEO to create smoother projects and better websites? ? @ShakeItCreative #brightonSEO
  24. 24. 3 ui ux collaboration @ShakeItCreative #brightonSEO
  25. 25. Create beautiful websites that are found and that convert. @ShakeItCreative #brightonSEO
  26. 26. “We’re seeing that user experience metrics (such as average time spent on site) are having a great ranking influence than ever before, therefore showcasing the importance of design and layout.“ - Charlie travers, seo , finetune digital @ShakeItCreative #brightonSEO
  27. 27. “We’re seeing that user experience metrics (such as average time spent on site) are having a great ranking influence than ever before, therefore showcasing the importance of design and layout.“ “Google is very interested in sites giving a great experience to the user.” - David rosam, seo, david rosam digital marketing - Charlie travers, seo, finetune digital @ShakeItCreative #brightonSEO
  28. 28. ui Visual elements used To interact with a device @ShakeItCreative #brightonSEO
  29. 29. ui Visual indicators @ShakeItCreative #brightonSEO
  30. 30. ui Visual indicators @ShakeItCreative #brightonSEO
  31. 31. ui Visual elements Margaret Gould Stewart, TED2014 @ShakeItCreative #brightonSEO
  32. 32. ui @ShakeItCreative #brightonSEO convert
  33. 33. Inbound links Higher rankings Happy clients @ShakeItCreative #brightonSEO
  34. 34. Design benefits a site’s External popularity A signal of higher quality For search engines @ShakeItCreative #brightonSEO
  35. 35. ui “no one likes to link To a Crummy site” moz.com @ShakeItCreative #brightonSEO
  36. 36. ux “‘User experience’ encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” Don Norman, usertesting.com @ShakeItCreative #brightonSEO
  37. 37. @ShakeItCreative #brightonSEO
  38. 38. Better experience Engage longer buy share ux @ShakeItCreative #brightonSEO
  39. 39. Time on site Bounce rate Page speed Mobile experience ux @ShakeItCreative #brightonSEO
  40. 40. @ShakeItCreative #brightonSEO Trust is part of ux Design for trust ux
  41. 41. Rand Fishkin, moz.com “Conversion rates rise. Links, citations, references and social shares increase.” @ShakeItCreative #brightonSEO Trustworthy Untrustworthy Clean, modern, Beautiful design High-quality Photos Proper spelling Dated, unprofessional, Disjointed design Poorly written prose, rife with errors
  42. 42. “A brand is simply Trust” trust Steve Jobs @ShakeItCreative #brightonSEO
  43. 43. trust @ShakeItCreative #brightonSEO
  44. 44. quality @ShakeItCreative #brightonSEO
  45. 45. Do this Shit hot Design Loads fast Accessible on mobiles @ShakeItCreative #brightonSEO
  46. 46. Brand Logo Fonts colour @ShakeItCreative #brightonSEO
  47. 47. Web fonts @ShakeItCreative #brightonSEO
  48. 48. Web fonts Html css @ShakeItCreative #brightonSEO
  49. 49. colour “I found I could say things with colour and shapes that I couldn’t say any other way... things I had no words for.” - Georgia O’Keeffe @ShakeItCreative #brightonSEO
  50. 50. colour significance Signals brand @ShakeItCreative #brightonSEO
  51. 51. @ShakeItCreative #brightonSEO
  52. 52. @ShakeItCreative #brightonSEO
  53. 53. @ShakeItCreative #brightonSEO
  54. 54. @ShakeItCreative #brightonSEO
  55. 55. 8% of men 0.5% of women @ShakeItCreative #brightonSEO
  56. 56. https://webaim.org /contrastchecker/ @ShakeItCreative #brightonSEO
  57. 57. https://oomphinc.github.io/colorcube/ @ShakeItCreative #brightonSEO
  58. 58. Images and photos improve Ux Add seo value @ShakeItCreative #brightonSEO
  59. 59. use images and photos to Tell a story Showcase products Represent your brand @ShakeItCreative #brightonSEO
  60. 60. @ShakeItCreative #brightonSEO
  61. 61. @ShakeItCreative #brightonSEO Reduce image File size
  62. 62. @ShakeItCreative #brightonSEO
  63. 63. @ShakeItCreative #brightonSEO
  64. 64. Use css and html To optimise images onsite Upload just 1 @ShakeItCreative #brightonSEO
  65. 65. @ShakeItCreative #brightonSEO
  66. 66. @ShakeItCreative #brightonSEO
  67. 67. For the gallery, we used CSS and the 'clip-path' property to make it appear that the thumbnail was angled and give the impression of depth. An example bit of CSS for the gallery thumbnails: clip-path: polygon(0 10%,100% 5%,100% 95%,0 90%); @ShakeItCreative #brightonSEO
  68. 68. @ShakeItCreative #brightonSEO Sprites 1 image Fewer server requests
  69. 69. SVG Faster loading times Built into the source code @ShakeItCreative #brightonSEO
  70. 70. Mobile first design @ShakeItCreative #brightonSEO
  71. 71. @ShakeItCreative #brightonSEO
  72. 72. @ShakeItCreative #brightonSEO
  73. 73. ? How do we bridge that gap Between design and SEO to create smoother projects and better websites? @ShakeItCreative #brightonSEO
  74. 74. Ui ux Work together - collaborate Serve Up the best experience Using all these design elements For mobile first @ShakeItCreative #brightonSEO
  75. 75. @ShakeItCreative #brightonSEO Brain training
  76. 76. ? @ShakeItCreative #brightonSEO
  77. 77. Mobile first design tools @ShakeItCreative #brightonSEO
  78. 78. @ShakeItCreative #brightonSEO
  79. 79. design collaboration Build it into your workflow Involve early and often Share iterations learn @ShakeItCreative #brightonSEO
  80. 80. @ShakeItCreative #brightonSEO use stunning design To Leverage your SEO sumup
  81. 81. @ShakeItCreative #brightonSEO ui – visual elements Ux – better experience sumup
  82. 82. @ShakeItCreative #brightonSEO Design is an important part of Seo People should collaborate Smoother projects and better websites
  83. 83. Thankyou http://www.slideshare.net/shakeitupcreative ShakeItUpCreative.com @ShakeItCreative #brightonSEO

×