CCS370 - UI AND UX

DESIGN
Ex.No. Date Experiments Page.no Marks sign
Ex.no.1a Introduction to UI and UX
Date:

Aim:
To write a introduction about UI and UX.

User Interface:
UI stands for User Interface or User Interface Design. It’s also sometimes known as user
interface engineering. UI is the design of user interfaces for machines: how a product looks
and feels, not how it functions. UI Design is the process of making the user's interaction as
simple and efficient as possible, in terms of accomplishing their goals (also known as user-
centered design). UI design is the merger of user needs and visual design. The result of UI
design is a set of high-resolution wireframes (a visual representation of a product).

User Experience:
UX stands for user experience or user experience design. It’s also sometimes abbreviated as
UXD, UED or XD. UX is the naked experience of a product: how a product functions, not
how it looks. UX Design is the process of enhancing user satisfaction of a product through
increased usability, accessibility, and pleasure provided in the interaction with the product.
User experience design encompasses note only traditional human–computer interaction
design, but also all aspects of a product or service as perceived by users. UX design is the
merger of user needs, business vision and technological feasibility. The result of UX design is
a set of low-resolution wireframes (a basic visual guide for how a product will function) that
are deeply connected with user research.

Process of UX:
UX has 3 key phases: Discovery, ideation, and validation. However, UX design is cyclical
and you will often need to repeat certain steps and even the entire process multiple times. The
final outcome will be a set of low-resolution wireframes: a draft of the function and structure
of a product

UI/UX BASICS:
1. Discover UX always starts with discovery—interviewing potential customers to
understand what the target audience needs and talking to stakeholders to understand their
goals and competitive analysis Discovery is all about WHY - xxx. During discovery you will
validate your problem (your product is there to solve that problem), identify your end users,
and determine project goals. Methods:
● User Research (Interviews, Ethnography)
● Empathy Mapping

● Task Analysis
● Stakeholder Mapping

● Service Blueprints
● Analytics and Heuristics

● Competitive Analysis Outcome:

● Problem Validation, User Personas, Project Goals
2. Ideate Next comes ideation using a variety of tools to imagine a solution that solves the
user problem, while aligning with the company goals within technological possibility.
Ideation is the process of finding ou HOW. Designers will implement a variety of tools to
figure out how to solve the user problems. This process is very much like a funnel, where the
solution is very wide at the beginning, and the goal of the process is to quickly, envision and
test products with target customers in order to pivot and define During ideation you will
organize your discovery, explore options, and develop wireframes and prototypes.

Methods:
● Sketching Wireframes

● Information Architecture
● Journey Mapping / Page Flows
● User Journey Writing

● Paper Prototypes
● Interaction Design Outcome:

● Solution Exploration

3. Validate (Test, Prototype)

The UX process ends with validation—the testing of wireframes and prototypes to iterate on
the interface until it’s intuitive and delightful. Validation is when we finally know WHAT
we’re building During this phase, designers will create wireframes or prototypes, and test
them with users during a process called usability testing to evaluate how an actual user will
react to the product. The designer observes, asks open-ended questions and iterates on the
wireframes based on this feedback. Validation testing is giving those wireframes or
prototypes to real users. You’re tracking actual interaction with the prototype here as well as
confirming previously held assumptions. The results of validation testing should be changes
in flow and layout, though likely not scope anymore. During validation you wil validate your
ideas, learn, and plan for the next iteration.

Methods:
● Accessibility

● Usability
● Testing

● Feedback integration
● Interactive Design
● Retrospectives Release Outcome:

● Solution Scalability, Low-Res Wireframes

Result:
Thus the features of figma tool was analyzed successfully.
EX.NO.1b
Date: Design a Responsive Layout

Aim:
To design responsive layout for a societal application using figma.

Procedure:

Create a frame

o Open Figma and create a new design file

o Click F on your keyboard and pick a frame; iPad Pro 12.9 has a 1024px canvas

Define your columns and rows

o With your frame selected, go to the right-hand Properties panel

o Under Layout Grid, click on Add Grid to create a new grid

Configure your layout grid

o Under Columns, set the number of columns to 12

o For the gutter size (space between columns), set it to 16px
o Choose your preferred alignment for the grid. In this case, we’ll select Stretch

Set margin

o Adjust the margin size to 88px for the space outside the layout grid

Add grid spacing

o Under Grid, set the spacing to 8px. This spacing defines the grid that
elements will snap to within each column

Design within the grid

o You can now design within this frame using the 12 columns, 16px gutters, 88px
margin, and 8px grid spacing as a guide for precise alignment
Output:

Result:
Thus the responsive layout using figma was created successfully.
Ex.No.2 Exploring various UI Interaction Patterns Definition
Date:

Aim:
To explore a various UI interaction patterns .
UI Pattern:
UI pattern design refers to the process of creating reusable design systems for common user
interface (UI) problems. It helps to improve the usability and consistency of user interfaces,
making it easier for users to navigate and interact with digital products. Explore the important
aspects of user interface design and learn more about how it helps to create more efficient and
user-friendly digital products.

