EX.

NO: 1

ANALYSING AN EXISTING APPLICATION – NETFLIX

AIM:
To study and analyse an existing application NETFLIX.
PROCEDURE:
Step 1: Identifying problem
• The vast array of content available on Netflix can create navigational complexity for
users. With numerous categories, genres, and recommendations, users may struggle to
find content that aligns with their preferences. This complexity can lead to frustration
and disengagement with the platform.
• The extensive catalog of content on Netflix can overwhelm users with choices, leading
to decision fatigue. When faced with too many options, users may find it challenging
to make a decision, resulting in indecision or avoidance of the platform altogether.
• Netflix's extensive library of content may overwhelm users by inundating them with an
excessive amount of information. This content overload can make it difficult for users
to focus on specific titles or genres, diminishing the overall user experience and
satisfaction with the platform.
Step 2: Login
• The Netflix login page(Fig 1.1) features a minimalist interface with secure
authentication, password recovery options, and language selection, inviting users to
seamlessly access their personalized content.

Fig. 1.1 Login

Step 3: Content Discovery Hub

• The Content Discovery Hub(Fig 1.2) leverages user data to offer personalized
recommendations, enhancing relevance and engagement by suggesting content aligned
with individual preferences and viewing history.

71812101018 – Ashwanth K A
 • By presenting a curated selection of recently watched, recommended, and trending
content in one centralized location, the Content Discovery Hub streamlines the
browsing experience, encouraging users to explore and discover new titles.

Fig. 1.2 Content Discovery Hub

Step 4: Multiple profiles

• Multiple profiles(Fig 1.3) on Netflix allow each user to have their own personalized
experience, including customized recommendations, watchlists, and viewing history.
This ensures that each user's preferences are catered to, enhancing overall satisfaction
with the platform.
• Multiple profiles facilitate family sharing by enabling different family members to have
their own dedicated profiles within a single Netflix account. This allows family
members to manage their own viewing preferences and continue watching their favorite
shows and movies without interfering with others' recommendations or watchlists.

71812101018 – Ashwanth K A
 Fig 1.3 Profiles

Step 5: Exploring
• Designing the search bar involves considerations of placement, size, and functionality
to ensure it is easily accessible and intuitive for users to locate. The designer must
prioritize user needs and behaviors to optimize the search experience.
• From a design perspective, the search bar(Fig 1.4) should seamlessly integrate with the
overall UI/UX design of the Netflix platform. This involves attention to aesthetics,
typography, and visual hierarchy to ensure the search bar complements the design
language while remaining prominent enough to catch users' attention when needed.

Fig 1.4 Explore

71812101018 – Ashwanth K A
Step 6: Settings
• Designing Netflix's settings includes features for users to manage their viewing
preferences, such as adjusting autoplay settings, language preferences, and content
maturity ratings, enhancing the viewing experience according to individual preferences.
• Netflix settings(Fig 1.5) encompass functionalities for managing account details,
subscription plans, and viewing history, providing users with control over their account
settings and facilitating a seamless user experience across devices.

Fig 1.5 Settings

Step 7: My list
• "My List"(Fig 1.6) on Netflix allows users to curate a personalized collection of movies
and TV shows they intend to watch. It serves as an organizational tool, enabling users
to keep track of content they're interested in and easily access it later.
• The "My List" feature ensures continuity in the viewing experience by allowing users
to pick up where they left off across different devices. It enhances user convenience by
providing a centralized location for managing and prioritizing content, streamlining the
content discovery process.

71812101018 – Ashwanth K A
 Fig 1.6 Profile

RESULT:
Thus, an existing application netflix was analysed and its functionalities were
explained in detail.

71812101018 – Ashwanth K A
 EX NO: 2
DESIGN A NON-VISUAL PROTOTYPE

AIM:
To design a non-visual prototype for chatbot Application.
DESCRIPTION:
A non-visual prototype is a representation of a product or system that focuses on functionality,
interactions, and behaviour without emphasizing visual design. It typically includes
wireframes, user flows, or written descriptions, providing a tangible outline of the user
experience without incorporating detailed visual elements.
Types of Non-Visual Prototypes:
• Wireframes: Providing skeletal structures outlining key components and relationships.
• User Flow Diagrams: Visually mapping the sequence of interactions.
• Written Descriptions: Articulating expected behaviour, functional requirements, and
user interactions.
Purpose and Focus:
Non-visual prototypes prioritize refining user workflows, feature logic, and overall usability.
They allow for early collaboration and validation of ideas before investing in detailed visual
design.
Role in Collaboration and Iteration:
Emphasizing functionality over aesthetics facilitates collaboration among stakeholders. It
enables iterative refinement of core user experience elements.
PROCEDURE:
Step 1: Design the overview of the application.
Step 2: The design of the front page should interact with the user
Step 3: The design that has been created for the application should attract the user.
Step 4: Create buttons, to navigate to the next page of the application.
Step 5: The titles must be highlighted, so that the variation between the content can be
noticed easily.
Step 6: Login page contains the Email and the password.
Step 7: Once after the login page, the application type is been identified.
Step 8: Now the applications prototype can be shared and published.

