Flash Tutorials
& Resources
Fireworks &
Illustrator Tutorials
Web Design
Tutorials & Resources
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


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! 





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.


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




Go To Web Design Trends 2013 - Part 7

<% Thispage ="http://" & Request.ServerVariables("SERVER_NAME") & Request.ServerVariables("URL") %>
data-num-posts="10" data-width="720">

No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.

Related Articles, Tips & Ideas

Cool Website Menu Ideas

Logo Design Ideas

Brochure Design Tips

Text Ideas in Design

Logo Design Tips

<% Response.Buffer = True Dim objConn_template,strConn_template strConn_template = "Provider=SQLOLEDB.1;Persist Security Info=False;User ID=entheosweb_temp_2010;Password=73k*hj2T;Initial Catalog=entheosweb_template;Data Source=" set objConn_template = Server.CreateObject("ADODB.CONNECTION") objConn_template.open strConn_template Dim sql,rs,rs2 Dim i,imageurl,myMatch,myMatches,RegularExpressionObject,comp Dim strHead,CategoryName,categorypage,Popurl Dim iCnt,psize,totpage ,rIndex,iCount,pageNo,Allurl ,ScreenshotsList set rs = Server.CreateObject("ADODB.recordset") set rs2 = Server.CreateObject("ADODB.recordset") function Pagecount2(tpages,page_no) Dim strURL,i strURL="" Response.Write "
" if tpages > 1 then if request("page") <> 1 and request("page") <> "" then response.Write "
" %> View<% response.Write "
" else response.Write "" end if if page_no+100 Then if i=clng(0 & page_no) then Response.Write " " & i & " " else Response.Write "  "& i & " " end if end if next else for i=page_no-10 to tpages if i>0 Then if i=clng(0 & page_no) then Response.Write " " & i & " " else Response.Write " "& i & " " end if end if next end if if clng(0 & request("page")) <> clng(0 & tpages) then response.Write ""%> View <% else response.Write "" end if end if Response.Write "
" end function %> <% server.ScriptTimeout = 1000 Set RegularExpressionObject = New RegExp With RegularExpressionObject .Pattern = "(([A-z\d/-]+\.[^,}.html.swf]+)+)" .IgnoreCase = True .Global = True End With sql="SELECT Top 1 TemplateID,authorsID,NumberOfDownloads,ScreenshotsList,price, ExclusivePrice FROM Mon_Template_Screenshots where (NumberOfDownloads>'2' and TemplateID>50000) order by newid()" set rs = Server.CreateObject("ADODB.recordset") set rs2 = Server.CreateObject("ADODB.recordset") rs.open sql,objConn_template,1,1 if not(rs.eof) then i=1 %> <% rs2.open "SELECT TemplateURL, URLDescription FROM Mon_Template_URL where ID=16",objConn_template,2,3 if not(rs2.eof) then TemplateURL=rs2("TemplateURL") URLDescription=rs2("URLDescription") end if rs2.close dim j j=1 while not rs.eof ScreenshotsList="" rs2.open "select ScreenshotsList from Mon_Template_Screenshots where TemplateID='"& rs("TemplateID") &"'",objConn_template,2,3 if not(rs2.eof) then ScreenshotsList=rs2("ScreenshotsList") end if rs2.close if i=1 then%> <% response.Write("") end if response.Write("") if i=4 then response.Write("") i=1 end if j=j+1 rs.movenext wend End if rs.close objConn_template.close set rs = nothing set rs2 = nothing set objConn_template = nothing set RegularExpressionObject = nothing set myMatches = nothing ScreenshotsList = "" Popurl = "" AuthorNickName = "" Allurl = "" TempDescription = "" imageurl = "" strHead = "" TemplateURL = "" URLDescription = "" Types = "" %>
") Set myMatches = RegularExpressionObject.Execute(ScreenshotsList) imageurl="" Popurl="" For Each myMatch In myMatches strHead=split(myMatch.Value,"/") if(ubound(strHead)>=1) then if strHead(1)=rs("TemplateID")&"-m.jpg" then imageurl=myMatch.Value elseif Mid(strHead(1),Len(strHead(1))-5,Len(strHead(1)))="-b.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value End if elseif Len(strHead(1))>8 then if Mid(strHead(1),Len(strHead(1))-8,Len(strHead(1)))="-bswi.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value end if end if if Mid(strHead(1),Len(strHead(1))-8,Len(strHead(1)))="-bcre.jpg" then if imageurl<>"" then Popurl= myMatch.Value Exit For else Popurl= myMatch.Value End if end if else Allurl =myMatch.Value End if End if next rs2.open "select AuthorNickName from Mon_Template_Authors where AuthorsID='"& rs("authorsID") &"'",objConn_template,2,3 if not(rs2.eof) then AuthorNickName=rs2("AuthorNickName") end if rs2.close rs2.open "select type,Description,Template_desc from Mon_Template_Info where TemplateID='"& rs("TemplateID") &"'",objConn_template,2,3 if not(rs2.eof) then Types=replace(replace(rs2("type"),"{",""),"}","") TempDescription=replace(replace(rs2("Description"),"{",""),"}","") if rs2("Template_desc")<>"" then Template_desc=replace(rs2("Template_desc"),"'","") else Template_desc="" End if end if rs2.close TempDescription=replace(TempDescription,"'","") %>
Featured Template
<% if Popurl<>"" then Popurl="http://templates.entheosweb.com/template_number/"&Popurl %> .asp">',430,449)" onmouseout="hidetrail()" alt="" border="0"> <%else %> .asp"> <%end if %> Template # <%=rs("TemplateID")%> <% if TempDescription<>"" Then %>
Type: <%=Types%> <%else%>
Type: <%=Types%> <%End if%>
Price: $<%=rs("price")%>
<% i=i+1 response.Write("