Importance of UI Pattern Design

UI pattern design is important because it simplifies the design process and makes it more
efficient Some of the benefits of UI pattern design are mentioned further

Consistency: UI patterns provide consistency to user interfaces. Users are accustomed to

certain patterns, and they expect to see them across different interfaces.
Reduced Learning curve: UI patterns reduce the learning curve for users. Once they learn
how to interact with a pattern, they can apply that knowledge to other interfaces that use the
same pattern.

Better User Experience: UI patterns are designed to be user-friendly. They make it easy for
users to interact with interfaces and achieve their required goals.

Common UI Design Patterns

Common UI (User Interface) design patterns are recurring solutions or best practices that
designers and developers use to solve specific design problems. These patterns help create a
consistent and user-friendly experience for users.

Some common UI design patterns are mentioned below:

● Navigation Patterns: Navigation patterns, such as the navbar, sidebar menu, and tabs,
provide users with structured and intuitive ways to move between different sections or pages
within a website or application.

● Form Patterns: Form patterns, including input fields, form validation, and wizards,
facilitate the collection of user input, ensure data accuracy, and guide users through complex
data entry processes.
● Card Patterns: Card patterns, featuring individual content containers, enable the
structured and visually appealing display of items like articles, products, or user profiles
within a user interface.
● Carousel Patterns: Carousel patterns, such as image carousels and testimonial carousels,
create dynamic and engaging displays of content, allowing users to cycle through images or
testimonials for an interactive experience.

● Input and Feedback Patterns Input and feedback patterns are used to design interfaces
that provide users with feedback when interacting. The UI/UX design examples of input and
feedback patterns include tooltips, progress bars, and error messages. These
patterns help improve the user experience by providing clear and concise feedback on their
actions.

● Content Display Patterns Content display patterns are used to design interfaces that
present content in an organized and easy-to-read manner. Examples of content display
patterns include grids, carousels, and lists These patterns help improve content’s readability
and make it easier for users to find the information they seek.
● Interaction Patterns Interaction patterns are used to design interfaces that allow users to
interact with the application Examples of interaction patterns include drag and drop, swipe,
and pinch to zoom. These patterns help create a more engaging user experience by providing
intuitive and natural ways to interac with the interface.
● Responsive Design Pattern Responsive design adapts user interfaces to various devices
using fluid grids, flexible images media queries, and modern CSS. It prioritizes mobile,
enhancing features for larger screens ensuring a consistent, user-friendly experience across
devices. User Design Pattern Libraries User design pattern libraries, also known as UI
component libraries or design systems, are collections o reusable design elements and
components that streamline the process of creating user interfaces. Several popular design
pattern libraries and frameworks are as follows:
● Material-UI: A popular UI framework based on Google’s Material Design guidelines. It
offers a wide range of pre-designed components for web applications.
● Apple’s Human Interface Guidelines (HIG): Apple provides design guidelines,
templates, and resources for creating iOS and macOS applications following Apple’s design
principles.

● Atlassian Design System: Created by Atlassian, this design system and component library
offers a unified approach to building applications and products for teamwork and
collaboration.
● Bootstrap: A widely used open-source CSS framework with a set of pre-designed
components and styles to create responsive and visually appealing websites.
● A design system and UI library developed by Alibaba, providing a collection o high-quality
components for building web and mobile applications.

Output:
Result:
Thus the UI interation pattern was created successfully
EX.NO.3 UI Style Guides
Date:

Aim:
To Develop an interface with proper UI Style Guides.

Style Guides:
User interface style guides are design guidelines or standards and a development tool for
designing UI elements and interactions for various websites or app products. These document
usually contains the essential details relating to your product’s user interface to ensure
consistency across different screen sizes, design teams, companies, and brands.

1. Color Palette: Specifies the colors used in the interface, including primary and secondary
colors, as wel as their use in different contexts.
2. Typography: Defines the font choices, sizes, and styles for various text elements such as
headings subheadings, and body text.
3. Layout and Grid System: Establishes a grid system for layout consistency, defining
margins, padding, and spacing.

4. Icons and Imagery: Provides guidelines for the use of icons, images, and other visual
elements, ensuring a cohesive design.
5. Buttons and Forms: Defines the styles and states of interactive elements like buttons, form
fields, and checkboxes.

6. Responsive Design: Guides the adaptation of the interface to different screen sizes and
devices.
7. Accessibility: Includes guidelines to ensure the design is accessible to users with
disabilities.

8. Animation and Transitions: If applicable, provides guidelines for animations and

transitions to enhance the user experience.
9. Documentation: Documents the UI components with examples, code snippets, and
explanations for easy implementation by developers.
10.Branding Guidelines: Incorporates any specific branding elements or guidelines to
maintain brand consistency.
Create a Style Guide in Figma: Open your Figma file and select a frame.

