web design trends
DESCRIPTION
Find out more about how design for the web has changed and evolved in 2011TRANSCRIPT
![Page 1: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/1.jpg)
WEB DESIGN TRENDS 2011
An collection of online opinions
![Page 2: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/2.jpg)
2011 is not about beauty, it’s about function.Jacqueline Thomas
More user-friendly, less colorful and with fewer whistles and bells, but still capable of delivering multimedia rich experience to the users.Inseven designs
...the most effective pages had less than 3 critical elements on them. Designers are using softer colors and pages are taking on a pastel revolution of minimalism.Benr Rama
![Page 3: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/3.jpg)
Web fonts, social sharing, personalized content and much more emphasis on faster loading speeds and optimization for mobile devices.Jacob Cass
Content will be king in 2011.Andy Sowards
![Page 4: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/4.jpg)
Pantone Colour of the Year!
PANTONE 18-2120 Honeysuckle: A Vibrant, Energetic Hue. A Color for All Seasons. Courageous. Confident. Vital.
A brave new color, for a brave new world.
Let the bold spirit of Honeysuckle infuse you, lift you and carry you through the year. It's a color for every day - with nothing "everyday" about it.
![Page 5: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/5.jpg)
Mobile
Web designs in multiple viewports Designing for touch screens Using liquid/fluid layouts & responsive design Reinterpretation of the old web 2.0 look... Simple icons & front perspective
vv
![Page 6: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/6.jpg)
CSS3 / HTML5
Becoming more main stream
New browser features means that design elements which previously took hours of design with Photoshop - like drop shadows and rounded corners - can now be created with a few keystrokes. Designers can finally use professional fonts without the clunky work-arounds that have been used in the past and the long awaited web canvas will allow designers to manipulate graphics in the browser rather than merely reshuffling pre-fabricated images. For designers these combined changes are like upgrading from scissors and glue to using paint and canvas.
New technology... A revolution in web design means web sites will soon combine the richness of magazine layouts with the interactivity of computer games.
Interactive pages being built with little or no Flash.
![Page 7: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/7.jpg)
CSS3 / HTML5
...in 2011 the difference between designers who simply design and let the developers sort through the implementation and those that understand the full process and can design thoughtful CMS friendly designs will become even more evident.Patrick McNeil
![Page 8: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/8.jpg)
Typography
Richer and stronger typography with webfonts becoming main stream & the growth of font-replacement technology Reducing kerning and tracking values for better mobile visibility SubTrend: Print Design Inspired Sites
![Page 13: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/13.jpg)
Grids Even more focus on grid-based design – more flexible, breaking away from traditional layouts (header, content column, sidebar, footer) Single page designs Magazine like design “Editorial layout" which will enable the visitors to find information on the website more easily.
![Page 15: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/15.jpg)
MinimalSimple Colour SchemesCleaner interfaces
![Page 18: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/18.jpg)
Depth Perception
Depth Perception in Web Design - http://www.plantate.net/ Parallax Scrolling - http://www.rowtothepole.com/
![Page 19: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/19.jpg)
Desktop Application UI Influence
Websites can often look like an application....Everything from modal windows, context menus, OS inspired buttons, and more are being brought into the web design environment in new and exciting ways… The end result: sites that feel more user friendly and natural.
![Page 20: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/20.jpg)
Massive Images
Better image optimization, faster internet connections, and smarter loading methods mean larger images being used.Content-relevant & part of the experience
![Page 23: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/23.jpg)
Texture!
● More designs are starting to feel “touchable”● New style of combining grungy textures along with clean interfaces and bold typefaces
![Page 28: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/28.jpg)
Constant Connection
● Feeds / activity● Social Media Convergence
![Page 29: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/29.jpg)
Crispy, pixel perfect web elements
● Because of multiple resolutions for different devices●Same content but with much more detail and richness
![Page 32: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/32.jpg)
And some more...
Thumbnail design awareness – Google
Really big images & oversized logos/headers are a new effort in branding for
websites
Lighter & brighter designs
More interactive web apps (inspired by iPhone apps)
Simple legible symmetrical logo design
Letterpress typography continues...
Attention to details with sewn-like elements, badges and banners
![Page 33: Web Design Trends](https://reader034.vdocuments.us/reader034/viewer/2022042609/568c3bfb1a28ab0235ac31a4/html5/thumbnails/33.jpg)
Sources
http:///www.brightlabs.com.au/page/Web-Design-Blog/Website_Trends_2011
http://www.webdesignerdepot.com/2011/01/web-design-predictions-for-2011/
http://webdesign.tutsplus.com/articles/design-theory/the-state-of-web-design-trends-2011-annual-edition/
http://webdesignledger.com/tips/web-design-trends-in-2011
http://www.webdesignshock.com/review/design-trends-for-2011/
http://www.inseven.ca/wp/advice-news-opinions/web-design-trends-in-2011.html