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 4

Designing for Different Screen Resolutions, The Beta Model Release & Thinking Big

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 10: Designing For Different Screen Resolutions - the retina web and the mobile web

Besides screen sizes, web designers have to keep in mind the screen resolutions of new-generation devices. Apple’s high res retina display iPad 3 gives you 2048-by-1536 resolution for sharper, crystal clear images.  With the Retina Macbook Pro, Apple has raised the bar for display standards by bringing double-density screens to all its current product categories.

How can designers take advantage of the high-res retina display while keeping in mind that most users will access the web on lower-resolution mobile phones?  Designing for the best user experience across devices is the answer.

  1. Use CSS Media Queries to serve up Adaptive Images. "Adaptive Images detects your visitor’s screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page’s embedded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques."  This way, you get high-resolution images on devices like the iPad and iPhone, while serving up lower-resolution images to devices like Android and Blackberry.
  2. Use web fonts
    Web fonts give you access to beautiful typography and design flexibility, making your text clear and sharp, lightweight and readable on any device. Use web fonts from resources like Google Web Fonts  (free) or TypeKit  (which has an extensive pay-to-use library of fonts). 
  3.  Save page load times - use one CSS Image Sprite to rule them all

CSS Sprites let you take a lot of smaller images and combine them into one larger image, so that each single image doesn’t need to load separately.  In the case of multiple images, this saves a lot of page loading time... which is especially critical in the case of mobile devices.

Working towards device-independent web design - using CSS pixels (device-independent pixels)

From physical pixels to screen density measured in pixels per inch (PPI), today designers are talking in terms of virtual or CSS pixels. A CSS pixel is an abstract unit used by browsers to precisely and consistently draw content on Web pages. Generically, CSS pixels are referred to as device-independent pixels (DIPs).

As the web continues to evolve, learning new ways of adapting and designing to new standards while keeping the majority of users in mind is a challenge that designers have to live with.


Trend 11: The Beta Model Release - going strong

New approaches to design and development include rem units (for elastic pixels sans pixel or percentage measurements), CSS grids support and RWD (responsive web design), (link back to page 1 of  this article ensuring that more designers are trying out different ways of getting the job done.  Experimental and live iterative design is becoming acceptable in creating websites and web apps:  launch a beta version - a work-in-progress, add features, get feedback, improve it and launch another version. 

This approach is less expensive to develop and saves time to market, when it invites feedback from live, real-world users: feedback that helps reduce errors and improve the product, resulting in fewer chances for expensive failures.  


Trend 12 - Thinking Big - Oversized Buttons, Headers, Background Photos and Text

With the rise in popularity of touchscreen devices to access the web, it is only natural that  larger buttons and call to action buttons which allow ease of navigation through touch,  have been adopted into web design.  

The trend to oversized elements is also demonstrated in the usage of  large typography,  large photo backgrounds and headers.

In the Teothemes Wordpress theme above, you see large type on a full-screen, textured /blurred photo background, with social networking icons up front. The menu stays fixed on scrolling down, although there is horizontal presentation of content as well.

Beautiful Button Design
Large buttons with a soft texture invite web visitors to click through while enhancing design.

Buttons have to be large, colourful and easy to use, for children using the Ipad or Iphone for educative and fun games like Postman Pat, Fireman Sam and Bob the Builder.

 Buttons for kids

Big Backgrounds in Web Design

The huge background photo in The Amazing Spiderman Game adds to viewer impact.

Mendo, a Dutch site, promotes books with full page photo backgrounds which are visually arresting.

Oversized typography draws attention on  Stephen Caver’s website. Today, designers have a plethora of web-friendly fonts to choose from. Some of these  are seen in the Brave Nu Digital site below.


Go To Web Design Trends 2013 - Part 5

<% 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("