Choose a Colour Palette:

Step 1: Choose your color categories Choose three categories of colours: a primary colour, a
secondary colour, and greys (neutral).

Step 2: Generate Shades for the Colours Generating shades for your colour palette helps cater
to varied use cases. The Figma plugin Tints and Shades helps you generate colour shades.
Select a colour and click on Tints and shades to generate the shades. Auto layout (Shift + A)
the generated shades to give them one frame, and arrange them vertically/horizontally.

Step 3: Make the colour shades into colour styles. To make the generated colours styles, first
select the frame and hit the Enter key in order to select the boxes in the frame individually.
Rename the individual boxes, using the name of the colour category differentiating with
numbers – for example grey 01, and so on. If you renamed your boxes successfully, the
names will appear on the left hand side of your canvas. After do this, need to make your
colours into styles. The Figma plugin Styler used to style your colours. Click on the frame,
selecting individual boxes using the Enter key.If do this correctly, then get a notification as
you can see in the image above. Choose Your Typography Choosing the right font family,
font sizes, and font weights is very important for a good

Style guide
Step 1: Open a frame after choosing a font of your choice.
Step 2: Establish the page hierarchy Decide on how many headlines, subtitles, body and
captions your design might have. Remember that you can communicate hierarchy through
differences in font weight (light, medium, regular), size, letter spacing, and case.
Step 3: Make your fonts styles After choosing your font weights, size, and letter spacing, it's
time to make them styles. Just like you did for your colour palette, select the fonts and use the
plugin Styler to create them as styles.

NB: Choose smaller font sizes when designing for mobile (16px, 18px, and so on) and larger
font sizes for web. The text styles will appear on the right hand side of your screen. Choose
Your Iconography Next up, we have iconography. Icons are an essential part of our designs,
as they visually express actions and objects in our interfaces. They help the designer further
communicate the meaning of an action or screen, like the home icon, search icon, and more.
You can get icons from plugins like Iconify, Font Awesome, and libraries like feathericons
and Google icons.

Step 1: Select a frame. Go to the frame tool and select a frame for your iconography.
 Step 2: Get all your icons Now you'll need to get the icons you need for your design. Make
sure you include different states of each icon, like filled, outline, and so on. NB: make sure
the sizes of your icons are consistent. Setup Your Layout Grids Grids are a fundamental part
of any style guide as they help achieve better alignment, hierarchy, and consistency in your
designs. Setting a standard for your grid depends on whether you are designing for web or
mobile – each has different standards. For example, you should use a 960 grid (12 or 16
columns) when designing for web. First, go ahead and

Select a frame.
Step 1: Add a layout grid Then get your layout grid from the left hand panel of your canvas.
Input your desired number of columns for the frame and values for the margin and gutter
(that is the vertical part of the frame). Next up, you will need to include grids for the
horizontal part of the frame, or the rows. Input your desired value for rows, margins, and
gutter. Choose your components The components you choose play an important part in your
user interface. Components typically include text fields, button states, checkboxes, alerts and
notifications. Define Your Input fields Input fields, as the name implies, allow users to input
text in a UI. And they need to be styled like everything else. First, as always, select a frame.

Step 1: Design input fields in various states You'll want to design each input field according
to its state, like default, disabled, active, and error.
Step 2: Add icons to your input fields. Design Your Buttons Your buttons should include
primary buttons and secondary buttons in their different states, like disabled, default, hover
and pressed. Primary buttons are usually strong visual indicators to help users complete their
journeys – for example 'next', 'submit', and so on. Secondary buttons are usually the
alternatives to the primary actions, like 'cancel', 'back', and so on. The image above shows
two buttons. The button on the left is a primary button while the button on the right is a
secondary button. First, select a frame.
Step 1: Design the primary button First you'll want to design a primary button in its various
states: default, hover, pressed and disabled.
Step 2: Design the secondary button Then you'll design a secondary button in its various
states: default, hover, pressed and disabled.

Step 3: Check buttons with icons You might want to check how the various buttons would
look like with icons. Add icons to your primary and secondary buttons in all their states.

Checkboxes
You'll use checkboxes mostly when users might need to select more than one option from a
list – that is, each checkbox is independent of the others in the list/form. First, select a frame.
Step 1: Design your checkboxes You'll want to include various states like enabled, disabled,
hover, focused and pressed states. Alerts and notifications With real time alerts, users can get
notifications of reminders, errors, successes and so on. This reduces the risk of hacking,
incorrect input, and loss of important information. First, select a frame.
Step 2: Design notification and alerts When you design your alerts, make sure to use the
correct icons for warning, error, success and success states. Live

Output:
Result:
Thus the styles guide for thirukkural app using figma tool was created successfully.
Ex.no.4 Developing Wireflow diagram for application using open
Date: source software

Aim:
To Develop a Wireflow diagram for application using open source software.

