conversion design: web design trends 2014

28
Web design trends 2014 Conversion design Jaanika Kivilo, WSI Online World

Upload: wsi-online

Post on 28-Jan-2015

110 views

Category:

Design


4 download

DESCRIPTION

There is no discussion whether content is king or not. But where does it leave web design? Does it matter that content takes over and web design comes second? Not at all! The expectations of web design are higher than ever. The more we focus on copy, the more we need to take care of how the copy is presented. Design has a leading role here. WSI Online World web designer Tanel Eero has brought out 4 major trends in web design.

TRANSCRIPT

Page 1: Conversion design: web design trends 2014

Web design trends 2014Conversion designJaanika Kivilo, WSI Online World

Page 2: Conversion design: web design trends 2014

Why good design matters?

You can create first impression only once!Which one the visitor prefers?

©2014 WSI. All rights reserved.

Page 3: Conversion design: web design trends 2014

First impression IS important

• 94% of first impressions are design related

• Visual appeal can be assessed within 50 ms

• Over 70% of web users will make a judgment on the credibility of a company or business based on its website design

• Over 65% of online shoppers agree that they will not trust a website that has an unprofessional appearance

©2014 WSI. All rights reserved.

Page 4: Conversion design: web design trends 2014

Advantages of a good design

• positive first impression• shows your credibility• can help people find your business• gives your SEO a purpose• increases your website conversions

Page 5: Conversion design: web design trends 2014

Conversion design

Conversion is leading your contacts through the websites sales funnel and turning them into customers. Conversion can be a sale, collecting contact information, downloading free resources etc. that’s important for your business.

Conversion design is web design that guides the visitor towards completing that one specific action, using persuasive design and psychological triggers to increase conversions.

Page 6: Conversion design: web design trends 2014

Conversion design characteristics• Targeted to a specific segment

• Logical website structure

• Easy navigation

• Using negative space

• Focus on most important information

• Sales funnel

• Using CTA-s

• Fast load time

Page 7: Conversion design: web design trends 2014

Conversion design in web design trends

Page 8: Conversion design: web design trends 2014

How to make conversion design?User experience first:

•credibility•customer habits•psychological triggers•media usage•color psychology•website architecture•buyer personas•A/B testing

Page 9: Conversion design: web design trends 2014

Conversion design in web design trends• Web design should make the web experience

enjoyable and easy• Design trends keep the web fesh• 4 major influencers:

1. less text, more visuals2. simplicity, clarity, conciseness3. unexpected techniques to stand out4. user experience first

Page 10: Conversion design: web design trends 2014

1. Less text, more visuals

People don’t read but skim webpages!• Most people scroll through only 50-60% of an

article page (Chartbeat)• Less than 20% of the text content is actually read

on an average web page (Jakob Nielsen)• Well structured website motivates to read more

• More visual content is used, popular trend is infographic type of content.

Page 11: Conversion design: web design trends 2014

Example: Mac Pro

Page 12: Conversion design: web design trends 2014

2. Simplicity, clarity, consciousness• Simple elegance• Minimalist graphics• Large clean space• Lots of “air”• Carefully chosen details• Web 2.0 is so yesterday • The trend is flat design

User experience first!

Page 13: Conversion design: web design trends 2014

Example: WSI Online World

Page 14: Conversion design: web design trends 2014

Example: Hea Tava

Page 15: Conversion design: web design trends 2014

3. Unexpected techniques to stand out• Parallax• Animated elements• Typography• Single page solutions

Page 16: Conversion design: web design trends 2014

Parallax

• Playful, keeps the visitor entertained• Some elements move, others stay on the surface• Strong visual wow-effect• Unique and outstanding solutions• Bigger engagement• Used mostly by big brands or creative businesses

Page 17: Conversion design: web design trends 2014

Example: Numero10

NB! Visit the site to get full experience! http://www.numero10.ch/fr/home

Page 18: Conversion design: web design trends 2014

Animations

• HTML5 and CSS3 solutions get more popular• Different moving elements i.e.:

• scattering• shifting• scaling• turning

• Make the website interesting • Rise engagement• Catch more attention• Focus on different content elements

Page 19: Conversion design: web design trends 2014

Example: Väikelinna detektiivid

NB! Visit the site to get full experience! http://detektiivid.ee/

Page 20: Conversion design: web design trends 2014

Typography

• Part of the web design, copy=design• headings• body text• buttons • etc.

• New fonts, font sizes, spacing and colours

Page 21: Conversion design: web design trends 2014

Example: Gather.ly

Page 22: Conversion design: web design trends 2014

Single page

• Web is a presentation rather than a yellow pages• Content is on single page only• Separate sections - information is distributed in a

logical order• Navigation through scrolling or via anchor texts

(primary for user experience)• Great solution for compact pages • 50/50 solutions

Page 23: Conversion design: web design trends 2014

Example: YourDigitalStory

NB! Visit the site to get full experience! http://yourdigitalstory.com/home

Page 24: Conversion design: web design trends 2014

Example: AlterMedia

NB! Visit the site to get full experience! http://altermedia.ee/

Page 25: Conversion design: web design trends 2014

4. User experience first

• Familiar layout• Persistent style and branding• Elements that support content• Sales funnel• Responsive solutions

Design doesn’t kill the UX!

Page 26: Conversion design: web design trends 2014

Example: Kalev Spa

Page 27: Conversion design: web design trends 2014

Conclusion

Conversion centred design is oriented to offer intuitive user experience and make the information easy to access.

Simple navigation and logical streucture guides the visitor towards completing that one specific action to increase conversions.

Conversion centered website brings your business the results you desire!