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

Web Design Trends 2013

Responsive Web Design, Infinite Scroll, Fixed Headers, Parallax Scrolling

As we head deeper into 2013, let's take a look at the trends making the web what it is today - a vibrant, constantly changing, updating and interactive place where work gets done, ideas are exchanged, transactions take place at a rate that triggers a whole new world of web development, web applications and website design, making it easier to access information, relate with people, network and get things done.  

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 No: 1: Responsive, Responsive, Responsive

The boom in tablets and mobile devices and the rise in multi-screen internet usage has placed the focus squarely on responsive web design or RWD as it is called. 17% of all adult cell phone owners in the US access the Internet mostly on their cell phones. No longer is it feasible or necessary to design different layouts for every possible screen size and resolution. Responsive web design has the flexibility to handle all environments, with layouts that respond to any screen size, whether desktop or mobile.   It uses the same set of code to display properly on desktop, tablet and smartphone browsers. 

Based on fluid grids, liquid layouts and media queries, responsive web design ensures that the design adjusts to fit different screen sizes, going from say three-column text layouts for PCs to single-column text for mobile phones. Web designers now have to take into account the dynamic nature of the web in other presentation formats too - from large-screen web browsing in corporate boardrooms and in homes, to high performance on car dashboards, among other user interfaces. 

In keeping with the new design trend, major brands like Time magazine, Mashable, Microsoft and Awwards  have launched responsive websites.   Time magazine presents an enormous amount of information in a reader-friendly way without hiding content on mobile devices, whereas Awwards requires a few extra clicks for mobile users to get to non-core content. 

