Contemporary Trends In Web Design
Download as PPTX, PDF•2 likes•1,341 views
Web design has evolved from Web 1.0 to now based on technological advances. Some key trends discussed include responsive design, use of CSS instead of images for elements like rounded corners, and scrolling animations. The document cautions that fads are short-lived styles while trends have a longer lasting impact. It provides examples of both and emphasizes finding a balance between following trends and innovating with inspiration from other designs.
Contemporary Trends In Web Design
- 1. CONTEMPORARY Caitlin Bar ta Raynald Mir ville TRENDS IN WEB DESIGN Kenny Rosenberg
- 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. 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. 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. 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. 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/
- 10. CIRCLES Design 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. CIRCLES Example: Cake Sweet Cake
- 12. RESPONSIVE WEB DESIGN Example: The Boston Globe: http://bostonglobe.com
- 13. RESPONSIVE WEB DESIGN Example: The Boston Globe
- 14. RESPONSIVE WEB DESIGN Example: The Boston Globe
- 15. RESPONSIVE WEB DESIGN What 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 phones Design principles in play - No horizontal scrolling in any situation means the page is easier to use. - One responsive web design = multiple designs.
- 16. SCROLLING ANIMATIONS Example: Cadbur y's Joyville - http://joyville.cadbury.com.au
- 17. SCROLLING ANIMATIONS Example: Cadbury’s Joyville
- 18. SCROLLING ANIMATIONS Example: Cadbury’s Joyville
- 19. SCROLLING ANIMATIONS Example: Cadbury’s Joyville
- 20. SCROLLING ANIMATIONS Example: Cadbury’s Joyville
- 21. SCROLLING ANIMATIONS What 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 isn't blocked by the animation. - Provide navigation for skipping to sections of the page .
- 22. TRENDS, FADS, INNOVATION, AND INSPIRATION
- 23. LONG TERM TRENDS VS. FADS Trends are longer lasting: Smaller changes over time Sometimes related to evolution of technology Fads are short lived: Fleeting style or behavior What's popular right now Possibly a misuse of technology
- 24. FADS How 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. FAD: GLOSSY BUTTONS AND LOGOS
- 27. FAD: SOCIAL MEDIA OVERLOAD
- 28. INNOVATION Innovation is elusive and subjective especially in design. Can we be simultaneously current with the trends and innovative?
- 29. INSPIRATION Sites dedicated to finding inspiration: Dribbble (dribbble.com) Discover Usabilla (discover.usabilla.com ) Little Big Details (littlebigdetails.com)
- 30. INSPIRATION For Illustrative Purposes Only
- 31. INSPIRATION For Illustrative Purposes Only
- 32. INSPIRATION
- 33. INSPIRATION
- 34. INSPIRATION
- 35. INNOVATION For Illustrative Purposes Only
- 36. INNOVATION For Illustrative Purposes Only
- 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. 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
Editor's Notes
- #3: “spacer” GIF: 1x1 pixel transparent images
- #24: So how do you know if it’s a trend or a fad?
- #25: How can you know if something is a trend or a fad,
- #27: On the left – visually stunning but usability nightmare. What do you click?On the right – old school. Low vs high bandwidth sites.
- #29: Creating something new or creative within a particular problem space.
- #30: Dribble – show and tell for designersDiscoverUsabilla – pinterest for web designersLittle Big Details – inspiration of the day