Class 14
2010 Web Trends Report
Article from: http://webdesignledger.com/tips/web-design-trends-for-2010
1. Oversized Logos/ Headers
• Splash pages are so yesterday.
To make an unforgettable
impression on the visitor, the
trend...
2. Sketch/ Hand-drawn Design
Main Idea: Sketch becomes an elemental part of corporate design
3. ALL CAPS
4. Typography
5. One Page Layouts
6. Huge Images
7. Change of Perspective
8. Interactive/ Intuitive Design
9. Modal Boxes
• Modal boxes are a
trend that’s picking up
steam and will be
virtually everywhere in
2010. A modal box is
...
10. Minimalism
11. Oversized Footer
12. Retro
13. Intro Boxes
“Hi, my name is…” will find an
even bigger stage in 2010 as
designers recognize the
beautiful simplicity o...
14. Magazine Layouts
As more and more people migrate from
the comforts of traditional press to
online infotainment, design...
http://zerozeroproject.com/
http://ribot.co.uk/
http://www.ekasharashidze.com/Vita.html
http://www.tourismus-bw.de/
http://www.chadhagen.com/#348992/Strange-Science
http://wearesynapse.com/
http://www.chipotle.com/en-US/Default.aspx
http://vinetype.com/
http://www.polodivani.cz/
http://www.idsigner.com/
http://eighthourday.com/
http://dolcetouch.com/
http://www.lommebags.com/
http://www.wearableprint.co.uk/
http://www.wfp.org/
http://www.thisisdisplay.org/
http://www.rememberhope.com/
http://www.foodzine.gr/
http://www.fortherecord.simonfosterdesign.com/
http://www.underconsideration.com/quipsologies/
http://www.participatorypolitics.org/
http://www.commsprovider.co.uk/
http://www.aurevoirsimone.com/
http://kofiannanfoundation.org/
Why Avoid Flash?
• Take a look at this fabulous example.
• http://www.jonathanyuen.com/main.html
• What does it lack?
Coming Soon!
Layouts-using layout framework
Popular Layout Framework
• 960.gs
• Blueprint.org
• Grid Designer
Assignment due 11/2/2010
• Go to http://cssremix.com/
• Explore couple sites focusing on design trends, interactivity, nav...
Class14
Class14
Upcoming SlideShare
Loading in...5
×

Class14

291

Published on

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
291
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Class14

  1. 1. Class 14
  2. 2. 2010 Web Trends Report Article from: http://webdesignledger.com/tips/web-design-trends-for-2010
  3. 3. 1. Oversized Logos/ Headers • Splash pages are so yesterday. To make an unforgettable impression on the visitor, the trend for 2010 will be oversized logos on an equally oversized header. These types of headers can take up the entire screen, but with one important note. Visitors will not need to click anything, just scroll down. Visitors often having a clicking phobia (due to years of poor navigation), so big headers do the job of a splash page without forcing your visitors to click anything. • Main Idea: Huge headers that make your visitors remember you.
  4. 4. 2. Sketch/ Hand-drawn Design Main Idea: Sketch becomes an elemental part of corporate design
  5. 5. 3. ALL CAPS
  6. 6. 4. Typography
  7. 7. 5. One Page Layouts
  8. 8. 6. Huge Images
  9. 9. 7. Change of Perspective
  10. 10. 8. Interactive/ Intuitive Design
  11. 11. 9. Modal Boxes • Modal boxes are a trend that’s picking up steam and will be virtually everywhere in 2010. A modal box is like the popup’s more sophisticated older brother– it’s smooth, good looking and popular. Modal boxes are so easy to design and easy to use, making them the perfect solution for any designer concerned with usability.
  12. 12. 10. Minimalism
  13. 13. 11. Oversized Footer
  14. 14. 12. Retro
  15. 15. 13. Intro Boxes “Hi, my name is…” will find an even bigger stage in 2010 as designers recognize the beautiful simplicity of introducing yourself to your visitor. If you’re struggling with making a creative “About” page, the intro box will be your best bet. It forces you to condense who you are into a relatively small about of space. In 2010, intro boxes will push its own boundaries. Instead of the boring hello, designers will find new pick- up lines. And, instead of the left-flanked intro block, 2010 will see boxes in unusual placement, perhaps even in the middle of a page. Main Idea: New ways to say “hello.”
  16. 16. 14. Magazine Layouts As more and more people migrate from the comforts of traditional press to online infotainment, designers are challenged to welcome them in with an easy transition. There is a move toward the magazine layout, where information is carefully organized on a single home page, giving the visitor an opportunity to explore as interested. The familiar layout will appeal to appeal to anyone who’s ever read a magazine or newspaper, but it will also be easier to use– no flipping pages! In 2010, magazine layout will become very huge for blogs in particular. Main Idea: Magazine layouts will be used for infotainment sites.
  17. 17. http://zerozeroproject.com/
  18. 18. http://ribot.co.uk/
  19. 19. http://www.ekasharashidze.com/Vita.html
  20. 20. http://www.tourismus-bw.de/
  21. 21. http://www.chadhagen.com/#348992/Strange-Science
  22. 22. http://wearesynapse.com/
  23. 23. http://www.chipotle.com/en-US/Default.aspx
  24. 24. http://vinetype.com/
  25. 25. http://www.polodivani.cz/
  26. 26. http://www.idsigner.com/
  27. 27. http://eighthourday.com/
  28. 28. http://dolcetouch.com/
  29. 29. http://www.lommebags.com/
  30. 30. http://www.wearableprint.co.uk/
  31. 31. http://www.wfp.org/
  32. 32. http://www.thisisdisplay.org/
  33. 33. http://www.rememberhope.com/
  34. 34. http://www.foodzine.gr/
  35. 35. http://www.fortherecord.simonfosterdesign.com/
  36. 36. http://www.underconsideration.com/quipsologies/
  37. 37. http://www.participatorypolitics.org/
  38. 38. http://www.commsprovider.co.uk/
  39. 39. http://www.aurevoirsimone.com/
  40. 40. http://kofiannanfoundation.org/
  41. 41. Why Avoid Flash? • Take a look at this fabulous example. • http://www.jonathanyuen.com/main.html • What does it lack?
  42. 42. Coming Soon! Layouts-using layout framework Popular Layout Framework • 960.gs • Blueprint.org • Grid Designer
  43. 43. Assignment due 11/2/2010 • Go to http://cssremix.com/ • Explore couple sites focusing on design trends, interactivity, navigation structure and fun elements. • Select 3 websites that has design/ interactive elements that you would like to use for your website. • Create a document that has the following information: – a screenshot of the site. (Mac shortcut: Control-Command-Shift-4) – Explain which element you would like to use and why. Explain how you would like to customize it to your site.

×