2014 design trends
TRANSCRIPT
technical.ly baltimore
MORE: A Look at 2014 Design Trends
MORE Storytelling
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
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
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
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
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
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
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
more: a look at 2014 design trends
#notatSXSW
More Storytelling
Easy Steps Details split into short sections for easy reading.
Scytale scytale.pt
Responsive
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
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
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
MORE Seamlessness
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
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
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
more: a look at 2014 design trends
#notatSXSW
More Seamlessness
Simple Navigation Navigation that’s minimal, yet accessible.
frog design frogdesign.com
Responsive
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
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
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
MORE Aesthetics
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Parallax Scrolling Create movement and depth on your 2D screen.
Adcade adcade.com
Responsive
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
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
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
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
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
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors No skeumorphism. Just keep it simple.
TriplAgent triplagent.com
Responsive
more: a look at 2014 design trends
#notatSXSW
More Aesthetics
Flat Colors No skeumorphism. Just keep it simple.
Kick Point kickpoint.ca
Responsive
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
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
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
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
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
more: a look at 2014 design trends
#notatSXSW
MORE storytelling MORE seamlessness MORE aesthetics
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