Contemporary Trends In Web Design
Upcoming SlideShare
Loading in...5
×
 

Contemporary Trends In Web Design

on

  • 1,419 views

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

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

Statistics

Views

Total Views
1,419
Views on SlideShare
1,419
Embed Views
0

Actions

Likes
2
Downloads
9
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • “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 Contemporary Trends In Web Design Presentation Transcript

  • CONTEMPORARY Caitlin Bar ta Raynald Mir villeTRENDS IN WEB DESIGN Kenny Rosenberg
  • 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
  • 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.
  • 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
  • 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
  • 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/
  • 960 GRIDSYSTEM:12 COLUMN
  • 12-COLUMN SKETCH SHEET
  • EXAMPLES OF TRENDS
  • 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.
  • CIRCLESExample: Cake Sweet Cake
  • RESPONSIVE WEB DESIGNExample: The Boston Globe: http://bostonglobe.com
  • RESPONSIVE WEB DESIGNExample: The Boston Globe
  • RESPONSIVE WEB DESIGNExample: The Boston Globe
  • 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.
  • SCROLLING ANIMATIONSExample: Cadbur ys Joyville - http://joyville.cadbury.com.au
  • SCROLLING ANIMATIONSExample: Cadbury’s Joyville
  • SCROLLING ANIMATIONSExample: Cadbury’s Joyville
  • SCROLLING ANIMATIONSExample: Cadbury’s Joyville
  • SCROLLING ANIMATIONSExample: Cadbury’s Joyville
  • 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 .
  • TRENDS, FADS,INNOVATION, AND INSPIRATION
  • 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
  • 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?
  • FAD: GLOSSY BUTTONS AND LOGOS
  • FAD: SPLASH PAGES
  • FAD: SOCIAL MEDIA OVERLOAD
  • INNOVATIONInnovation is elusive and subjective especially in design.Can we be simultaneously current with the trends and innovative?
  • INSPIRATIONSites dedicated to finding inspiration: Dribbble (dribbble.com) Discover Usabilla (discover.usabilla.com ) Little Big Details (littlebigdetails.com)
  • INSPIRATION For Illustrative Purposes Only
  • INSPIRATION For Illustrative Purposes Only
  • INSPIRATION
  • INSPIRATION
  • INSPIRATION
  • INNOVATION For Illustrative Purposes Only
  • INNOVATION For Illustrative Purposes Only
  • CONCLUSION History and technology drivers of trends Examples of trends:  Circles  Responsive Design  Scrolling Animations Fads vs. Trends How to innovate through inspiration
  • 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