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
Web Design Trends 2013 – Part 1 (Trends 1-9)
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.
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.
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.
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.
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.
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.
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:
Take a look at some more inspiring examples of minimalism in web design
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.
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.
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!
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.
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.
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.
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
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.
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. 
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 playingwhile 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.
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.
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.
