Posts

Now, I know what you’re thinking. “It’s March! It’s too late to be making predictions for 2013!” You’re right, and I normally write off any list coming out at this point, but a full ebook analyzing what is coming up in web design trends should perk the ears of any web designer trying to stay up to date.

The team at Awwwards released an ebook called Web Design and Mobile Trends for 2013 in mid February with some analysis, but they weren’t done there. They took the feedback they received on their opinions, created a new list with ten key trends web designers should be aware of and re-released the ebook with corrections last week.

Their list doesn’t reinvent the wheel. I’ve already written about a fair number of their trends such as flat design supposedly usurping skeuomorphism, device or technology agnostic designs, and content first approaches. What the list does is show what the public is talking about, and what web designers are doing.

For example, I scarcely believe that any style of design like flat design or skeuomorphism will ever be monolithic on the web, but there are a few aesthetic and technical reasons to believe flat designs will continue to become more prominent. First, web design is refining itself towards a more minimalistic layout as designers are learning that clutter is an enemy. Secondly, The wide variety and quality of devices connecting to the internet creates a need for designs that will look and perform great on fancy new retina displays as well as on mobiles in the non-western market with likely slower internet connections and eReaders.

Meanwhile, predictions like going content first on your website seem like they should always have been common sense, but less advanced algorithms couldn’t favor in the past. As Google has improved their spam fighting campaign, questionable backdoor habits have been thrown out in favor of creating websites people will want to see.

It is always best to let the people making their predictions qualify them, and Awwwards is a great source of intelligent conversation on web design, so I highly advise reading their ebook and checking out their list.

Web design relies on the resources of others. Without them, we could still make good looking pages, but it would take exponentially more time. Of course there are textures, fonts, images, and any other visual aspect you want to incorporate for free or cheap use, but we also use time savers behind the scenes.

This isn’t to say we rip off people. It is always best to notify the owner of any resource when you use it, and it is better to use as much original content as possible. Using boring standardized icons won’t ever have the same effect as specialized icons that fit the page they are made for.

Frameworks are what we use behind the scenes, and they are packages made of a structure of files and folders of standardized code used to build websites. They help get you started without making you spend hours typing in code that is normally extremely similar to others such as gridding systems. All websites have a similar structure, and these frameworks allow you to use a “standard” version of that structure and modify it as you need to.

Awwwards has an article explaining the different types of frameworks you might use on a new site, and a collection of great packages to get started.

Source: Flickr

Browser plug-ins can be a huge help or a major hassle, depending on what is installed. Many of us still have nightmares about asking to use a friend’s computer, only finding Internet Explorer, and opening the program to see toolbars and add-ons clogging up half of the window space.

With time (and better browsers) however, many browser extensions have risen that actually help improve productivity. Google Chrome, for example, has tons of great free extensions in the Chrome Web Store, and Awwwards.com has cherry-picked some of the best for designers and developers.

One extension seems almost magical for us designers who have seen a fantastic font online, and then spent hours looking through collections of typefaces trying to find the closest match. WhatFont quickly inspects fonts on webpages just by hovering over them, no fuss or hassle.

Resolution Test, on the other hand, is an extension that allows developers to test web pages in different screen resolutions, simulating testing on various devices.

Some plug-ins aren’t meant to replace tools like the two listed above, but instead are intended to add to other tools. Firebug Lite for Google Chrome isn’t intended to replace Firebug or Chrome Developer Tools. It works together with them to provide rich visual representations developers are used to seeing in Firebug.

Awwwards have twelve more tools many designers and developers will find useful. Everyone loves free tools and resources, and these plug-ins can help streamline your work process without taking up hardly any space on your computer.