You are here : : Home > Free Resources > Web Design Trends 2013   

Web Design Trends 2013 - Part 6

Illustration, Social Networking Design, Circles, Blurred Backgrounds

Trend 1: Responsive web design (RWD)
Trend 2: Infinite scroll and more vertical scrolling
Trend 3: Sticky navigation/fixed headers/fixed position design elements
Trend 4: Parallax scrolling
Trend 5: HTML5 and CSS3 are here to stay

Trend 6: Flash is out for mobile website design
Trend 7: Leaner, faster, high - performance websites
Trend 8: Modular design using design process building blocks
Trend 9: Scalable web design (SWD)
Trend 10: Designing for the retina web and the mobile web
Trend 11: The beta model release - going strong
Trend 12: Thinking big - Oversized buttons, headers, background photos and text
Trend 13: Simplicity - Minimalism is better
Trend 14: Single color sites
- effectively using monochromatic color palettes
Trend 15: Illustration in web design
Trend 16: Social network badge design
Trend 17: Circles in website design
Trend 18: Blurred backgrounds

Trend 19: Single Page Websites
Trend 20: Skeuomorphic design is on its way out



Trend 15: Illustration in web design

Illustration gives web design a distinctive and unique look, and lends itself to animation and other interactive effects.  Hand-drawn typography, illustrated web elements and illustrated icons help your web design stand apart from others.

21 Fresh Examples of HTML5 in Web Design

21 Fresh Examples of HTML5 in Web Design

Animation below

http://th06.deviantart.net/fs70/PRE/i/2012/216/b/4/natsu_icon_set_by_raindropmemory-d1ckxe2.png



Trend 16 - Social Network Badge Design

The social web is growing phenomenally and web visitors now want to share not only what they’ve snapped, read or posted, but also parts of an article - say a photograph, cartoon, quote or infographic.  Social media badges are an integral part of every site and there is a huge variety to choose from.  These icons can be fixed position on the webpage so that users can easily find them and share content.

Below you can see just the tip of the iceberg in interesting social media icons - designed in origami style, or with  painted, stitched or bottle cap effects, See some unique examples here -  sticker-style, ribbon-style, jeans-pocket style price-tag style, metallic style,  coffee cup style, woven fabric style,  or designed with glowing neon text, on translucent or transparent backgrounds.  Have fun giving a distinctive look to your
social media badges! 

http://blog.iampaddy.com/wp-content/uploads/2008/11/web20rigami.gif

http://webdesignledger.com/wp-content/uploads/2009/04/social_media_icons_1.jpg

 http://fc05.deviantart.net/fs71/i/2010/114/0/5/Social_media_icons_by_ArXh.jpg
http://static.splashnology.com/articles/New_and_Free_Icons_for_Web_Designers/Free_Cute_Minimalist_Social_Media_Icons_by_Designbolts.jpg

http://www.elmargasimov.com/wp-content/uploads/2012/08/Icons.png

Free Download: Metro Social Media Icon Set

Fixed position social media icons
For consistency in media icon design throughout the site, fixed navigation is used.

social-media-design-2

In the Solid Soup website above, the social media icons are beautifully integrated with the design of the site, appearing like seasoning bags near a cup of soup.

Moonbeam Illustrations shows the social media icons as part of the footer design.

The Filcka site shows social media icons as paintings on a wall, in colors to match the site design.

 

Trend 17 - Circles in Website Design

Circles are easy on the eye and break the monotony of boxy websites which echo the frame of the smartphone or computer they are viewed on.



Notice the way the circles neatly flip on Kentwool’s homepage to reveal text.

On the Dotmick site the images in the circles turn to color on rollover and a network of fine lines follows the mouse movement, encouraging viewer engagement.

Gene’s Sausage Shop uses the circle effectively to call attention to the brand name.

Teixido’s site uses visuals in circles to convey information about different parts of the work process they follow, which results in happy clients.



On their website, Brave Nu Digital puts the spotlight on making creative ideas happen.

The Eye Styles site keeps the focus on all the different brands of eyewear they offer, using letters inside colourful circles.  On rollover, the products/brands are seen and on clicking the circles, more information is given about each.

The arrows in the Kait Bos website draw attention to the designer’s work. The circles direct the eye to the logo and the person.

The websites of  Kait Bos (above), Metagramme  and Empire (below) are good examples of minimalism in design - clean and simple  design that communicates fast and helps the user to find what he’s looking for quickly, whether it’s on a smartphone, tablet or desktop.

 

Trend 18: Blurred Backgrounds

When you look at the examples below, you’ll see that the blurred background adds depth and visual interest to the screen while focusing attention on the typography or the main visual on the website.  It’s easy to see that such web designs translate well to mobile sites without losing impact.

Blurred Background Example | Best PSD Freebies

turningArt

Do


 

Go To Web Design Trends 2013 - Part 7