Ex No: 1 IDENTIFICATION OF THE PROBLEM 19IT100

Date: B Sreeram

Aim:

To identify the problem statement related to societal needs and its features.

Problem Statement: Home Town webpage to enhance the tourism development.

Problem:

In general, my feel is that many of the best places in many cities still remains unknown to
many peoples. So, this project will improvise the eagerness to visit the place in the city.

Purpose

The sole purpose of the project is to improvise the tourist attraction of the city. It
improvises the popularity and tourism revenue of my home town. Also it contains main
feature which is experience using VR 360 degree application by using which the all disabled
user also even access too many tourist spots virtually.

Scope

 The scope of the project aims to provide the 360 degree experience to peoples who
couldn’t able to move from their place, but much eager to look around the world
famous tour spots.
 Also, many people who have money constraints and time constraints who couldn’t
able to visit many places in their life time will get a best 360 VR experience with this
site.
 Attracts the users and improves the tourism and revenue of the place or town.

General Description

The project is aimed to provide the best user virtual experience and attract them to visit the
place.

Product Perspective

As a third person’s perspective, the project defines how the project contributes to fulfilling
stakeholder’s needs and implementing the required objectives and building the project from
scratch. Hence, this leads to making the project more effective.

Result:

Hence, a societal need problem has been chosen successfully.

Ex No: 2 STORYBOARD DESIGN (HAND DRAWN) 19IT100
Date: B Sreeram

Aim:

Analyse and draw the storyboard design for my chosen project.

Description:

 Storyboards are illustrations that represent a story, a scenario.

 Basically, it is a tool that consists of successive frames, in which illustrations are
arranged to visualize the story.
 This method has evolved from the production of motion pictures in user experience
design.

Purpose:

A storyboard is a planning document. It is created before the final product is developed and
used to illustrate a story or show the changes of scene. In many cases this will be based on a
timeline but could also be decided by the user's choices of selection or navigation

Storyboard design:

Home and About District page:

Tourism and Contact us page:
Galleries page:

Result:

Analysing and drawing the storyboard design for our chosen project (Home Town webpage)
is successfully implemented.
Ex No: 3 STORYBOARD DESIGN (TOOL) 19IT100
Date: B Sreeram

Aim:

Analysing and Drawing the story board design for my chosen project

Description:

A storyboard communicates a story through images displayed in a sequence of

Panels that chronologically maps the story’s main events and storyboard doesn't have to

be complicated or high-fidelity. Simple visuals and a basic, but specific scenario will be

Memorable for your team and stakeholders.

Purpose:

A storyboard is a planning document. It is created before the final product is

Developed and used to illustrate a story or show the changes of scene. In many cases this

Will be based on a timeline but could also be decided by the user's choices of selection or

Navigation.

