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

1. 1
The Watt
User Interactions
Prepared by New Republique. Version 1 30/09/2015.

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
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

5. 5
Hover Effects

6. 6
Tile hover effects
Static state
Hover state

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
Button hover effects
Static state
Hover state

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
Navigation hover effects
Static state
Hover state

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

13. 13
Page transistions and
effects

14. 14
Lazy load tiles
Example of elements that would lazy load

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
Page transistions

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. 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.