New Web Layout Ideas for 2015

Every year new web design concepts emerge as some older trends recede. In the next months we will no doubt see a temporary increase in the popularity of video backgrounds, tiles and animated storybooks, just to name a few.

On the other hand, it’s almost guaranteed that responsive web design, a trend that surfaced back in 2010, will remain at the core of our designs for the foreseeable future.

Of course, this doesn’t mean that all web pages have to move towards a common and standardized structure. On the contrary, there will likely be more space for differentiation, flexibility and experimentation than ever before.

We have identified four trends, or general schemes, that we believe will characterize layout design in the next year. You can take inspiration from these models but the best design often comes when you use inspiration as a jumping off point for your ideas.

So, here are the trends.

The Split Screen

By “split screen” we mean all those websites where the screen is divided in two parts, usually of the same size, by a vertical section.

There are two main reasons to divide the page this way:

1. To show two important characteristics.
2. To express the idea of duality.

The first situation often occurs when a company has to promote a product or a service which has two equally significant features or variants. Since websites generally display elements stacked in order of importance, a more traditional layout may not be suitable in this case.

On the other hand, dividing the screen in two equal columns may be the best way to showcase two different aspects of the same system — for instance, a publishing system that is advantageous to both publishers and readers.

In this way, there is no need to distinguish between a primary and a secondary characteristic and the readers will immediately focus on what is important.

The second reason originates from the fact that sometimes, designers need to convey an idea of duality. In this case, dividing the screen in two parts creates two spaces where it is possible to concentrate on different topics or even on two different products. Also, this style makes you able to highlight opposite traits of a certain reality.

DESKTIME https://www.desktimeapp.com/

The first example we are going to see is represented by the homepage of Desktime, a company which operates in the office-sharing sector. They’ve cleaved the page in two in order to simultaneously satisfy the needs of those who already have an office, for and of those who are looking for one.

Therefore, they used the “vertical split” to put give equal stage time to two equally important features in their service. The style they have adopted is effective and practical, and it is also very linear and simple. Well done!

EIGHT&FOUR http://eightandfour.com/

This second example is from Eight&Four, a digital marketing company. Their homepage is also divided in two and the design is based on the contrast between white and a flat color. The division here is used to express a series of different features which are all present in the company.

The “vertical split” style is also hinged by the presence of the “&” which attenuates the division.

Container-Free Layouts

Almost since design began designers have been using elements such as boxes, shapes and lines to divide and contain content in a design. As an example, consider how headers or footers have always been designed to be visually separated from the rest of the content.

A new trend is gaining popularity centered around the idea of removing any graphic structure in favor of a more free and open style.

This trend has some common traits with minimalism but it also goes a step further. Indeed, minimalism often still uses simple, linear structures, while this new “container-less” completely strips any visual packaging.

Content itself is put at the center of the attention and the hierarchy of information is given by the choice of color, by positioning and by thoughtful typography rather than by boxes and structure.

FOREWORD http://foreword.io/

As you can see from the homepage, Foreword is an interactive agency which is based in New York and in Paris. Their website does away with any containing elements and the attention of the users is here focalized by colors and fonts.

In particular, they use typography wisely to give the most important company information. Color is prominently used to highlight other clickable voices. It is also obvious that this website, aside from being responsive in every sense, is extremely minimal.

Block Grids

We don’t need to point out here that grid structures can be a very effective way to create responsive websites. In this case, every module will contain a particular piece of content such as a heading, an image or a text.

Modules are typically used in the homepage of websites but they can be developed in every other page to satisfy the need.

The dimensions of each module is designed to be flexible and it will adapt to the screen size. This makes a robust “grid layout” is a very versatile tool and it can equally usefully used for websites as well as mobile applications.

However, one of the challenges of this approach is that if you create many modules of the same size, it can be difficult to create a distinction between the most interesting material and the older, and less important items.

Indeed, if many blocks are of uniform size, the user’s attention may not be grabbed by any item in particular. To avoid this problem, one new approach is to create modules which have different dimensions according to what they contain.

GREATS http://www.greats.com/

Greats is a New York based company which sells men’s footwear, mainly via their website. Their website is their showcase, thus every detail is studied and taken into careful consideration.

“Greats” opted for the utility of a grid layout. They’ve stacked their homepage with rows of modules and each module contains a pair of shoes. The modules all have similar sizes and their shape is implied rather than strictly marked out. Indeed, the user is encouraged to ignore anything other than the parade of shoes.

Single Screen Sites

The last trend we have been seeing a lot in the last 6 months are websites dominated by a background image that responsively always fits the screen. Usually, these sites are very plain and certainly tend toward a minimalistic design sense.

However, the signature feature of this design trend is their lack of a scrollbar: in other words, these websites almost always take a ‘single-page app’ approach to their UI.

Since the available content space is limited, the designer should have in mind a very clear hierarchy of content, and they should be especially discriminating when it comes to including less than highly relevant information.

In most cases, the image (or often even a video) dominates the design, leaving very limited space for other design ideas. It may demonstrate the product or it may simply be used to evoke a emotive, filmic feel.

SHAMBALLA JEWELS http://www.shamballajewels.com/

“Shamballa Jewels” is a company which markets a range of jewellery. The website has a homepage which is composed by a unique page where some of their works are shown. There isn’t any scrollbar and the navigation in the site is granted by a menu at the top of the screen.

What I really like about this site is that the background keeps changing. Indeed images which fit the whole space are alternated with vertical split screens.

The examples above show that outstanding, effective design, doesn’t need to be tethered to the 4 or 5 most common layout patterns we see out there. Each one resisted the urge to start with the familiarity and safety of one of the popular grid/frameworks — and got a great result accordingly.

Does that mean the more common web layouts don’t work?

Of course not. But as Mark Twain’s said “To a man with a hammer, everything looks like a nail.”

Make sure you’re looking at a nail.

Frequently Asked Questions on Web Layout Ideas