71812101018 – Ashwanth K A
RESULT:
Thus, the Non-Visual Prototype for chatbox was done successfully.

71812101018 – Ashwanth K A
 EX. NO: 1(b)

STUDY ABOUT CUSTOM CONTROLS AND OPERATIONAL

CONTROLS

AIM:
To study and analyse the custom control and operational control tools for Instagram.
PROCEDURE:
CUSTOM CONTROL
Custom control in UI/UX design refers to the creation and implementation of unique or
specialized user interface elements that are tailored to the specific needs and requirements of
an application.
Profile Customization:
• Step 1: Tap on your profile picture(Fig 1.1) at the bottom right to access your profile.
• Step 2: Click on "Edit Profile" to customize your profile picture, display name, bio,
website link, and contact information.
• Step 3: Add a profile picture, change your display name, and provide additional
personal details.
• Step 4: Save your changes to update your profile.

Fig. 1.1 Profile Customization

Post Creation:
• Step 1: Tap the "+" icon at the bottom center to create a new post(Fig 1.2).
• Step 2: Choose the type of content to post (photo, video, carousel, etc.).
• Step 3: Apply filters, edit the content, and add captions or tags.
• Step 4: Share the post to your feed, stories, or close friends.

71812101018 – Ashwanth K A
 • Step 5: Optionally, enable additional settings like location tagging or post to other
connected platforms.

Fig. 1.2 Post Creation

Story Creation:
• Step 1: Swipe right from the home feed or tap your profile picture to create a story(Fig
1.3).
• Step 2: Capture a photo or record a video, or choose content from your camera roll.
• Step 3: Add stickers, text, emojis, or drawings to enhance your story.
• Step 4: Use interactive features like polls or questions.
• Step 5: Share the story to your followers or close friends.

Fig. 1.3 Story Creation

71812101018 – Ashwanth K A
Highlight Creation:
• Step 1: Go to your profile and tap on the "+ New" button below your bio.
• Step 2: Select the stories you want to include in the highlight(Fig 1.4).
• Step 3: Choose a cover photo and add a title for the highlight.
• Step 4: Arrange the stories in the desired order.
• Step 5: Tap "Add" to create the highlight on your profile.

Fig. 1.4 Highlight Creation

OPERATIONAL CONTROLS
Operational control in UI/UX design involves the design and arrangement of user interface
elements to facilitate efficient and effective operation of the software or system.
Navigation:
• Step 1: Use the bottom navigation(Fig 1.5) bar to switch between Home, Search, Reels,
Shop, and Profile.
• Step 2: Tap on the icons or swipe horizontally to navigate between tabs.
• Step 3: Access additional features like Activity or Direct Messages from the top menu.

Fig. 1.5 Navigation

Explore and Search:

• Step 1: Tap on the magnifying glass icon to access the Search tab(Fig 1.6).
• Step 2: Explore content based on your interests, trending topics, or popular accounts.
• Step 3: Use the search bar to find specific users, hashtags, or locations.

71812101018 – Ashwanth K A
 • Step 4: Discover new accounts and content by scrolling through the Explore feed.
• Step 5: Engage with content by liking, commenting, or saving posts.

Fig. 1.6 Search

Notifications:
• Step 1: Access notifications(Fig 1.7) by tapping on the heart icon in the bottom menu.
• Step 2: View likes, comments, and other interactions on your posts.
• Step 3: Check notifications for new followers, likes, and comments on your content.
• Step 4: Manage notification settings by tapping on the gear icon in the top right.
• Step 5: Clear notifications or mark them as read.

Fig. 1.7 Notifications

71812101018 – Ashwanth K A
 Settings and Privacy:
