Web Design - What's Trending in 2021-Mantran Presentation

PRESENTED BY
Web-designing Trends -
What’s new in 2021?

Why Does the Design of your Website
Matter?
2
38% of visitors will
Stop engaging with
an unattractive
website
Website Design is
the No. 1 determinant of
business credibility
for 48% visitors
94% of all First
Impressions are
design related
Users form their
opinion about a
website within 0.05
seconds
Users take only 2.6
seconds to skim
through the
webpage
Source: https://hostingtribunal.com/blog/web-design-statistics/

Web
Designing
Trends - 2021
1. Color Design trends
2. Images and Illustrations
3. Parallax scrolling
4. Horizontal Scrolling
5. Neumorphism in user interfaces
6. Dark Mode
7. Website Interactivity trends
8. Typographic trends
3

1. Color
Design
Trends
A website color scheme
is the combination of all
the colors and shades
used throughout a
website — be it the color
of the background
image, navigation menu,
written content, or even
smaller icons and
buttons.
4
Unusual Color Combinations
• 2021 is seeing the use of a lot of unusual color
combinations to break the monotony and stereotypes.
Brands use unconventional color combinations to
portray their uniqueness.
Comfortable Color Scheme:
• This year, many websites are preferring colors that are
comfortable to look at. B2B companies, art studios, can
use muted colors or soft pallets and earthy tones that
give a calm and relaxing vibe.
Gradient and 3D Color Transitions:
• Use of gradient color scheme isn’t new per se. But 2021
saw an increase in its usage. Gradient creates an illusion
of movement. It can be taken a step further with the
use of 3D color transitions.

5
Example of Unusual Color Scheme
Unleashed: An HR
company uses a
traditionally
feminine color, pink
as the background
and yellow in the
foreground to
communicate its
uniqueness. These
colors also give the
website a fun and
playful look.
Source: https://unleashed.company/

6
Examples of Comfortable Color Scheme
Zendesk: The
financial services
page of Zendesk
uses different
hues of blue to
convey trust and
a feeling of
comfort and
calmness.
Source: https://www.zendesk.com/financial-services

7
Example of Gradient Color Transition
Stripe: An online
payment platform
uses gradient color
transitions
throughout the
website to create a
pleasant look. It
adds depth and
dimension laying
emphasis on their
message.
Source :https://stripe.com/en-in

8
Example of 3D Color Transitions
Zendesk
Sunshine, a CRM
platform from
Zendesk uses 3D
color transitioning
on the hero area
of the website to
make a static
image look
moving. This
creates intrigue.
Source: https://www.zendesk.com/platform/

Why Color Design?
1. Different colors invoke different emotions.
2. The color palate you use sets the mood of your website
3. Attracts the user attention
4. Accentuates the right elements
5. Creates brand recognition.
9

How to Choose the Right Color Scheme?
Understand the color wheel
Understand various color combinations
Learn about the color psychology
Think about the industry you belong to
Think about your branding
Think about your target audience
Address the visual hierarchy
10
* For better results, Consult an experienced Designer

2. Use of
Images and
Illustrations
Images and
Illustrations on a
website help in
illuminating and
unifying the
business message.
11
Black and White Illustrations: Creating customized
black and white textured illustrations will give your
website a retro look and give a unique identity to your
brand.
Black Outlines: Another trend that is getting popular is
the use of black outlines outside images or text. These
outlines provide a distinct character to the images.
Even stock images can be enhanced with outlines.
Overall, it elevates the look and feel of your website.
Geometric designs: If you want an edgy look on your
website, this trend is for you. Web designers are using
simple geometric shapes to create complex art
illustrations that attract attention instantly.

12
Example of Black and White Illustrations
Mailchimp: The
popular marketing
tools and service
provider uses
textured black and
white illustrations
against a yellow
background to
portray a fun and
creative brand
persona.
Source: https://mailchimp.com/

