The top of the yr is close to, and that would solely imply one factor. It’s time to look forward at what web site design might seem like in the yr to return.
Like yearly, I scoured and searched the web far and broad in search of the brand new up-and-coming trends that we might begin seeing extra of on web sites launched in 2019. The whole lot from format to colours, typography to white area, and the whole lot in between — no design aspect has been neglected of the attainable web design trends of 2019.
Under are the ten design trends you may simply begin seeing extra of across the web when our digital calendars flip to 2019.
- 1 1. Damaged grid and asymmetrical layouts
- 2 2. Fluid/natural design and parts
- 3 three. Nostalgic / Throwback / Retro design aesthetic
- 4 four. Extra enhanced/elevated picture remedies
- 5 5. Monochromatic and absence of shade
- 6 6. Overlapping design parts
- 7 7. Reimagined hero/header areas
- 8 eight. Giant and experimental navigations
- 9 9. Greater than sufficient white area
- 10 10. Pushing the boundaries of typography
- 11 Some ultimate takeaways
1. Damaged grid and asymmetrical layouts
I added this development to final yr’s design predictions information, however it appears to be sticking round in 2019, too.
The idea of the grid in design phrases is an imaginary aircraft with horizontal and vertical strains, used to assist format parts on the web page or display. With most web sites, the grid is straightforward to level out — you can look down the left aspect of the web site, for instance, and see the brand, title, and content material, line up collectively, for probably the most half. When you have a damaged grid, you have gadgets which might be pushed round on this aircraft in a method that makes the grid really feel much less inflexible, or damaged.
Occasions Talks‘ web site showcases a damaged grid format all through most of its web site, particularly in the hero space (proven above) and all through totally different sections of its website.
This kind of design — one which favors the sudden, pushing boundaries, and experimenting with asymmetry — has been round for some time. It’s been used as a way to assist stand out from the gang, to attract consideration, or to in any other case experiment with design. Nevertheless, in 2019, I see it making extra of a press release and turning into extra widespread on the web.
Studio Revele experiments with an uneven and damaged grid web site design aesthetic with its homepage design (the circles may be moved across the display to assist facilitate this damaged grid idea extra).
In 2019, I anticipate to see extra use of damaged grid and asymmetrical layouts as we begin to draw back from the inflexible grid type that we’ve come to embrace fairly closely in current years. With experimenting with the grid and being comfortable with asymmetry in web design, I anticipate this development turning into extra prevalent in the approaching yr.
2. Fluid/natural design and parts
Slowly increasingly we’re pulling away from the straight strains that got here with flat design and beginning to experiment with extra fluid shapes and features. A majority of these shapes, ones in which aren’t your typical circle, sq., rectangle, or any straight-sided form are also known as fluid or natural shapes.
Small a part of Wandering Aimfully’s homepage, that includes natural shapes and features seen behind the circle pictures and as a delicate background behind the heading under them.
By shedding the very straight and near-clinical strains we’re accustomed to seeing on-line, and changing them with parts drawn from nature and life (comparable to shapes of ponds and lakes, torn items of paper), these natural shapes and features could make designs really feel extra approachable and in line with human nature.
Mawla’s web site makes use of natural shapes and features on their homepage, particularly right here in their hero space on their website.
Shifting into 2019, the standard shapes which were used in web design for therefore lengthy (circles and squares, I’m taking a look at you) will begin to be joined or changed by extra natural shapes and features, bringing an entire new factor of design and intrigue to web sites design and launched in 2019.
three. Nostalgic / Throwback / Retro design aesthetic
What’s previous is new once more. As we’re shifting past flat design, the place experimentation appears to haven’t any limits, the time appears ripe to additionally convey again previous design parts with a touch of nostalgia.
Statamic’s web site design includes a retro colour scheme harking back to the brilliant colours and imagery of the 1980s.
Experimentation with nostalgia and retro design types can create a pleasant juxtaposition between then and now design. What makes this much more fascinating, is that we will anticipate seeing extra retro design types reflecting time durations earlier than web sites have been simply accessible to the plenty; making it really feel “new” to many individuals.
Nice Jones’ web site options attribute 1970’s typography and colour scheme, a design aesthetic that was widespread method earlier than ARPANET in 1983.
I anticipate seeing extra web sites embrace totally different design types that lend themselves to occasions previous, each in the design of the web sites themselves and in the content material. A few of these throwback parts will doubtless embrace shade schemes harking back to design trends of the previous and typography that makes us assume again to a unique time.
four. Extra enhanced/elevated picture remedies
Pictures have all the time introduced distinctive design alternatives, particularly on the web. Placing photographs in circles, making them black and white, including a drop shadow behind them – all of those are methods that designers have been utilizing to reinforce and/or draw consideration to pictures on web sites (and nearly another sort of design).
KOBU’s web site options imagery that has the themes reduce out as an alternative of a normal picture, permitting the design to stream between the “cut-outs” of their workforce members.
Taking picture remedy a step additional can draw consideration to a picture, and even draw consideration away from a picture. The place most web sites function a really giant hero-style picture that spans the whole width of their web site, taking over quite a lot of peak and never altering the picture a lot in any respect, altering up the best way pictures are introduced is a design development that I consider will begin choosing up extra traction in 2019.
Drip’s web site exhibits photographs which were reduce out and have added drawings and shapes to reinforce the picture even additional, which additionally locations extra emphasis on the design of the location itself.
As an alternative of executing one sort of picture remedy, anticipate to see web sites layer picture remedies to push the picture so far as it may go to both draw extra consideration to them or to tug consideration away from them. Stacking design remedies like making a picture monochromatic, chopping out the topic, or including a sample on prime to make a model new picture, will probably be extra outstanding in web design in 2019.
5. Monochromatic and absence of shade
Having hundreds of thousands of colours at your fingertips is cool and all, however what if you restricted your self to only one colour, or no shade in any respect? If achieved properly, that sort of design constraint will help improve a design and make it extra memorable.
Digital Bro’s web site sticks to a really monochromatic colour scheme through the use of one hue of yellow and really not often strays from that one variant of yellow (black and white are thought-about neutrals).
Limiting your self to at least one colour may also help solidify your branding whereas including constraints in phrases of flexibility of design. With most web sites having two-five colours which might be used all through, utilizing only one colour might make you stand out and be extra memorable to an internet site viewer.
Local weather’s web site sticks to a grayscale shade scheme, absent of some other colour, even making their movies on the location all grayscale.
Pushing it one step additional and eliminating colour all collectively is certainly an choice if you’re trying to simplify your shade palette (in artwork and in design, black, white, and grey aren’t thought-about colours a lot as they’re known as neutrals). In 2019, I anticipate extra web sites to make use of much less colour or no colour in any respect.
6. Overlapping design parts
Falling intently in line with damaged grid layouts and asymmetry, having gadgets overlap one another can deliver visible curiosity to particular varieties of content material on a web page. This could convey a component of the sudden as we’ve grown accustomed to parts on a web web page having their very own area and separate from the weather round them (usually not touching each other).
Mad Studio’s web site options overlapping parts as the primary design aesthetic all through the location, enhanced by delicate animations that make the web site really feel three-dimensional.
When carried out with cautious consideration, the development of overlapping parts on a web page will help improve the general aesthetic of the location. This may also be fairly troublesome to execute giving the mobile-first world we stay in, as overlapping parts if not finished nicely may cause confusion and frustration of customers when parts overlap in the mistaken methods.
Hers’ web site showcases overlapping parts in elements of their web site, together with their foremost hero space on the house web page.
Utilizing overlapping parts the place they share comparable area is a development I see rising extra widespread as we transfer into 2019 and begin experimenting extra with an internet site being three dimensional.
7. Reimagined hero/header areas
As hinted above, most hero areas (formally generally known as “above the fold”) function a big picture that spans a lot of the viewport, typically with some textual content on prime to focus the eye of the viewer. And during the last couple of years, there hasn’t been a lot in the best way of experimentation with this space of an internet site (arguably, crucial space).
A singular strategy to a hero space utilized by Zoo Artistic (treating the hero space as a billboard, and intelligent use of animation).
Whereas some web sites have began to push the boundaries of what’s potential with their hero/header areas on their web sites, as we draw back from the standard full-width-image-with-text-overly sort heros, I anticipate to start out seeing increasingly more experimentation by web designers as to what’s potential in this space.
Andreas Nymark’s web site includes a white-space heavy hero space with a easy heading on the backside of the hero space (notably additionally hitting on one other development to be talked about later in this text).
In 2019, I anticipate numerous forms of experimentation to this all-important space of an internet site, together with minimizing the world, altering up the content material current (and utilizing one thing totally different than only a full-width picture), and treating this space with extra significance in grabbing viewer’s consideration first hand.
It looks like yearly there’s a development to do with navigation on an internet site. Doubtless as a result of it’s one of many hardest parts of the web page to design for. So important to how we use the web, however a ache to maintain it practical but aesthetically interesting.
56 Digital’s web site showcases a fairly giant navigation — making it the middle of their web site as an alternative of a smaller a part of their website.
With 2019, the development is more likely to proceed to see extra experimentation with navigations. However as an alternative of simply altering a couple of issues comparable to placement on the web page, font measurement, and even the format itself, experimentation is more likely to push the boundaries of what’s potential in 2019, resembling making the navigation the primary a part of the web site or making it very giant and a focus.
Gander’s web site has quite giant navigation in all 4 corners of its website as an alternative of the standard navigation bar throughout the highest or down the aspect.
With experimental navigations turning into extra of a design development in 2019, we will anticipate to see very giant navigations, web site homepages that’s nothing however their navigation, and navigations with refined animations.
9. Greater than sufficient white area
Utilizing white area successfully is a design device utilized by designers for many years. Nevertheless, what is probably not as widespread is the quantity of white area used and even making the white area the focus as an alternative of the content material itself.
Daniel Boddam’s website makes use of additional white area in the heading of his website, which is bringing consideration to area in any other case typically crammed with content material.
Using additional white area in this way contrasts the rationale why we sometimes use white area — add margins or areas to provide our eyes a relaxation. Including additional white area now helps transfer it to be a focus or a extra noticeable a part of the design aesthetic. By selecting so as to add additional white area in areas that don’t essentially want it, it then turns into an necessary a part of the design and extra observed by guests.
Maxime Rimbert’s web site makes use of a big space of white area on their web site, to assist draw extra consideration to the works under and visually distance the works from the intro.
Shifting into 2019, we might begin to see web sites use tons and plenty of white area to make a press release or to make it the focus of the web site. Whereas in the previous we might have thought this additional white area was a waste of area, however the development now could also be that it provides the area somewhat one thing additional.
10. Pushing the boundaries of typography
Whereas experimenting with typography is all the time one thing to be anticipated from designers, it’s a bit more durable to push the boundaries of typography on the web than it’s in print. As coding turns into extra refined, experimentation with typography on the web has turn out to be a bit simpler over time.
Kurppa Hosk’s web site experiments with typography by including animation and consumer interplay. The textual content explodes and types a circle across the consumer’s cursor.
Experimenting and pushing the boundaries of typography might embrace chopping or purposely subtracting elements of letters and phrases (counting on damaging area to fill in the remainder of the letters), images inside typography, sort on a diagonal line or form, animating typography, and so forth.
ARCHE68’s web site options typography pushed to its two-dimensional limits to make it close to three-dimensional. Not solely does the typography have a bending impact, however it additionally auto-scrolls left and proper and strikes with consumer scroll up and down (you’re seeing their navigation, which hits on one other design development talked about above).
For 2019, typography experimentation and pushing what is feasible with sort on the web will doubtless grow to be a development with new web site designs in the approaching yr. Since experimenting with sort is far simpler in print, anticipate to see the identical means sort has been handled in print to maneuver to the web as we study new methods to code for typography.
Some ultimate takeaways
We’re in a submit flat design world, and it seems to be like web design takes a extra experimental strategy than we’ve seen in years previous. Nearly no factor on the web web page is protected from experimentation as we transfer into 2019.
(Want extra inspiration? Examine our 2018 web design information, 2017 web design information, and 2016 web design information, too).
With including additional white area, making navigations the focus of internet sites, and experimenting with typography to gaining inspiration from occasions previous, 2019 appears to function web sites experimenting with their design aesthetics with nothing left untouched.