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

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. Today
- About me
- Responsive web design
- 5 major trends
- Final thoughts
Web Design Trends 2014 - www.tobiasgebauer.com

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

4. About me
- Web Developer for
-
15 years
Online Marketing
I love Web Design
Web Design Trends 2014 - www.tobiasgebauer.com

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

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

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

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

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

13. http://theme-fusion.com/avada/

14. http://hogash-demo.com/kallyas_wp/

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

16. Graceful Degradation
- Bad performance
- “Weak” systems
-
are not
considered
Difficult to
upgrade
Web Design Trends 2014 - www.tobiasgebauer.com

17. Mobile first in 2013
- Mobile first and
content first
approach with
progressive
enhancement
became popular
Web Design Trends 2014 - www.tobiasgebauer.com

18. Content First
- Concise content
- Optimal
-
presentation on
all devices
Best performance
Easy extendable
Content
->
Design
Web Design Trends 2014 - www.tobiasgebauer.com
->
Behavior

19. http://wootten.com.au/process/

20. http://wootten.com.au/process/

21. http://myrainbownursery.co.uk/programmes

22. http://myrainbownursery.co.uk/programmes

23. http://kinhr.com/

24. http://kinhr.com/

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

26. #3
Trends 2014
Web Design Trends 2014 - www.tobiasgebauer.com

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

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

29. https://signwithenvoy.com/

30. https://signwithenvoy.com/

31. http://www.michieldegraaf.com/tone

32. http://www.michieldegraaf.com/tone

33. http://focuslabllc.com/services

34. http://focuslabllc.com/services

35. http://www.martinasperl.at/

36. http://www.martinasperl.at/

37. http://sidigital.co/lab

38. http://sidigital.co/lab

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

40. http://whiteboard.is/
http://www.squarespace.com/stories/
http://www.internet.org/
https://www.numbrs.com/uk
http://getgoingtoday.org/

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

42. #4
Thoughts
Web Design Trends 2014 - www.tobiasgebauer.com

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

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

45. Thank you!
- See the presentation here
www.slideshare.net/tobiasgebauer47/
webdesign-trends2014
Web Design Trends 2014 - www.tobiasgebauer.com