03/06/2023

Session 4: Website Design - II

Segment 1: Information Architecture
Video 01
Have you ever got confused while navigating a website because you could not figure out where to scroll
next? As a marketer, you may have often seen visitors bouncing off from your website for this reason.
Suppose you land on upgrade website and it asks you to first sign up for a course and pay money for it
before providing any information about the potential course. I'm sure you will not do that. This is where
the concept of Information architecture comes into the picture. Let's explore this concept. Suppose you
visit a website and make the following observations it doesn't have a clear navigational flow. You don't
really know what the product it is selling. There is no way to browse to its other pages. You can only
scroll down to bottom of the page. Even on the visual front, it is very jarring. It overuses color
excessively, without a specific significance to any color. Informational Architecture helps you avoid such
disasters. It helps you simplify the structure of your website and make

navigation easier for the user. Information Architecture defines how the information and functionalities
of your website should be structured. A user should be able to easily find out what they are looking for in
a product. Information Architecture helps you build a product that is easy for users to navigate and helps
them achieve their goal. Let's take a look at the basic structure of information Architecture and its
different elements. The box represents a page. The line indicates how the pages are connected and each
section has some subsections. So all of these elements organize the information on the web page and
enhance its usability for the user. So now you have mapped the information architecture of the website
and decided on the navigation flow. But what's next? How do you translate that into your screen? You
can do that by creating wireframes, which are visual representations of the screen where you can decide
the layout of the screen. Let's consider Spotify as an example. Spotify's

original design can be considered a great example of poor information architecture. Spotify's website
featured a coexisting hierarchical pattern with reiteration and partial reiteration of some sections. This
made the information architecture messy, with users struggling to find what they needed and getting
lost in the redundant menu items. Renee Lean, a UX designer, found a way to improve Spotify's
information architecture by simplifying it and removing certain sections. This is an example of how an

© Copyright upGrad Education Pvt. Ltd. All rights reserved

existing website can be redesigned to make it easier for users to get around and interact with it. If you
think these examples look like something you'd see during the user experience design progress, you are
absolutely right. While I covers various disciplines from technical writing to library science, it is
particularly important within the UX field. Let's take a look at the relationship between Information
Architecture and UX. While both these concepts apply to virtual and physical spaces,

we'll focus on the virtual space to help you create websites, mobile apps, other digital products that are
easy to use.

03/06/2023

Video 02
Dan Brown, an information architect, UX designer, consultant and speaker, established the eight guiding
principles of information architecture. These guidelines are a terrific place to start when building or
evaluating the structure of your own website, so it's worth understanding the gist of these eight
principles. First principle is the principle of objects. According to this theory, content should be viewed as
a living thing with a lifecycle attributes and behaviors. Before picking a construction, the designer must
define and comprehend these factors. The second principle is the principle of choices. Create pages that
give users meaningful options by focusing the options available on a specific job and making them
relevant to the user. In certain cases, having too many alternatives might be worse than having too few
because it can cause users to get overwhelmed and even paralyzed by indecision. The third principle is
the principle of disclosure. Just display the information visitors

require to decide whether or not to continue. Once they understand the nature of the option, they can
decide whether to take it or not. The fourth principle is the principle of exemplars. Use some examples
related to the content to demonstrate to consumers what they will be able to access. If some of the
category options are not self explanatory, images can be particularly helpful and evocative in such
situations. The fifth principle is the principle of front doors. Don't design your website exclusively for
visitors who land on the front page, because not all visitors will do this. Try to make your website
accessible from any point on which your users land by giving the visitors who land on other pages the
ability to examine helpful information and navigational AIDS from wherever they come on board. The 6th
principle is the principle of multiple classification. Give users a variety of options to search your website's
content. Two methods to accomplish this are by using top level menus and

© Copyright upGrad Education Pvt. Ltd. All rights reserved

