54
Fresh New Look Modern Web Design Trends Marianne Kolodiy Web Designer at Yorkshire Building Society 810 May 2012 Philadelphia

Web Design Trends 2012

Embed Size (px)

DESCRIPTION

Web Design trends for 2012: - Huge images, big headings, rich typography, larger icons - Rich surfaces, gradients, shadows, sense of depth - Fixed width, fluid feel - Footer: no longer an afterthought - Interactivity: carousels, subtle animations, overlays - Fairness, ethical values, community, environment - Social media - Touch screen considerations

Citation preview

Page 1: Web Design Trends 2012

Fresh New LookModern Web Design Trends

Marianne KolodiyWeb Designer at Yorkshire Building Society

8‐10 May 2012Philadelphia

Page 2: Web Design Trends 2012

The Importance of First Impression•

Research confirms that users make aesthetic decisions about 

the overall visual impression of web pages in as little as 50  milliseconds. 

These first impressions can color

subsequent judgements of  perceived credibility, usability, and influence purchasing

decisions

“Attention web designers: You have 50 milliseconds to make a good

first 

impression.”

Lindgaard, G., G. Fernandes, and C. Dudek. Behavior

& Information Technology, 

Carleton University, Ottawa, Canada

http://www.ext.colostate.edu/conferences/ace‐netc/lindgaard.pdf

Page 3: Web Design Trends 2012
Page 4: Web Design Trends 2012

Modern Web Design Trends1. Layout: fixed, fluid, variable‐fixed, responsive design

2. Footer: no longer an afterthought

3. Huge

images, big headings, rich typography, larger icons

4. Rounded

corners 

5. Interactivity: carousels, subtle animations, overlays

6. Rich

surfaces, gradients, shadows, sense of depth

7. Fairness, ethical values, community, environment

8. Social

media

9. Touch

screen

Page 5: Web Design Trends 2012

1. Layout: Fixed or Fluid?

http://webdevrefinery.com /forums/topic/5897‐fixed‐

vs‐fluid/

fixed width

fluid width

Page 6: Web Design Trends 2012

Reality check

“Our craft is becoming a commodity

and people  in charge don’t care about the quality of the 

markup, CSS or how short our JavaScript is.  What matters is how fast

you can get it to 

market, how many people it reaches and how  cheaply

it can be built.”

Christian Heilmann, 

Developer Evangelist (London, UK)

Page 7: Web Design Trends 2012

New approach: fixed width, fluid feel

Fixed width, optimised for 1024x768 and  above.

Background stretching to the sides, giving the  design a fluid feel.

Page 8: Web Design Trends 2012
Page 9: Web Design Trends 2012

https://www.asb.co.nz

Page 10: Web Design Trends 2012

New approach: variable fixed•

The layout

is changed to best accommodate the browser 

window size. 

http://www.colly.com/

,  http://simplebits.com/

Page 11: Web Design Trends 2012
Page 12: Web Design Trends 2012
Page 13: Web Design Trends 2012

2. Footer – the underground world

No longer an afterthought 

Rich design

Larger space

Information, social media, contact details

Useful for cross‐linking and SEO

Page 14: Web Design Trends 2012

National Australia Bank  http://www.nab.com.au/

Page 15: Web Design Trends 2012

Co‐operative Bank  http://www.co‐operativebank.co.uk/

Page 16: Web Design Trends 2012

3.1. Huge images

Huge images

create a visual impact  that the visitor won’t soon forget. 

Page 17: Web Design Trends 2012
Page 18: Web Design Trends 2012
Page 19: Web Design Trends 2012
Page 20: Web Design Trends 2012

3.2. Big bold typography

Large headings

Non‐standard fonts

Simple messages

The Web Designer’s Guide to Font Replacement Methods

http://webdesign.tutsplus.com/articles/typography‐articles/a‐web‐designers‐

guide‐to‐font‐replacement‐methods/

Page 21: Web Design Trends 2012
Page 22: Web Design Trends 2012
Page 23: Web Design Trends 2012
Page 24: Web Design Trends 2012

3.3. Larger icons

Larger, richer icons with more detail

Page 25: Web Design Trends 2012

4. Rounded corners

Today