Tool used: Miro (Link: https://www.miro.com/)

FEATURES:

1. Browsing templates

Find storyboard templates for every theme. Narrow down your search by adding keywords
that fit what you’re looking for. Many storyboard templates come with several pages,
including illustration and speech bubble sets.

2. Exploring characters

Discover millions of images, icons, stickers, illustrations and other graphics.

Experiment with different colour schemes and font combinations. Use the drag-and-drop

Tool to move things around.

3. Keep customizing

Add more flair to your storyboard by rearranging your layout or mixing and matching

Elements from Canvas’s library. Upload your own photos, images and art to make your
Design uniquely

4. Publish and share:

Download your storyboard or share your design in just one click. Share it with your

friends and colleagues using the collaboration tool.

Story Board Design:

RESULT:

Creating a storyboard design for the chosen project (Home Town webpage) using an online
tool (Miro) is successfully designed.
Ex No: 4 Prototype making – Low, Medium, High Fidelity 19IT100
Date: B Sreeram

Aim:

To Create a Low,medium, high fidelity prototype designs for our chosen project.

Description:

Low-fidelity design:

Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts
into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to
check and test functionality rather than the visual appearance of the product

Medium-fidelity design:

A medium fidelity wireframe is a step up from its low fidelity counterpart. Medium wireframes
will have more detail — including accurate spacing, headlines, and buttons. They might even be
displayed together in a sequence called a wire flow that shows exactly how the web pages will
work together.

High-fidelity design:

Realistic and detailed design — all interface elements, spacing, and graphics look just like a real
app or website. Content: Designers use real or similar-to-real content. The prototype includes
most or all of the content that will appear in the final design.

Purpose:

Prototypes play a critical role in UX design. With a good prototype, designers are able to test
How users will see and interact with features before they make a commitment to a layout or
Flow.

Prototypes are often used to validate that something works, but they can also help bring
attention to missing elements or feature improvements. Without prototyping, the UX design
process would be far more time-consuming.

Prototypes encourage and enable iterations before a final product is developed, helping
companies get to the best end product in the least amount of time and with the least amount
of design resources wasted along the way.
Of course, not all prototypes are created equal. Knowing how to prototype means knowing the
difference between low-fidelity prototypes and high-fidelity prototypes, and when you should
use one over the other.

LOW FIDELITY DESIGN:

Home page:

About page:
District page:

Tourism page:
Contact us page:

MEDIUM FIDELITY DESIGN:

Home page:
About page:

District page:
Tourism page:
Contact us page:
HIGH FIDELITY DESIGN:

Home page:

About page:
District page:

Tourism page:
Contact us page:
Ex No: 5 Serial and Parallel prototypes 19IT100
Date: B Sreeram

Aim:

Creating three sample prototype designs for our chose project usingany online design tool.

Tool used:

Name:FIGMA

Link:https://www.figma.com

Features:

• Powerful editor– a Drag & Drop editor that works flawlessly andlets you enjoy laying outyour
website the way that you havedreamed of.

• Templates – more than 500 templates that can be edited toeveryone’s needs.

• Fast – the entire platform works stunningly fast and loads eachelement in the blink of an eye.

• Blog – design and manage your blog through a simple and user-friendly dashboard.

• Personalized SEO plan – let WIX help you create your own SEOplan and guide you throughthe
basics of optimizing yourwebsite for search engines.

• WIX ADI – artificial intelligence will guide you through everythingrelated to your site.

• Mobile optimization – work on the mobile version of yourwebsite separately.

• Corvid by WIX – improve your site by working on WIX’s opendevelopment platform.

• SEO (Search Engine Optimization).

• Blogging Functions.

• eCommerce Integration.

• Very gentle learning curve and we no need to worry about the hosting.

•No web – programming knowledge required to work with it.

• Comes with a Galleries of images.

• Video Backgrounds.
First Prototype:
Second Prototype:
Result:

Therefore creating three sample prototypes for our chosen project is done successfully.
Ex No: 6 Typography applied to Design 19IT100
Date: B Sreeram

Aim:

Applying typography concepts to our chosen project’s webpage design.

Description:

What is Typography?

Typography is the art of arranging letters and text in a way that makes the copy legible, clear,
and visually appealing to the reader. It involves font style, appearance, and structure, which
aims to elicit certain emotions and convey specific messages. In short, typography is what
brings the text to life.

Why is typography important?

▪ Typography builds brand recognition

▪ Typography influences decision making

▪ Typography holds the attention of the readers

Features of typography:

1. Fonts and typefaces

2. Kinds of typeface

3. Leading, kerning, and tracking

4. Color

5. Hierarchy

6. Consistency

7. White space

Typography for my project:

Project Topic: Hometown Webpage

1. Fonts and typefaces:

A font is a set of characters of a single size, width, and style. For example, if you useQuire Sans,
regular, 12-point in a document, that’s a font. A typeface consists of sets of similar fonts of
different weights, widths, and styles. In simple terms, a typeface is a family of related fonts.

Font name: Quire Sans

Size: 8 - 14

In the navigation section

2. Leading, kerning and tracking:

These are aspects of typography that are related to spacing. Leading (pronounced “ledding”) is
the space between lines of text. Kerning is the space between two individual characters, which
is generally designed by the type of designer but can often be tweaked. Tracking refers to the
overall letter spacing of an entire word or passage of text. Adjusting the space can make a block
of text feel open or crowded. This can therefore affect ease of reading and cognitive load.
3. Color

Though the color of text is limited in most types of print, an online medium allows you to make
use of color. Text color should be chosen with care. The right combinations of text and color
can emphasize your message, make it more attractive to readers, and aid in understanding. The
right font color makes your text stand out and conveys the right tone of the message. Getting it
wrong can result in a messy presentation and text those clashes with the message.

4. Hierarchy

A hierarchy is the order in which different pieces of text should be read on a page or screen.
Creating this hierarchy in text is a vital function of typography. This hierarchy distinguishes text
that should be noticed and read first from less important or more detailed text that should be
read last. You can use different elements to create a hierarchy of text: text size, the colour of
text and its surroundings, contrast, and positioning or alignment.
5. Consistency

It’s important to keep the design of your document consistent from one page to another or one
slide to another. Using consistent background and text colors helps readers connect the
different sections, while a document or presentation that has different fonts, colors, and
designs on each page will look messy and be difficult to read and understand.

Result:

Applying typography concepts to our chosen project’s webpage design are successfully
implemented.
Ex No: 7 Customer feedback 19IT100
Date: B Sreeram

Aim :

To get feedback from different Customers for the application.

Description:

User interface (UI) feedback refers to how your product UI is designed to respond, and the type
of output it generates based on how users interact with it. UI feedback is important when
designing a product and its' UX as it helps users achieve their goals easily. This is not the same
as asking users for feedback about the system’s look and feel. When users navigate the UI, a
good feedback UI system is meant to engage and explain, making the user experience less
confusing. For example, when a user clicks on a button and nothing happens, it causes friction.
But when an error message shows, this is how the system offers feedback. UI feedback
improves user experience Feedback is how you create connection with your users and
communicate contextually, setting the right expectations from the product. When you tell users
what they’ll get and when they’ll get it, you automatically improve their experience. And since
UI feedback comes in many forms, for example the change of button color, a small tooltip, an
embedded message, etc, there are many ways you can offer meaningful interactions that
improve user experience. A simple example here is a pre-loader.

Customer feedback:

1. Sanjaykumar S (19IT082)

Using a simple rater feedback option to trigger more follow-up feedback is a smart and highly
engaging approach to get the most out of customers. Once they have clicked the rater, they will
feel more devoted to sharing further thoughts on the topic with you.

2. Jeswin W (19IT040)

Good looking web application. Navigation between the various pages is smooth and fast
loading. All the texts are neat and easily visible. This application is self-explanatory and easy to
use. The only con is maps takes more time to load. My suggestion is more photos, videos can
be used which is added advantage.

3. Rahul Hariesh B (19IT074)

This application perfectly matches the user need. I like the quality of images and fonts used in
this application. The visual look and functionality of the website is exceeded my expectations.
My suggestion is you can use some visualizations to the admin dashboard, so that your
application will be extra informative.

Result:

Thus, feedback from different customers is collected.