• Step 1: Access settings by tapping on the three horizontal lines in the top right corner
of your profile.
• Step 2: Navigate through settings to customize account privacy, security, and
notification preferences.
• Step 3: Adjust account settings, such as switching to a business or creator account.
• Step 4: Manage linked accounts, blocked users, and account activity.
• Step 5: Explore additional privacy and security features, such as two-factor
authentication.

RESULT:
Thus, the various custom controls and operational controls in Instagram was studied
and analysed successfully.

71812101018 – Ashwanth K A
 EX. NO: 1(c)

INFORMATION SEARCH MODULE OF FLIPKART

AIM:
To study and analyse the information search module of Flipkart.
PROCEDURE:
INFORMATION SEARCH MODULE IN FLIPKART
An "information search module" typically refers to a component or feature within a user
interface that facilitates the search for information. This module is designed to help users find
specific content, data, or details within an application or website. The goal is to enhance user
experience by providing an efficient and user-friendly way to search for information.
Step 1: Open the Flipkart application.
Step 2: Search Bar
• Located prominently at the top of the Flipkart app interface, the search bar(Fig 1.1)
allows users to enter product names, keywords, or categories.

Fig. 1.1 Search bar

Step 3: Auto-suggestions
• As users type in the search bar, Flipkart provides real-time auto-suggestions(Fig 1.2),
predicting and displaying potential products, categories, or popular searches.

71812101018 – Ashwanth K A
 Fig. 1.2 Suggestions
Step 4: Advanced Filters
• After initiating a search, users can apply advanced filters(Fig 1.3) to narrow down
results by department, brand, price range, customer ratings, and other relevant criteria.

Fig. 1.3 Advanced Filters

Step 5: Search Results Page

• The search results page displays a grid of products with images, names, prices, and brief
descriptions, allowing users to quickly assess and compare options.

71812101018 – Ashwanth K A
Step 6: Highlighting and Previews
• Relevant search terms are often highlighted(Fig 1.4) within product names and
descriptions, providing a quick preview of how the keywords are related to the
displayed products.

Fig. 1.4 Highlighting and Previews

Step 7: Advanced Search Options

• Users can employ advanced search features such as barcode scanning, voice search,
and image recognition to find products using alternative methods.

Step 8: Feedback Mechanism

• Amazon provides feedback on search results, including the total number of matches
and recommendations for refining the search if no results are found.

Step 9: Integration with Navigation

• The search bar is seamlessly integrated into the overall navigation(Fig 1.5) structure,
allowing users to transition from browsing categories to conducting a specific search
without disruption.

71812101018 – Ashwanth K A
 Fig. 1.5 Navigation

Step 10: Responsive Design

• The Amazon app is designed to be responsive(Fig 1.6) across various devices, ensuring
a consistent and user-friendly search experience on smartphones and tablets.

Fig. 1.6 Responsive Design

Step 11: Accessibility Considerations

• Amazon's app incorporates accessibility features, making it usable for individuals with
different abilities, including voice command support, screen reader compatibility, and
other accessibility enhancements.

RESULT:
Thus, the UI/UX information search module has been studied and analysed
successfully.

71812101018 – Ashwanth K A
 EX. NO: 1(d)

SHARING AND EXPORTING MODULES IN WHATSAPP

AIM:
To study and analyse the sharing and importing modules in Whatsapp.
PROCEDURE:
The "sharing and exporting module" typically refers to the user interface elements and
functionalities that allow users to share or export content from an application. This module is
essential for enabling users to distribute, save, or utilize information they interact with within
the app.
SHARING MODULE
Step 1: Share Page
A prominent button(Fig 1.1) or icon that, when clicked or tapped, initiates the sharing
process.

Fig. 1.1 Share Page

Step 2: Share Options

After clicking the share button(Fig 1.2), a menu or modal appears with various sharing options.
This could include sharing via social media platforms, email, messaging apps, or generating
shareable links.

71812101018 – Ashwanth K A
 Fig. 1.2 Share Options

Step 3: Social Media Integration

Integration with popular social media platforms, allowing users to directly share content to
their profiles or feeds.
Step 4: Direct Messaging
Options to share content through direct messaging services(Fig 1.3), facilitating one-on-one or
group sharing.

Fig. 1.3 Direct Messaging

Step 5: Copy Link

A feature to copy a shareable link(Fig 1.4) to the clipboard, enabling users to share content
with others via any communication channel.

71812101018 – Ashwanth K A
 Fig. 1.4 Copy Link

EXPORTING MODULE
Step 1: Export Chat
A designated chat or option that triggers the export functionality(Fig 1.5).