search. But some users may want to browse or move within the hierarchy, so make sure your
information architecture accommodates their needs. The seven principle is the principle of focused
navigation. Use navigational AIDS consistently. Make sure your menus are related to the same topics. A
mix of different subjects will confuse users. When creating a menu of product categories, avoid including
other services in it. Similarly, if the menu is being created for navigation, avoid including functional or
promotional items. The 8th and final principle is the principle of growth. Your website must be scalable
because the content you start with will only make up a small portion of the content you eventually
gather. Given some room to expand naturally and by addition.

03/06/2023

Segment 2: UX Basics
Video 01
User experience, or UX and web design go hand in hand. A welldesigned website ought to offer both a
wonderful visual aesthetic and a simple and enjoyable user experience. Since web design trends are ever
evolving, it's critical to keep up with the most recent developments. The user experience of your website
is also very important because a strong UX will entice visitors to stay on the website, whereas a bad UX
will drive them away. When designing a website, you have to consider many factors, but if you just start
by keeping user experience in mind, you'll be well on your way to building a successful website. The term
user experience describes the general impression that a visitor has when using a website or an app. So
UX is concerned with every facet of the relationship between a business and its existing or potential
clients. User experience is important because UX Design posts website conversions. UX design raises
your SEO rankings. UX Design can be used to build credibility and trust.

You can save money and time by using UX Design. UX Design can boost revenue. Here are some design
tips that every designer should be familiar with and use in their daily work. First, white space is crucial. A
proper amount of whitespace provides the user with a break, which is essential for users while they
process the information presented on the webpage. Second, create layouts and grids. A strong grid AIDS
in sectioning of the webpage so that the structure and content can be properly handled. When designing
grids and layouts, one thing to bear in mind is that your website's design will need to be adjusted for
various screens. Using a grid can help achieve optical equilibrium between elements on the webpage
and serve as a foundation for visual alignment. Third, consider the visual hierarchy. The information on

© Copyright upGrad Education Pvt. Ltd. All rights reserved

the webpage must be perfectly in tune with the visual hierarchy if you want to give your users the ideal
experience. This means that whatever is on the website must be both aesthetically

pleasing and simple to understand at a glance. Users will be able to browse the website more easily and
quickly complete the task they came to the page for. If you ensure visual hierarchy, you may optimize the
visual hierarchy of your website by using various methods. For instance, highlighting call to action
buttons or text with color and contrast works well. Fourth, maintain an inspiration repository or folder
imagery is a fundamental component of web design, and for a good reason too. Visually pleasing images
have the ability to snag your target audience by the neck and bring them to the desired page on your
website. It's a tool that can quickly hold a user's interest for a long enough period of time and also
persuade them to act as planned. A gallery of each image should be maintained in a single folder so that
you don't have to spend a lot of time browsing the Internet in search of the best ones. It might be
anything, including pictures, movies, other websites, et cetera. Just throw

anything in there that you think is compelling and noteworthy. Fifth, be open to criticism. It's likely that
someone constantly criticizing your work will be the best method to improve your work. Whether or not
the feedback is genuinely helpful, or whether it's just someone trying to pull your leg for fun, you will
realize that the way in which the feedback is given matters to the people who receive it. The best
method to enhance your present and future design work is through constructive criticism.

03/06/2023

Segment 3: SEO Elements in Web Design

Video 01
Let's take a look at some other elements to keep in mind for building a great UX design from an SEO
point of view, which will help you immensely in organic marketing. The first element is wireframes. A
wireframe is a schematic representation of a website or an app that encompasses navigation,
functionality, page content and usability. Wireframes are considered invaluable in the planning stages
because they enable top level functional aspects of a project to be tested before any development
occurs. The wireframing process is extremely important as it is the root of your interface design. It helps
you determine information architecture, user flow, and the logic to implement. When it comes to SEO,
you as a marketer can propose to the tech team what exactly you need from a search engine point of

© Copyright upGrad Education Pvt. Ltd. All rights reserved

view. This will help them develop a clutterfree website too. For example, an SEO specialist will identify
specific sections on the homepage or an inner page of a website where additional content or

