Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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
Nächste SlideShare
Wird geladen in …5
×

Web Design Trends 2014

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

  • Loggen Sie sich ein, um Kommentare anzuzeigen.

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

×