web design trends 2014

45
Web Design Trends 2014 5 major trends and how you should use them for your business. Web Design Trends 2014 - www.tobiasgebauer.com

Upload: tobias-gebauer

Post on 17-Aug-2014

4.233 views

Category:

Design


2 download

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

Page 1: Web Design Trends 2014

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

Web Design Trends 2014 - www.tobiasgebauer.com

Page 2: Web Design Trends 2014

Today

- About me- Responsive web design- 5 major trends- Final thoughts

Web Design Trends 2014 - www.tobiasgebauer.com

Page 3: Web Design Trends 2014

#1About

Web Design Trends 2014 - www.tobiasgebauer.com

Page 4: Web Design Trends 2014

About me

-Web Developer for 15 years- Online Marketing - I love Web Design

Web Design Trends 2014 - www.tobiasgebauer.com

Page 5: Web Design Trends 2014

About meWorking at 4c media www.cccc.de in Germany

Web Design Trends 2014 - www.tobiasgebauer.com

Page 6: Web Design Trends 2014

#2Responsive

Web Design Trends 2014 - www.tobiasgebauer.com

Page 7: Web Design Trends 2014

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

Page 8: Web Design Trends 2014

Technology

- Tablets & Smartphones- New devices monthly- Desktop 22” or more- No one screen size has

more than 20% of the market share

Web Design Trends 2014 - www.tobiasgebauer.com

(Source: Mobify Research & Development)

Page 9: Web Design Trends 2014
Page 10: Web Design Trends 2014
Page 11: Web Design Trends 2014

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

Page 12: Web Design Trends 2014

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

Page 13: Web Design Trends 2014

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

Page 15: Web Design Trends 2014

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

Page 16: Web Design Trends 2014

Graceful Degradation

- Bad performance- “Weak” systems

are not considered- Difficult to

upgrade

Web Design Trends 2014 - www.tobiasgebauer.com

Page 17: Web Design Trends 2014

Mobile first in 2013

- Mobile first and content first approach with progressive enhancement became popular

Web Design Trends 2014 - www.tobiasgebauer.com

Page 18: Web Design Trends 2014

Content First

- Concise content- Optimal

presentation on all devices- Best performance- Easy extendable

Web Design Trends 2014 - www.tobiasgebauer.com

Content -> Design Behavior->

Page 19: Web Design Trends 2014

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

Page 20: Web Design Trends 2014

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

Page 23: Web Design Trends 2014

http://kinhr.com/

Page 24: Web Design Trends 2014

http://kinhr.com/

Page 25: Web Design Trends 2014

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

Page 26: Web Design Trends 2014

#3Trends 2014

Web Design Trends 2014 - www.tobiasgebauer.com

Page 27: Web Design Trends 2014

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

Page 28: Web Design Trends 2014

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

Page 29: Web Design Trends 2014

https://signwithenvoy.com/

Page 30: Web Design Trends 2014

https://signwithenvoy.com/

Page 35: Web Design Trends 2014

http://www.martinasperl.at/

Page 36: Web Design Trends 2014

http://www.martinasperl.at/

Page 37: Web Design Trends 2014

http://sidigital.co/lab

Page 38: Web Design Trends 2014

http://sidigital.co/lab

Page 39: Web Design Trends 2014

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

Page 40: Web Design Trends 2014

http://getgoingtoday.org/

http://whiteboard.is/

https://www.numbrs.com/ukhttp://www.squarespace.com/stories/http://getgoingtoday.org/http://getgoingtoday.org/

http://www.internet.org/

Page 41: Web Design Trends 2014

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

Page 42: Web Design Trends 2014

#4Thoughts

Web Design Trends 2014 - www.tobiasgebauer.com

Page 43: Web Design Trends 2014

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

Page 44: Web Design Trends 2014

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