Wireflow diagram:
In UI/UX design, a wireflow diagram is a visual representation that combines elements
of both wireframes and flowcharts. It provides a comprehensive view of the user interface
(UI) design by illustrating the flow of screens and user interactions within a digital product.
Wireflows are particularly useful for conveying not only the layout and structure of
individual screens (like wireframes) but also the connections and transitions between those
screens.

Key components and characteristics of a wireflowdiagram:

Wireframes: Wireframes are basic, low-fidelity representations of individual screens or
pages in a digital interface. In a wireflow, each screen is depicted as a wireframe, showing the
essential elements such as buttons, text, images, and other UI components.

Flowchart Elements: The wireflow incorporates flowchart-like elements, such as arrows or

lines, to illustrate the sequence of screens and the user's navigation path. These connections
represent the transitions between different states or screens.

User Interactions: Wireflows include annotations or symbols to indicate user interactions,

actions, or behaviors on each screen. This helps in conveying how users move through the
interface and what actions they can take.
Task Flows: The wireflow diagram often includes task flows, outlining the step-by-step
processes or user journeys within the application. This is particularly useful for understanding
complex interactions or scenarios.

Annotations: Detailed annotations are added to each screen, providing information about
specific UI elements, functionality, or any additional notes relevant to the design. Annotations
enhance communication between designers and other stakeholders.

Visualization of User Flow: The primary purpose of a wireflow is to visualize the user flow
within the digital product. It helps designers and stakeholders understand how users will
progress through the application and experience different screens.
Collaborative Tool Integration:Wireflows are often created using specialized design tools
such as Figma, Adobe XD, Sketch, or similar applications. These tools provide features
specifically designed for creating and sharing wireflow diagrams, fostering collaboration
within design teams.
Iterative Design: Like wireframes, wireflows are subject to iteration and refinement. As the
design process progresses, updates can be made to the diagram to reflect changes,
improvements, or new insights.

Creating a wireflow diagram in Figma tool:

1. Define User Flows: Clearly understand and define the user flows you want to illustrate in
your wireflow diagram. Identify the key screens and interactions that users will go through.

2. Create Wireframes: Develop wireframes for each screen in your user flows. Use Figma's
design tools to create simplified representations of the interface, focusing on layout, structure,
and content placement.
3. Use Frames for Screens: In Figma, each screen or wireframe can be placed within a frame.
Create a frame for each screen to organize and structure your design.
4. Connect Frames: Use Figma's line tool or arrows to connect frames, indicating the flow
from one screen to another. This helps visualize how users will navigate through the
application.

5. Add Annotations: Include text annotations or notes for each frame to explain the
functionality, interactions, and any dynamic elements. This adds clarity for both designers
and developers.
6. Utilize Figma Prototyping: Leverage Figma's prototyping features to create interactive
links between frames. Define interactions like button clicks, transitions, and animations to
simulate the user experience.
7. Review and Iterate: Share the wireflow with stakeholders, such as team members or
clients, and gather feedback. Use this feedback to iterate and refine the wireflow diagram.

8. Collaborate with Team: Collaborate with your design team, developers, and other
stakeholders. Figma allows real-time collaboration, making it easy for multiple team
members to work on the wireflow simultaneously.
9. Maintain Consistency: Ensure consistency in design elements, terminology, and
interactions across the wireflow. Figma's design system features can help maintain a cohesive
user experience.
10. Use Figma Components: If your wireflow involves recurring elements, consider using
Figma components. Components allow you to create reusable design elements, ensuring
consistency and making updates easier.
11. Organize Layers and Frames: Keep your Figma project organized by naming layers and
frames appropriately. This helps maintain clarity, especially as your wireflow diagram
becomes more complex.

Output:

Result:
Thus the Wireflow diagram for application using open source software
was done successfully.
Ex.no.5 Explore various open source collaborative interface platform
Date:

Aim:
To explore and understand the various open source collaborative interface Platform.

Open source collaborative interface platform:

An open source collaborative interface platform is a software platform that allows

users to collaborate on projects in a decentralized and open manner. This type of platform is
typically based on open source software, which means that the code is freely available and
can be modified and distributed by anyone. This makes open source collaborative interface
platforms very flexible and adaptable, as users can customize them to meet their specific
needs. One of the key benefits of using an open source collaborative interface platform is that
it can help to reduce costs. Because the software is free to use, there are no licensing fees to
pay. Additionally, open source platforms are often very scalable, meaning that they can be
used to support a large number of users and projects without incurring significant additional
costs.

Another benefit of using an open source collaborative interface platform is that it

