Flash Tutorials
& Resources
Dreamweaver
Tutorials
Fireworks &
Illustrator Tutorials
Photoshop
Tutorials
Web Design
Tutorials & Resources
CSS
Tutorials
CorelDraw
Tutorials
You are here : : Home > Free Resources > Web Design Trends 2013   

Web Design Trends 2013 - Part 2

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 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.

 

Trend 13 - Simplicity - Minimalism Is Better

Minimalism cuts away all the fluff and reduces web design to the essential elements, to achieve sleek and simple, elegant, professional and user-friendly websites.  The trend towards mobile website access has forced designers to pare content and navigation down to the minimum, so that the most important messages are conveyed first.

Design principles in minimalist web design are:

  • Cut away clutter - "less is more"
  • Simple, clean typography
  • Clean, simple navigation and graphics
  • Few colors: soft, muted backgrounds: neutral greys or shades of grey with one contrast color; use of black and white; black backgrounds, limited color palette with colors that co-ordinate and balance well
  • Content first - Focus on just text or just one large picture, with simple vertical navigation Large typography for logos and text.
  • Well organized content, a lot of white space




Screenshot

Take a look at some more inspiring examples of minimalism in web design

 

Trend 14: Single Color Sites - Effectively Using Monochromatic Color Palettes

Adding white or black to a single color gives you different shades of that color.  To avoid monotony while using a single color, use at least one dark color, one medium/dark color, one medium color and one light color.  This way you will achieve interesting highlights through contrast. Using as single color as a base, use shades, tints and tones to create variations.

These websites were developed in a monochromatic color palette.  Clean, bold, elegant and unified, many of these websites are minimalistic in their presentation. 











 

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


 

Trend 19: Single Page Websites

Single page websites are popular due to their simplicity and functionality. All the content is accessible without loading or refreshing a page.  They are also used as mobile app landing pages.

The examples shown here highlight single-page websites that use many of the web design trends mentioned in our series on "Web design trends you'll see more of in 2013", like

  • parallax scrolling or sliding effects
  • jQuery for animation, transitions and effects
  • bold and striking text
  • hand-drawn design or hand-written text
  • textured backgrounds
  • minimalist layouts
  • circles in design,  and more. 

Navigation in single page websites can be through click navigation or scroll navigation, with prompts to encourage visitors to visit different parts of the website.  Some websites use hidden navigation to reveal more content.

Keep your single-page web design and navigation simple, so that your visitor knows what to focus on first on your page and where to go next.  Avoid clutter. Keep content minimal. Use sliders, carousels, Ajax and auto-scroll scripts to display content to improve the user's experience. Include a call to action, for example - fill out a form, or call.  








 





 

Trend 20: Skeuomorphic Design Is On Its Way Out

Skeuomorphic - A skeuomorphic design includes features which make a new thing look older or more familiar. The terms skeuomorphic and skeuomorph date back to the late 19th century, based on the Greek words skeuos, meaning 'container' or 'tool', and morphe meaning 'shape' or 'form'.  - Macmillan Dictionary

In an attempt to make a new object or application appear familiar to the user, skeuomorphic web design simulates real world objects. For example, Apple's iPad uses the textures of a leather-bound, ruled  notepad in its design. 

File:Skeuomorphs in the iPad Notes application.png

Apple's iPad has a leather-bound look and the feel of ruled paper.

Some of the objects simulated do not communicate with today's real-world users, such as children and teens who have never seen the actual objects which are replicated in the software. For example, in Apple's Podcasts for iOS,   the reel-to-reel tape playing while a podcast is running does not communicate with a person under 30 who has never even seen a reel-to-reel tape.  Also,  the user interface design does not make all the controls easy to hit.

http://static2.businessinsider.com/image/4ff5d2af6bb3f7a578000009-960/podcast-app.jpg


Apple's Podcasts for iOS program simulates a reel-to-reel-tape transfer while a podcast is running.

Since designing for screens is a different ballgame than designing for print, experienced designers have long opposed the obviousness of Apple's skeuomorphic approach, opting instead for design with usability and functionality. Screens can morph, animate and transition to completely different layout states, unlike printed books or physical hardware.

http://compixels.com/wp-content/uploads/2012/03/Windows-8-Start-Screen.jpg

Windows 8 screenshot
Microsoft's Windows 8 design language (once known as the "Metro design language", rooted in the visual shorthand of way-finding and signage) creates user interfaces based on the unique features of screens and their graphic capabilities. 

Today's users (even children) are more used to digital content and interfaces than their old-world counterparts.  The icons and pictograms of Windows 8 will convey more to them than a simulation of an old-world device like a rotary dial telephone.  They're more likely to ask "What's that?" than to say "Ah! A telephone! Let's dial."

Skeuomorphic design for the sake of design, then, is on its way out.  It's about usability and functionality more than pure aesthetics - although aesthetics do play a role in their power to delight or rouse emotions associated with the real world.   But if a design needs three or more taps to get a function to going, it needs a re-think.  Simplicity is better.

Get the basics right
While looking at design trends, we cannot ignore the basics of good web design practices.  One of them is keeping your content up-to-date and appropriate, while focusing on a niche within a wider variety of target audiences than ever before.

Keep content fresh and relevant
Content is still king.   Google's algorithms keep changing and you need to ensure that your site is search engine optimized. Quality content is key to keeping your visitors coming back to your site and keeping your site high up on search engine rankings. Keep content updated quarterly;  add blogs, podcasts and email marketing to the mix.  Location-specific content is a powerful marketing tool.  Mention new specials or sales at your store or restaurant on your site.  Your customers tend to rely on information in your website.

Ensure interactivity and accessibility
Web design needs to engage more customers with unique and specific needs, encouraging them to explore and interact with the site.  Accessibility of your website to all devices is key to success on the internet.

 


Now building a website is as easy as 1-2-3!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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

Featured Template
Template # 58287
Type: OpenCart
Price: $49