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.

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/

7. 960 GRID
SYSTEM:
12 COLUMN

8. 12-COLUMN SKETCH SHEET

9. EXAMPLES OF TRENDS

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

26. FAD: SPLASH PAGES

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