A couple of months ago we published a blog that took a look at this year’s graphic design trends. Web design is no different in so much as it is subject to changing fashions and trends. Sometimes these are brought about by the evolution of technology and other times simply by the general inventiveness of the people involved in web design worldwide.

In this blog we’ll take a brief look at some of the hottest and most interesting web design techniques that are popular at the moment.

apnea

Hero Images

Big. Powerful. Strong. Inspiring. The hero image is a style of extremely large banner image intended to capture the site visitor’s attention and hold it. Often architectural, landscape or nature based images, a good hero image will compliment the brand and overall site content and lead the visitor further into the site to discover more.

On the face of it this seems fairly simple to execute but two things have to be remembered. First of all the site must be built with the ability to load quickly on mobile devices and secondly, it must not be hollow – no content of any substance following on from the home page resulting in an anti-climatic visitor experience.

The website we built for spear fishing, freediving and general watersports equipment specialist apnea.co.uk is one of my favourite examples of a site using well themed hero images matched up with strong content (see image above).

Responsiveness

The range of devices that can take you into the online world grows and grows and with it the need for sites to be adaptable to the wide range of screen sizes and the demands of users.

Web designers now have to take into account the fact that their site users may be using mobile, tablet, laptop, desktop and now ‘wearables’. Products like the Apple Watch and the Android equivalents are slowly getting a foothold and it won’t be long before other forms of wearable technology enter the market following in the footsteps of the pioneering Google Glass project of 2012/13.

2015 was a milestone year for search. The number of Google searches on mobile devices and desktop computers reached a 50/50 point . From then on if you’re not designing to be responsive then you’re potentially driving traffic away. Teapot has been creating mobile friendly sites as standard for the last couple of years. We now have a mobile testing station in the studio giving our developers the ability to test sites responsiveness on an array of actual devices simultaneously.

Vector Illustration

The evolution of the web and particularly the move away from desk top as the primary means of going online has had various unintended consequences. One of these is that traditional image forms can distort when screen sizes and resolutions change. In steps vector images – an image type created using software such as Adobe Illustrator.

Vector images can be scaled, resized and manipulated without any detrimental effect on the image quality. Although limited in their appeal when compared with the photographic images, they give flexibility back to the designer meaning that they are in control of the design and can develop images to suit any screen size or eventuality.

agil8

Long term Teapot Creative client and Agile Alliance founder, agil8.com opted for a vector illustration effect on their website we created for them as shown in the image above.

Flat Design

This is the minimalist design concept that puts the principal of a site working well before looking good as the central consideration. When flat design was introduced a few years back it was intended to be a move back towards the simplistic early web design techniques – the direct opposite to the more flashy techniques that had become de rigueur.

Although simple and stripped back there is still plenty of room for colours and clever use of shapes and fundamental design principals. Whilst the lack of more complicated graphics make sites load efficiently and operate well on a range of devices.

Fast loading and reducing file sizes is exactly what motivated Google to recently change their iconic multi-coloured logo to a flat design. Although this wasn’t the first time the logo had been updated it is now a stylish flat form and in my opinion looking better than ever.

Motion Animation & Background Videos

Like hero images, moving animated videos can bring a great deal to a site when applied correctly. Generally situated in the banner or a full background they can transform the site experience.

A winning example can be found on the section of the Apple website dedicated to the Apple Watch. On the right side of the screen a cascading series of watches that continue to move after the scrolling is completed. As you continue to scroll, the text blocks change and the watches themselves change colour and begin to rotate.

They’re not that easy to set up however and so it’s all too easy to go for what you think is a quick fix that can end up leading to one or more problems.

A poorly planned background video or motion animation can distract or irritate much like pop up ads have a habit of doing. The other thing that can happen is that it simply ends up slowing down the site so much that it completely defeats the object of including it in the first place.

Hover Animations

Reducing the number of clicks is another way of keeping your site users happy. Less clicking means more time simply reading and enjoying the content. If you can substitute a click for a hover then the user experience is more fluid and remains uninterrupted.

We have incorporated this into our own site on the ‘Meet The Team’ page. The page is a tile format display of mug shots set up so that as the cursor is hovered over the photo the text about that member of the team appears and then disappears when the cursor leaves the photo again. Instead of clicking over and over again all the visitor has to do is reposition the mouse on each photo one after another. The result – visitors are more likely to stay on the page and work their way through the mug shots. Easy.

Teapot’s Tool Box

There you have it. Web design trends for 2016. If we revisit this topic in a year or so there will almost certainly be new techniques and styles that have come onto the scene and pushed out of fashion some of those we’ve listed in this blog. For the time being though, hopefully this list will have explained a little bit about why websites we are designing at the moment look the way they do.

The web team here at Teapot loves learning new skills and staying up-to-date with all the latest tricks and trends. Explore our portfolio to learn more about the kind of websites we build and see if you can spot some of the web design trends of 2016.

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

Save

  • SBA 2016 Winner
  • chamber