A large portion of the design community holds the view that staying current with industry trends is essential to success in the field. A commitment to lifelong learning is essential. In the eyes of many creatives, if a piece of work is tagged as “#old,” it is a derogatory reflection on its quality because it is out of step with current aesthetic standards.
There are, however, good reasons to go with the flow. You might find the motivation to break out of your design rut by checking out sites like Awwwards, FWA, or CSS design awards. The new visual worlds can be explored and incorporated into the graphic language, whether consciously or unconsciously. Observing the work of others is a great way to stay on top of the latest developments in your field and to hone your own craft.
For the past year or two, it’s been clear that many designers are making an effort to break free of straightforward, closed compositions. Nowadays, it’s common to see open-styled, seemingly chaotic, “broken,” and cut compositions. The once-honored grid’s significance diminished as its rules were manipulated on purpose. The content itself began to shift, almost as if being relocated, and its various components began to overlap and mix with one another.
This is greatly helped by the development of Canvas and WebGL. Though less user-friendly than their minimalist counterparts, today’s projects leave an indelible impression on end users.
In terms of web development, what else can we expect this year? To see the rest of my forecasts, click here.
Open composition
Closed, symmetrical, and static compositions ruled the design world until recently. The year 2016 saw an increase in the number of sites that deviated from this norm. Examples of this trend can be found on sites like romainpsd.com, durimel.io, and booneselections.com, and they feature open compositions with elements that are suspended loosely and seem to be running away from the viewer. The way the elements on these sites are spaced out gives the impression that they “exist” past the viewing area.
Asymmetry
Similarly, 2016 disregarded symmetry, which had previously ruled the business world. Many artists have produced compositions that are not symmetrical with respect to the left and right sides. I’d like to show you some websites, including the fantastic culture.pl, the chaotic dada-data.net, and the aforementioned durimel.io.
Greater diversity
The apparent chaos
In 2016, many designers purposefully deviated from the minimalist compositional style. One common theme was a call for designers to be given more leeway. There’s a yearning for change, for sure, but there’s also just plain old boredom. People eventually tyre of only being able to make basic layouts with easily arranged components.
When looking at 2016’s projects, however, it became clear that the mayhem is merely superficial. Conventional form, colour, texture, size, etc. contrast is still the foundation of most layouts. The arrangement of the various components and the balance of their interdependence have shifted. Headers, icons, and paragraphs are increasingly used today, seemingly in defiance of common sense. Though they share a common theme with the adjacent buildings, they are physically separated and located at different ends of the block. As a result, they are not flush with any of the container’s edges and have irregular margins.
It’s also an unusual technique for shattering the tranquilly of typical minimalist design. Huge headlines stand in stark contrast to the fine details and thin separators.
More complex textures and colours
Backgrounds and patterns like thin dashes, stripes, and dots are becoming increasingly commonplace in web design.
The grid layout is extremely common and functions as a “frame” for the rest of the design. Items are shifted across the grid using the parallax principle, resulting in a frequently disorganised layout.
Grid pattern
werkstatt.fr, one of the earliest sites to use the grid layout, did so without the typical animations.
Multiple websites, including klimov.agency, brand.uber.com, and maisonullens.com, display variations on the grid pattern. It serves a very specific purpose in those contexts, which is to ensure that all repositioning of elements is rational. It enables irrational decisions to be explained, like why an illustration’s border isn’t in harmony with a button’s border. It establishes a pattern and then provides an excuse for breaking it.
Similar to the aforementioned e03, freebies.lorenzobocchi.com features content that is only vaguely organised in a grid format.
Decorative Details
The way we deal with particulars has also evolved recently. The raw minimalism of “Form Follows Function” is being replaced by a more refined style. More and more components serve no purpose other than to add visual flair. Geometric figures, or pieces thereof, can often be seen “flying” through the air. Icons are linear and a bit shaky, which takes away from the seriousness of the subject matter. Changes are being made to the placement of underscores and delimiters. The bigyouth.fr and kikk.be websites both suffer from the same digital noise and glitch issues.
Less frequently do buttons take the form of stern rectangles with texts inserted in the centre. Like on dahllaw.dk and yasuhiroyokota.com, they are typically rendered as rounded, shifted dashes. As seen on sites like hpsoundincolor.com and cavalierchallenge.com, another option for button design is to use Canvas to make eye-catching hovers.
Well-planned stories, with aesthetically pleasing transition animations between chapters.
Animated GIFs on the web have been around for quite some time. Also, you can’t say that they run counter to the minimalist philosophy. On the other hand, they are a part of expanded web design opportunities, alongside Canvas. There’s nothing like the allure of a new chance to try something exciting and novel.
The rigid separation into sections of the page is rendered unnecessary by the abundance of animation. There is no jarring transition between pages as you scroll through a website. A gentle animation occurs when content disappears and reappears. These changes are starting to occur in more deliberate sequences. They are not merely filler between sections of content but rather carefully crafted stories in which every detail is carefully timed (Nationalgeographic.com, stylenovels.com). Website animations are not an afterthought but rather an integral part of the design process.
Simple designs are brought to life with engaging animations. They enrich the page with something new and make it distinctive. On sites like Ifly50 and tennentbrown.co.nz, for example, they are the very backbone of the operation. Websites like Cuberto.com, lookbook.wedze.com, skarv-fashion.com, and corentinfardeau.fr feature their slick, aesthetically pleasing designs.
Elegant typefaces
Even the fonts being used have evolved to reflect the new vogue. For the longest time, neo-grotesque fonts like Helvetica, Roboto, Lato, and Open Sans were the only ones used on the web. Neo-grotesque, which is slightly more “decorative,” was typically used for headlines, while its simpler style was typically used for paragraphs. Avoiding serif fonts seems to have been a trend.
Things have begun to shift over the past two years. Graphic artists and designers are known for their fearless experimentation with typefaces. These days they’re more open to combining serif and sans-serif typefaces.
It’s not easy keeping up with the many changes being made to website typefaces. Various effects, images, and videos are superimposed on top of texts, and the texts themselves may be animated by isolating and rearranging individual letters.
The expansion of web typographic variety is influenced by improvements in web typographic technology and by bolder design choices.
Geometric typefaces
Italic and serif typefaces fell out of favour, while sans serif geometric typefaces like Futura, ITC Avant Garde, Proxima Nova, and Poppins and Montserrat from the Google Library rose in favour. They stand out more than the “invisible” neo-grotesques do. The use of heavier weight, as seen on the relatively ancient website hugeinc.com and on more recent sites like sequence.co.uk, startuplab.no, and www.protest.eu, contributes to a more “aggressive” and expressive tone on the web.
Serif typefaces
Serif typefaces are widely utilised, especially for large headlines but also for smaller text such as signatures and paragraphs. Those with more aesthetic value, like those found on duhaihang.com and jennyjohannesson.com, are the ones most frequently used. Bodoni and Didot-inspired typefaces are two other widely used options.
Monospaced typefaces (“typewriter”)
In a unique twist, some websites, like admirhadzic.com, cuberto.com, and designembraced.com, use proportional typefaces that are more commonly associated with typewriters.
Contrasting pairing of typefaces
In 2016, there was a shift away from using complementary typefaces toward using more contrasting combinations. A strong contrast between the sizes of texts bolstered the expressive combinations. Typographically, this manifested itself in the pairing of serif fonts in the body text with geometric ones in the headers and the use of serif fonts in the body text with geometric ones in the headers.
Large typography as part of the key visual
In KV, making the font size extremely large was a trendy choice. It made for striking visual separation between headers and body text. Examples include the websites oursroux.com, femmefatale.paris, and monsieurcaillou.com.
Some websites, like corentinfardeau.fr and nurturedigital.com, use decorative lettering in the form of an initial.
Goku, a serif typeface, is used prominently on the aforementioned jennyjohannesson.com due to its decorative qualities.
Additional effects imposed on typography
The use of typography alongside visual media like film and animation is becoming increasingly common. The sections all make sense on their own, and the typography works in tandem with the setting and the other design elements. It’s no longer acceptable practise to arbitrarily superimpose type on an otherwise dark image. Presently, designers are weaving background typography with other elements, animating it, and so on to create interesting relationships between all the elements.
Larger letter sizes in paragraphs
My previous experience as a print designer left me with the bad habit of using 10px typefaces when I first began my foray into the world of web design. Nonetheless, I learned quickly that 14px is the most readable size on the web.
Now more than ever, serif typefaces in their larger sizes are all the rage.
Embrace the dark side
Color was used in a variety of ways by 2016’s designers. There may be a slight leaning toward darker tones, though.
Websites with a stark white background are becoming less common as designers embrace more nuanced colour palettes and design elements.
Darker websites, where black or its dark gradation fills the background and creates a slightly foreboding and sometimes bizarre mood, have become increasingly common in recent years.
Despite this, it’s tough to forecast that this trend will significantly expand this year. Yet brands’ colour palettes are an integral part of their identities, so you can’t expect them to completely revamp their messaging in response to fleeting fashions.
Summary
There are many promising opportunities in 2017, but there are also some threats to be aware of.
For my part, I worry that many web designers will become arrogant when faced with the challenge of using Canvas. When you factor in emerging styles, you end up with a lot of sites that are too fancy for the average user to understand.
Many new creations will likely not function correctly across all browsers and mobile devices, which gives me pause for concern. I feel like we’ve completed a full circle. Currently, we find ourselves in a situation reminiscent of when Flash was criticised for being slow and resource-heavy despite its widespread use and dominance of the web.
It also worries me that the new “deconstruction” trends might not resonate with commercial clients or even be a good fit for their communication style. Financial or government websites shouldn’t appear disorganised or too casual.
I’m curious as to how long it will be before fresh ideas flood the retail sector. It’s important to note that most of the sample websites I used were made with the needs of advertising firms, design studios, and other members of the creative community in mind. Websites like these usually go their own way, and they’re frequently ahead of the curve when compared to other sectors. Trends that are successful in this subculture don’t always immediately translate to the mainstream. In that case, they may end up having their shape rounded off a little bit so that they can win over more people.
Despite this, I have high hopes for the future of web design in 2017. It may be a stretch to predict that minimalism will eventually die out, but I have no doubt that the movement is undergoing some shifts and developing.
The trend of minimalism is evolving toward greater complexity and nuance. This year’s websites will feature even more canvas-like elements. ‘Apparent chaos,’ variety, and freedom of expression will increase in forthcoming works. This is great news for designers who have grown tired of the prevalence of the minimal Flat, Material, and Metro styles.
It’s possible that I’ve been too biassed in this article. I may have even tried to find meaningful patterns in the seemingly insignificant repetition of certain details that caught my eye for no other reason than that they were appealing to me. Leave a comment below if you agree with the sentiment that minimalism is thriving, “the apparent chaos” is merely a passing trend, and Canvas will go the way of Flash. But if you agree with me, you can also post a comment saying so. 😉
Authored by Merixstudio’s in-house designer Pawe Pacura