Responsive web design makes good business sense. Here's why:

  1. Optimized visitor experience across all devices.  Users demand and expect the same user experience whichever device they use to access your site.
  2. Single site content - no need for separate sets of content or different designs for desktop or mobile
  3. Responsive site design encourages the visitor to call - good for your business.  Simpler navigation and functionality

    global-connected-device-shipments

    You will find more statistics at Statista Mobile-first design

    Designers will focus on mobile-first regarding design, form, usability and functionality.  They will concentrate on how a person uses or interacts with the website, using natural user interface design (fingers and gestures, not cursors).

    Tablet-first design makes sense
    Growth in tablet sales is projected to outstrip PC sales worldwide.  Says Forrester Research, tablets will become the "preferred, primary device for millions of people around the world" by 2016, owing to their convenience and rich user experience. Social networking, internet usage, consumer buying behaviour and web browsing habits are going unstoppably mobile.  This is why many designers are opting for a "tablet-first" design approach - since users access more content on tablets than they do on mobile websites. ReadWrite is a tech blog that follows a "tablet-first" design - simple, consistent and user-friendly through all devices.

    Some quick stats are given below on the growth in tablet sales and website traffic on tablets:

    The share of Web site traffic on tablets grew more than 300% in the past year, according to research by Adobe. 

    According to research by Computer Industry Almanac Inc., by 2015 the worldwide sales of tablets are projected to reach nearly 36% of total PC sales or 186 million units, which is higher than the total worldwide PC sales in 2004.

    USA tablet sales are forecasted to top 53 million units in 2015 or over 43% of total PC sales. 

    World tablet sales, 2010-2015:
    - 2010: 16 million units (5.1% of total PC sales) 
    - 2012: 86.6 million units (20.9%) 
    - 2015: 185.7 million (35.9%)

    Sourcehttp://www.ericpaulsnowden.com/blog/#/2012/11/new-responsive-web-redesigns-from-major-brands/

    Tablet-ready design

    Looking beyond the iPad, publishers will continue to create native iOS apps as Android and Microsoft tablet sales will trigger the rise of "impressive, hand-built responsive HTML apps that play everywhere".  As mobile platforms evolve, designers need to watch out for Tizen, an HTML5-based mobile OS created by Samsung and Intel.  Initial devices are expected in Q2 2013. 

    "Tizen is an open source, standards-based software platform supported by leading mobile operators, device manufacturers, and silicon suppliers for multiple device categories such as smartphones, tablets, netbooks, in-vehicle infotainment devices, and smart TVs. Tizen offers an innovative operating system, applications, and a user experience that consumers can take from device to device."

    Web designers will have to design for multi-screen usage to make web content quickly and easily consumable by a sophisticated and impatient, on-the-go audience.   Responsive design forces designers to focus on the most important content first. 

    All set to go responsive?  Get ready to get noticed with readymade Responsive Website templates from Entheos!

    Template 42556 - Polkan Real Website Template

    Template 42556 - Polkan Real Website Template

    Template 38949 - Responsive Business Website Template

    Template 37465 - Michael Roberts Website Template

    Template 37602 - 2 Reamax Website Template

    Template 38948 - Responsive Architecture Website Template With Homepage Slider Animation

    Template 37685 - Industrial Responsive Website Template

     

    Trend  2 - Infinite Scroll

    This trend has become popular because of sites like Pinterest and Tumblr, which allow content to be loaded continually as the visitor scrolls down the page.  No longer does everything of interest have to be concentrated "above the fold" - users are now comfortable with scrolling and so content can be placed at strategic points that attract eye movement as the reader quickly scans the page.

    Vertical scrolling is the preferred user mode although a few devices allow for horizontal scrolling.  It's just easier to navigate the site when you know which way to go.

     

    Trend 3: Sticky navigation/fixed headers/fixed position design elements

    Often used in single page web layouts, sticky (or fixed) headers using CSS or JQuery make it easy for the visitor to navigate anywhere in the site.   In Sticky Navigation, the website menu sticks to the top or left of the page and is set firmly  in place so that it does not  vanish when the user scrolls down.   

    As
    your visitors scroll down the page, the nav menu scrolls along with them while remaining in the same position on the page. This makes the user's browsing experience much faster and less frustrating.  Sticky menus are quicker to navigate and users prefer them without knowing why.

    The website menu is locked into place so that it does not disappear when the user scrolls down.  This makes the user's browsing experience much faster and less frustrating. Sticky navigation can be used for the footer and other design elements (like the logo or Call to Action button) as well.

    Sticky navigation can also be used for other design elements like the footer, sidebar, product picture, logo or Call to Action button.

    When the page size is smaller, sticky menus could restrict the space for content.  One way out of this is to shrink the menu as scrolling begins or hide some parts of it, for simplicity and clarity. Smartphone users in need of more information will then click on additional links to get to the required content. 

    See examples of sticky page elements below.

    Fixed Elements

    Ryan Scherf has a beautifully designed fixed menu on a textured background with the feel of wood, to match the arrow button on the bottom left of the page, and the form with the call to action that ends the page.

    Fixed Elements

    In the Nizo site, the iPhone is fixed although other objects on the page move, giving the viewer a visual point of reference.

    http://netdna.webdesignerdepot.com/uploads/2011/08/141.jpg

    Kisko uses a Slide and Stick approach with its nav menu scrolling along with the site visitor but sticking to the top of the page once the end of the page is reached.

    http://netdna.webdesignerdepot.com/uploads/2011/08/011.jpg

    Freckles and Handsome uses the fixed header for consistency in navigation and branding in all sections of the site.

    Web Appers Navigation

    Web Appers has a sticky sidebar which stays constant when you scroll the page.

    Fixed Elements

    Fat Man Collective keeps the (animated)  mascot and logo in a fixed position on the right fixed while content scrolls.

     

    Trend 4 - Parallax Scrolling

    Parallax scrolling places 2-D objects on different layers in a web page and moves them in the same direction at different speeds to create a 3-D feel.  The closest layers move the fastest.  This technique which is used in games or product launches, is expected to become more popular in web design in 2013.  Parallax scrolling lends interest to the somewhat standard web pages like the Home Page and About Us page, making them interesting and interactive. 

    The Bagagia site above shows the IPad case to great advantage.  As the viewer scrolls, the case turns around and brings it close to the viewer's eye in extreme closeup.  You can almost feel the material! 

    http://assets03.blog.usabilla.com/wp-content/uploads/Screen-shot-2012-11-21-at-1.24.jpg

    The TokioLab site reveals itself word for word while the reader scrolls.

    Cultural Solutions uses graphic circles, another design trend, on a soft, textured background and leads the reader through the content as she scrolls.



    Egopop's cartoon characters create a 3-dimensional, animation effect with parallax scrolling while drawing attention to the portfolio of the designer.

    Soleil Noir has an engaging site that  presents its beliefs and work culture in a scrolling slideshow,  using bold typography, illustrations, colourful moving backgrounds and animation effects through parallax scrolling.

    Go To Web Design Trends 2013 - Part 2