Case Studies

Top Website Trends for 2016

Top Web Trends for 2016

As time continues to move forward we're constantly mind blown by new technologies available at our fingertips. Web design is continuously changing. With new tools, workflows and best practices it is moulding into something bigger, brighter and better.

Our team at GillGraphics are in no way psychic but we figured we'd give it a go and try to predict the biggest web trends we will see throughout 2016!

1. Card Layouts

Card layouts are becoming increasingly popular since they were first notably used by Pinterest a few years ago. They have since become a great option for content-heavy webpages. Free plugins like jQuery Masonry can be used to mimic this layout style with animated cards for various heights & widths.

You can think of card layouts as more dynamic grids with a focus on minimising content to the bare essentials to list more items together. This layout is best used on pages with lots of data that should be scannable. The landing page for Google Now uses a card layout to advertise optional cards for the Google Now app.

Card Layouts

2. Explainer Videos

Big and small companies alike have taken to the trend of custom explainer videos. These are often created with animation. The purpose of an explainer video is to demonstrate how a product or service works. Visitors may skim a list of features and still have no idea how the product operates. Videos clarify everything visually and cover the important stuff in just a few minutes.

Explainer Videos

3. Flat Design

With responsive design pretty much taking over the Web, we expect flat design to continue throughout 2016. Not only will there be websites that launch with flat designs, those sites who’ve already embraced the flat design trend will look to make things even flatter.

Take for example Google’s logo. The company changed its logo to make it more flat (losing the bevels) and changed the font. It found that a cleaner font for its logo helped cut the size of the logo file used on sites by more than half. Google also found that it was easier to read on smaller devices.

This includes updates to logos (like Google), icons, images, and other elements that maybe didn’t get fully flattened the first time. You can thank the drive and determination to get our websites to load faster and snappier, weigh less, and get content to viewers more effectively.

Flat Design

4. Less Stock Photography

We’re starting to see more and more websites ditching the use of stock elements such as stock photography and icon sets over something that feels much more designed and personal to the site itself.

Some websites are opting for using their own photography for use on their home pages or blog posts instead of picking a stock photo. Other websites are ditching stock photography for videos, infographics, or even GIFs to help convey their message.

Icon sets are another stock element that’s being dropped in favour of something more custom. There are thousands of sets out there, so it’s easy just to pick one and run with it, but for designers, they’re noticing that little extra touch to create custom icons can help set a site apart from others.

Stock Photos

5. Responsive Frontend Frameworks

Responsive design is an absolute must nowadays if you want to provide the best quality of user experience. Responsive or mobile-friendly design allows the webpage to adjust to the screen it is displayed on whether it is a PC monitor, tablet or smartphone.

Frontend frameworks like Bootstrap have been around for years and continue to prove useful on projects both personal and professional. Responsive design has forced its way into frameworks and created a demand for frontend code instead of just backend.

Frontend Frameworks

6. Touch Enabled Websites

Smartphone browsers have always supported touch features but recently more plugins and custom features are included in websites with the specific goal of handling touch events.

Plugins like Photoswipe and Dragend.js are built to handle swiping and tapping on touchscreen displays. It seems web developers are not only building responsive websites, but touch-enabled websites too.

Touch Enabled Websites

7. Designers Learning To Code

Some designers feel it’s not their job to write code, while others feel it’s becoming the norm & should be embraced. A good design is just a pretty picture without code, although, nowadays we have professional drag and drop tools which rules out the necessity of having to outsource the development work.

In having an understanding of how the development works as well as the design, clients will benefit from a beautiful, well designed website that boasts fantastic functionality. Any professional working in this industry should be the type of person to enjoy the process of learning. If you don’t keep your desire to learn sharp and charged, you will quickly fall behind.

Designers Learning To Code

8. More Animation

Animations are being used more and more to enhance a site’s storytelling, making the experience more interactive and entertaining. However, you can’t just stick animation in anywhere. A designer must carefully consider whether it adds to the site’s story elements and personality.

The key is to not over crowd your site with animation as this will become overwhelming and ultimately slow the performance of the website. Matching the animations to the client's branding and colour scheme while retaining an element of fun and wonder will leave the best impression.

More Animation

9. HD Visual 'Hero' Images

Higher speed Internet connections and better integration means websites can now cater to the strongest human sense... VISION!

Many websites are starting to feature a strong and inspiring image/video on their landing page to "wow" you before you have even started to scroll or read. This instantly creates a better user experience and leaves a lasting impression that you won't forget any time soon. We expect to see more of this throughout the next year and onwards.

HD Visual Hero Images

10. Material Design

Last year, Google launched its new style language, Material Design. It uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user.

The goal of Material Design is to create clean, modernistic design that focuses on UX (user experience). Material Design has a lot in common with flat design but uses depth and shadow to intensify the experience. Material Design doesn't rely on any particular framework so designers can use a wide variety of front-end tools to create their sites. It’s also lightweight when it comes to the code.

Material Design


Looking at the tools now available at our fingertips, we think 2016 will be a revolutionary year for the Web Design industry which shows no signs of slowing down.

Written By Kayla Sutcliffe - 11/01/16

Why not follow us and keep upto date with all our latest news and antics..

Facebook Twitter