13
Example of Black Outline with illustrations
AHM: An
insurance
provider
combines black
and white
illustrations with a
black outline
against a white
backdrop to add a
personality to
their otherwise
simple and basic
website.
Source: https://ahm.com.au

14
Example of Geometric Shapes
C Works: A digital
printing company
uses simple
geometric design in
an innovative
manner. The design
compels the user to
spend more time on
the website.
Source: https://cworks.com.gr/

Why Images and Illustrations?
 Make website content more comprehensive
 Define the personality of your brand
 Make the content more memorable
 Enhance attractivity of the website
 Increase user engagement
15

How to choose right Images and
Illustrations?
1. Choose images and illustrations that align with your brand
2. Be consistent with the choice throughout the website
3. Avoid stock images and if you do use them, add a design element
like a black outline to personalize it
4. Use images and illustrations that invoke the right emotion
16

3. Parallax
Scrolling Parallax scrolling made its debut in web-
designing in 2011. But it is still a strong
trend.
It is a technique used to enhance website
interactivity.
The images in the background move slower
than the images in the foreground.
This creates a sense of depth or an optical
illusion when a user scrolls through the
website.
Parallax scrolling is a
visual effect that
creates depth by
making different
elements move at
different speeds
when you scroll the
website.
17

18
Example of Parallax Scrolling
Verity Studios: This
website for indoor
drone systems uses
Parallax Scrolling to
create an immersive
and magical
experience that
compliments its
brand message.
Source: https://veritystudios.com/

Why Parallax Scrolling?
Instantly catch the user’s attention
Present Products in an interesting manner
Engage users through storytelling with Parallax scrolling
 Add an element of curiosity and fun to your website
Make your website more interactive and lead visitors to a CTA
 Increase the memorability of your website
19

4.
Horizontal
Scrolling
A user has the benefit of scrolling from left
to right in addition to the usual top to
bottom vertical scrolling
Until recently, horizontal scrolling was
considered a “No-go” especially on mobile
devices
However, that’s changing with many
websites adopting this navigation technique
to show more content in the left to right
space, on mobile and desktops, adding to
the user experience.
Horizontal scrolling
is a page navigation
technique that lets
users scroll from left
to right.
20

21
Source: https://nemesiscorporation.com/
Example of Horizontal Scrolling
Nemesis
Corporation: A
gaming company
uses only
horizontal
scrolling for its
top-level pages to
present
information in an
interactive and
engaging manner.

22
Lenovo: On the
desktop version,
Lenovo offers
horizontal
scrolling to
browse and
select from
product
categories.
On the mobile
website, see how
users can scroll
horizontally to
view and navigate
to different
products.
Source:
https://www.lenovo.com/in/en/d/deals/tablets?IPromoID=LEN587025&sort=sortBy&currentResultsLayoutType=grid

Why Horizontal Scrolling?
Display several images in a row
Navigate a large image or a large catalogue of products
Conceal secondary items, and show them only if User chooses
 Unique and engaging way of user interaction, specially on mobile
23

5.
Neumorphism
Neumorphism is a recent design trend that
came into being in 2019.
It basically means New Skeumorphism
Skeumorphism mimicked real life objects in
design elements
Neumorphism uses flat design and
skeumorphism to achieve a minimalistic
look.
It usually uses pale colors, easily accessible
shapes and subtle effects in the design
Neumorphism is a
web interactivty
trend that combines
both flat and
skeuomorphic
designs to create a
clean, solid look
24

Skeumorphism vs Neumorphism
25
Source: https://f5-studio.com/articles/using-neumorphism-in-ui-design-of-a-business-site/

26
Example of Neumorphism
A demo website
that shows how
neomorphism
looks. The website
looks very clean
and minimalistic.
Source: https://demo.themesberg.com/neumorphism-ui/

Why Neumorphism
 The website looks visually fresh
 It is more interactive
 It goes well with a minimalistic design.
 It creates a 3D look for mundane design objects like buttons or
other elements
 It can be mixed with other design elements to create a unique
website
27

