Web Design Trends

2016-11-14 14:16:00

The web industry is a constantly changing and evolving area, especially when it comes to the design and appearance of websites. A site created today will generally look completely different to one that had been built 2-3 years ago because of the difference in design elements throughout the site such as buttons, layouts, patterns and even fonts.

UI Design Patterns

With the increase demand for responsive design a lot of sites have become similar this is also down to the success of WP and templates. This has resulted in common UI Design Patterns.

Hamburger menu item

Long scroll - Placing all your important elements above the fold is now a well-known myth almost everyone is now accustomed to long scrolling from the use of mobile devices and responsive design. Works well for telling a story and can also be used to mimic a multi page site.

Card Layout

Pinterest have had huge success with this method which splits the content into bite size chunks perfect for scanning a website and will usually be several images in different sized blocks with a short and punchy heading over the image.

Hero Images

HD hero images are one of the fastest ways to grab a user’s attention. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.


Hover effects give the user a more intuitive feel. Many users that are often unsure about an element’s function hover over the item automatically for an instant visual clue.

Navigation and menus

Hidden navigation menus have become increasingly popular, especially as they can be used to save screen space.

Material Design

Is very similar to flat design which is very popular but adds more depth by using shadow effects, its main goal is to create a clean, modernistic, minimalistic design focus based on UI .

Flat Design

Flat Design Isn't going anywhere anytime soon, Flat design has been around for a while and is compatible with other trends such as minimalism, responsive web design and Material Design

Things to look out for in the future of Flat Design:

  • More Vibrant colour schemes
  • The use of long shadows to add depth
  • The use of very simple fonts
  • Even more Minimalism

Split Screens

The split screen layout features a vertical divide that can present two elements great for a business with 2 main departments or for a layout that displays an image on one side and content on the other.

Block Grids

The page is divided into several blocks either symmetrical or asymmetrical they can all be the same size or ordered in larger sizes for the more important information

No Chrome

Many Designers believe that the traditional layout of header footer and containers distract the user, when their focus should solely be on the brand/service or product often an image or series of images is used to represent these. Often very clean and minimal and the menu is usually placed on the page inconspicuously, such as a hamburger menu in the top corner.

Dated Design Trends

An older design would typically use a narrow layout, taking up the central 980 pixels of the screen rather than stretching to the maximum width and making use of the space. This can often look unattractive because of the large clear spaces that it leaves on each side of the main area. Another stylistic trend seen a lot on older websites is the use of gradients and drop shadows on the majority of the interactive elements. Modern designs tends to incorporate simplistic elements with flat colours and clear text.

More articles