Every year new web design concepts emerge as some older trends recede. Over the upcoming months we’ll no doubt see a temporary increase in the popularity of video backgrounds, tiles and animated storybooks – just to name a few. Responsive web design, a trend that surfaced back in 2010, will undoubtedly remain at the core of our designs for the foreseeable future.
But 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.
In this article, we’ll identify four web design trends that we believe will characterize layout design in the next year. You can take inspiration from these models, but remember – the best design often comes when you use inspiration as a jumping off point for your own ideas.
1. 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:
- To show two important characteristics.
- 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.
Dividing the screen in two equal columns may also 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.
Desktime (above) is a company that operates in the office-sharing sector. They’ve divided the page in two to simultaneously satisfy the needs of those who already have an office and those who are looking for one. They’ve used the “vertical split” to give equal stage time to two important features in their service. The style they have adopted is effective and practical, and it is also very linear and simple. Well done!
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.
2. 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. For 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 that centers 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 goes a step further. Minimalism often still uses simple, linear structures, while this new “container-less” style 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.
A great example is interactive agency Foreword’s homepage above. 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.
3. 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 contains a particular piece of content, such as a heading, image or text. These types of modules are typically used in the homepage of websites, but can be developed in every other page to satisfy particular needs.
The dimensions of each module is designed to be flexible and will adapt to screen size. This makes a robust “grid layout” 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 (above) 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.
4. Single screen sites
The last trend we’ve been seeing over 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 keep in mind a very clear hierarchy of content – and they should be especially discriminating when it comes to including less 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 (above) is a company which markets a range of jewelry. 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. Images that 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 resists the urge to rely on 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.
This article was originally published on Sitepoint and written by Simone Sala.
Featured image: Studio Meta (via One Page Love)