Trends in web design part two: 2012 and onwards

On Monday, I ran through a brief history of web design, from the early 90s until the present day. In today's post, I'd like to dicuss some of the current trends impacting web design and what these mean for the future.

2012 and onwards

"Design trends online change more often than the wind, and slightly less often than my socks."  - Suleiman Leadbitter

While web technologies continue to break boundaries and influence web design trends, we must also consider and reflect this in our designs. Although advances and trends are changing all the time, listed below are a few things we will be seeing more of:

1.Web-fonts

Until recently designers were limited to just 10 fonts: Arial, Georgia, Lucida Sans, Palatino, Tahoma, Times, Trebuchet and Verdana.

But with the advent of stable services like Typekit, Fontdeck and Google Fonts we now have access to thousands of fonts with more being added on a daily basis.

This means that we can now render readable text that would have previously needed to be images in the past. We can now use typography to create visual impact, while retaining any SEO benefit, producing faster load times than images, and maintaining accessibility for screen readers and other tactile devices.

2. Responsive web design

"Now more than ever, we’re designing work meant to be viewed along a gradient of different experiences. Responsive web design offers us a way forward, finally allowing us to “design for the ebb and flow of things.”

We are now experiencing the internet on a variety of devices. Televisions, smart phones, tablets, as well as laptops and desktop computers. Responsive design is a good example of how web design can cater for all of these devices and become future proof to a certain degree.

In the simplest form, responsive web design means changing the values that we used to use to define things on the web (px, pt, em) into percentages. This means that a responsive layout will display on any size screen at the correct ratio to each other and fill that screen.

"A website that responds to the device that accesses it and delivers the appropriate output for it uses responsive design. Rather than designing multiple sites for different-sized devices, this approach designs one site but specifies how it should appear on varied devices."

Simply put, it's about percentages not pixels.

It also means that we can now target desktops, tablets and phones with the same set of code and the same content. This offers an obvious benefit for users and clients.

3. CSS3 and HTML5

"CSS3 and HTML5 are the latest agreed standards for technologies that have built the web since it's inception. They bring new tools for designers, devs and SEOs to play with. Including webfonts and responsive design."

Now both web fonts and responsive web design are made possible by CSS3:

1. Box-shadows – Allows for drop shadows to be made without images
2. Text shadows – A drop shadow underneath HTML text elements.
3. Easier font additions – Use any font uploaded to your server or via font servers like Typekit
4. Multiple backgrounds – Overlaying multiple backgrounds to a page is possible.
5. Border images – Upload an image to use as a border.
6. Opacity levels – Make elements transparent.
7. RGBA colouring – Use RGB colour values rather than hex codes to produce colours.
8. Transform – Resize and rotate elements within the code.
9. Rounded corners – Corners that are rounded rather than using images.

HTML5 fun includes:

1. Drag and drop - Allows elements from users computer to be dragged into web browser and interacted with. eg file upload
2. Native audio and video - Allows video and audio to play without plugins
3. Form features - Validation without javascript and new expanded form options, including things like date pickers, sliders, validation, placeholders and multiple file uploads
4. Offline support - Method of defining web page files to be cached allowing them to work offline
5. SVG - Display and play with vector graphics rather than bitmap images

In conclusion

Since the first web page in 1991, the function of a web site has shifted. No longer is it solely about sharing information. More often than not, it's about getting results.

As designers, we always have this in mind. Design isn’t just about creating something beautiful. It's about guiding the user effectively through information, encouraging them to sign up, make a purchase, or make an enquiry and so on.

This tailoring of information and correct use of trends is why many of our clients choose Crafted over more basic, ‘off the shelf’ platforms. We not only have the ability to create a visually appealing experience for the user, we can also drive traffic, increase conversion and produce results.

We do this by working with web trends and technology, being receptive to all that influences design and endeavouring to push our abilities further with each project.

Written by Ally Wright