Last week, myself, Anna and Katie attended a lunchtime talk from Marianne Kay (@marianne_ua), an Analyst at the Digital Clarity Group and part-time lecturer here at the University of Bradford, on Modern Web Design Trends for 2016.
The content was a brief outline of what are perceived to be the upcoming trends for 2016, based on what is popular now on the web (2014/15) and what is likely to continue to be dominant and how they help your websites stand out and be modern. It was never implied though that if you did these you would have a good website. That is still down to ‘content is king!’.
I was pleased to see that what we have been doing over the last few years, using an iterative approach, has meant that we have been on-trend. Below are some examples of key areas/subjects and how we have been/will be trying to use these approaches if not already doing so.
Irresistible images
The trend for big images from a few years back has gone, it has been replaced with even larger, full screen ‘irresistible images’. Images that are not stock, but fit in with key message and help to give the user a feel of what the website is/offers and to convey a personality or journey.
Alongside this approach is a wider use of letterbox images which also allow for great results on mobile devices.
We have always embraced large images to convey information but only where relevant. Our latest designs for our home page in particular have used this approach to great effect and also allows us a ‘billboard’ area to change and keep on-message at key times across the year. Our choice of images, e.g. groups on an open day as below, is true and shows the prospective student what it is like if they come to an open day helping them to see themselves here.
The new perspective: drones and action cameras
This is one area that is being used more and more as people are becoming familiar with drone cameras. It allows you really give new perspectives on familiar sights, for example the University of South Wales uses a lot of aerial video and photography to highlight their campus to great effect. In the commercial world, especially with sports brands, you see a lot of video from headcams, selfie sticks and the like to really give you that feel of being there. We have used a Go Pro in the past – some great examples are on their Go Pro YouTube channel.
This is not new to Bradford to look at – a few years ago, working with our Video Content Editor at the time, we did trial some drone work and first person perspective for a sports video.
Modern typography and font replacements techniques
A lot of websites are using new interesting fonts to also add character to their websites. By using techniques such as CSS3 amongst others (CUFON being one of the older more popular ways of achieving this) you can now do this much easier than in the past. We have not needed to do this with our new brand identity, but we have used this technique with ‘fontawesome’ for our iconography.
Overlaying text over images in responsive designs
With the increased use of ‘irresistible’ and letterbox images you still need a way to convey information, and in this day and age of course you need to make this responsive. There are various ways of doing this, from having the image with plain large fonts, usually in white overlaid using CSS, to having backgrounds that are tinted, monochrome, or just solid behind the text itself to make it stand out.
We have used various ways of doing this over the last few years, and again throughout our new designs. Below you can see on the home page how we added a little drop shadow on the white text, picking the image right so that it will be readable, and also throughout our site using a block colour behind the text in banners.
Video backgrounds
More and more sites are choosing to take advantage of HTML5 and the way you can now embed video to replace the large images with video. This can be used to give a great impression and make the site come alive. Some great examples can be found on the AWWWARDS website.
This is something that we have played with behind the scenes in the past, but as of yet have not used it. I can certainly think of plenty of areas where this will work very well and am sure that we may will use this approach in the future.
jQuery Animations
There are a lot of ways to make your site feel alive (What is Micro UX?); a lot of these can be done with jQuery Animations. For example, you are scrolling down a page and come to a set of graphs, have the graphs animate and you immediately create an interaction and keep the user engaged whilst still having the content up front.
Again, we have been looking at ways to use this, and did indeed trial it during Clearing to get users to interact with the Clearing area to find courses. We will continue to look at more ways to make our content engaging as ever.
Ghost buttons
This is the idea that you want to use buttons in areas instead of just links, as various analytics reports/articles have shown these are clicked on much more. However, you don’t want to completely fill your website with buttons.
Ghost buttons allows you to link to areas of information, ‘help with…’, ‘what times is…’ and use the design of a button, but make it subtle yet still stand out, hence not filling your site with button after button.
Some great examples can be seen at UX Magazine.
http://bigdropinc.com/
We are looking at ways to use these across our websites as we are using more and more ‘calls to action’. One area we are exploring is on the main home page to add secondary calls to action to the main ‘letterbox’ image area for key events, perhaps with a book/read more ghost button and therefore not detracting from the primary action – search for a course.
Sticky navigation
This has been a trend for a few years and is continuing to be in use. The idea is that your menu sticks to the top of the page and is always available, usually from a hamburger menu. This helps especially with mobile.
This is however a trend that we have looked at, and decided not to use yet.
The nature of many HE websites is that they are very large and very complex, with some pages having three levels of navigation that may all still be relevant; for example University navigation, Faculty navigation, Department navigation and subject navigation can all be present on a single page and all still relevant to some degree.
Trying to get this right has been discussed by many; the idea that I favoured a while back was treating every area almost as a silo, the menu would be that section and you would use the breadcrumb to get back to the previous sections and home, but this was not something we ultimately took forward across the whole University site, but did do for one cycle on our Undergraduate area. If you are interested in this approach please see my earlier post, A Responsive Case Study.
What we have done at the moment is a combination of the two, but not sticky. The main top level menu uses a hamburger for a mega menu, allowing the user to get to all the key areas of our site. While the section you are in has a fly-out menu instead, leaving you with the content first and menu second.
The increasing influence of mobile first approach
This is something that has been going on now for quite some time. More and more visitors are using their mobiles to browse the internet, and so your approach is to design for mobile first and then move up as the screen size gets bigger.
Personally, I have had my issues with this concept especially in HE with the large information-led sites we have. I think I am in a small group, but I see that in a world where content is king, this should be what drives your design.
We design our sites with all in mind! When you sit down and think about your content, your IA, your CTAs, your key messages; you realise you want them to be there across all devices. Why should someone on a different device get a better/worse experience – different yes, but no better or worse if you can help it. This for me is the beauty of responsive design in that you can have the same content displayed differently, but by some key design/branding decisions on certain areas keep the site very familiar across all devices. A user can then pick up the site on many devices and find where they were and what they were doing.
Fairness, ethical values, community, environment
Community and fairness is something that a lot of companies are doing now to try and stand out. Rather than tell you what they do or sell, they tell you who they are and what they are about. What are their beliefs, values, aims and goals? If you can relate, then you are more likely to buy in with that website, company, university.
As a University, we of course have always used our real values in what we do and say on our website. From quotes from existing students to showing what the University’s core values and messages.
To summarise…
We have always tried to keep up to date and on-trend with what is going on in the wider world of web design, development and user experience. Myself and Anna attended a talk recently about this very subject, challenging the concept that we are, in fact, user experience managers (The UX Designer is Dead…Long live UX!) meaning that if we are to continue to give our visitors the best experience we can, we have to look across all digital (and none digital) touch points of which the web is certainly a very visible one.
I, for one, am looking forward to seeing what we do in the future, using an iterative approach to keep our web presence as up to date as possible to give our visitors the very best experience we can.
Leave a Reply