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