can help to improve security. Because the code is open source, anyone can review it for
potential security vulnerabilities. This means that any security vulnerabilities that are found
can be fixed quickly and efficiently. Additionally, open source platforms are often very well-
supported by the community, which means that users can get help with any problems they
encounter quickly and easily. Finally, open source collaborative interface platforms can help
to improve transparency and accountability. Because the code is open source, anyone can see
how the platform works and how their data is being used. This can help to build trust between
users and the platform operators. Additionally, open source platforms are often governed by a
transparent and democratic process, which means that users have a say in how the platform is
run.
1. Figma:
Figma is a cloud-based design tool that allows real-time collaboration. Multiple team
members can work on a project simultaneously, making it great for UI and UX design
collaboration. Features: Prototyping, design versioning, real-time collaboration, and
commenting.

Figma's mission is to make design accessible to everyone. Our two products help people from
different backgrounds and roles express their ideas visually and make things together.

 Figma design is for people to create, share, and test designs for websites, mobile
apps, and other digital products and experiences. It is a popular tool for designers,
product managers, writers and developers and helps anyone involved in the design
process contribute, give feedback, and make better decisions, faster.
 Fig Jam lets you create online whiteboards where anyone can take part. People
often use Fig Jam for meetings, brainstorms, diagrams, planning, and research. In
Fig Jam, you can use text, shapes, drawings, images, sticky notes, and other
elements to visually represent ideas and jam on work together.

Figma is a cloud-based design tool that allows real-time collaboration. Multiple team
members can work on a project simultaneously, making it great for UI and UX design
collaboration. Features: Prototyping, design versioning, real-time collaboration, and
commenting.
2. InVision:

InVision is collaboration-centric. The platform excels at providing a real-time workspace for

seamless team alignment. It supports wireframing and prototyping and offers a plethora of
resources. InVision will permit users to connect with peers and ambassadors, further
enhancing the user experience.

Key Highlights:

● Seamless integrations with tools like Zoom, Slack, and Trello.

● Powerful support for wireframing and prototyping.

● Community engagement and resources for users

The platform is easy to use and offers a wide range of features, making it a versatile tool for
designers of all skill levels. I love how easy it is to use, even for beginners.
3. UXPin:
UXPin focuses on improving team efficiency by minimizing communication barriers. It
empowers UX designers and developers to create consistent interfaces with ease. The
platform promotes prototypes that closely resemble the final product, fostering smoother
handoffs between design and development.

Key Highlights:
● Integration with NPM packages, Git repos, and Storybook
● User-friendly, codeless UI code component usage

● Built-in features for accessibility and compliance with WCAG standards.

4. . Sketch:

Sketch, like Figma, supports collaborative design, offering tools to simplify the process. It’s
known for creating playable prototypes that facilitate developer handoff. Sketch’s user
interface design tools, real-time collaboration, and vibrant community make it a robust
alternative.

Key Highlights:

● Over 700 extensions enhance functionality.

● Superior control over sharing work and an open file format.

● Robust community and ample learning resources.

5. Mockplus:
Mockplus provides a comprehensive product design platform ideal for collaboration, design
systems, and prototyping. Dynamic and reusable design systems ensure consistency across
your team. This platform is straightforward, boasts a vast user base, and offers ample learning
resources.
Key Highlights:
● Interactive prototyping for user testing

● A glossary and resource set for UI/UX principles

● thriving community for knowledge sharing.
6. Adobe XD:

Figma’s Rival Adobe XD, compared to Figma, is an established rival. It supports web, app,
brand, and game design. It’s backed by a robust, active community and offers plenty of
resources. Adobe XD is relatively easy to learn and supports coediting, allowing collaborative
work with team members.

Key Highlights:

● Feature-rich, supporting various design needs.

● Integration with Creative Cloud apps

● Coediting for seamless collaboration.

7. Penpot:

Penpot stands out as a free, open-source platform ideal for cross-domain teams. It allows for
seamless collaboration and is compatible with most vectorial tools due to its use of SVG.
Resources, including templates, glossaries, and a growing community, ensure you get the
most from this platform.

Key Highlights:

● SVG-based, compatible with vectorial tools

● Resource-rich, with comprehensive glossaries and templates.

● Seamless sharing of design files for valuable feedback.

8. io:
Bringing Visions To Life Ideal for UX designers, product managers, and marketers, Proto.io
is a web-based platform that simplifies UI/UX design. It offers a massive library of resources,
including video tutorials and sample projects. While it lacks a forum community, it excels at
helping users bring their visions to life.

Key Highlights:
● Web-based; no coding knowledge is required.
● Over 1000 customizable templates

● A vast library of digital assets for concept realization

9. Moqups:
Moqups simplifies UI prototypes, wireframes, and sketches with its SVG-based platform.
Whether you need a quick frame or a comprehensive mockup, Moqups is intuitive and
straightforward. It offers popular drag-and-drop elements and a range of fonts.
Key Highlights:

● User-friendly drag-and-drop interface.

● A library of icons, fonts, and extensions

● Scalable page management for in-depth design projects

10.Affinity Designer:
Affinity Designer streamlines mockup design, logo creation, and UI design. Known for its
illustration capabilities, it’s excellent for beginners. However, it lacks some collaborative
features found in Figma. Still, the Affinity Designer community and ample resources make it
a strong choice.

