Once you have learnt the significance of information architecture and wireframes in building

your web presence, you must identify the importance of visual design principles. In addition, you
should also remember that building a web presence is not a one-man show; you need to
coordinate with multiple teams. Once the final page is ready, it is necessary to get it tested by
the user.

Inadequate visual appeal can make your website drain and suffer from a high bounce rate, even
if you have a great IA and a good wireframe. For example, look at the screenshot of
Lingscars.com given below. What do you make out of it — a plethora of random colours, a
missing brand logo, and many moving and flashy objects. The site’s purpose is to lease a car,
but it is so disorganised and cluttered that you cannot even move past a first look.

Hence, to avoid such a disaster in terms of visual appeal, you need to know about specific
optical components and follow certain basic principles that would improve your website’s
graphic design.

© Copyright. upGrad Campus Pvt. Ltd. All rights reserved

Components of Visual Design

● Colour: You should be mindful of how your users perceive different colours and use the
most suitable ones. For example, many websites have a blue colour scheme because it
conveys trustworthiness and calmness.

● Typography: This defines the arrangement and appearance of the text on your website
or app. This aspect is crucial because people are accustomed to seeing certain types of
fonts for certain purposes, as each font conveys a specific message. For example, when
someone promotes a wrestling match, they would never do so in cursive, swirly font,
which is thought to be more mellow.
● Graphics: This relates to images, photographs and illustrations. Using images well is
critical when marketing your product. For a product like OYO Rooms, it’s essential to
show the pictures of hotel rooms well so that users feel comfortable about booking them.

Visual Design Principles:

● Similarity: The principle of similarity says that the brain perceives objects that share
similar characteristics as more related than objects that do not share similar
characteristics. Hence, related things should look identical in shape or colour. For
example, consider the home page of The Guardian. At the top of the page, news
categories such as sports, business, and lifestyle have similar shapes, colours and
sizes. This conveys to the user that these categories perform a similar task, which they
indeed do by opening the page of the particular section.

● Proximity: The principle of proximity says that the brain perceives objects that are close
together as more related than objects that are farther apart. Thus, you should put related
objects close together in your website design. For example, on the Guardian website,
you can see that the various news cards are grouped for each separate section. This
automatically makes the user think that all these are related.

● Visual hierarchy: It determines which element of your design the user considers most
important. This importance dictates where the user pays attention, influencing the order
in which they look at the various elements on the page or the screen. For example, if you
look at a web page or a news website, you will see that the headline has the largest font
size and is in a different colour from other parts of the news article. Hence, someone
visiting this website would assume it is more important than the rest of the news story
below.

© Copyright. upGrad Campus Pvt. Ltd. All rights reserved

.As a marketer, you are not the only one building your website. It is a team effort in that many
different teams come together to create the final website. The following are the roles and
responsibilities of the groups involved in building any website.

● Marketing Team: It is the responsibility of the content/marketing team to come up with

simple and engaging narratives that meet the objective of the brand. Hence, they are the
ones who are responsible for all the content that goes up on the website.
● Graphics Team: All the graphics on the website are created by the graphics team based
on the input briefs given by the marketing team. E.g. an image that showcases an
eCommerce store within a Macbook.
● UI/UX Team: The UI/UX team figures out the website’s structure and, through multiple
iterations with the content and graphics teams, try to create the final mock-up of all the
website pages.
● Tech Team: After the iterations are complete between marketing/content and graphics,
the final mock-up with the finalised content and high-resolution graphics is shared with
the tech team, who would then code it.

What if your UI and UX design are perfect in principle, but a bug in your code deters a user from
logging in or throws an error saying that the page is not found? This makes the user feel irritated
and like leaving the website. Hence, prior testing before the actual launch of the website is a
critical step. There are two types of testing here:

1. Unit testing: It is done individually on each of the modules. This helps in checking
whether a module is developed correctly by the developer. For example, when it comes
to the data being filled in any online form, the developer needs to check the response for
a valid ID, an invalid ID, and an open submission. These would assist the users in terms
of knowing what to do next and enhance usability.

1. User acceptance testing: This is the final testing level before the developer accepts the
app/website. Users verify whether the system contains all the requirements that were
initially agreed upon. User acceptance testing is done at two levels — alpha testing (the
employees of the company test it) and beta testing (a sample set of customers of the
company test it). The reason behind including this level of testing is that, sometimes,
developers might develop certain features according to their understanding. Therefore,
unless the end-user tests it, it would be impossible to go forward and ascertain whether it

© Copyright. upGrad Campus Pvt. Ltd. All rights reserved

 meets their objectives.

At the end of the session, you should be able to understand:

1. Identify the visual design components and principles.

2. Identify the roles and responsibilities of different teams involved in the project.
3. Acknowledge the importance of testing

© Copyright. upGrad Campus Pvt. Ltd. All rights reserved

Disclaimer: All content and material on the upGrad Campus website is copyrighted, either
belonging to upGrad Campus or its bonafide contributors and is purely for the dissemination of
education. You are permitted to access, print and download extracts from this site purely for
your own education only and on the following basis:

● You can download this document from the website for self-use only.

● Any copies of this document, in part or full, saved to disk or to any other storage
medium, may only be used for subsequent, self-viewing purposes or to print an
individual extract or copy for non-commercial personal use only.

● Any further dissemination, distribution, reproduction, copying of the content of the

document herein or the uploading thereof on other websites, or use of the content for
any other commercial/unauthorised purposes in any way which could infringe the
intellectual property rights of upGrad Campus or its contributors, is strictly prohibited.

● No graphics, images or photographs from any accompanying text in this document will
be used separately for unauthorised purposes.

● No material in this document will be modified, adapted or altered in any way.

● No part of this document or upGrad Campus content may be reproduced or stored in

any other website or included in any public or private electronic retrieval system or
service without upGrad Campus’s prior written permission.

● Any rights not expressly granted in these terms are reserved.

© Copyright. upGrad Campus Pvt. Ltd. All rights reserved