Web Design Trends 2014
5 major trends and how you should use
them for your business.

Web Design Trends 2014 - www.tobiasg...
Today
- About me
- Responsive web design
- 5 major trends
- Final thoughts

Web Design Trends 2014 - www.tobiasgebauer.com
#1
About

Web Design Trends 2014 - www.tobiasgebauer.com
About me
- Web Developer for
-

15 years
Online Marketing
I love Web Design

Web Design Trends 2014 - www.tobiasgebauer.co...
About me
Working at
4c media
www.cccc.de
in Germany

Web Design Trends 2014 - www.tobiasgebauer.com
#2
Responsive

Web Design Trends 2014 - www.tobiasgebauer.com
Mobile Website
- Parallel website besides the main website
- Different content
- Optimized for a few devices
- m.yourwebit...
Technology
- Tablets & Smartphones
- New devices monthly
- Desktop 22” or more
- No one screen size has
more than 20% of t...
Responsive Web Design
- First mentioned 2010
-

by Ethan Marcotte
Proportion-Based Grid
CSS3 media queries
Became the stan...
Responsive vs. mobile website
- No duplicate content issues
- Completely device independent
- Full functionality and conte...
http://theme-fusion.com/avada/
http://hogash-demo.com/kallyas_wp/
Standard 2010-2012
- Website optimized for the desktop
- Too many content elements on the website
- Too long pages on smar...
Graceful Degradation
- Bad performance
- “Weak” systems
-

are not
considered
Difficult to
upgrade

Web Design Trends 2014...
Mobile first in 2013
- Mobile first and

content first
approach with
progressive
enhancement
became popular
Web Design Tre...
Content First
- Concise content
- Optimal
-

presentation on
all devices
Best performance
Easy extendable

Content

->

De...
http://wootten.com.au/process/
http://wootten.com.au/process/
http://myrainbownursery.co.uk/programmes
http://myrainbownursery.co.uk/programmes
http://kinhr.com/
http://kinhr.com/
Trends 2013
- Sticky header
- Flat design and bold colors
- CSS3 Animations and
-

parallax effects
One-Page website
Grid ...
#3
Trends 2014

Web Design Trends 2014 - www.tobiasgebauer.com
Content-Centered
“Design should never say ‘Look at me.’ It should
always say, ‘Look at this.’”
- David Craib

Web Design T...
5 major trends 2014
- Storytelling
- Big content blocks
- Bold typography and decent colors
- High-Quality pictures and vi...
https://signwithenvoy.com/
https://signwithenvoy.com/
http://www.michieldegraaf.com/tone
http://www.michieldegraaf.com/tone
http://focuslabllc.com/services
http://focuslabllc.com/services
http://www.martinasperl.at/
http://www.martinasperl.at/
http://sidigital.co/lab
http://sidigital.co/lab
Big Content Blocks
- Great for responsive web design
- Good for storytelling
- Focus the readers attention on ONE statemen...
http://whiteboard.is/

http://www.squarespace.com/stories/

http://www.internet.org/

https://www.numbrs.com/uk

http://ge...
Videos
- Perfect for storytelling
- Create emotions and a closer connection
- Users stay much longer on your website
- Vis...
#4
Thoughts

Web Design Trends 2014 - www.tobiasgebauer.com
Good Design
“Design must reflect the practical and
aesthetic in business but above all... good
design must primarily serve...
For your business
- Responsive web design is a MUST HAVE!
- Invest in high quality pictures and videos
-

and avoid stock ...
Thank you!
- See the presentation here

www.slideshare.net/tobiasgebauer47/
webdesign-trends2014

Web Design Trends 2014 -...
Web Design Trends 2014
Web Design Trends 2014
Upcoming SlideShare
Loading in...5
×

Web Design Trends 2014

4,846
-1

Published on

My presentation at http://www.informslovakia.sk/en/konferencia/daily-web-2013 about the web design trends in 2014.

Find out more here: http://designolymp.com

The major topic are:
- Responsive web design
- Content-Centered design
- Storytelling
- Bold typography and decent colors
- Videos

Published in: Design, Technology, Business
0 Comments
13 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,846
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
142
Comments
0
Likes
13
Embeds 0
No embeds

No notes for slide

