Web Design Trends 2012
-
Upload
marianne-kay -
Category
Design
-
view
19.108 -
download
1
description
Transcript of Web Design Trends 2012
![Page 1: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/1.jpg)
Fresh New LookModern Web Design Trends
Marianne KolodiyWeb Designer at Yorkshire Building Society
8‐10 May 2012Philadelphia
![Page 2: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/2.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/3.jpg)
![Page 4: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/4.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/5.jpg)
1. Layout: Fixed or Fluid?
http://webdevrefinery.com /forums/topic/5897‐fixed‐
vs‐fluid/
fixed width
fluid width
![Page 6: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/6.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/8.jpg)
![Page 10: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/10.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/11.jpg)
![Page 12: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/12.jpg)
![Page 13: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/13.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/14.jpg)
National Australia Bank http://www.nab.com.au/
![Page 15: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/15.jpg)
Co‐operative Bank http://www.co‐operativebank.co.uk/
![Page 16: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/16.jpg)
3.1. Huge images
Huge images
create a visual impact that the visitor won’t soon forget.
![Page 17: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/17.jpg)
![Page 18: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/18.jpg)
![Page 19: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/19.jpg)
![Page 20: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/20.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/21.jpg)
![Page 22: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/22.jpg)
![Page 23: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/23.jpg)
![Page 24: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/24.jpg)
3.3. Larger icons
Larger, richer icons with more detail
![Page 25: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/25.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/26.jpg)
![Page 27: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/27.jpg)
![Page 28: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/28.jpg)
![Page 29: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/29.jpg)
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 33: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/33.jpg)
5.2. Interactivity: interface enhancements
• overlays
• modal windows / lightbox
• collapsible panels
• mouse‐over effects
• parallax
![Page 34: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/34.jpg)
Help overlay
![Page 35: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/35.jpg)
Collapsible Panels
![Page 36: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/36.jpg)
Lightbox
/ modal window
![Page 37: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/37.jpg)
http://www.taoeffect.com/espionage/
‐
buttons change color
to blue on hover
![Page 38: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/38.jpg)
https://github.com/404
‐
parallax
effect (when user hovers over image, multiple backgrounds start moving at different speeds)
![Page 39: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/39.jpg)
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 41: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/41.jpg)
![Page 43: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/43.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/44.jpg)
http://www.co‐operativebank.co.uk/A ‘green’
section dedicated to ethics and fairness
![Page 45: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/45.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/46.jpg)
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 48: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/48.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/49.jpg)
![Page 50: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/50.jpg)
![Page 51: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/51.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/52.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/53.jpg)
Marianne Kolodiy
Web Designer and Front‐End Developer
at Yorkshire Building Society
http://uk.linkedin.com/in/mariannekolodiy
![Page 54: Web Design Trends 2012](https://reader036.fdocuments.us/reader036/viewer/2022062418/554cb4e1b4c905335b8b4e69/html5/thumbnails/54.jpg)
Look your bestWho said love is blind?
‐
Mae West