Key Highlights:
● Exceptional illustration capabilities.
● Multilingual support for global teams

● One-time purchase with no monthly subscriptions

11. Marvel:
Rapid Prototyping and Collaboration Marvel is a rapid prototyping tool that focuses on
making collaboration and iteration quick and easy. It provides a simple and intuitive platform
for designing and testing interactive prototypes. With a strong emphasis on speed and user
feedback, Marvel is an excellent choice for designers looking to iterate and refine their
designs quickly.
Key Highlights:

● Rapid prototyping for fast design iterations.

● User testing and feedback collection features.

● Easy-to-use interface for quick design creation and sharing

Result:
Thus the various open source collabrative interface platform was analayzed
successfully.
 Ex.no: Hands on design thinking process for a new product
Date:

Aim:
To describe the hands-on design thinking process for Thirukkural App.
Hands-on design thinking:

Empathize

1. User Research: Conduct user interviews with people from various demographics
(age, location, familiarity with Thirukkural) to understand their:
 Needs and frustrations related to learning or using Thirukkural.
 Preferred ways of consuming information (text, audio, visuals).
 Existing knowledge and perceptions of Thirukkural.
2. Competitive Analysis: Research existing apps or resources for learning Thirukkural.
Analyze their strengths, weaknesses, and features to identify potential gaps your app
can address.

Define

3. User Personas: Develop user personas based on your user research, outlining the key
characteristics, needs, and goals of your target audience segments.
4. Problem Statement: Craft a clear and concise problem statement that captures the
core challenge your app will address for your target users.

For example, "People interested in learning Thirukkural find it difficult to understand the
ancient Tamil due to lack of accessible resources and engaging learning methods."

Ideate

5. Brainstorming Session: Conduct a brainstorming session to generate a wide range of

ideas for your Thirukkural app. Consider features like:
 Translations of Kural verses into multiple languages.
 Explanation of the verses in simple language.
 Interactive quizzes and games to test knowledge.
 Personalized learning paths based on user goals.
 Integration with social media for sharing and discussion.
6. Crazy 8's: Use the "Crazy 8's" sketching technique to quickly develop eight different
app screen layouts within a short timeframe. This will help explore various design
possibilities.
Prototype

7. Low-fidelity Prototype: Create a low-fidelity prototype of your app using tools like
pen and paper or basic design software. This prototype should focus on the core
functionalities and user flow.
8. User Testing: Conduct user testing sessions with your target audience to get feedback
on your low-fidelity prototype. Observe how users interact with the prototype and
identify any usability issues.

Test

9. Refine Prototype: Based on user testing feedback, refine your low-fidelity prototype
into a mid-fidelity prototype with more visual details and functionalities.
10. Iterative Testing: Conduct iterative rounds of user testing and refinement until you
have a high-fidelity prototype that is user-friendly and meets the needs of your target
audience.

Additional Considerations

 Incorporate Tamil Culture: Integrate elements of Tamil culture and aesthetics into
the app's design to create an engaging and immersive experience.
 Offline Functionality: Consider allowing users to access core Thirukkural content
offline for situations with limited internet connectivity.
 Monetization Strategy: Decide on a monetization strategy for your app, if
applicable. This could include in-app purchases, subscription fees, or targeted
advertising.
Output:
Result:
Thus, the hands-on design thinking process for thirukkural app was done successfully
Ex no: 7 Brainstorming feature for proposed product
Date:

Aim:
To conduct the brainstorming session for Thirukkural app.

Brainstorming

Content and Learning

 Daily Kural: Deliver a random Kural (couplet) with explanation and commentary
every day for users to ponder upon.
 Thematic Exploration: Allow users to explore Thirukkural by themes like love,
virtue, or wealth. Users can browse relevant Kural verses and interpretations.
 In-depth Explanation: Provide in-depth explanations for each Kural verse, including
historical context, cultural significance, and interpretations from different scholars.
 Customizable Learning Paths: Create customizable learning paths based on user
preferences (learning goals, level of understanding). The app can suggest relevant
Kural verses and modules.
 Gamification: Integrate gamification elements like points, badges, and leaderboards
to make learning Thirukkural more engaging and interactive.

Engagement and Community

 Discussion Forum: Create a discussion forum where users can share their
interpretations of Kural verses, ask questions, and have conversations with other
users.
 Kural of the Day Sharing: Allow users to share their daily Kural on social media
platforms along with their reflections or learnings.
 Expert Insights: Invite Tamil language scholars or Thirukkural experts to contribute
guest articles or video lectures within the app.
 User-generated Content: Allow users to submit their own interpretations, creative
responses (art, music) inspired by Thirukkural verses for community engagement.
Audio/Video Learning: Integrate audio recordings of Kural verses by renowned Tamil
speakers or educators. Additionally, consider video explanations or lectures for deeper
understanding.