Fig. 1.5 Export chat

Step 2: Export Formats

Selection of different file formats(Fig 1.6) or options for exporting content. For example,
exporting a document as a PDF, an image in various resolutions, or data in a downloadable
format and audio

71812101018 – Ashwanth K A
 Fig. 1.6 Export Formats

Step 3: Customization Options

Settings that allow users to customize exported content, such as adjusting the quality,
dimensions, or including/excluding certain elements.
Step 4: Export Confirmation
A confirmation dialog or message to inform users that the export process is complete and
provide them with the necessary details or links.
Step 5: Cloud Integration
Integration with cloud storage services to allow users to directly export and save content to
their cloud accounts.

Fig. 1.7 Cloud Integration

RESULT:
Thus, sharing and export modules in Whatsapp have been analysed and studied
successfully.

71812101018 – Ashwanth K A
 EX. NO: 3(a)

VIDEO STREAMING APP – NEOPRIME

AIM:
To design a video streaming app - Neoprime using the designing tool Figma.
PROCEDURE:
Step-1: Front Page Overview
• The front page of the app presents users with title screen having “Sign Up”.

Fig. 3.1 Streaming App

Step-2: Home page

• Users can discover recently added movies, TV shows, or original content, keeping them
up-to-date with the latest releases and ensuring fresh content discovery.
• The homepage(Fig 3.2) features a variety of genre categories, such as action, comedy,
drama, or documentaries, allowing users to explore content based on their specific
interests or moods.

71812101018 – Ashwanth K A
 Fig. 3.2 Home page

Step-3: Episode Detailsd

• The episode details(Fig 3.3) page provides a synopsis or summary of the selected
episode, offering a brief overview of the plot and key events.
• It may suggest related episodes or recommend other content based on the selected
episode, encouraging users to continue watching and discover similar titles.

Fig. 3.3 Episode Details

71812101018 – Ashwanth K A
Step-4: My list
• Designers ensure that the "My List"(Fig 3.4) feature is prominently displayed and easily
accessible within the user interface, employing visual cues such as icons or labels to
guide users to the feature.
• Designers focus on creating intuitive interaction patterns for adding, removing, and
organizing items within "My List," ensuring that users can perform these actions
seamlessly and without confusion.

Fig. 3.4 My list

Step-5: Recommendations
• Allow users to tailor their recommendations through preference settings, enabling them
to refine their viewing suggestions according to their interests and viewing habits.
• Integrate mechanisms for users to provide feedback on recommended content, helping
to improve the accuracy and relevance of future suggestions.

Fig. 3.5 Recommendations

71812101018 – Ashwanth K A
CODE-IMPLEMENTATION
HTML
homepage.html
<!DOCTYPE html>
<html>
<head>
<link
href="https://fonts.googleapis.com/css?family=Helvetica+Neue&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Netflix+Sans&display=swap"
rel="stylesheet"
/>
<link href="./css/main.css" rel="stylesheet" />
<title>Document</title>
</head>
<body>
<div class="v0_41">
<div class="v0_42"></div>
<div class="v0_43">
<div class="v0_44"><span class="v0_45">9:41</span></div>
<div class="v0_46">
<div class="v0_47">
<div class="name"></div>
<div class="v0_53"></div>
</div>
<div class="name"></div>
<div class="name"></div>
</div>

71812101018 – Ashwanth K A
 </div>
<div class="v0_68"><span class="v0_69">SIGN IN</span></div>
<div class="v462_156"></div>
<span class="v0_71">Help</span>
<div class="v0_72">
<span class="v0_73">Unlimited entertainment, one low price</span
><span class="v0_74"
>Stream and download as much as you want, no extra fees.</span
>
</div>
</div>
</body>
</html>
homepage.css
*{
box-sizing: border-box;
}
body {
font-size: 14px;
}
.v0_41 {
width: 375px;
height: 812px;
background: rgba(0,0,0,1);
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}