information about the product, service or company can be accommodated. This additional content or
information will include keywords for which you want the website to rank organically on Google and
other search engines. If SEO wireframing is not included from the beginning in the layout, adding it later
can make your designs look off killer and your SEO content seem patchwork. Furthermore, if the website
feels weird to the users, your hit rate will reduce and all of your optimization may go in vain. SEO
marketers also ensure the website is structured such that it is crawlable by search engines. The second
element includes XML and HTML. Sitemaps similar to wireframes and website structures. The next
important component in the journey of a SEO marketer is sitemaps. There are two types of sitemaps
XML and HTML. A site map is a file where you provide information about pages, videos and other
elements on your website and the relationships between them. Search engines like Google read this file

to crawl your website efficiently. A site map informs Google which pages and files you think are
important on your website. It also provides valuable information about these files. For example, when
was the page last updated? Any alternate language versions of this page are available. You can use a
website to provide information about the specific type of content on your web pages, including video,
image and news content. For example, a sitemap video entry can specify a video's runtime rating and
age appropriateness rating. A sitemap image entry can include the location of the images included in a
page. A sitemap news entry can include the article title and the publication date. The third element is
internal linking in order to enable search engines to crawl the website effectively. The next important
thing besides an Seofriendly website structure keywords within the content and sitemaps is internal
linking. An internal link is a link from one page on a website to another page on the same

website. Both users and search engines use links to find content on your website. Your users use links to
navigate through a website to find the content that they want. Similarly, search engines use links to
navigate your website. This is primarily achieved through website navigation and by linking from one
content piece to another page on the same website. Wikipedia does this extremely well. For example,
whenever you read up the Wikipedia page of a specific place or person or a thing, you may have noticed
that a word or reference within the article is linked to the Wikipedia page of that person, place, or thing.

03/06/2023

© Copyright upGrad Education Pvt. Ltd. All rights reserved

 Segment 4: Visual Design
Video 01
Imagine that you see a billboard ad with text in a very small font in a mixed font style. Now, I'm sure that
it would definitely become a visually challenging task to absorb the ad for a passerby. From this we can
conclude that a bad visual appeal can force your website down the drain with a high bounce rate, even
after after having a great information architecture and a good wireframe. Let's take a look at this
website. What effect does the website have on your eyes? There is a plethora of random colors. The
brand logo is missing. There are a lot of moving and flashy objects. Fake ads, fake news reports, carry OK,
a car quiz and an online game link. It's a chaos of so many things. The purpose of the website is to lease
a car, but it is disorganized and cluttered to even move past a first look. This is why you need to have a
visual design guidelines in place so that your website or appears pleasing to the user. This is where the
principles of visual hierarchy can help you. Visual hierarchy

is a technique for classifying design elements according to importance. In other words, it's a collection of
principles that affect the sequence in which we absorb visual information. Now let's understand each
principle one by one. Principle number one size and scale help pull focus, right? Bigger is better. Size is
undoubtedly the most effective approach to accentuate visual features, even though the validity of the
old saying is still debatable. In other words, larger elements get more attention than smaller ones. This is
why newspaper headlines have a bigger font with major stories, frequently having headlines that are
even larger than the other articles on the page. Larger items, whether they are text or images, will
always stand out in any design and convey the greatest meaning. Scale or the size of one object in
proportion to another is a key principle associated with this idea. No matter how big or little an object is,
until it is compared to another object, it has no scale. Scale

enables you to establish harmony in a design and concentrate on key components. The emphasis
increases as the scale increases. This simply chocolate image is a fantastic example of how to emphasize
visual hierarchy with size and scale. The large writing explaining the purpose of the product is what first
draws your attention in the design. Note that this is achieved without taking attention away from other
components of the screen. Principle number Two playing with Perspective the majority of interfaces,
including those seen on websites and mobile apps, are two dimensional and frequently appear flat. But
experimenting with perspective, you may give the appearance of separation and distance between your
website elements, which will aid in drawing attention to the key components of your designs. You can

© Copyright upGrad Education Pvt. Ltd. All rights reserved

create the illusion of perspective by, for example, making certain components larger than others nearby
so that they appear closer to you. For example, a single page website called Porsche

