3. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
Paypal paypal.com
Not Responsive
4. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
The Walking Dead cabletv.com/the-walking-dead
Not Responsive
5. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Use Less Text
To tell the story, use other
methods (video, image, parallax)
Square squareup.com
Responsive
6. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Peak usepeak.com
Not Responsive
7. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Munchery munchery.com/how-it-works
Not Responsive
8. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Be Real
Less stock imagery. More
portraits and large photography.
Eight Oaks 8oaks.org
Responsive
9. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy reading.
Fitbit fitbit.com/zip
Not Responsive
10. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps
Details split into short
sections for easy reading.
Scytale scytale.pt
Responsive
11. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pace.
Google - How Search Works
google.ca/intl/en/insidesearch/howsearchworks/thestory
Not Responsive
12. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Interactivity
Allow visitors to explore
and control the pace.
Life of Pi journey.lifeofpimovie.com
Not Responsive
13. more: a look at 2014 design trends
#notatSXSW
More Storytelling
Focused Page
Use the page to tell one
story ... and only one
Goldee getgoldee.com
Responsive
15. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Overlays/Tooltips
Getting more info doesnât
require opening a new webpage.
Coffee Cava coffeecava.ru
Not Responsive
16. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Caption Overlays
Let imagery make a bigger
impact with fewer distractions.
NOWNESS nowness.com/archive
Responsive
17. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Endless Scrolling
Scrolling is easier than
waiting for a new page to load.
Case 3D case-3d.com/#about
Not Responsive
18. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Simple Navigation
Navigation thatâs minimal,
yet accessible.
frog design frogdesign.com
Responsive
19. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Smaller Search
The search field can
occupy less real estate.
Fi Blog blog.f-i.com
Responsive
20. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Form Interaction
Rethinking the way forms act
can make conversion faster.
Floating Label
dribbble.com/shots/1254439--GIF-Float-Label-Form-Interaction
21. more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Grid Layout
Easily move from desktop
to mobile with the grid.
Google Science Fair googlesciencefair.com/en
Responsive
23. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D screen.
Adcade adcade.com
Responsive
24. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling
Create movement and
depth on your 2D screen.
National Geographic kennedyandoswald.com
Responsive
25. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites donât always need to
use web safe fonts. Just pick
the right time ... and type.
Webstock 2014 webstock.org.nz/14
Responsive
26. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites donât always need to
use web safe fonts. Just pick
the right time ... and type.
Whiteboard whiteboard.is
Responsive
27. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Typography
Sites donât always need to
use web safe fonts. Just pick
the right time ... and type.
Mixd mixd.co.uk/approach
Responsive
28. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Coloured Lines colouredlines.com.au
Not Responsive
29. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
TriplAgent triplagent.com
Responsive
30. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors
No skeumorphism.
Just keep it simple.
Kick Point kickpoint.ca
Responsive
31. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illustration.
Cyclemon cyclemon.com
Not Responsive
32. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Illustration
Give the site a print feel
by using custom illustration.
Break It Down breakitdown.ie
Not Responsive
33. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
Kolibree kolibree.com
Responsive
34. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
MSNBC msnbc.com
Responsive
35. more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Photography
Like a full-bleed print
spread, the impact is
the same on the screen.
Vilebrequin Magazine magazine.vilebrequin.com/en
Responsive
36. more: a look at 2014 design trends
#notatSXSW
MORE storytelling
MORE seamlessness
MORE aesthetics
37. more: a look at 2014 design trends
#notatSXSW
Thanks for
Attending!
facebook.com/R2integrated
@r2integrated
r2integrated.com
@annafelizatweet
@anna_feliza
Anna-Feliza Sy, Graphic Designer