71812101018 – Ashwanth K A
.v0_42 {
width: 375px;
height: 816px;
background: url("../images/v0_42.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v0_43 {
width: 375px;
height: 44px;
background: url("../images/v0_43.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.v0_44 {
width: 54px;
height: 18px;
background: url("../images/v0_44.png");

71812101018 – Ashwanth K A
 background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 14px;
left: 20px;
overflow: hidden;
}
.v0_45 {
width: 54px;
color: rgba(255,255,255,1);
position: relative;
top: 0px;
left: 0px;
font-family: Helvetica Neue;
font-weight: Medium;
font-size: 15px;
opacity: 1;
text-align: center;
}
.v0_46 {
width: 67px;
height: 11px;
background: url("../images/v0_46.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;

71812101018 – Ashwanth K A
 top: 17px;
left: 294px;
overflow: hidden;
}
.v0_47 {
width: 24px;
height: 11px;
background: url("../images/v0_47.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 0px;
left: 43px;
overflow: hidden;
}
.name {
color: #fff;
}
.v0_53 {
width: 18px;
height: 7px;
background: rgba(255,255,255,1);
opacity: 1;
position: absolute;
top: 1px;
left: 2px;
border: 0px solid rgba(76,217,100,1);
border-top-left-radius: 1px;

71812101018 – Ashwanth K A
 border-top-right-radius: 1px;
border-bottom-left-radius: 1px;
border-bottom-right-radius: 1px;
overflow: hidden;
}
.name {
color: #fff;
}
.name {
color: #fff;
}
.v0_68 {
width: 355px;
height: 44px;
background: rgba(0,128,0,1);
padding: 12px 140px;
margin: 8px;
opacity: 1;
position: absolute;
top: 748px;
left: 10px;
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
overflow: hidden;
}
.v0_69 {
width: 60px;
color: rgba(255,255,255,1);

71812101018 – Ashwanth K A
 position: absolute;
top: 12px;
left: 148px;
font-family: Netflix Sans;
font-weight: Regular;
font-size: 16px;
opacity: 1;
text-align: center;
}
.v462_156 {
width: 159px;
height: 44px;
background: url("../images/v462_156.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
opacity: 1;
position: absolute;
top: 44px;
left: 108px;
overflow: hidden;
}
.v0_71 {
width: 31px;
color: rgba(255,255,255,1);
position: absolute;
top: 57px;
left: 327px;
font-family: Netflix Sans;
font-weight: Medium;

71812101018 – Ashwanth K A
 font-size: 14px;
opacity: 1;
text-align: center;
}
.v0_72 {
width: 311px;
height: 188px;
background: url("../images/v0_72.png");
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
margin: 20px;
opacity: 1;
position: absolute;
top: 377px;
left: 32px;
overflow: hidden;
}
.v0_73 {
width: 288px;
color: rgba(255,255,255,1);
position: absolute;
top: 0px;
left: 12px;
font-family: Netflix Sans;
font-weight: Bold;
font-size: 30px;
opacity: 1;
text-align: center;
}

71812101018 – Ashwanth K A
.v0_74 {
width: 311px;
color: rgba(255,255,255,1);
position: absolute;
top: 140px;
left: 0px;
font-family: Netflix Sans;
font-weight: Regular;
font-size: 18px;
opacity: 1;
text-align: center;
}

RESULT:
Thus, a Neoprime application using the designing tool Figma was successfully
completed.

71812101018 – Ashwanth K A
 EX. NO: 3(b)

SOCIAL MEDIA APP – JUST 001

AIM:
To design a Social Media App – JUST 001 using the designing tool Figma.
PROCEDURE:
Step-1: Front Page Overview
• The front page of the app presents users with title screen having “Welcome”.

Fig. 3.1 Social Media App

Step-2: Login Page

• Next Page displays Login Page for User Account. User can login with their Username
and Password.
• The App provides another option to change password.

71812101018 – Ashwanth K A
 Fig. 3.2 Login

Step-3: User Profile

• Curate an aesthetically pleasing grid layout, where each post complements the next,
maintaining a cohesive visual identity while allowing individual pieces to shine.
• A balanced arrangement of images and text, guiding the viewer's gaze through the
content seamlessly.
• The User can search the profile using Search Options.

Fig. 3.3 User Profile

71812101018 – Ashwanth K A
Step-4: Feed
• The page offers different profiles.
• The page will update automatically.
• Feed page helps the user to be update.

Fig. 3.4 Feed

Step-5: Contacts
• The Contacts page offers details of the people.
• By signing in details are updated.
• By clicking the search bar we can search with their names.

Fig. 3.5 Contacts

71812101018 – Ashwanth K A
Step-6: The News
• Upon selecting news we can read breaking events.
• The User can understand by watching the videos.
• This seamless integration of guided videos and interactive features ensures a user-
friendly and effective experience within the app.

Fig. 3.6 News

RESULT:
Thus, a Just 001 application using the designing tool Figma was successfully
completed.

71812101018 – Ashwanth K A
71812101018 – Ashwanth K A