Evolution charts the development of Porsche's design all the way back to 1875. Visitors get the rare
opportunity to see how Porsche's designs have evolved through time and where the automaker is taking
them in the future. Page navigation is accomplished via a slick page sliding effect. Principle number
Three color and contrast draw attention Bright colors typically grab greater attention than color hues,
just as larger elements are viewed as being more essential than smaller elements. For instance, readers
are immediately drawn to a single sentence that is highlighted in a bold color within a block of text.
Bucket Listly uses the color yellow to draw attention to keywords calls to action and the nations already
visited. It demonstrates the potential of a single color in a design when used in conjunction with white
space and appropriate ideas. While crafting the message you want to convey to your users, you should
be mindful of how your users perceive different colors and incorporate them

accordingly. For example, many websites have a blue color scheme because it conveys trustworthiness
and calmness. Green is a prominent hue used throughout the Travel Shift website to evoke a feeling of
vibrancy and to remind people of nature. The color green serves as a promise of renewal and does not
draw attention to Ctas or important content like red or orange wood. Principle number Four fonts
Organized Design the appropriate typeface combinations can draw attention to specific portions of your
website and give them their own identities. It is also possible to increase hierarchy and highlight
important text using fonts of various size and weights. Most websites use headings of various sizes to
emphasize or draw attention. The text on the website. Defining the arrangement and appearance of the
text on your website or app is very important because people are accustomed to seeing certain types of
fonts in certain contexts, and each font conveys a specific message. So if the font does not

match the message conveyed by the words, people would be less likely to psychologically accept it.
Slack's Website is an excellent example of a website that uses headings to rank information by
significance. The biggest header is in the banner section, along with some extra information and call to
Action, giving the impression that this is the most significant section. Numerous sections with smaller
headers are present below the banner to introduce additional functionalities.

03/06/2023

© Copyright upGrad Education Pvt. Ltd. All rights reserved

 Video 02
Principle number five space adds emphasis and movement the space you leave empty is equally as
crucial as the space you use when you begin designing a website that is, when it is a blank slate. You may
consider all the ways in which you can utilize the space to incorporate as many elements as possible. The
negative space between the design elements is referred to as whitespace. It can be used to separate
elements to emphasize them or group elements together. Apple employs white space to highlight its
products. The brand certainly is adept at using it confidently and effectively to generate interest, sales
and influence with the use of whitespace on the website. Featuring Apple's products, which are works of
beauty in and of themselves, allows visitors to focus on one thing at a time. Principle number six
proximity suggests relationships the viewer may believe that two elements are related if they are placed
near each other, which may encourage them to continue reading or interacting. The

key message here was to tell viewers to maintain a six foot distance, which was crucial to stop the spread
of COVID-19 at the peak of pandemic. Principle number seven alignment directs ice it is simpler to scan
content when elements are aligned along the same path as they feel connected to one another. Consider
the tables you find on numerous apps and websites. Since your eyes automatically identify each column
with the alignment of the data, there is no need for column borders to align the material in each column.
Many websites with navigation bars ensure proper alignment. You quickly recognize this as a navigation
bar because the logo and the page links are horizontally aligned and you are aware of the connection
between each page link and call to action. Principle number eight symmetry creates balance on a page
symmetrical elements can help balance a design and keep the design straightforward, well organized and
simple to read. Avioc employs symmetry to highlight its primary advantages

while providing a more comprehensive overview adjoining each image. Despite the direct centering of
the focal point, it is simple to scan the page for additional information without getting lost. You can
emphasize specific elements and make your designs appear more fluid and chaotic by intentionally
avoiding balance and symmetry in your designs. Principle number nine repetition unifies a composition
using grids and guides to set up your design. You can keep everything organized and aligned, allowing the
visitor to follow a clear path without being distracted. Each collection of elements can be closely related
because of their alignment and grouping along these guidelines, and users know where to look. The
website concept for the Mercedes Benz website uses a grid to organize items for a clean aesthetic. But

© Copyright upGrad Education Pvt. Ltd. All rights reserved

