If you want to design a modern website, you should also take a look at current web design trends. This article presents you the 43 most important current web design trends – with examples and tips for implementation.
A contemporary web design skillfully uses the appropriate trends.
Or should you rather do without them? Trends are transient, and the website should still look contemporary even after the trend has peaked.
But is that possible at all?
In this article, I highlight the most important web design trends of recent years.
And explain how and where the use of these trends can still be useful.
Trends – combination of design & technology
Trends in web design are not limited to design topics, but usually go hand in hand with technical implementation. If you want to take it a bit further, you could also take marketing/communication aspects to it.
In this article, however, I would like to limit myself purely to the design-technology trends. Because these often go together.
For example, when the CSS3 property gradient was widely supported by browsers a few years ago, large-scale gradients on websites came (back) into fashion. One can therefore often say:
Technical possibilities bring forth design trends.
This is how a number of trends have emerged in recent years. Some have already passed their peak, others are just on it.
Jonas Hellwig describes the life cycle of a trend quite aptly:
The web design trend has reached its peak when professionals have already seen enough of the effect, but customers absolutely want exactly this style. When the trend has passed its zenith, a blatant counter-trend often follows. Skeomorphism has been replaced by flat design, rounded corners by Metro UI, etc.
Should you follow web design trends?
If you read the annual articles in the professional blogs about the coming trends, you will notice that they are often the same for years or „trends“ are mentioned, which are actually none, such as „Responsive Web Design“. Because „trend“ sounds – rightly – like a development that will disappear again. And sometimes it is not so simple: Did the trends in web design disappear at all? Are they back now? Will they go away again? Or were they, are they and will they not be just a possible component of a design, one possible of several options – no more and no less.
And yet: web design trends exist for a reason.
They influence the current appearance of many websites. That’s why a web designer should know what’s „hot“ at the moment and be able to observe these developments and use them himself if necessary.
To follow a trend means above all to adapt to the current fashion, to the pointing spirit. A website that follows trends looks modern and doesn’t cause a stir. It is not provocative and does not stand out – positively or negatively.
I don’t like to judge this.
Following a trend may create a contemporary website. However, it also implies that in a few years the website may no longer look contemporary. But a few years in web design, in the digital world, are many years in real life! And since a website should constantly evolve anyway with regular major relaunches, yes, then also the implementation of a design „trend“ can be adapted after a few years.
To stay with the „gradient“ example:
If you increasingly use gradients on a website today and in a few years gradients will be virtually frowned upon, then you can switch back to monochrome surfaces (or whatever else is currently in vogue) when you relaunch in three or four years.
Because creating a timeless website whose design „survives“ the next ten or twenty years – well, you can see for yourself…
Following the majority can bring security for the web designer that he can’t do too much „wrong“. Sure, it is not a creative masterpiece to adopt current design trends. But to implement and enforce one’s own style (towards the customer) also needs courage (on both sides).
The following is an overview of the current web design trends:
Current web design trends
Standard layouts / design templates
I would like to start with a development that came up due to a changed workflow. (WordPress) themes, coding libraries and frontend frameworks have led to websites often looking very uniform.
A standard layout has become prevalent that now characterizes many websites:
Web Design Standard LayoutThis is how many modern websites are structured:
A full-width website, with a full-width photo or video background, centered H1 text, and call-to-action buttons placed on the (emotional) image subject.
Often also with hamburger button on the right side (with an overlay menu in full screen mode).
Below that, three columns, each heralded by an icon and centered short body text. Below that, alternating parallax effects and/or smoothly fading texts, and so on.
Of course, on the one hand this represents a uniformity, but on the other hand it has proven its worth. Not only that the users are familiar with it. This layout arrangement has not prevailed without reason.
Web design development towards standard layouts and templates.
It follows some design principles that ensure good usability and user experience. For example, starting right away with a striking meaningful headline on an emotional (background) image. This kind of elevator pitch shows the visitor right away what he can expect on this site. In the best case, it captivates him rationally (headline) and emotionally (image) at the same time.
For several years now, this visual trend towards uniform(re)layouts has been strongly observed.
And the design templates also help those who are not quite as technically and/or creatively gifted to create a contemporary website. In addition, the implementation time is (significantly) faster than with individual programming.
So the templates are in a way a curse and a blessing at the same time. One could still list some advantages and disadvantages, but that should not be the subject of this article. In any case, it is more difficult to create recognition and individuality.
But instead of seeing it only as a uniformity mush, one could also say that the average of the websites has become much more attractive in the last years – just also and above all by these templates!
Web design standard layoutsThey look like copies of each other – the web design standard layouts.
And the existence of such ready-made design solutions and trends does not exclude that you can do it differently (better?) – without templates.
Tips for the use of design templates:
If you want to be more on the safe design side, use such templates.
Individuality is then more difficult to create, but not impossible.
All the more important is a distinctive, individual choice of colors, fonts and images.
The design and implementation effort can be reduced (enormously) with templates.
Topicality:
Dissemination:
Future:
Experimental/asymmetrical layouts – Off the grid.
No trend without a counter-trend, one could say here. Many uniform layouts are opposed by few innovative(r) designs. Yes, the template trend is not compelling. There are still enough brave web designers and experimental layouts.
The easiest way to create experimental(er) web designs is to literally go off the grid. The grid provides content with a structure and web designers with a framework to implement balanced layouts that look harmonious.
Having individual – or even multiple – elements protrude from this grid not only loosens up the entire design, but is a great way to stand out from the uniformity of websites. This creates asymmetrical layouts that stand out.
Experimental web design layoutsA favorite stylistic device to get off the grid are large blocks of text. In very light or very dark font color and sufficient free space as a contrast to the other content, these are sometimes placed above images.
The visual hierarchy is often disturbed here, or the reading flow is impaired. This is rather unfavorable for very text/content-heavy websites. Here, a clear structure is beneficial and necessary to guide users through the page and convey a clear content hierarchy.
For traditional companies, or companies that want to appear more classical, more innovative layouts will be rather less of an alternative.
For all others, however, they are. „Experimental“ can, after all, already be smaller out-of-the-box elements that only set discreet highlights. The appeal of asymmetrical layouts is that they are distinctive, striking and sometimes experimental.
But really innovative websites are looking for new solutions regarding content presentation, user guidance and navigation.
Siteinspire Webdesign LayoutsMany suggestions for experimental(r) layouts are offered by siteinspire.com.
Tips for the use of experimental layouts:
Even small „grid breakers“ can break up the layout and set accents.
Clearly define: If you want a common operation and structure, then only discreet layout experiments dare.
If you want a deliberately innovative layout, discuss it with the customer beforehand.
Be aware that the content reception can suffer under such layouts.
And then: experiment and be patient. Because here there are just no templates that lead one quickly(er) to the goal.
Timeliness:
Dissemination:
Future:
Modular mindset: Patterns and no pages
A website is basically a system of many different individual parts. These can be reassembled on each (sub)page, but remain the same in their core.
Basically, no finished pages are designed, but systems with recurring components, something like content/functional areas. In the Anglo-Saxon language area one speaks of patterns.
Especially with larger and more extensive pages, it is not always possible to determine in advance exactly which element will appear where.
Typical elements/modules of a website would be for example:
Navigational elements (main, meta, footer navigation)
Logo
Contact block
Teaser blocks (text with or without image)
Slider
Image gallery
And other types of content presentation
Modular web development patternThe modular structure of the Microsoft website
(Source: http://daverupert.com/2013/04/responsive-deliverables)
Especially for websites with more extensive content and pages and for websites that are based on a CMS, this approach makes a lot of sense. Because here every single page is rarely „designed through“.
It makes more sense to design such individual modules independently of each other, which can then be used and arranged flexibly.
Frontend style guides then document these modules with examples and the corresponding codes.
Frontend style guidesExample of a frontend style guide, https://lightningdesignsystem.com
Brad Frost caused a stir back in 2013 with his article Atomic Design, in which he popularized this approach.
Atomic DesignAccording to the principle of Atomic Design, pages are composed of individual elements, the atoms.
(Source: http://bradfrost.com/blog/post/atomic-web-design)
Tips for using modular layouts:
In short, it is about no longer designing complete pages, but individual modules.
For larger, more extensive websites, this approach is advantageous, almost mandatory.
Likewise with CMS-supported websites.
Don’t just start with it, but get well acquainted with this (new) way of working beforehand.
Jens Grochtdreis has written a detailed guide to modular web development: Read first, then go modular!
Actuality:
Dissemination:
Future:
Card Design
By thinking of the content as modules, there are basically many individual blocks that can be arranged variably.
These blocks can of course be designed visually as such, so that it is clear that this is a visual and content unit.
This design development is called card design. The blocks/modules are designed like individual „cards“. Imaginable like „playing cards“ on a table, which can be moved and rearranged as desired.
The Card Design separates the information blocks neatly and presents them clearly.
Card DesignTypical Card Design at dribbble.com and awwwards.com/blog.
Tips for using Card Designs:
If the block is a reference to a subpage, the entire block should be linked.
For websites with many information units, it is worthwhile to use the visual design as Cards.
Topicality:
Dissemination:
Future:
Mobile First
The web has become mobile. And it will no longer become „stationary.“ In this respect, we are only at the beginning of mobile development and – if the forecasts are to be trusted – major upheavals in many respects, which will probably also change web design and web development.
But at the latest after the last Google updates it should be clear to everyone: A website should not be „somehow also“ mobile, it should be mobile first!
Thanks to responsive web design, a website is and should be adaptable for all possible output devices. From small output devices like on (older) smartphones or smartwatches to large screens that are more like canvases.
Sure, from website to website, mobile usage intensity may still vary greatly. However, adhering to the mobile-first principle has some advantages. The pagespeed and the focus on the really important content are just two of the most significant ones.
Mobile first – web design trendWith the mobile first principle, optimization is first done for „small“ devices and resolutions, and then gradually for larger ones.
Tips for using mobile first websites:
Come to stay: Deal with the mobile first approach in any case. Even if it is not used in the next projects, different approaches will be helpful to you even now.
Loading time, content presentation, navigation options, interactions – many things are (significantly) different on mobile than on stationary.
What works on small screens usually works well on larger ones.
Timeliness:
Dissemination:
Future:
„Aggressive“ pop-ups.
Oh yes, they annoy us all: These pop-up info boxes of all kinds: Sometimes they want to sell us a newsletter (haha, yes, also on this page, but it’s worth it, really!), sometimes they ask for cookies, sometimes for …
Most annoying are the full-page pop-ups that you can’t get past. Here you have to click on something.
Why are pop-ups so penetrating? You’re just navigating the website or have already found your way around and want to read something and then … Bäähhmmm.
An „info“ appears that you didn’t want.
It not only shines on the edge of a website and is automatically hidden by us – like an advertising banner. No, a pop-up robs us of our attention, distracts and forces us to act.
Pop-ups web designA full-screen pop-up does not let you continue to use the page. It must be clicked – in this example, all for a free font download… Wow!
You can’t really get much more derogatory with your website visitors. And yet, more and more websites are relying on pop-ups.
Why? Probably because success proves them right.
Success? As far as it can be measured, e.g. the number of subscribers to a newsletter is increased. Visitors who would not have been aware of the newsletter before now subscribe to it. And if it’s only a few percent of those who have seen the newsletter pop-up, it can pay off very quickly.
There are even studies that confirm the success of pop-ups.
What is more difficult to measure: How annoyed the visitor is by the pop-up. And that the user experience suffers. It is unlikely that many visitors leave the website as soon as a pop-up appears. But they are annoyed…
Tips for the use of pop-ups:
If you can, it’s better to do without them, or use them sparingly. A pop-up actually always reduces the user experience.
However, if you have such a great offer that brings enormous added value to your visitors, then use them and evaluate the „success“.
If anything, it’s better to use „more discreet“ pop-ups than full-size ones (this is also the variant I opted for. The conversion rate of the pop-up convinced me to keep it at the bottom right).
Provide a reason for your pop-up! A simple „subscribe to newsletter“ is not a sufficient reason. Explain the benefits to the user.
And make closing the pop-up easy, so no small hidden „X“, but big and obvious. If the user isn’t interested, they aren’t!
Timeliness:
Dissemination:
Future:
Responsive Logos
Sure, regarding responsive web design one could list many different aspects as a „trend“ here individually. Responsive logos should be an example. A company logo is in itself a „sensitive“ place. Fixed in the design style guide – distances, sizes, etc. are fixed and woe betide anyone who deviates from them.
Responsive logo does not only mean to display logos in a smaller size for smaller screen resolutions. Companies and their designs are slowly becoming as flexible as websites. Adaptable to the medium.
Responsive logos means to display only an adapted logo variant if required. This means that the complete logo may no longer be displayed.
Responsive LogosResponsive logos as demonstrated on the website responsivelogos.co.uk.
Tips for using responsive logos:
Check if a scalable logo is even needed.
Creating a responsive logo is not a web developer’s job (Wuaaahhhh, developers who design…), but a designer’s job.
Check with the company first if a responsive logo is even possible/wanted.
Actuality:
Dissemination:
Future:
Hamburger menu on desktop screens.
A trend that has spread from mobile versions to the larger resolutions: „hiding“ the navigation behind a hamburger icon.
On mobile devices, yes, the hamburger menu makes a lot of sense. To save space, the menu items are not displayed individually, but only after clicking on the three-bar icon, whose meaning even the last user should have learned by now.
Hamburger Icon Mobile
And what works well on mobile, must also work on desktop – that’s what a few resourceful designers thought. And poof, the icon is already on many websites and always, no matter what resolution.
Sure, it makes a website slimmer, more generous, if many small navigation points do not have to be displayed. That leaves more room for the more essential content.
Uh, wait, the „more essential“? What is more essential to the operation of a website than the main navigation? Wherever there would be enough space to display all navigation items, the hamburger icon is unfavorable for the usability of a website.
Hamburger Icon DesktopThe hamburger icon in use on desktop websites, although there would be enough space for individual navigation points.
Tips for the use of hamburger menus:
Omit on desktop variants!
Or at least find good reasons why it should be used here.
Timeliness:
Dissemination:
Future:
Experimental Navigation
The topic fits to the standard layouts vs. experimental layouts. The classic is the following: The main navigation is on the top right. Possibly a meta navigation above it. As far as proven and conventional. Users know this, they quickly find their way around.
More and more frequently, however, experimental navigation patterns have appeared in recent years that completely break with this classic navigation and explore more innovative ways of navigation.
Such experiments can of course be very appealing and playfully „challenge“ the user and increase interaction. However, they must also be intuitive to use, because otherwise the user-friendliness suffers or – in the worst case – the user no longer knows where and how to navigate.
Therefore, these navigations are rather used for more innovative themes/projects, where the classic content intake is not so important.
Experimental navigations in web designExperimental navigations in web design, like here at hawraf.com and badesaison.ch.
Tips for the use of experimental navigations:
Only use if the theme and target group allow it.
Still try to provide an intuitive operation.
Topicality:
Dissemination:
Future:
Home page sliders/carousels.
Fortunately, they have almost disappeared again: Home page sliders. It wasn’t that long ago that every customer wanted them on the home page. Sure, all of a sudden the opportunity was there to tell so much important information right away prominently as the first thing on the start page.
The only problem was: nobody looked at the sliders.
That, what one could observe well at oneself, also studies proved. Therefore, in the post-start page slider era, it is now called to weight the content. Not everything is important anymore and is packed into slides, but to create focal points.
As before, sliders – whether on the home page or elsewhere – should be treated with caution. Too few click through the slides.
Most of the time, only the first slide is clicked on, if at all. The incentive must be very great to want to see the following slides content.
Image sliders are more common and are also used. For example, to show photos of the last game on sports pages. Or a picture gallery of all World Cup participants. Here you click through rather, and as a visitor is possibly also „happier“, as if the pictures would stand all under each other in the content area.
Header Slider – Webdesign TrendsThe Header Slider – to the Gülck it disappears gradually from company websites.
Tips for the use of sliders:
Do without content sliders.
As an alternative for image galleries, it can be useful.
If used, monitor click-through rates and draw conclusions.
Timeliness:
Dissemination:
Future:
Parallax Scrolling
What would a modern website be without parallax. I can well remember how we sat in front of the first Parallax pages and, wondered at the „three-dimensionality“. Haha, ok, the excitement has subsided by now….
Thanks to the parallax technique, foreground and background content are scrolled at different speeds. This creates the illusion of depth. And it just brings perceived „liveliness“ to the website.
Even today, parallax effects are still popular and have become established in modern layouts and templates (see point 3.1 Standard layouts / design templates).
Websites with parallax effect certainly look more entertaining, but the danger is that the distraction becomes too great.
And on smartphones, the effect becomes insignificant, or annoying due to the smaller area.
Parallax Scrolling Effect WebdesignThe Parallax Scrolling Effect
Tips for the use of Parallax Scrolling:
Easy way to make the website more interesting.
Excessive use is too distracting, irritating.
Can affect the perception of the content, so do not use on/under relevant content.
Timeliness:
Dissemination:
Future:
Long pager / scrolling.
There is a clear trend towards more content rich pages. So instead of creating several pages with shorter content, one longer one is used.
One of the main reasons is that users generally prefer to scroll instead of clicking on the next pages, which would mean a significantly greater cognitive effort (where do I have to click, what awaits me there, is it worth the click, which of the navigation points do I click on at all).
For a long time, the principle was that important content should appear „above the fold“, i.e. immediately visible without scrolling. In the meantime, this „myth“ has been abandoned.
Longer, more extensive content also gives the designer more design freedom. In some cases, the content becomes „storytelling“, so that the content follows a red thread when scrolling.
Long pager web designThe trend is towards longer pages in web design.
Tips for the use of long pagers:
Check well whether the content really fits on one page or should be better divided into several.
It must be clearly understandable where the content you are looking for is located. A long pager is of no use if the visitor does not expect to find the content he is looking for there, so he does not scroll far(er) at all.
Two further effects are often added to long pagers to significantly increase usability: Fixed Navigation (see point 3.14) and a „to the top“ link/button.
Topicality:
Dissemination:
Future:
Infinite Scrolling
If the user has reached the end of a page, then further content is automatically reloaded – this principle is called Infinite Scrolling.
Infinite scrolling is fast and user-friendly because the user doesn’t have to click to see more content. And no new page is loaded.
Sites like Pinterest and Facebook use this principle. Here we are talking about a lot of content that the visitor wants/needs to see in quick succession.
The difficulty with this method is to still be able to orient oneself or to find certain content again later on. Because after long scrolling the pages have become very long and extensive.
Infinite Scrolling WebdesignInfinite Scrolling in webdesign, like here at the example of pinterest.de.
Tips for the use of Infinite Scrolling:
Infinite scrolling can greatly increase the user experience.
However, it only makes sense to use it on pages with an incredibly large amount of information.
Even on blogs, where you could reload more article previews, the use is already critical, because the user can hardly still keep track.
Actuality:
Dissemination:
Future:
Web Design Kit
Wireframe Kit
Fixed Navigation
A typical component of modern standard layouts is the fixed navigation, which remains at the top of the browser even while scrolling. It is not scrolled away, but is always visible.
Sometimes the height of the navigation decreases during the first scroll. Logo and navigation points remain however and are thus at any time attainable.
As individual pages become longer/extensive, the advantage is obvious: users can quickly reorient themselves, and don’t have to scroll all the way back up to the main navigation to visit more subpages.
A disadvantage could be that the fixed navigation always „reserves“ a few pixels at the top, which are not available for other content.
And the navigation is always part of the screen design. So even if you have made an effort with the design of the content, above it is always the navigation.
Fixed Navigation Web Design TrendWhich is often used: The navigation bar remains fixed at the top of the browser, like here at 99u.com.
Tips for using Fixed Navigations:
The navigation is always present, which many users like.
Especially for pages with longer content, usability is increased.
For rather short pages, the method rather does not provide any added value.
Timeliness:
Dissemination:
Future:
Hero images / large format images / video backgrounds.
There is hardly a modern website that does not first present a large-format image.
Templates support this trend by providing placeholders and extensive design options for such images.
Basically, a bit of the effect of an advertisement is adopted here: Emotional image plus rational text, which ideally complement and reinforce each other.
Since we are flooded with text content and often already oversaturated, images are „quick shots to the brain“. In addition, they have an emotional effect, whereas a text first has to explain at length.
Sometimes, instead of hero images, (short) video sequences are played in the background, which of course give the page a completely different liveliness and are more entertaining than a static image.
Not only in the upper area of a website the large format images are used, also in the further content area they can be found more and more often.
hero images web design trendLarge format images in the header of the home page appear on very many websites.
Tips for the use of large format images:
A well done large format image can create a great effect.
Standard/cliché images tend not to.
Pay attention to data volume and loading time. Too large/too many large-format images have a negative effect here.
Videos affect the loading time even more.
If the video is only used in the background and does not represent the main content, the data volume used is even more critical.
The use of (background) videos strongly distracts from the actually relevant content.
To prevent the file volume of (several) large-format images from becoming too high, they should be optimized. The guide Optimizing Images for the Web helps with this.
Topicality:
Distribution:
Future:
Spilt-Screen Design
A still quite young trend is the division of the screen into two vertical halves, which can look like two pages of a magazine.
Since there is no standard for this design technique, the ways of implementation are very different.
Sometimes one half contains the current navigation points in a visually attractive way. And in the other half then the contents.
Or – similar to an advertisement – one side presents a large-format image and the other explanatory text.
Split screen web design trendThe split screen web design trend, like here at denkwerk.com and renaterechner.at.
Tips for using split screens:
The possibilities/ideas here are enormous, so it’s hard to find one that fits the content AND where the user experience doesn’t suffer.
Generally tends to fit more innovative themes/projects as well.
A minimalist content design can help not overwhelm users with this usage concept.
What works well on larger screens may quickly become critical on smaller resolutions because content is no longer arranged appropriately next to each other, but below each other.
Timeliness:
Dissemination:
Future:
Non-Rectangular Headers
A necessary „evil“ of web design is the rectangular shape that inevitably results from HTML containers – boxes, rectangles everywhere.
For a long time, the only way to get around this „rectangularity“ was to use images. Thanks to CSS3 and SVGs, however, there are now new possibilities and these are used again and again.
Especially for the design of an attention-grabbing header, the departure from the straight horizontal edge is a great way to visually stand out.
Non Rectangular Headers Webdesign TtrendIt doesn’t always have to be horizontal – this is how excitement comes into web design.
Tips for the use of Non Rectangular Headers:
Vertical and horizontal lines direct the user and give the design orientation and stability.
Therefore, use non-rectangular headers only with caution. In other words, do not use them more often in other content areas.
Creating Non-Rectangular Headers is a comprehensive guide about different ways to create Non-Rectangular Headers.
Actuality:
Dissemination:
Future:
Animations & Microinteractions
Flash animations used to provide entertainment and effects on websites. When that technology went out of fashion, so did animations for the most part. Then JavaScript libraries like jQuery slowly came along and with them, movement again. In the meantime, beautiful effects can already be achieved with CSS3.
Animation Illustration Web Design TrendEven large animations of illustrations can be implemented well, for example, with JavaScript and SVGs.
In the meantime, it is hard to imagine modern websites without animations. They don’t have to be large animated sequences, often they are just smaller effects, but they have a great effect for the user guidance.
Popular are hover animations, which run on mouseover over an element. This can be a simple color change, which then runs slightly animated and no longer fast and hard.
Or the mobile menu that „flies in“ when you click on the hamburger icon.
Or text blocks and images that fade in smoothly when scrolling as soon as they enter the visible area.
Some of the animations are also called „microinteractions“. These are discreet effects that enhance the user experience by making it easier for the user to use.
Animation web design trendSmaller discreet animations can be used to enhance the user experience.
Tips for using animations & microinteractions:
Microinteractions enhance the user experience wherever the user can interact with the page and that’s where they should be used, e.g. navigation, links, buttons, forms.
Discreet, small animations are sufficient here.
„Larger“ animations should be used with caution. For example, sliders, where images and texts are animated differently, are often already too much effect.
In contrast, discreetly showing and hiding content can also enhance the user experience.
Timeliness:
Dissemination:
Future:
Animated GIF images
They had actually already disappeared: GIF images. Thanks to social media, they’re back, stronger than ever.
Small animated sequences that show short clips or loops of movies or videos on social networks.
Animated GIFsThat’s right, thanks to animated GIF images, it’s easy to get freaked out….
Like an animation, a GIF image immediately catches your eye because of the movement. And the GIF format doesn’t need much storage space either.
Responsive Web Design Animated GIFIt couldn’t be simpler to explain. Animated GIFs are well suited to illustrate certain facts.
Tips for the use of GIF images:
For very short (photo-realistic) animations, GIF images are well suited.
Since a GIF image cannot be stopped, it can quickly become annoying. Therefore, only use them in a targeted manner.
Actuality:
Dissemination:
Future:
First Flat Design, then Material Design
A few years ago, the so-called flat design emerged. After years of skeuomorphism with its realistic designs, the elements became much more reduced again. No shadows, no gradients, no textures, no embellishments – only plain monochrome surfaces remained in the end.
Flat design followed a minimalist trend, where simple aesthetics were the order of the day. At the same time, the advantage was that the loading time of the websites was reduced, as elaborate images were dispensed with.
Skeuomorphism Flat Design – Webdsign TrendsThe difference between skeuomorphism and flat design: from realistic design to flat minimalist design.
Then came the so-called material design. Here, too, large monochrome areas are very present, but (discreet) shadow effects and gradients were added again. As well as the microinteractions described above.
The resulting depth effect increases the user experience.
Many frameworks and templates have the Flat and/or Material Design also as a model.
Material Design – Webdesign TrendsMaterial Design: Similar to Flat Design, but again with more „depth“ through e.g. shadows and gradients, plus animations.
Tips for the use of Material Design:
Shadows, gradients and microinteractions are (often) part of a modern website.
Used discreetly, you can’t do much wrong with them.
If you build your website according to the Material Design principle, you have a modern design, but it doesn’t make you stand out very much either.
Topicality:
Dissemination:
Future:
New morphism / Soft UI
First Skeuomorphism, then Flat and Material and now… the mixture called Neumorphism. You could almost sum it up that way. A neologism from the terms new and skeuomorphism.
Neumorphism looks like a soft skeuomorphism: soft shadows and rounded corners, plus smooth transitions.
This type of design is problematic because the main color of the elements also corresponds to the background color. Although this looks harmoniously flowing, the contrast suffers and with it the readability and usability of the elements.
43 important and current web design trends at a glance 1
Tips for the use of new morphism:
Design with the „soft UI“ look very modern and harmonious.
However, the contrast usually suffers too much with this stylistic device.
If you want to work „neumorphistic“, then better still borrow from the color contrasts of flat or material design.
Actuality:
Dissemination:
Future:
Minimalism
Flat design has already been described as minimalist design. But you can push it even further by considering even color areas as „too much“.
The omission of (almost) all (design) elements until only the most important remains: It forces one to set clear (content) priorities.
Minimalist designs don’t distract from the content, they support it. In addition, the loading time of minimalist websites is very good, because no unnecessary elements and codes have to be loaded.
Therefore, the „mobile first“ principle supports the minimalist approach.
Minimalism web design trendMinimalism in web design.
Tips for the use of minimalist designs:
What sounds simple is often very difficult: „Reduce to the max“.
If you leave out everything „unimportant“, the design does not allow any „uncleanliness“, because nothing can be concealed by „superfluous“ design.
With customer projects first obtain the „ok“. Not uncommon for them to want „more design“ when looking at a minimalist website.
Timeliness:
Dissemination:
Future:
Vintage
Not to be left dead is the vintage style. With its serif typography and brownish yellowed hues, it looks as if it’s from a long-lost era that didn’t yet know digitization.
This design style is popular for handcrafted services that are meant to emphasize just that: the proverbial „craft“.
43 important and current web design trends at a glance 2
The Vintage Design Trend.
Tips for using the vintage design style:
Looks old-fashioned and handmade.
More suitable for classic craft services, hardly suitable for modern themes.
Topicality:
Dissemination:
Future:
Web Brutalism
No trend without a counter-trend, one might think, when looking at brutalist websites. Instead of focusing on clean, chic, modern designs, the trend here is going „back to the roots“, so to speak:
Design elements of the 90s are coming back in this design trend. Sure, the first thought would be: how ugly….
And just therein lies the beauty for some viewers. It’s comparable to the architecture the name is based on: Brutalism roughly means raw concrete, popularly known as concrete buildings. That is, buildings that are not artificially embellished by special facades and other decorative elements, but present themselves in their pure form with their pure materials.
A brutalist website also often appears „raw“, reduced, few design elements, hardly any CSS design.
Brutalist Websites – Web Design TrendsBrutalist websites, a wide selection can be found at brutalistwebsites.com.
Tips for the use of brutalist web designs:
Use actually only makes sense for „creative“ themes. Therefore, brutalist websites are often portfolios of designers.
So if you want to be against the current design trend, you will find an alternative here (but in the meantime it is almost a trend again).
Often brutalist websites are difficult to use, because the navigation elements are not clearly/intuitively recognizable.
However, those who want to be only partially „different“ will at least find inspiration in brutalist design.
Topicality:
Dissemination:
Future:
Stock photos
Images are emotional and therefore actually belong on (almost) every website. First port of call: stock photo agencies.
The selection is almost endless. Images in quantity and quality that you would hardly be able to implement yourself – and certainly not at the prices of the stock agencies.
For many purposes, stock images are absolutely fine. The only problem is that stock images look like stock images!
Extremely artificial, „over-professional“ – to put it more directly: like interchangeable cliché images.
Stock photo web design trendTypical stock photo. Type model always looks extremely friendly and in a good mood in different poses.
Tips for using stock photos:
Sure, stock photos don’t have the best reputation.
However, stock photos are not always bad.
For certain purposes (e.g. small supporting article photos in news portals), they are definitely more economical than taking your own photos.
Or if you lack the budget for a photographer, they can be a viable alternative.
For more on stock photos, check out the article Cliché Images.
Topicality:
Dissemination:
Future:
Authentic photography
If you don’t want to fall into the „stock photo trap,“ you should create your own authentic photos that show „real“ people in „real“ situations, not those contrived ones.
Of course, this requires a budget that is not too tight.
Individual images – Webdesign Trends
Individual Images – Web Design TrendsIndividual images naturally look more authentic than the usual stock photos.
Tips for the use of authentic photographs:
Individual photos are always preferable to stock photos.
One thing is clear: the effort to create your own and professional photos is much greater than searching for stock photos in the portals.
However, should you decide to do so, then choose a professional photographer.
You can find more ideas about individual image ideas in the article about individual image motifs.
Topicality:
Dissemination:
Future:
Monochrome Icons & Flat Look Illustrations.
Along with flat design, two types of icons have emerged:
The monochrome „stroke“ icons and the plain icons consisting of a few colored areas.
There is hardly a modern template that does not have the monochrome icons in its repertoire.
Monochrome Icons – Webdesign TrrendsTypical monochrome icons & icons in flat style.
Tips for using monochrome icons:
This type of icons are the stock photos among illustrations. „Short“ and standard – just a one-size-fits-all look.
They can be used for many website themes, but they are less suitable for setting accents.
There are enough templates for the type of icons, so you don’t have to get particularly creative here either.
Actuality:
Dissemination:
Future:
Individual illustrations
Not only can you counter the general stock photo trend with individual photos – you can escape the standard icons and illustrations with individual illustrations.
Custom illustrations help to create your own visual language and achieve high recognition and stand out from other websites.
Custom Illustrations – Web Design TrendsUsing custom illustrations also helps to achieve high recognition and individuality.
Tips for using custom illustrations:
The scope for illustrations is huge, as the examples above show.
And with that, the possibilities of desired characteristics, effects and implementation styles are also enormous.
Developing a characteristic style takes a lot of time and often can only be done by a designer/illustrator.
Actuality:
Dissemination:
Future:
Isometric Illustrations
A touch of 3D: Isometric illustration, often quite technical in their appearance.
Classic office or work situations and/or typical hardware products are often shown, as can be seen in the examples below. Sometimes both are combined and „little digital worlds“ are created in an illustrative style.
43 important and current web design trends at a glance 3
Isometric illustrations in web design.
Tips for using isometric illustrations:
There are many ways to implement them. Mostly, however, they appear quite technical.
This is one of the reasons why providers of digital services rely on this isometric illustration.
Since there are now countless templates available, the individuality factor is usually low.
However, due to the 3D effect, this kind of illustrations have a great attention.
Topicality:
Dissemination:
Future:
Mix of illustrations and photos
What to use: Custom-created photos, stock images, or illustrations? How about a combination of photos and illustrations!
Such collage-like compositions give a playful impression, which creates a great recognition. In addition, you don’t have the problem with interchangeable images and the same stock icons and illustrations.
43 important and current web design trends at a glance 4
Mixes of photos and illustrations.
Tips for using a mix of illustrations and photos:
Suits for high recognizability and individuality.
Especially suitable for „creative“ web designs.
The challenge of creating suitable mixes is likely to be even greater than with pure photos or illustrations.
There are no templates or master copies.
Timeliness:
Dissemination:
Future:
Geometric shapes
Geometric shapes are reminiscent of the classic basic shapes triangle, circle and square, and for this reason alone they are striking design elements.
Geometric shapes appear technical, striking and rational. They can be used for decorative purposes, as well as for delineating different content sections.
43 important and current web design trends at a glance 5
Geometric shapes in web design.
Tips for using geometric shapes:
Geometric shapes are timeless design elements.
They tend to appear static-stable and technical-functional.
Topicality:
Dissemination:
Future:
Organic shapes
Organic shapes are a bit of the opposite of geometric shapes. They are just as striking and eye-catching, but appear rounder, softer and more natural, so not as strictly technical.
Organic shapes tend to represent growth, naturalness and harmony.
43 important and current web design trends at a glance 6
Organic shapes in web design.
Tips for using organic shapes:
Organic shapes are also attention-grabbing and very versatile.
However, unlike geometric shapes, they are softer, more harmonious.
Are more likely to be used „only“ as decorative design elements and less as content elements.
Actuality:
Dissemination:
Future:
Dark Mode
Comes originally from the software and programming corner: Brightly shining white backgrounds are unpleasant and exhausting for the eyes in the long run. That’s why the „dark mode“ has been around for a long time:
Black background with light texts – which is easier on the eyes in the long run.
Even in modern browsers, a dark mode can now be activated. Since a web design and its various colors are finely tuned to each other, this browser-side setting and adjustment not infrequently leads to rather unattractive results.
And also especially in times of the mobile web, where one is no longer sitting in poorly lit office rooms when using the internet, but is on the move, often confronted with bright sunlight. This is where dark websites are particularly helpful, as texts can then be read more easily.
This development can also be taken up in web design and work with dark backgrounds and light texts – without the user having to adjust this himself.
43 important and current web design trends at a glance 7
Dark mode in web design.
Tips for using dark mode:
Helpful in very bright environments.
Still rather unusual and rare on websites.
While in „normal“ web designs the bright background shines, it is the other way round with Dark Mode:
Bright texts and images now shine and appear much brighter than when used on a white background.
For corporate websites, it can quickly become critical, since the other communication tools are usually designed on a light background. Logo, colors, etc. are then matched to this and less for use on dark backgrounds.
Topicality:
Dissemination:
Future:
3D
3D elements are of course always eye-catching. And if they are also animated even more so.
What used to be Flash animations are now 3D animations with sound. Often small funny gimmicks that catch a lot of attention. But too often they remain just that: gimmicks.
The real added value of the 3D elements is too often not clear.
43 important and current web design trends at a glance 8
Tips for the use of 3D elements:
3D elements, even more so as animation, are attention-grabbing.
However, the creation is quite complex. Therefore, animations are mostly created „only“ for the start page.
Unfortunately, the added value is too often limited.
Actuality:
Dissemination:
Future:
Bold typography
Is actually mentioned for years again and again in the web design trends. From there, I’d hardly want to say whether it’s all the rage right now, or already over, or actually just really coming up.
But big striking typography is definitely always a design option.
Thanks to the large selection of web fonts and the advent of high-resolution displays, the use of many serif fonts is now quite possible without sacrificing readability. This also makes it possible to implement trends and designs that were previously only known from the print sector. The big striking typographic design is one of them.
Bold typography – web design trendsBig striking typography as a design feature.
Tips for using bold typography:
Typography is a powerful visual tool, but it expects a lot of fine-tuning and good design skills.
Great bold typography can be used to create great accents and achieve high recognition.
Sufficient space should be given to the choice of font(s).
You can find ideas for typographic designs here.
Topicality:
Dissemination:
Future:
Overlapping texts
It’s a bit like experimental layouts – texts (or even other elements) don’t stand exactly and well-behaved in the grid, but stick out of it. Especially popular are large, prominent headines that don’t stand in a row, but break up the grid and overlap other elements.
Overlapping elements give the design a – at least slight – spatial effect.
43 important and current web design trends at a glance 9Large overlapping texts in web design.
Tips for using overlapping texts:
It can be a great design element for fairly short distinctive headlines.
It can also quickly look like a „jumbled“ mess.
The choice of font then becomes even more important here.
Challenge with different screen sizes, here the text can quickly overlap the other elements rather awkwardly.
Topicality:
Dissemination:
Future:
Ghost buttons
Buttons are – actually – the more prominent links. They are bigger and more colorful and encourage users to click on them.
And then there are the ghost buttons, which are more inconspicuous, appearing like a „ghost“ on the website.
Ghost buttons are unobtrusive and simply designed. They have a presence, yet they keep a low profile. They invite you to click, just more discreetly.
Ghost Button – Web Design TrendGhost buttons in use – striking, yet subtle.
Tips for the use of ghost buttons:
Ghost buttons are often used in modern designs.
A discreet frame around the link text, and the button is ready.
If you need a clear call-to-action button, you should not rely on ghost buttons, but rather design them distinctively.
If the button is „only“ one element among several, then it can be ghost button sometimes.
Actuality:
Dissemination:
Future:
Creative typography
Sure, web fonts etc. are in use. But to get that special design kick, texts/headlines are (re)designed specifically.
This results in creative typography that is eye-catching and distinctive and can add a special touch to web design.
43 important and current web design trends at a glance 10
Tips for using creative typography:
Use with caution, as it does require great design skills to make it look good.
One of the most powerful typography tools to generate attention and individuality.
Doesn’t come as a „template“ or template, and therefore must be customized each time.
Topicality:
Dissemination:
Future:
hover effects
Sure, links and other interaction elements should change one or more visual identifiers on mouseover.
But there are other elements where a hover effect enhances the user experience by visually highlighting the element.
43 important and current web design trends at a glance 11
The hover effect on a portfolio.
For example, with price tables, the current column that the user hovers over can be highlighted.
Tips for the use of hover effects:
Should only be used discreetly, as a hover effect is often associated with a link.
If a hover effect is used outside of a link, then it should increase usability / readability.
Topicality:
Dissemination:
Future:
Duotone effect
A monochrome image is a single color image, for example a grayscale image. In the duotone effect, a second color is added, similar to duplex printing.
Usually the images are used over a large area and together with the colors used, the effect results in great recognition and emotionality.
In the meantime, not only two colors are used, but the images are also often colored with several color tones or entire color gradients are used.
Duotone web design trendsDuotone in web design – colored images have their own aesthetics.
Tips for the use of Duotone effects:
The duotone effect can be used to create a distinctive and recognizable design quite simply.
While the individuality may be quite high due to the colors used, the effect itself is not.
With the help of the Duotone effect, images can also be used as a background over a large area and the text is still easily readable on it.
The duotone effect makes emotional images less conspicuous.
If you only have typical stock photos at your disposal, the Duotone effect or a gradient filter is a good way to make the image interesting.
The same goes for images that are inappropriate for the screen design because of the colors, or multiple images that don’t match in color. Here the duotone effect can unify them.
Actuality:
Dissemination:
Future:
Gradients
I mentioned it at the beginning of the article as an example: in the days of flat design, they were considered lost.
And now gradients have come back with force.
Buttons, backgrounds, duotone images, large texts – nothing is safe from gradients anymore.
Discreet, small color gradients occur just as much as striking gradients between very different color tones.
Gradient web design trendsGradients in web design have become acceptable again.
Often strong intensive colors are used for the gradients. But there are also the quieter, more discreet gradients that rely on more restrained color tones.
The gradient is then not as much the focus as in the strong examples, but provides a more harmonious balanced appearance:
43 important and current web design trends at a glance 12
Tips for using gradients:
Subtle gradients add depth to a design and can make it easier to use because, for example, content areas are more clearly separated visually.
Striking gradients should be chosen wisely and are more suited to more innovative, creative themes.
If no images are available, color gradients can be a nice alternative.
You can find many ideas for gradients at coolhue, Gradient Buttons or WebGradients.
Actuality:
Dissemination:
Future:
Colorful bold colors
And it gets „colorful“…
The days of minimalist understated design are over, at least for some websites. This is where the colorful, attention-grabbing tones come in.
Perhaps something like the counter-trend to minimalism. No longer subtle, monotonous and boring.
Bolder, more extroverted, more innovative – that’s how the new color scheme could be described.
In Web 2.0 design, bold bright colors were already the order of the day. Then the colors became more discreet, often more pastel (see the color trends in web design). And now they are often more saturated again, which also like to come along as flashy color gradients.
Bold colors – web design trendsCourage for color: Bold, bright tones in use.
Tips for the use of bright colors:
Bright, bold colors are most suitable for weighty elements such as buttons, links or headlines.
Their excessive use should be avoided – or well justified.
Too many different strong colors tend to irritate and make usability more difficult.
Together with neutral hues, bold colors come into their own even better.
Actuality:
Dissemination:
Future:
White space / Blank space
Ok, white space doesn’t exactly sound like a new trend, but more like the little 1×1 of good design. But while many websites still basically neglect to design with white space, there are some modern websites that use white space purposefully.
Web designs characterized by large empty/white frames help to focus and allow content to be prioritized visually. It makes the really important stuff stand out even more.
43 important and current web design trends at a glance 13
When white space can really work…
Tips for using white space:
White space tends to be neglected in general. Courage to the gap should have the web design and also customer. Not every space needs to be filled with content or graphic elements.
Large white space requires targeted prioritization and a good visual hierarchy.
Where there are fewer elements, they stand out all the more. That means they have to be designed all the „better“. Challenge and opportunity at the same time.
Timeliness:
Dissemination:
Future:
Overview of current web design trendsCurrent web design trends
at a glance
Conclusion of the web design trends
When I started this article, I didn’t think that so many web design trends would come together in the end. And probably I have overlooked one or the other (then off into the comments with it).
Trends in web design
But two things struck me while writing:
No trend without a counter-trend!
Either the counter-trend comes with a time delay (skeuomorphism was followed by flat design) or they exist in parallel (stock photos and authentic photographs).
Which points out to me:
There is not the trend or trends that should be used in any case!
You should be careful only with extremely short-lived trends, but actually all of them presented here can be seen for many years and/or they will be used for many years to come. In this respect, you can’t do anything fundamentally wrong with any of the trends presented at first.
It is more important to see which trend suits the respective website.
Is it worthwhile to use one of the trends, at least partially? Can you strengthen the desired effect of the website and does it fit to the content?
It may also be worth recombining trends. How about a minimalist design and ghost buttons? Or bold typography on duotone images?
The nice thing about web design trends is: You can learn about them – like in this article – analyze them and apply them yourself. But you can also ignore them in your own work or remix them. There is a wrong or right only in connection with the theme of the website.
Quite often, the golden mean is a good way to go: so pick up a few modern web design trends, but not too many, but combine them with timeless design elements.
And now it’s your turn:
Which web design trends do you use? Have I forgotten any important ones? What trends do you see coming in web design?
Frequently asked questions (FAQ) about web design trends:
Should you follow web design trends?
Yes and no, blindly following and applying them simply because it is „in“ at the moment is certainly not the way to go. But it is important as a web designer, internet agency or website owner to know the current trends to see what could fit to your own website or customer projects. The trends in this article show you some ideas.
When should you use trends?
When they fit well to the website project: When they fit the content, the design, the desired effect, the functionalities, the target audience. Discreet animations in a minimalistic design with „bold“ typography can work well with a modern and high-quality design – and not even look „trendy“, but simply contemporary and good.
However, there is no point in randomly picking any trends and using them in the hope that this will result in a modern website design.
Which web design trends should you know in any case?
All of the more than 40 web design trends presented have their importance. But if you want to emphasize some of them, which you should deal with as a modern web designer, they are: card design, modular thinking, microinteractions and mobile first.
Which web design trends should you definitely be aware of?
All of the 30+ web design trends presented have their importance. But if you want to emphasize some of them, which you should deal with as a modern web designer, then these are: Card-Design, Modular Thinking, Microinteractions and Mobile First.