Web Design Trends 2014

Download Web Design Trends 2014

Post on 17-Aug-2014

4.205 views

Category:

Design

2 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

<ul><li> Web Design Trends 2014 5 major trends and how you should use them for your business. Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> Today - About me - Responsive web design - 5 major trends - Final thoughts Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> #1 About Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> About me - Web Developer for - 15 years Online Marketing I love Web Design Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> About me Working at 4c media www.cccc.de in Germany Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> #2 Responsive Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> 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 </li> <li> Technology - Tablets &amp; Smartphones - New devices monthly - Desktop 22 or more - No one screen size has more than 20% of the market share (Source: Mobify Research &amp; Development) Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> 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 </li> <li> 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 </li> <li> http://theme-fusion.com/avada/ </li> <li> http://hogash-demo.com/kallyas_wp/ </li> <li> 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 </li> <li> Graceful Degradation - Bad performance - Weak systems - are not considered Difficult to upgrade Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> Mobile first in 2013 - Mobile first and content first approach with progressive enhancement became popular Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> Content First - Concise content - Optimal - presentation on all devices Best performance Easy extendable Content -&gt; Design Web Design Trends 2014 - www.tobiasgebauer.com -&gt; Behavior </li> <li> http://wootten.com.au/process/ </li> <li> http://wootten.com.au/process/ </li> <li> http://myrainbownursery.co.uk/programmes </li> <li> http://myrainbownursery.co.uk/programmes </li> <li> http://kinhr.com/ </li> <li> http://kinhr.com/ </li> <li> 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 </li> <li> #3 Trends 2014 Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> 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 </li> <li> 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 </li> <li> https://signwithenvoy.com/ </li> <li> https://signwithenvoy.com/ </li> <li> http://www.michieldegraaf.com/tone </li> <li> http://www.michieldegraaf.com/tone </li> <li> http://focuslabllc.com/services </li> <li> http://focuslabllc.com/services </li> <li> http://www.martinasperl.at/ </li> <li> http://www.martinasperl.at/ </li> <li> http://sidigital.co/lab </li> <li> http://sidigital.co/lab </li> <li> 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 </li> <li> http://whiteboard.is/ http://www.squarespace.com/stories/ http://www.internet.org/ https://www.numbrs.com/uk http://getgoingtoday.org/ </li> <li> 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 </li> <li> #4 Thoughts Web Design Trends 2014 - www.tobiasgebauer.com </li> <li> 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 </li> <li> 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 </li> <li> Thank you! - See the presentation here www.slideshare.net/tobiasgebauer47/ webdesign-trends2014 Web Design Trends 2014 - www.tobiasgebauer.com </li> </ul>