the image disregards this grid structure to draw more attention to the Mercedes, creating a pop out
effect that sets it apart from other elements. Principle number ten use motion Effectively

do you remember the time when the Internet was still young? Every pop out or call out had to flicker or
bounce to try to capture your attention. This tactic succeeded in grabbing our attention, but it did so at
the expense of a pleasant viewing experience. Consequently, your engagement did not improve. These
concepts of motion can now be applied in a subtler ways to draw attention to or emphasize particular
elements. Once more, we can take the design of Simply Chocolate to show you how. It uses subtly
moving elements to grab your attention and drop hints that encourage you to interact with the design.
The colors change to fit the product as you navigate the flavor options. You get the sense that you can
tear open the wrapper to find out more as you hover over it, since it opens up just a tiny bit to reveal the
chocolate inside.

03/06/2023

Segment 5: Implementation
Video 01

Within the marketing team, different subteams take care of the different aspects of a website's creation.
The subteams are graphics, marketing or content, UI UX and Tech. Primarily, the marketing and the
content team focuses on the content that needs to be inserted in a webpage. The UI UX team focuses on
the theme and the final wireframe. The graphics team decides the final graphics or images or icons to be
inserted in a webpage. Finally, the mockup is shared with the tech team for coding the final output. So
now you have the UI UX team figuring out the website structure and through multiple iterations of the
content and graphics, trying to create the final mockup of all the pages of the website. As you may have
guessed, in reality this sometimes leads to tussles between the various teams as the marketing team has
a particular vision for the website which may not be met by the content created, or in other cases, the
graphics may not visually depict the actual marketing idea envisioned by

the team. Keep in mind that these iterations are a part of the process as they ensure that you inch closer
to the final mockup of the design that you will resonate with your target audience. But do keep in mind a
timeline so that at a weekly level you can monitor your website building progress depending on the size
of the organization. Sometimes multiple roles can be undertaken by a single team. Also, there are certain

© Copyright upGrad Education Pvt. Ltd. All rights reserved

cases where functions such as graphics can be outsourced to vendors. In such cases, providing vendors
with briefs containing the specifications will ensure that the number of iterations to achieve the final
image is reduced. So after the iterations in terms of the marketing, content and graphics are complete,
the final mock up with all the finalized content and high resolution graphics is shared with the tech team
or the product team, who then either code it from scratch or use a WordPress theme. WordPress themes
are essentially readymade themes of code that are available

for free or a onetime fee which accelerates the code completion. These are available in the WordPress
marketplace. Now, instead of your coders working from scratch, they can start with a base theme that
matches the visual mockup the best and make modifications to it matches the desired mockup.

03/06/2023

Segment 6: Testing
Video 01
What if it looks great but doesn't? What if your UI and UX are perfect, but there is a bug in your code
that deters a user from logging in or throws an error saying that page is not found? An important aspect
of creating your web presence is to make sure you test it before going live with it broadly. As a marketer,
you need to ensure that the tech team does two types of testing correctly. The first one is unit testing,
also known as component testing. It is done individually on each module. This helps in checking whether
a module was developed correctly by the developer. So let's take an example to illustrate this. Suppose
as a part of unit testing, a developer needs to check the response for a valid ID, check for an invalid ID,
and also check for an empty submission. These would assist users in terms of helping them know what
to do next and enhance usability. The second type of testing is user acceptance testing. This is the final
level of testing before accepting the app or website from

the developer. This type of testing helps you 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 tested and beta testing, the customers of the company tested. The reason for
including this level of testing is that sometimes developers might develop certain features according to
their own understanding. Therefore, unless the end user tests, it would not be possible to ascertain
whether it meets their objectives. The user tests if the website solves the actual problem. So now that
we are done with the visual design, the team workflow, and the importance of testing, it is important for

© Copyright upGrad Education Pvt. Ltd. All rights reserved

you to learn about one more important framework that helps habituate your users to use your website
or app very frequently.

© Copyright upGrad Education Pvt. Ltd. All rights reserved