New Web Layout Ideas for 2015

Originally published at: http://www.sitepoint.com/web-layout-ideas-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

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 Note: Eight&Four has redesigned since I wrote took this screenshot.

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

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.

Invisible 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 Note: Greats have also redesigned since I took this screenshot.

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 in high 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.

Continue reading this article on SitePoint

Great article Simone. I really like the Split Screen layout for websites alowing two prominent features to be showcased!

Nice post :slight_smile: I quite like the idea of no containers - am working on a personal site at the moment so think I will have a play around with it - thanks Simone.

I read that and wondered what that meant. It took a moment to realise it was no ‘visible’ containers - my mind went straight to structural HTML which left me wondering “How does that work then?” :smile:

Thanks!

Most of those sites are apparently built by people who only ever test things on their own setup.

For example shamballajewels, on a screen in portrait-mode only shows the left half of the page plus no scrollbar.

I see a half of a huge bloated image of a …ring?
And the text:
“Extremely lavi
Each magnifice”

VERY professional!