rounded corners look modern. They  suggest fluidity

and natural movement

10 years ago

straight corners were simpler to  implement and therefore very common

Page 26: Web Design Trends 2012
Page 27: Web Design Trends 2012
Page 28: Web Design Trends 2012
Page 29: Web Design Trends 2012

5.1. Interactivity: carousels

Carousels

(slideshows):                              interactive, dynamic showcase of featured 

content.

Carousels (82 examples)

http://www.smileycat.com/design_elements/carousels/

5 Big Usability Mistakes Designers Make on Carousels

http://uxmovement.com/navigation/big‐usability‐mistakes‐designers‐make‐on‐

carousels/

Page 30: Web Design Trends 2012

http://www.cheltglos.co.uk/

Page 31: Web Design Trends 2012

http://www.bnymellon.com/

Page 32: Web Design Trends 2012

http://www.stgeorge.com.au/personal

Page 33: Web Design Trends 2012

5.2. Interactivity:  interface enhancements

• overlays

• modal windows / lightbox

• collapsible panels

• mouse‐over effects 

• parallax

Page 34: Web Design Trends 2012

Help overlay

Page 35: Web Design Trends 2012

Collapsible Panels

Page 36: Web Design Trends 2012

Lightbox

/ modal window

Page 37: Web Design Trends 2012

http://www.taoeffect.com/espionage/

buttons change color

to blue on hover

Page 38: Web Design Trends 2012

https://github.com/404

parallax

effect (when user hovers over image,  multiple backgrounds start moving at different speeds)

Page 39: Web Design Trends 2012

6. Sense of depth

Rich surfaces

Gradients, shadows, reflections

Sense of depth

Creating Depth in Web Design: 5 Design Tricks

http://www.onextrapixel.com/2011/06/20/creating‐depth‐in‐web‐design‐5‐ design‐tricks/

Page 40: Web Design Trends 2012

https://www.mint.com/

Page 41: Web Design Trends 2012
Page 42: Web Design Trends 2012

http://www.wearecupcup.com/

Page 43: Web Design Trends 2012

7. Fairness

• Fairness

• Ethical

values

• Community

involvement

• Environmental

commitment

Communicating who you are

(values),  and not only what you do (products)

The only way is ethics

http://www.marketingweek.co.uk/trends/the‐only‐way‐is‐ ethics/3028974.article

Page 44: Web Design Trends 2012

http://www.co‐operativebank.co.uk/A ‘green’

section dedicated to ethics and fairness

Page 45: Web Design Trends 2012

http://www.nab.com.auNAB uses ethics

and fairness

in its marketing campaigns in an attempt to 

differentiate itself from Australia’s other big four banks

.

Page 46: Web Design Trends 2012

Nature‐related design elements

• Grass, trees, leaves and plants

• Wood and paper backgrounds 

• Hand written text

• Green colour 

10 Green Design Trends http://smashinghub.com/10‐green‐design‐trends.htm

Page 47: Web Design Trends 2012

http://www.taoeffect.com/espionage/

Page 48: Web Design Trends 2012

8. Social media

Logos

of Facebook, Twitter, YouTube make website look modern and up‐to‐date

Share

and Like

links don’t necessarily require online presence on Facebook

or Twitter

Page 49: Web Design Trends 2012
Page 50: Web Design Trends 2012
Page 51: Web Design Trends 2012

9. Touch screen considerations

No CSS hover

1024 x 768

Fat fingers

Right Handed

No Flash … Yes HTML5

Designing for Touch Screen

http://www.whatcreative.co.uk/blog/tips/designing‐for‐touch‐screen/

Page 52: Web Design Trends 2012

Summary

1.

Big

and bold (width 960px+, large footer, large images, headings and icons)

2.

Natural and green (rounded corners, rich surfaces, gradients, shadows, sense of depth,

fairness, environment)

3.

Interactive (carousels, subtle animations, social media)

Page 53: Web Design Trends 2012

Marianne Kolodiy

Web Designer and Front‐End Developer

at Yorkshire Building Society

[email protected]

http://uk.linkedin.com/in/mariannekolodiy

Page 54: Web Design Trends 2012

Look your bestWho said love is blind?

Mae West