Accessibility and Personalization

 Multilingual Support: Offer translations of the Kural verses and explanations in

multiple languages to reach a wider audience.
  Text-to-speech Functionality: Integrate text-to-speech functionality for users who
prefer audio learning or have visual impairments.
 Dyslexia-friendly Font Options: Provide dyslexia-friendly font options to improve
readability for users with dyslexia.
 Customization Options: Allow users to customize the app's interface (font size, color
scheme) to suit their preferences.
 Offline Access: Enable users to download and access a certain number of Kural
verses and explanations for offline use.

Output:
Result:
Thus, the brainstorming session for developing Thirukkural app was conducted
successfully.
 Ex.no: 8 Defining the look and feel of the new project
Date:

Aim:
To define the look and feel of the Thirukkural app.

Look and Feel:

Understanding Your Users

 Target Audience: Consider the demographics and preferences of your target users.
Are they young students, working professionals, or senior citizens? What kind of
visual aesthetics would appeal to them?

Core Values of Thirukkural

 Wisdom, Virtue, and Morality:Thirukkural promotes wisdom, virtue, and morality.

The app's design should reflect these values through a sense of balance, simplicity,
and timeless elegance.

Cultural Inspiration

 Tamil Art and Architecture: Draw inspiration from Tamil art forms like kolam
(Rangoli), temple architecture, or classical paintings. Integrate these elements subtly
into the app's design without making it overwhelming.

Color Palette

 Traditional Colors: Consider using traditional Tamil colors like red, yellow, green,
and black as a base. You can explore muted tones or pastels for a more contemporary
feel.
 Psychology of Color: Think about the psychology of color. For example, blue can
evoke trust and knowledge, while green signifies peace and growth. Choose colors
that align with the overall message and user experience you want to create.

Typography

 Tamil Fonts: Select easy-to-read and visually appealing Tamil fonts for the Kural
verses.
 Complementary English Fonts: If you include English translations, choose fonts
that complement the Tamil fonts and maintain a cohesive look.
Visuals and Imagery

 Minimalist Approach: Maintain a clean and uncluttered interface. Use high-quality

visuals sparingly to avoid overwhelming users or distracting from the text.
 Contextual Images: Consider including occasional background images or icons that
subtly depict the themes of the Kural verses being viewed.

Layout and Navigation

 Intuitive Navigation: Design a user-friendly and intuitive navigation system that

allows users to easily access different sections of the app (daily Kural, thematic
exploration, explanations).
 White Space: Utilize white space effectively to create a sense of balance and improve
readability.

Prototyping Tools

 Low-fidelity Prototyping: Start with low-fidelity prototypes using tools like pen and
paper or basic design software. This allows you to focus on core functionalities and
user flow before investing in high-fidelity mockups.
 High-fidelity Mockups: Once you have a solid idea of the app's structure and
navigation, create high-fidelity mockups with more polished visuals and design
elements.

Usability Testing

 User Feedback: Conduct usability testing sessions with your target audience to get
feedback on the app's look and feel. Observe how users interact with the app and
identify any areas for improvement.
Result:
Thus, the look and feel of the Thirukkural app was defined and written successfully.
 Ex no: 9 Create a sample pattern library for the product
Date:

Aim:
To create a sample pattern library for thirukkural app.

Sample Pattern Library:

Moodboard

 Theme: The moodboard should evoke a sense of tradition, wisdom, and cultural
significance.
 Colors: Use warm and inviting colors like yellows, oranges, and reds that reflect the
vibrancy of Tamil culture.
 Images: Include images of palm trees, temple architecture, and historical monuments
of Tamil Nadu.
 Typography: Use elegant fonts that reflect the classical nature of Thirukkural.

Fonts

 Primary Font:
 Siyam Rupam Download Siyam Rupam font from Google Fonts: [invalid
URL removed]

This is a Tamil typeface with a classic and sophisticated look, perfect
for displaying the verses of Thirukkural.
 Secondary Font:
 Niramit Download Niramit font from Google Fonts:
 A clean and contemporary font that can be used for UI elements and
translations.

Colors

 Primary Color: White

This color represents the vibrancy and spiritual significance of Tamil culture.
 Secondary Color: Black
 This color adds depth and cultural grounding to the app's interface.
 Text Color: #212121 (Black)
 Ensures readability and contrasts well with the primary and secondary colors.
 Background Color: #F8F8F8 (Light Gray)
 Provides a clean and neutral backdrop for the content.
UI Principles

 Simplicity: The design should be clear and easy to navigate, focusing on the content
(Thirukkural verses and translations).
 Balance: Create a balanced layout with equal emphasis on Tamil text, translations,
and any visual elements.
 Hierarchy: Use font size, weight, and color to create a visual hierarchy, guiding the
user's attention to the most important information.
 Contrast: Ensure adequate contrast between text and background colors for
readability.
 Responsiveness: Design the app to adapt seamlessly to different screen sizes and
