Contemporary Trends In Web Design

1,502 views

Published on

This was a presentation for SI 520: Graphic Design, at the University of Michigan.

Published in: Design
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,502
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
13
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • “spacer” GIF: 1x1 pixel transparent images
  • So how do you know if it’s a trend or a fad?
  • How can you know if something is a trend or a fad,
  • On the left – visually stunning but usability nightmare. What do you click?On the right – old school. Low vs high bandwidth sites.
  • Creating something new or creative within a particular problem space.
  • Dribble – show and tell for designersDiscoverUsabilla – pinterest for web designersLittle Big Details – inspiration of the day
  • Contemporary Trends In Web Design

    1. 1. CONTEMPORARY Caitlin Bar ta Raynald Mir villeTRENDS IN WEB DESIGN Kenny Rosenberg
    2. 2. WEB 1.0 - DESIGN ELEMENTS Positioning and alignment was done with HTML tables  Had to use “spacer” GIFs to position content GIF buttons used for promotional purposes  http://complexify.com/buttons/ <blink> <marquee> 216 “web-safe” colors
    3. 3. WEB 2.0 - DESIGN ELEMENTS Movement towards more flexibility for designers and developers Fewer tables, more CSS for arrangement Pinterest Near unlimited color palette due to technological advances Larger font sizes for legibility Rounded corners, drop shadows, textures, etc.
    4. 4. CSS3: BEFORE AND AFTER Before After Icons as images  Icons created with CSS  http://www.hongkiat.com/ Textures as images blog/coding-graphics-with- Rounded corners and css3/ drop shadows must be  Textures in CSS part of the image  http://lea.verou.me/css3p atterns/  Easy to add and change rounded corners and drop shadows on the fly
    5. 5. WHAT CHANGED? TECHNOLOGY (AND PEOPLE). HTML and CSS evolved, giving designers more and more control over their designs. People started creating and sharing tools with other designers and developers. Ex: Twitter Bootstrap: http://twitter.github.com/bootstrap/  “Recipe” or framework publically shared so you don’t have to create from scratch  As designer, need to be aware of frameworks to understand where you can be flexible in a design  Templates for icons, buttons etc which are customizable
    6. 6. 960 GRID SYSTEM BY NATHAN SMITH960 pixel width layout  Two variants: 12 and 16 columnsHelpful for planningDownload includes: CSS, sketch paper, and templates for a variety of programs, including Photoshop, Illustrator, Omnigraffle, VisioDownload: http://960.gs/
    7. 7. 960 GRIDSYSTEM:12 COLUMN
    8. 8. 12-COLUMN SKETCH SHEET
    9. 9. EXAMPLES OF TRENDS
    10. 10. CIRCLESDesign principles in play: - Circles are a way to give a website a less rigid feel. - Circles also have positive associations with other round objects.Design considerations: - Circles are less ef ficient for containing text than rectangles.
    11. 11. CIRCLESExample: Cake Sweet Cake
    12. 12. RESPONSIVE WEB DESIGNExample: The Boston Globe: http://bostonglobe.com
    13. 13. RESPONSIVE WEB DESIGNExample: The Boston Globe
    14. 14. RESPONSIVE WEB DESIGNExample: The Boston Globe
    15. 15. RESPONSIVE WEB DESIGNWhat is it? - A page designed to change its layout on-the-fly, based on the size of the window containing it . - This can apply to… - Windows of dif ferent sizes on a desktop - Tablets - Mobile phonesDesign principles in play - No horizontal scrolling in any situation means the page is easier to use. - One responsive web design = multiple designs.
    16. 16. SCROLLING ANIMATIONSExample: Cadbur ys Joyville - http://joyville.cadbury.com.au
    17. 17. SCROLLING ANIMATIONSExample: Cadbury’s Joyville
    18. 18. SCROLLING ANIMATIONSExample: Cadbury’s Joyville
    19. 19. SCROLLING ANIMATIONSExample: Cadbury’s Joyville
    20. 20. SCROLLING ANIMATIONSExample: Cadbury’s Joyville
    21. 21. SCROLLING ANIMATIONSWhat is it? - An animation triggered by scrolling up/down a webpage.Design principles in play: - More immersive.Design considerations: - This becomes less about creating good graphic designs and more about creating good animations. - Maintain unity between animation and background. - Maintain unity throughout the whole animation. - Make sure your information isnt blocked by the animation. - Provide navigation for skipping to sections of the page .
    22. 22. TRENDS, FADS,INNOVATION, AND INSPIRATION
    23. 23. LONG TERM TRENDS VS. FADSTrends are longer lasting: Smaller changes over time Sometimes related to evolution of technologyFads are short lived: Fleeting style or behavior Whats popular right now Possibly a misuse of technology
    24. 24. FADSHow can you detect a fad? Think about purpose and principles behind the design Just trying to “be cool” or does it have a timeless quality?
    25. 25. FAD: GLOSSY BUTTONS AND LOGOS
    26. 26. FAD: SPLASH PAGES
    27. 27. FAD: SOCIAL MEDIA OVERLOAD
    28. 28. INNOVATIONInnovation is elusive and subjective especially in design.Can we be simultaneously current with the trends and innovative?
    29. 29. INSPIRATIONSites dedicated to finding inspiration: Dribbble (dribbble.com) Discover Usabilla (discover.usabilla.com ) Little Big Details (littlebigdetails.com)
    30. 30. INSPIRATION For Illustrative Purposes Only
    31. 31. INSPIRATION For Illustrative Purposes Only
    32. 32. INSPIRATION
    33. 33. INSPIRATION
    34. 34. INSPIRATION
    35. 35. INNOVATION For Illustrative Purposes Only
    36. 36. INNOVATION For Illustrative Purposes Only
    37. 37. CONCLUSION History and technology drivers of trends Examples of trends:  Circles  Responsive Design  Scrolling Animations Fads vs. Trends How to innovate through inspiration
    38. 38. RESOURCES http://en.wikipedia.org/wiki/Web_1.0 http://computer.howstuffworks.com/web -101.htm http://en.wikipedia.org/wiki/Web_colors http://www.webdesignfromscratch.com/web -design/web-2-0-design-style-guide/ http://complexify.com/buttons/ http://www.hongkiat.com/blog/coding -graphics-with-css3/ http://lea.verou.me/css3patterns / http://en.wikipedia.org/wiki/Web_1.0 http://computer.howstuffworks.com/web -101.htm http://en.wikipedia.org/wiki/Web_colors http://www.webdesignfromscratch.com/web -design/web-2-0-design-style-guide/ http://complexify.com/buttons/ http://www.hongkiat.com/blog/coding -graphics-with-css3/ http://lea.verou.me/css3patterns / http://bostonglobe.com http://www.cadburydairymilk.co.uk http://webdesignledger.com/tips/web -design-trends-in-2012 http://uxdesign.smashingmagazine.com/2012/03/15/symptoms -of-epidemic-web-design-trends http://www.awwwards.com/30-great-websites-with-parallax-scrolling.html http://99designs.com/designer -blog/2012/06/01/6-web-design-trends-that-are-here-to-stay/ http://uxdesign.smashingmagazine.com/2007/10/11/splash -pages-do-we-really-need-them/ http://www.publish.com/c/a/Web-Design/Beware-the-Web-Fads-of-Yesteryear http://thenextweb.com/dd/2012/04/23/searching -for-design-inspiration-heres-97-of-the-best- places-too-look/ http://discover.usabilla.com http://www.dribbble.com

    ×