web design trends 2012

Fresh New LookModern Web Design Trends

Marianne KolodiyWeb Designer at Yorkshire Building Society

8‐10 May 2012Philadelphia

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

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

1. Layout: Fixed or Fluid?

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

vs‐fluid/

fixed width

fluid width

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)

New approach: fixed width, fluid feel

•

Fixed width, optimised for 1024x768 and  above.

•

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

https://www.asb.co.nz

New approach: variable fixed•

The layout

is changed to best accommodate the browser 

window size. 

http://www.colly.com/

,  http://simplebits.com/

2. Footer – the underground world

•

No longer an afterthought 

•

Rich design

•

Larger space

•

Information, social media, contact details

•

Useful for cross‐linking and SEO

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

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

3.1. Huge images

Huge images

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

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/

3.3. Larger icons

Larger, richer icons with more detail

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

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/

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

http://www.bnymellon.com/

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

5.2. Interactivity:  interface enhancements

• overlays

• modal windows / lightbox

• collapsible panels

• mouse‐over effects 

• parallax

Help overlay

Collapsible Panels

Lightbox

/ modal window

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

‐

buttons change color

to blue on hover

https://github.com/404

‐

parallax

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

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/

https://www.mint.com/

http://www.wearecupcup.com/

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

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

section dedicated to ethics and fairness

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

.

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

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

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

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/

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)

Marianne Kolodiy

Web Designer and Front‐End Developer

at Yorkshire Building Society

mkolodiy@ybs.co.uk

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

Look your bestWho said love is blind?

‐

Mae West