devices.

Additional Considerations

 Incorporate subtle animations or transitions to enhance user experience.

 Use icons sparingly and ensure they are culturally appropriate.
 Consider including a night mode with an inverted color scheme for better readability
in low-light conditions.

Output:
Result:
Thus, the sample pattern library for Thirukkural app was created successfully.
EX.NO:10
Identify a customer problem to solve
Date:

Aim:
To identify a customer problem and to solve the problem.

Customer Problem:

Problem:

Difficulty understanding the context and nuances of the couplets for new learners, especially
those unfamiliar with classical Tamil.

Why it's a problem:

 Thirukkural's beauty lies in its depth and layered meaning. Without context, users
might miss the full impact of the couplets.
 Modern Tamil may differ from the Tamil used in Thirukkural, making it challenging
for beginners.

Here are some solutions you could explore:

 Offer in-app explanations: Provide clear and concise explanations for each couplet
in simple Tamil or the user's preferred language (if available).
 Contextualize the Kural: Briefly explain the situation or story behind the couplet,
making it more relatable.
 Integrate multimedia: Include audio recordings of the couplets with proper
pronunciation, and potentially even short animations to depict the scene.
 Interactive features: Allow users to click on keywords and get definitions or
translations.
By addressing this problem, your Thirukkural app can become more engaging and accessible
to a wider audience, helping them gain a deeper understanding of this ancient wisdom.

Result:
Thus, the customer problem was identified and solved successfully.
 Ex no: 11
Conduct end-to-end user research
Date:

Date:
Aim:
To conduct an end-to-end user research.

End-to-End User Research:

1. User Research:

 Goals: Understand user needs, pain points, and expectations for a Thirukkural app.
 Methods:
 Surveys: Distribute online surveys to a broad audience interested in
Thirukkural. Questions could explore:
 Current experience with Thirukkural (familiarity, usage of existing
apps).
 Difficulties faced in understanding the text.
 Preferred features in a Thirukkural app (explanations, translations,
multimedia).
 Interviews: Conduct in-depth interviews with a smaller group of users. This
allows for probing deeper into their experiences and motivations. Recruit users
with varying levels of Tamil proficiency.

2. Creating Personas:

Based on the research findings, create user personas representing different user groups. Each
persona should have a name, background, goals, needs, and pain points related to using a
Thirukkural app. Here's an example:

 Persona: Saraswati, a young professional interested in learning Thirukkural but finds

the classical Tamil challenging.
 Goals: Understand the meaning and wisdom of Thirukkural in a clear and engaging
way.
 Needs: Simple explanations in English, audio recordings for pronunciation, ability to
bookmark favorite couplets.
 Pain Points: Struggles with understanding the text due to lack of Tamil knowledge,
existing apps lack explanations or are not user-friendly.
3. Ideation Process:

 User Stories & Scenarios: Describe how users will interact with the app from their
perspective.
 Example User Story: As Saraswati (persona), I want to be able to click on a
difficult word in the Kural and get a simple explanation in English, so I can
understand the full meaning of the couplet.
 Scenario: Saraswati is reading a Kural about honesty. She encounters a word
she doesn't understand. She clicks on the word and an easy-to-understand
explanation pops up, helping her grasp the concept.

4. Flow Diagrams and Flow Mapping:

 Flow Diagrams: Visually represent the steps a user takes to complete a specific task
in the app.
 Example: A flow diagram could illustrate the process of searching for a
specific Kural by number or keyword.
 Flow Mapping: Map out the entire user journey within the app. This includes
browsing couplets, accessing explanations, using multimedia features, bookmarking
favorites, and navigating other functionalities.
Flow Diagram:
Flow Mapping:

Result:
Thus, the end-to-end user research for thirukkural app was done successfully.
EX.NO.12 Design ,build a prototype and perform usability testing
Date:

Aim:
To design the thiukkural app with figma tool and build a prototype and
perform usability testing.
Design:

Improvement in Design:
The Thirukkural app was designed. In this app there are five frames. the first frame is the home page
and it contains the logo for the Thirukkural app.

In frame two contains some information about Thirukkural and its author Thiruvalluvar. This will
help the foreigners to know about the world’s oldest poetry form . And it have the information in both
regional and communication language.
The next frame has 130 chapters of thirukkural where each frame having 13 chapters and also it has
the facilities to change the language of the app based on the users interest. Also has a facilities to
search the kural that is needed by the user in the search icon and also via voice search.

The fourth frame displays the kural that searched in the search icon
The fifth frame displays the kural via chapters.and it contains 10 kurals for each chapter for each
frame .

In this frame the language can be changed as per the user wish. The user can change the app
language to almost all the languages present in the world. So the users who don’t know Tamil can also
understand and learn Thirukkural easily.
The last frame demonstrated the translation of the app into Telugu and English.

Result:

Thus the design for thiukkural app with figma tool and build a prototype and perform usability
testing was done successfully.