2013 has been a year where I have really been able to get my teeth stuck into site design. I’ve checked out the latest developments from some of the biggest website names out there to some of the smaller lesser known sites that are attempting to push the boundaries. Here are just a few of the design trends I have observed.
Front-end frameworks are employed to control the look and feel of a website. For looks a framework comes bundled with CSS that style elements of the site like form fields and buttons, font styles, alignment and more. Newer and popular frameworks are also reactive and respond to re-sizing of the browser window or display of the site on mobile devices.
Frameworks are in use by a range of websites, from big to small. It greatly reduces the hours spent styling and building in front-end functionality into a site
For a comprehensive list it is worth checking out CSS Front-end Frameworks.
Infinite scrolling automatically loads more page content as the user scrolls down. Twitter and Facebook have had this for a few years now. Since this avoids the need for the user to paginate to the next set of content the user is never interrupted as they continue to browser through content that the site has to offer. It’s one of those features that can typically keep you browsing longer.
However, there are some pretty major pitfalls to this technique. Firstly, the footer of the page is now inaccessible unless anchored to the bottom of the browser window. I’ve seen many sites fail to anchor the footer after employing infinite scroll making it impossible to select any of the content found within.
Secondly, this may have an impact on site SEO. It is typically better practice to have less than 100 links on a page. Hiding content based on a particular user action, especially one like scrolling to the bottom of the page, are not typically spider friendly.
This technique simply locks the navigation bar on the website to the top of the browser window. As you scroll down through content the navigation remains in the same place, allowing you to use other important links on the site. This is particularly handy for sites with infinite scroll.
Again, this is something that has been around for a several years, but it seems to be in vogue this year. I’ve also seen some implementations, some more interesting than others. Typically sites will keep the navigation the same, some will reduce the size of the navbar on scroll, some apply semi-transparency and others even change the navigation functionality, although this last point is not something I would ever advocate.
Horizontal Search Filtering
Sites are realizing that once filters are selected by the user there should be no need to have these filters get in the users way as they are browsing through content. In short, horizontal filters are less obtrusive than left hand filter selection, although the downside is less real-estate for the filters. If you have few filters then this is for you, if you need many filters then left hand filtering might still be the best way to go.
Last year the web seemed shiny. It seemed like every button would have some rounded and shiny effect to it. This was also employed in icons and other site elements to add depth. This year we are seeing the opposite. Flat and square is the new rounded and bubbly.
It certainly takes a lot of the complication out of sites. When done wrong, the rounded bubbly icons and buttons can look awful, especially if they have different depths, shadowing and glossiness levels.
Apple have announced that they will also be adopting this style for their new Apple OS. This is a big departure from the skeuomorphism that Apple has previously adopted. Below shows Apple’s iBooks app, far from flat this attempts to make the app look like a real bookshelf.
Death of the Homepage Slider
Homepage sliders were all the rage in 2012, however this year the opposite seems to be the trend. Typically users will spend only a few seconds reviewing the content on your page. Sliders present a challenge. If the slider is too slow to change then the user may scroll down, bounce or click deeper into the site before even catching the other points illustrated in the slider. Too fast and the user cannot take in the information.
Think about this, on sites with a slider how many times did you either wait to see all the content presented in the slideshow or clicked through and read all the content. People want information quickly presented to them, ideally a single message point.
Mobile Site Unification
Last year it seemed like we had a lot of companies creating versions of their sites specifically to cater to the mobile market. Often mobile sites would not even share the same functionality as the site you would view on your laptop or desktop.
This year seems to have spawned more unification of websites. The website you see on your laptop or desktop is the same you will see on your mobile device. This seems to be occurring for a number of reasons, the biggest being the unpredictability of the mobile market. Since the release of tablet computers and mobile devices that now have higher resolution screens it is difficult to know how to create a mobile version of the site that is optimized to the device. For this reason a lot of sites are adopting responsive design techniques into their existing site, allow the site to respond to the device it is being viewed on.
Displaying content in new and interesting ways seems to be big on the agenda for 2013. Tiling content is especially on the rise. Flickr and Google seem to the first to adopt this trend, but other sites are also now catching on to the craze.
Having images presented with dynamic sizes adds a visual attraction that keeps the user browsing longer.
It seems that 2013 is the year for simplification. Sites are taking a no-nonsense approach to getting the message across and not overloading users with a dozen messages and calls to action. Simple and beautiful is clearly the way forwards.
If you have spotted other trends that you feel are on the rise or perhaps bigger than the ones in this post then please post your findings to the comments for other readers to see. Thanks!