Upload
marianne-kay
View
19.108
Download
1
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
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
http://uk.linkedin.com/in/mariannekolodiy
Look your bestWho said love is blind?
‐
Mae West