6. Dark
Mode It uses dark colors as the primary
background of the website.
It creates a premium look and makes it
easier to see content in low-light situations.
The most commonly used color for dark
mode is black or a shade of grey.
However, some websites may use some
other dark colors as well.
Dark Design or Dark
Mode theme
websites involve a
low-light UI design
that puts lesser
strain on eyes while
browsing.
28

29
Example of Dark Mode
Everest: A UX
design company
uses the dark
theme to showcase
its work and
capabilities. The
theme makes the
website look
premium.
Source: https://www.everest.agency/

Why design your website in Dark Mode
 Causes lesser strain on eyes
 Makes your website look chic and modern
 Allows other design elements to pop which can make your
messaging more effective
 Gives a premium feel to the website
30
*Allow your user to switch between normal and dark mode for better user experience

8.
Interactivity
Trends
Web Interactivity is
the use of creative
web interactivities
to attract users and
cause them to
engage on a page.
31
Audio
 Designers are now incorporating audio instructions or
other sound effects into the website design to involve
users more deeply.
Interactive cards
 Websites are using interactive cards to make
navigation easier and more participative.
Custom cursors
 Websites are creating custom cursors to make them
eye-catching and captivate the audience’s attention.
Scrollytelling
 It is the technique of telling a story while scrolling. It
helps convey important information while making it a
collaborative experience.

8.
Interactivity
Trends
Horizontal Scrolling
 This scrolling technique helps to display a large
amount of information in a row and makes the user
engage to see next. (Refer slide no:24)
Neumorphism
 Using neomorphism in UX elements like buttons, etc.
makes them more visible and compels people to click
(Refer slide no: 28)
Parallax Scroll
 Another scrolling technique makes the website more
interactive and engaging for the users. (Refer slide no:
20)
(contd.)
32

33
Source: https://www.prevint.pt/en
Example of Audio
Prevint:
A website for
interpersonal
violence
prevention uses
audio to instruct
its users about the
steps to take while
encountering
violence.

34
Example of Interactive cards
Source: https://in.mashable.com/
Mashable:
An entertainment
website uses
interactive cards to
list its reels. The user
can click on the
selected card to get
more information.

35
Example of Custom Cursor
Source: http://headache-off.com/
Headache Off:
A website that
promotes medicines
for headache
transforms the
cursor into the
shape of a hand
when a user clicks
on the image. This
makes the user
engage and interact
with the website.

36
Example of Scrollytelling
Source: https://www.washingtonpost.com/nation/interactive/2021/capitol-riot-arrests-investigation/
The Washington Post
used scrollytelling in
its story about Capitol
Hill Riots to engross
the user and make it
easier for the user to
take in the
information.

37
Source: https://www.apple.com/mac/
The mobile version of the Apple website uses
horizontal scrolling on the top of its menu to
make it easier for the user to browse its various
product categories and make a selection.

Why Website Interactivity?
To increase the Website’s reach
 Improve Engagement
 Enhance User Experience
Build Customer’s Trust
 Evoke Action
Improve Conversion
38

8.
Typographic
Trends in
2021
Typography is the
use of type on the
website. It is
essentially the font,
size, alignment and
layout of text on the
website.
39
Serif Fonts:
With screens getting
bigger and resolutions
getting better, designers
are using different types of
serif fonts like slim,
elegant, etc. to provide an
elegance to the website.
Retro Fonts:
Retro fonts with a modern
twist became popular this
year. This font gives an
interesting personality to a
website.
Outline Typography:
Outline Typography has
been a hit this year. It is
mostly used in the hero
area for the main headline.
But it can also be used
throughout the website to
make it look interesting.
Bold Typography:
This year, thick fonts are
the rage. Bold typography
increases the readability
and catches user attention
instantly.

40
Example of Retro Fonts
Source: https://boldandnoble.com/
Bold and Noble: This
company sells vintage
products. So, the
typography goes with
their brand image
perfectly.