Web Design Trends 2014

  1. 1. Web Design Trends 2014 5 major trends and how you should use them for your business. Web Design Trends 2014 - www.tobiasgebauer.com
  2. 2. Today - About me - Responsive web design - 5 major trends - Final thoughts Web Design Trends 2014 - www.tobiasgebauer.com
  3. 3. #1 About Web Design Trends 2014 - www.tobiasgebauer.com
  4. 4. About me - Web Developer for - 15 years Online Marketing I love Web Design Web Design Trends 2014 - www.tobiasgebauer.com
  5. 5. About me Working at 4c media www.cccc.de in Germany Web Design Trends 2014 - www.tobiasgebauer.com
  6. 6. #2 Responsive Web Design Trends 2014 - www.tobiasgebauer.com
  7. 7. Mobile Website - Parallel website besides the main website - Different content - Optimized for a few devices - m.yourwebite.com - 2007 to 2009 Web Design Trends 2014 - www.tobiasgebauer.com
  8. 8. Technology - Tablets & Smartphones - New devices monthly - Desktop 22” or more - No one screen size has more than 20% of the market share (Source: Mobify Research & Development) Web Design Trends 2014 - www.tobiasgebauer.com
  9. 9. Responsive Web Design - First mentioned 2010 - by Ethan Marcotte Proportion-Based Grid CSS3 media queries Became the standard Web Design Trends 2014 - www.tobiasgebauer.com
  10. 10. Responsive vs. mobile website - No duplicate content issues - Completely device independent - Full functionality and content - Better long-term solution - Recommended by Google Web Design Trends 2014 - www.tobiasgebauer.com
  11. 11. http://theme-fusion.com/avada/
  12. 12. http://hogash-demo.com/kallyas_wp/
  13. 13. Standard 2010-2012 - Website optimized for the desktop - Too many content elements on the website - Too long pages on smartphones and tablets - Lost control over the sequence of content (i.e. sidebar below main content) Web Design Trends 2014 - www.tobiasgebauer.com
  14. 14. Graceful Degradation - Bad performance - “Weak” systems - are not considered Difficult to upgrade Web Design Trends 2014 - www.tobiasgebauer.com
  15. 15. Mobile first in 2013 - Mobile first and content first approach with progressive enhancement became popular Web Design Trends 2014 - www.tobiasgebauer.com
  16. 16. Content First - Concise content - Optimal - presentation on all devices Best performance Easy extendable Content -> Design Web Design Trends 2014 - www.tobiasgebauer.com -> Behavior
  17. 17. http://wootten.com.au/process/
  18. 18. http://wootten.com.au/process/
  19. 19. http://myrainbownursery.co.uk/programmes
  20. 20. http://myrainbownursery.co.uk/programmes
  21. 21. http://kinhr.com/
  22. 22. http://kinhr.com/
  23. 23. Trends 2013 - Sticky header - Flat design and bold colors - CSS3 Animations and - parallax effects One-Page website Grid websites like Pinterest Web Design Trends 2014 - www.tobiasgebauer.com
  24. 24. #3 Trends 2014 Web Design Trends 2014 - www.tobiasgebauer.com
  25. 25. Content-Centered “Design should never say ‘Look at me.’ It should always say, ‘Look at this.’” - David Craib Web Design Trends 2014 - www.tobiasgebauer.com
  26. 26. 5 major trends 2014 - Storytelling - Big content blocks - Bold typography and decent colors - High-Quality pictures and videos - One-Page websites Web Design Trends 2014 - www.tobiasgebauer.com
  27. 27. https://signwithenvoy.com/
  28. 28. https://signwithenvoy.com/
  29. 29. http://www.michieldegraaf.com/tone
  30. 30. http://www.michieldegraaf.com/tone
  31. 31. http://focuslabllc.com/services
  32. 32. http://focuslabllc.com/services
  33. 33. http://www.martinasperl.at/
  34. 34. http://www.martinasperl.at/
  35. 35. http://sidigital.co/lab
  36. 36. http://sidigital.co/lab
  37. 37. Big Content Blocks - Great for responsive web design - Good for storytelling - Focus the readers attention on ONE statement - Use bold web fonts and a lot of whitespace - Separation with color - Combine with pictures Web Design Trends 2014 - www.tobiasgebauer.com
  38. 38. http://whiteboard.is/ http://www.squarespace.com/stories/ http://www.internet.org/ https://www.numbrs.com/uk http://getgoingtoday.org/
  39. 39. Videos - Perfect for storytelling - Create emotions and a closer connection - Users stay much longer on your website - Visitors perceive a higher quality of your company, product or service Web Design Trends 2014 - www.tobiasgebauer.com
  40. 40. #4 Thoughts Web Design Trends 2014 - www.tobiasgebauer.com
  41. 41. Good Design “Design must reflect the practical and aesthetic in business but above all... good design must primarily serve people.” - Thomas J. Watson Web Design Trends 2014 - www.tobiasgebauer.com
  42. 42. For your business - Responsive web design is a MUST HAVE! - Invest in high quality pictures and videos - and avoid stock images at all Tell a story and concentrate on the benefits for your customers Expect a new web design every 2-3 years Web Design Trends 2014 - www.tobiasgebauer.com
  43. 43. Thank you! - See the presentation here www.slideshare.net/tobiasgebauer47/ webdesign-trends2014 Web Design Trends 2014 - www.tobiasgebauer.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×