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.

Modern websites in RiSE

51 views

Published on

Web design has changed by leaps and bounds in the last decade. In this presentation we discuss the evolution of website design, show compelling examples of modern site design, then explore examples of how these designs could be achieved in iMIS RiSE content management system.
Presented at the 2019 iMIS iNNOVATIONS conference.

Published in: Software
  • Login to see the comments

  • Be the first to like this

Modern websites in RiSE

  1. 1. #iNNOV2019 Creating modern websites in RiSE Andrea Robertson @RoboAndie Business Analyst, ASI
  2. 2. #iNNOV2019 Agenda • Where we’ve been • Where we are now • How you can achieve these designs in RiSE
  3. 3. #iNNOV2019 Slides & resources bit.ly/innov19-modern-sites
  4. 4. #iNNOV2019 Let’s talk history Skeuomorphic design c. 2008 - 2012
  5. 5. #iNNOV2019 Skeuomorphic design
  6. 6. #iNNOV2019 Skeuomorphic design
  7. 7. #iNNOV2019 Skeuomorphic design
  8. 8. #iNNOV2019 Skeuomorphic design • Textures and graphics that relate to the real world • Interactions that feel physical • Rich textures, gradients, and drop shadows
  9. 9. #iNNOV2019 Skeuomorphic design +• Helped users unfamiliar with technology • Created an interesting experience -• Highly complex to create • Cluttered & distracting • Doesn’t scale well
  10. 10. #iNNOV2019 Let’s talk history Flat design 2012 - 2018
  11. 11. #iNNOV2019 Flat design Windows 8 2012
  12. 12. #iNNOV2019 Flat design iOS 7 2013
  13. 13. #iNNOV2019 Flat design
  14. 14. #iNNOV2019 Flat design • Assume the user understands digital interfaces • Simple icons and uncluttered designs • Eschew textures, gradients, and drop shadows
  15. 15. #iNNOV2019 Flat design +• Cleaner and less distracting • Easy to create • Scales well -• Can be difficult to understand • Can sometimes lack contrast
  16. 16. #iNNOV2019 What about now? Flat design 2.0 2018 - present
  17. 17. #iNNOV2019 • Primary sticks with the tenants of flat design but gives more affordances • Emphasis on clean design and lots of white space • Bringing back gradients, shadows, and contrast Flat design 2.0
  18. 18. #iNNOV2019 Flat design 2.0 Image credit: http://www.writingfordesigners.com/?p=24791
  19. 19. #iNNOV2019 Let’s take a ride…
  20. 20. #iNNOV2019 Stripe 2011 2011
  21. 21. #iNNOV2019 Stripe 2016 2016
  22. 22. #iNNOV2019 Stripe 2019 2019
  23. 23. #iNNOV2019 National Parks Foundation 2011 2011
  24. 24. #iNNOV2019 National Parks Foundation 2016 2016
  25. 25. #iNNOV2019 National Parks Foundation 2019 2019
  26. 26. #iNNOV2019 advsol.com 2019 2019
  27. 27. #iNNOV2019 advsol.com 2015 2015
  28. 28. #iNNOV2019 advsol.com 2011 2011
  29. 29. #iNNOV2019 advsol.com 1997 1997
  30. 30. #iNNOV2019 A reminder…
  31. 31. #iNNOV2019 Your website is your brand. How do you want to be perceived?
  32. 32. #iNNOV2019 How your site could feel Cutting-edge Sophisticated Friendly Playful Creative Approachable Exclusive Powerful Comfortable Utilitarian Formal Delightful Progressive Energetic Stodgy Confusing Harsh Boring Uptight Outdated Cluttered
  33. 33. #iNNOV2019 Don’t forget your audience. Think about their demographics, needs, and values.
  34. 34. #iNNOV2019 Who are your audience? Young? Old? Dog moms?Parents?
  35. 35. #iNNOV2019 What do they value? Hard work? Current trends? Service? Humor?
  36. 36. #iNNOV2019 You can’t be everything to everyone.
  37. 37. #iNNOV2019 Let’s talk trends Huge type
  38. 38. #iNNOV2019 Huge typography
  39. 39. #iNNOV2019 Huge typography
  40. 40. #iNNOV2019 Huge typography
  41. 41. #iNNOV2019 Huge typography
  42. 42. #iNNOV2019 Header best practice: Indicate there is more below the fold, or have one strong call-to- action (or both)
  43. 43. #iNNOV2019 Let’s take another look… #iNNOV2019
  44. 44. #iNNOV2019 Huge typography
  45. 45. #iNNOV2019 Huge typography
  46. 46. #iNNOV2019 Huge typography
  47. 47. #iNNOV2019 Huge typography
  48. 48. #iNNOV2019 Why I huge type • Sets the tone for your website • Creates focus on your most important message or call to action • Great for accessibility & responsive design
  49. 49. #iNNOV2019 A note about carousels…
  50. 50. #iNNOV2019 Carousels are on their way out Instead, consider adding sections for your most important content below the fold on your home page
  51. 51. #iNNOV2019 Carousel alternatives
  52. 52. #iNNOV2019 Carousel alternatives
  53. 53. #iNNOV2019 Carousel alternatives
  54. 54. #iNNOV2019 Carousel alternatives
  55. 55. #iNNOV2019 Carousel alternatives
  56. 56. #iNNOV2019 Let’s talk trends Saturated colors
  57. 57. #iNNOV2019 Saturated colors
  58. 58. #iNNOV2019 Saturated colors
  59. 59. #iNNOV2019 Saturated colors
  60. 60. #iNNOV2019 Let’s talk trends Gradients
  61. 61. #iNNOV2019 Gradients
  62. 62. #iNNOV2019 Gradients
  63. 63. #iNNOV2019 Why I saturated colors & gradients • Creates visual interest • Can draw the eye to important information
  64. 64. #iNNOV2019 Let’s talk trends Organic shapes
  65. 65. #iNNOV2019 Organic shapes
  66. 66. #iNNOV2019 Let’s talk trends Hand-drawn graphics
  67. 67. #iNNOV2019 Hand-drawn graphics
  68. 68. #iNNOV2019 Hand-drawn graphics
  69. 69. #iNNOV2019 Let’s talk trends Textures
  70. 70. #iNNOV2019 Texutres
  71. 71. #iNNOV2019 Textures
  72. 72. #iNNOV2019 Textures
  73. 73. #iNNOV2019 Why I organic shapes, hand-drawn graphics, & textures • Brings humanity and nature back into web design • Makes people feel more connected
  74. 74. #iNNOV2019 Let’s talk trends Grids
  75. 75. #iNNOV2019 Grids
  76. 76. #iNNOV2019 Grids
  77. 77. #iNNOV2019 Why I grids • An interesting way of laying out repetitive information • Highlight otherwise-overlooked content
  78. 78. #iNNOV2019 Let’s talk trends Layered images
  79. 79. #iNNOV2019 Layered images
  80. 80. #iNNOV2019 Layered images
  81. 81. #iNNOV2019 Why I layered images • Creates connection between distinct objects • Draws attention to important content
  82. 82. #iNNOV2019 Let’s talk trends Scrolling & hover effects
  83. 83. #iNNOV2019 Scrolling & hover effects Acumen Upstream Ocean School University of Essex Mawla.io Wandering Aimfully POGG Sweet Potato Pie BOMA International (RiSE Site)
  84. 84. #iNNOV2019 Let’s see a demo
  85. 85. #iNNOV2019
  86. 86. #iNNOV2019 You don’t have to do a full redesign every year
  87. 87. #iNNOV2019 Design tweaks
  88. 88. #iNNOV2019 Design tweaks New font New tabs
  89. 89. #iNNOV2019 Design tweaks New header More cardsRearranged content
  90. 90. #iNNOV2019 To steal from many is research. To steal ideas from one person is plagiarism.
  91. 91. #iNNOV2019 Slides & resources bit.ly/innov19-modern-sites
  92. 92. #iNNOV2019 Resources Help with CSS CSS-Tricks Coolors color palette generator CSS Gradient Generator Free assets Fonts: Google Fonts, Font Squirrel Photos & graphics: Unsplash, Pexels, humaaans, Iconfinder CSS/JS libraries: Bootstrap, Material, Animate On Scroll, ScrollMagic, Moving Letters Paid assets Fonts: Adobe Fonts Photos & graphics: iStockPhoto, Creative Market
  93. 93. #iNNOV2019 Example sites Acumen Asana BOMA * Built by Buffalo charity:water Dropbox Gates Foundation IPAC * Liv Along the Way Mailchimp Mawla.io National Parks Ocean School POGG Sweet Potato Pie The Royal Conservatory Securinvest Sketch Slack Squarespace Stripe Teach for America Train Body Brain United Soccer Coaches * University of Essex Upstream Wandering Aimfully * RiSE site
  94. 94. #iNNOV2019 Sources Interaction Design Foundation: Skeuomorphism is dead, long live skeuomorphism Slickplan: The Flat Design 2.0 Revolution Webflow Blog: 20 web design trends for 2019 Designmodo: Top 17 Web Design and UI Trends for 2019 TNW: 20 exciting web design trends you can’t hide from in 2019 Writing for Designers: Flat Design 2.0 Internet Archive: Wayback Machine Statcounter: Global Market Share Statistics
  95. 95. #iNNOV2019 Download the “ASI Connect” app from the app store on your mobile phone Go to Events -> iNNOVATIONS 2019 Go to Agenda -> Select this Session Select 1-5 Stars and hit Send Ratings Rating this session

×