When to Choose Retro Fonts
1. If you want to invoke nostalgia or a feeling of warmth, and cheerfulness.
2. To give a vintage, simplistic and elegant look to the website..
3. To compliment a traditional or minimalistic look of a website
41

42
Pest Stop Boys: A Pest
Control Company uses
bold typography to
bring attention to its
name which is a play on
a famous English band
Pet Shop Boys.
It makes the brand
message clear – it stops
pests. It also makes the
CTA more visible.
Source: https://peststopboys.co.uk/
Example of Bold Typography

When to Choose Bold Typography?
1. To make your brand message stand out
2. To provide emphasis
3. To create a fun and playful vibe
4. To increase readability
43

44
Examples of Serif Fonts
Source: https://www.emcap.com/
Emergence: An
Investment
Company uses
Serif Fonts to
give a playful
yet formal look
to their
website. It
combines its
minimalistic
design with
Serif fonts for
an elegant yet
professional
look.

When to Choose Serif Fonts
• To create a traditional look and feel.
• To invoke positive emotions.
• To make a website look more elegant.
• To compliment a website’s minimalistic look.
45

46
Adoratorio Summer
Club: A Summer CLUB
for Gamers Uses Outline
Typography Against A
Dark Background
Throughout the Website
to highlight the brand’s
personality
Source: https://summerclub.adoratorio.studio/
Examples of Outline Typography

When to ChooseOutline Typography
1. To attract attention To Important Content
2. To intrigue a visitor
3. To give a Serious look to the website
4. To Accentuate Its Simplicity
47

How to Choose the Right Typography
1. What do you want the tone of your website to be – serious or fun,
formal or casual, etc.
2. Does the type align with the message you want to convey?
3. Does the chosen type look attractive?
4. Is the chosen type easily readable?
5. What type to choose to clearly present the informational
hierarchy?
48

Final Words: Other Considerations in Website
Design
49
Design should
be in harmony
with your brand
Superior user
experience
Easy and logical
navigation
Ensure your
website is SEO
friendly
Easily accessible
and memorable
website

References and Legal Disclaimer
https://webflow.com/blog/web-design-trends-2021
https://www.designbombs.com/websites-typography-driven-design/
https://weblium.com/blog/retro-design-trends-10-best-retro-website-examples-of-2021/
https://www.webfx.com/blog/web-design/20-websites-with-beautiful-typography/
https://www.thelogocreative.co.uk/15-typography-design-trends-for-2021/
https://99designs.com/blog/trends/color-trends/
https://qodeinteractive.com/magazine/horizontal-scrolling-websites/
https://99designs.com/blog/trends/web-design-trends/#2
https://elementor.com/blog/web-design-trends/
https://www.theedigital.com/blog/web-design-trends
https://gimmemojo.com/top-5-web-design-trends/
https://startup.info/10-interactive-web-design-ideas-you-can-apply-to-your-website-in-2021/
https://www.biggerpicture.agency/insights/8-leading-web-design-trends-to-dominate-in-2021
https://usabilitygeek.com/horizontal-scrolling-user-experience-best-practices/
https://uxplanet.org/2021-ui-ux-design-trends-and-how-to-make-them-work-for-you-49d8a04fb09b
Disclaimer:
All third party trademarks (including logos and
icons) referenced by Mantran remain the
property of their respective owners. Unless
specifically identified as such, Mantran's use of
third party trademarks does not indicate any
relationship, sponsorship, or endorsement
between Mantran and the owners of these
trademarks.
50

51
• Content Marketing Services
• Content Creation & Copy writing
• Website Redesign & Optimization
• Online Reputation Management
Connect with us
contact@mantran.in
© 2021 Mantran, Bangalore, India
www.mantran.in

Web Design - What's Trending in 2021-Mantran Presentation

More Related Content

What's hot (20)

Similar to Web Design - What's Trending in 2021-Mantran Presentation (20)

Recently uploaded (20)

Web Design - What's Trending in 2021-Mantran Presentation