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.

The watt interaction document

132 views

Published on

This is a quick doc to outline the interactions on The Watt website

Published in: Design
  • Be the first to comment

  • Be the first to like this

The watt interaction document

  1. 1. 1 The Watt User Interactions Prepared by New Republique. Version 1 30/09/2015.
  2. 2. 2 Contents Document Information 3 Hover Effects 5 Tile hover effects 7 Button hover effects 9 Navigation hover effects 11 Page transistions and effects 13 Lazy load tiles 14 Page transistions 16
  3. 3. 3 Document Information This document has been provided to outline the front end user interactions of The Watt website. Annotated screenshots will be used to outline expected interactions of the site. For questions regarding the content of this document, please contact either: Sam Marchant smarchant@newrepublique.com or Jackson Alsop jalsop@newrepublique.com
  4. 4. 4
  5. 5. 5 Hover Effects
  6. 6. 6 Tile hover effects Static state Hover state
  7. 7. 7 By default all tiles that feature an image background will be darkened slightly. Upon hovering over any tiles the background image brightens, the button borders span the whole width of the button text all with a 0.8 second delay. For an example of this interaction and to view code snippets please view “Brighten Image CSS”: http://www.mountainmar- ketingsolutions.com/css-image-hover-effects/
  8. 8. 8 Button hover effects Static state Hover state
  9. 9. 9 Upon hovering over any buttons across the site, the button turns red, has a full border and a fill color of white with a 5% opacity. Please keep this effect time short, 300ms works well. For an example of this interaction please visit: http://stackoverflow.com/questions/28623446/expand-border-from-center- on-hover For a code snippet please visit: http://stackoverflow.com/questions/28623446/expand-border-from-center-on-hover
  10. 10. 10 Navigation hover effects Static state Hover state
  11. 11. 11 Upon hovering over any navigation elements, an underline appears under the text. The transistion should ease in and out for no longer than 300ms. For an example of this interaction please visit: http://www.counterform.com/ (just on top navigation only)
  12. 12. 12
  13. 13. 13 Page transistions and effects
  14. 14. 14 Lazy load tiles Example of elements that would lazy load
  15. 15. 15 When the user is scrolling down the page each tile element should load in from the bottom (lazy load), excluding the naviga- tion and header sections. This transition should only happen once then user has scrolled to that particular tile on the page. For an example of this interaction please see “Demo 2”: http://tympanus.net/Development/GridLoadingEffects/index2.html For code snippets of this interaction please visit: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items- with-css-animations/
  16. 16. 16 Page transistions
  17. 17. 17 Moving from page to page, there should be a slight opacity transistion when the page loads. Elements such as the header text and button should load last. For an example of this interaction please visit this link: http://codepen.io/anon/pen/jlfdG For code snippets please see: https://fabriceleven.com/design/creating-fancy-css3-fade-in-animations-on-page-load/
  18. 18. La Fin. Level 3, 63 William Street, Darlinghurst, Australia, NSW, 2010 newrepublique.com facebook.com/newrepublique hello@newrepublique.com Copyright 2015 New Republique. All rights reserved. No portion of this document may be reproduced copied or in anyway reused without written permission from New Republique.

×