The impression that visitors
get on a website is 94% related to the theme. Therefore, it is very important
to determine a good design on your website. In order for your website to
attract many visitors, you must know the latest web design trends.
But when creating a website,
as a designer you may be confused in looking for interesting design
inspirations. What are the good website trends this year.
Well you're on the right page.
In this article, you will share web design trends this year to help design your
website.
12 Interesting Web
Design Trends and Hits in 2022
Looking for web design trends
in 2022 itself will definitely take a lot of time. Therefore we will try to
inform about interesting web design trends.
Here are web design trends
that you can try, one by one.
1. Full-Page
Header
A full page header is a header
whose full size fills most of the website pages. The header has an important
function because it is an important thing that visitors see. This trick is also
one of the web design trends that can beautify your website.
An example of a website that
uses a full page header is the Niagahoster website. In addition to a better
appearance, the function of the elements can also work more optimally.
First the website will bring
visitors to directly focus on the main information. The second design makes it
easier for you to place a call to action or CTA that will invite visitors to
make a purchase.
The example CTA used is
"Select Now", as explained above. And you can use other invitation
words according to the product you have.
So that you can easily create
a full page header, please see the following tips:
· Use a header that is the right size. Full
page header its recommended size is 1600x500 pixels. So that it can accommodate
the header proportionally.
· The header file is attempted not to be too
large. It is recommended that the size is less than 400kb. And the format used
PNG that has been optimized with tools such as Tiny PNG.
· Customize the header ganbar. You can use
someone's image to make a personal impression, a slider to show an interesting
product product, or other images that represent your business.
· Reinforce the important part. You can bold or
enlarge objects, such as header titles, discounts, featured products and
others.
· Create a CTA with an interesting desai. Create
an attractive CTA so that visitors go to the appropriate page.
2. Gradient Color
Gradient Color is one of the
designs that shows gradual transitions or color changes. This web design trend
can bring out visual depth that makes the website look more lively.
You can see an example on the
Bud Agency website. Using gradient color will make the website look more
attractive. This trend is perfect for agency businesses, online courses and
similar businesses.
You can cursing the following
tips as a reference for making gradient colors:
· Adjust the colors to your business brand.
Color gradations are adjusted to the website design. For example, if you are
going to add a logo, the color is adjusted to the color of the logo.
· The color gradations used are adjusted only.
Use only 2 or 3 colors as a gradation effect.
· Determine the design focus. The use of
oncoming light directing techniques to create dark and light effects. It aims
to create focus.
· Looking for inspiration in the real world.
Try to pay attention to the real objects around you and learn the patterns. And
use it as inspiration so that your gradation design looks real.
3. Bold Font
Use bold for your website
design. Bold fonts are still a web design trend this year.
Its function as an accentuator
of an element, bold fonts can be used at the same time to direct visitors to
the page you highlight.
Here are the steps to create
an attractive bold font:
· Determine the right size. Making sure only
certain parts are emphasized.
· Sets the contrast well. The font color is
adjusted to the background color of the design used.
· Select the appropriate font type. The font
type is tailored to your business design. In addition to SansSerif type fonts,
you can consider using other types of fonts.
4. Human Face
Human Face is also one of the
interesting web design trends, this design can make the website look more power
full. What makes this design is that many still use it on their website.
The reason why websites that use
human faces can increase business credibility is because Medalia Art managed to
increase conversions by up to 95% after using a human face on its landing page.
Here are tips for wearing a
human face design:
· Make a focus on the product. This is very important
for those of you who run a fasion and accessories business.
· Use an eye view of important information or
CTAs. This is important to help visitors find important information from a
website.
· Use expressions that match the values
offered. With this you make an impression on the intended product.
5. Grid Layout
Gring is a line that divides a
page into columns. Grid layouts are also often used by web designers to create
neater websites.
By using the website grid, it
becomes easier to organize composites that make the website more attractive. So
the grid layout has become a web design trend this year.
For example, you can see the
Jingqi Fan website whose pages are divided into 3 columns. Each column shows 1
portfolio of photos of different sizes.
Jingqi Fan's website also
looks elegant, minimalist, and has a lot of free space that can embed content.
6. Hand-Drawn
Design Element
If you want to build a
personal bond with website visitors, use hand-drawn design. The reason is
because the hand-drawn design looks more natural than other designs, thus
creating a more powerful bond.
That's why hand drawn is a
website design trend that many people like.
With a design that looks like
a painting, websites that use hand-drawn design look more impressive. So that
hand-drawn design can be an inspiration for your website.
But it is better to use the
right proportional design. Don't focus too much on aesthetics to eliminate
functionality from the website. An example is as below.
Even though it looks artistic
the navigation buttons look like part of the design. And visitors probably won't
notice it unless the button design you make stand out.
7. Progress Bar
A progress bar is an element
that describes something on a website. Usually this element is used to show how
long the page is being read.
Websites that use progress bar
designs are still a trend this year, because 75% of visitors like them. And
also the progress bar can make visitors motivated to explore the website
further.
Some examples of progress bar
ideas that can be used as inspiration:
· Tracking. A progress bar that looks like a
road serves as a tracking of the progress of sending an item.
· Radial Progress Display. This progress bar is
suitable for showing the progress of content that uses a step by step format.
· Progress saving. With a custom progress bar,
progress saving, downloading, and other progress can look more interesting.
· Round progress bar. This progress bar is
perfect for various purposes, and the pressing can be horizontal or vertical.
· Color changing progress bar. Even if it's
simple, the color transition in this progress bar will make the waiting process
more enjoyable.
8. Ultra
Minimalist Navigation
Instead of using confusing
navigation, it's better to use ultra minimalist navigation. This web design
trend can help visitors to browse your website more easily.
Ultra minimalist navigation
can also make your content look more stand out. The purpose conveyed by the
website is also more optimal.
For example, you can see the
Grab Indonesia website for minimalist navigation
With a large menu, it makes
the website simpler and easier to browse. And also the information on the
website can be conveyed clearly.
Here are tips for creating
minimalist navigation:
· Design the menu arrangement correctly.
Specify the main menu that will be displayed so that there is no need to
display all menus at once on your website.
· Use short and clear words. Use common,
easy-to-understand words on the navigation menu. For example, Home, Contact Us,
and others.
· Wear icons. By using icons you don't have to
make long explanations on each menu. For example, the use of the word hamburger
menu.
9. Mouseover
Effect
Mouseover effect is one of the
effects that allows websites to change according to mouse usage. These changes
can be in the form of color transitions of an object, cursor shapes that can be
modified, zoom in, and much more.
If you use the Mouseover
effect, the website will look more attractive. That's why Mouseover effect is
still a web design trend.
So what are the advantages of
using the Mouseover effect:
· Improve user experience. With the Mouseover
effect the website has animations, color transitions, shape modifications and
other Mouseover effects that will make the website more interactive. So as to
make the end feel at home browsing your website.
· The information is seen more clearly. Website
elements change when there is interaction with the mouse and can be used to
highlight the main information. So that visitors can easily understand the
information.
· The website looks more minimalist. You don't
need to display all the information. Because the information that appears can
be set when the mouse is pointing at certain elements. That way the design
looks more minimalist.
10. White Space
White Space is an empty space
that exists on the website. The existence of white space is important to give
the website a minimalist look. And make the information on the website easy to
understand.
Using white space has also
been shown to increase visitor understanding by up to 20%.
By utilizing white space,
making the object look wider and more minimal, the message you want to convey
is also more prominent.
Here are tips for creating
white space for those of you who are tricky:
· Use the appropriate background. Make sure the
image you're using has enough space for text. The transparency of the image
must also be set so that text or other objects can be clearly seen.
· Minimize the use of borders on images or
other elements on the website. The border used will take up a lot of space on
the website which makes the website look denser.
· Use typographic techniques, such as bolts,
italics, and others. Using typography will make it easier for text to read.
· Group information on your website pages. So
that the information will look more structured and less dense.
11. Dark Mode
This year Dark Mode has also
emerged as a web design trend. Even social media such as WhatsApp and Instagram
have become a topic of conversation because they launch a dark mode feature.
This indicates that many are looking forward to and need this feature.
Apart from the fact that dark
mode functions can make a website look elegant. For example, on the L'Atelier
website which uses dark mode on the Vurtual Economy page.
By using dark mode, it makes
the website look more luxurious and pleasing to the eye. The koten presented
also looks more prominent due to the contrasting differences.
And actually this trend has
been around since 2018. Starting from Firefox which launched dark mode for
MacOS until finally dark mode became a trend until now.
Even though the trend is a
consideration, because it may not suit your business or website visitors.
Supya is not wrong to wear
dark mode, check out the following tips:
· Sets the contrast correctly. Make sure the
contrast level between the text and the background reaches the minimum WCAG
Level AA standard, which is 4.5:1. Test the color ratio with Tanaguru Contrast
Finder.
· Do not use pure black for the background
color. At least eye description, use wrna dark grey (#474141) instead of pure
black (#000000).
· Choose a color that matches the image and
text. Instead of wearing sharp colors, it is better to use soft colors such as
light gray, pastel or other soft colors.
· Distinguish the colors of the elements
according to their order. The higher the order of colors used the lighter the
color. So visitors are easy to distinguish.
12. Dynamic
Scrolling
If you are looking for a
solution to display a long and not boring page? Dynamic Scrolling can be the
solution. Dynamic Scrolling is a transis between pages with animation effects
when visitors scroll the mouse.
By using Dynamic Scrolling you
can create a unique website and make visitors feel more at home. The proof of
this trend makes The New York Times succeed in making visitors to the website
feel at home for up to 3 minutes.
There are several types of
dynamic scrolling that you can try:
Horizontal scrolling
Horizontal scrolling is a
scrolling technique in which the page moves from left to right. This technique
is perfect for websites with content that shows a lot of visual content, such
as comics. An example is The Walking Dead website.
Infinite scrolling
Infinite scrolling is a
scrolling technique that uses animation when scrolling down. This technique is
very suitable for websites with a one single page format. And also this
technique is recommended for websites with the concept of story telling. For example,
the Nasa Prospect website.
Parallax scrolling
Parallax scrolling is a
scrolling technique where objects above the background are arranged at
different speeds following the scrolling done by visitors. This technique
provides an animation effect that makes objects on the website look like they
are moving.
Whatever dynamic scrolling is
used, it will still make the appearance of your website look unique. Whether
with horizontal, infinite, parallax scrolling, or any other type.
