EX.

01: Designing a responsive layout for a societal application

Aim:

To design a responsive layout for a societal application.

Algorithm/Procedure:

1.Creating a responsive website in Figma:

2.Define your website's purpose and audience.
3.Set breakpoints for different screens.
4.Design desktop version.
5.Use grids for layouts.
6.Design for tablet and mobile.
7.Create responsive components.
8.Apply constraints to elements.
9.Use relative font sizes.
10.Optimize images.
11.Test and prototype.
12.Use grid/ flex box layouts.
13.Design responsive navigation.
14.Consider touch interactions.
15.Test on various devices.
16.Iterate based on feedback.
17.Document choices.
18.Share with developers.
19.Maintain and update design.
Output:

Result:

Thus designing of responsive layout for a societal application has been

performed successfully.
EX.02: Exploring various UI Interaction Patterns

Aim:

To explore various UI interaction patterns.

Algorithm/Procedure:

1.Set objectives and understand user needs.

2.Research and gather design inspiration.
3.Create wireframes for layout and structure.
4.Utilize Figma components and styles.
5.Prototype interactions using Figma's features.
6.Test your design with users for feedback.
7.Iterate and refine based on feedback.
8.Document your design decisions.
Output:

Result:

Thus various UI interaction patterns have been explored successfully.

Ex.03: Developing an Interface with Proper UI Style Guides

Aim:

To develop an Interface with Proper UI Style Guides.

Algorithm/Procedure:

1. Define Goals and Audience: Understand the project's purpose and target users.
2. Research and Inspiration: Gather industry insights and design inspiration.
3. Create a Figma Project: Start a new Figma project.
4. Workspace Setup: Organize Figma files and create sections for style guides and
components.
5. Brand Guidelines: Set color, typography, and brand-related guidelines.
6. UI Components: Create component libraries for buttons, forms, icons, and
navigation.
7. Typography: Define font styles, sizes, and spacing.
8. Iconography: Design and organize icons as components.
9. Color System: Document primary, secondary, background, and text colors.
10. Grids and Layouts: Establish grid systems for different devices.
11. Accessibility Guidelines: Ensure WCAG-compliant contrast and
text sizing.
12. UI Elements: Document usage guidelines for various UI elements.
13. Wireframes: Create wireframes and user flows for screen layout and interaction
14. Visual Design: Develop screens based on wireframes using components and
styles.
15. Interactive Prototyping: Build interactive prototypes for user testing and
feedback.
Downloaded
Output:

Result:
Thus an Interface with Proper UI Style Guides has been developed successfully.
Ex.04: Developing wire flow diagram for application using
open-source software

Aim:

To develop Wire flow diagram for application using open-source software.

Algorithm/Procedure:

1. Define Purpose and Goals: Determine the diagram's purpose and goals,
focusing on user flows, navigation, and interactions.
2. Identify User Personas: If applicable, specify user personas for a user-centric
approach.
3. Gather Requirements: Collect project information, including existing designs
and functionality requirements.
4. Select Software: Choose open-source design software,
a. such as Figma, for wire flow creation.
5. Create a Project: Begin a new project in your chosen software and set up the
canvas to match your project's needs.
6. Wireframe Screens: Develop wireframes for each application screen, focusing
on visual structure.
7. Define Interactions: Add interaction notes or links to illustrate navigation and
user interactions.
8. Create User Flows: Connect wireframes to illustrate user journeys, navigation
paths, and interactions.
9. Add Annotations: Include descriptions to clarify elements and interactions
in each wireframe.
10. Collaborate and Share: Utilize collaboration features to gather feedback from
team members and stakeholders
11. Iterate and Refine: Revise the wire flow diagram based on - feedback, ensuring
alignment with project goals.
12. Finalize and Export: Clean up the wire flow diagram and export it to a suitable
format for sharing and documentation.
13. Document the Wire flow: Create a reference guide to explain the wire
Flow’s purpose and key notes for stakeholders and developers.
14. Maintain Consistency: Keep the wire flow diagram in sync with the
application's actual design, updating it as needed.
Output:

Result:

Thus Wire flow diagram for application using open-source software has been
developed successfully.
EX NO:5 EXPLORE VARIOUS OPEN SOURCE COLLABORATIVE PLATFORMS

AIM:

To explore the various open source collaborative interface platform.

EXPLANATION:

There are various open source platforms to design an interface. We are going to
explore about various tools.

FIGMA:

Figma is a cloud-based design and prototyping tool that enables collaboration among
teams in real-time. It is widely used in the fields of user interface (UI) and user
experience (UX) design, as well as for creating interactive prototypes.

Here are some key features and aspects of Figma:

1. Real-time collaboration
2. Users can comment on designs
3. Creating Prototypes
4. Share links for feedback.
5. Wireframes
6. Brainstorming
UNREAL ENGINE UI TOOL

UNREAL ENGINE:-

Unreal Engine is a powerhouse in the world of game development, known for its cutting-edge
graphics, robust development tools, and versatility. Created by Epic Games, it's been the force
behind many blockbuster games, from action-packed shooters to immersive role-playing
adventures. What sets Unreal Engine apart is its real-time rendering capabilities, allowing
developers to create stunning visuals and lifelike environments that draw players into the game
world. Its Blueprint visual scripting system also empowers designers and artists to bring their
creative visions to life without needing extensive programming knowledge. Plus, with its
continual updates and support, Unreal Engine remains at the forefront of innovation, shaping the
future of gaming and beyond.

LIGHTING EFFECTS:-

Unreal Engine's picture lighting features encompass a suite of tools and technologies designed to
simulate realistic lighting effects within virtual environments. These features include dynamic
global illumination, ray tracing, various lighting options (such as dynamic, static, and volumetric
lighting), and other tools that enable developers to create visually stunning and immersive
experiences by accurately simulating how light interacts with objects and surfaces in real-time.

ENVIRONMENT DESIGNING:-

Environment designing in Unreal Engine is the process of creating immersive and visually
captivating virtual worlds within the Unreal Engine game development platform. This
encompasses the creation of diverse landscapes, terrains, indoor spaces, and architectural
structures using a combination of terrain sculpting tools, asset placement, material creation,
lighting design, and real-time rendering capabilities. Environment designers utilize a range of
features and tools provided by Unreal Engine to craft environments that are rich in detail,
realism, and atmosphere, ultimately enhancing the overall player experience in video games,
simulations, architectural visualizations, and other interactive applications.

THIRD PERSON GAMEPLAY DESIGNING:-

Designing for third-person play in Unreal Engine involves crafting gameplay experiences where
players control a character from a perspective behind or slightly above the character, offering a
broader view of the game world. This entails creating responsive character controls,
implementing a dynamic camera system, designing levels and obstacles suited for traversal and
exploration, integrating combat mechanics if applicable, providing visual and UI feedback, and
engaging in iterative testing to refine the gameplay experience. The goal is to create immersive
and enjoyable experiences that leverage Unreal Engine's capabilities to their fullest extent.

OBJECT DESIGNING CENTER:

Designing objects in Unreal Engine such as creating 3D models, textures, and materials to
populate virtual environments within the Unreal Engine game development platform. These
objects can range from simple props like furniture and foliage to complex structures such as
buildings and vehicles. Designing objects in Unreal involves several steps, including
conceptualization, modeling, texturing, and integration into the game environment. These objects
contribute to the visual fidelity, atmosphere, and interactivity of the game world, enhancing the
overall player experience. Additionally, Unreal Engine provides a variety of tools and features to
facilitate object design, including robust modeling and texturing tools, material editors, and asset
management systems, allowing designers to create high-quality objects efficiently.

CHARACTER DESIGINING:-

Unreal Engine’s Character designing accuracy , precision and fidelity with which game
characters are designed and implemented within the Unreal Engine game development platform.
This process involves creating detailed 3D models, high-quality textures, realistic animations,
and dynamic behaviors to bring characters to life in virtual worlds.
GMIP TOOL

GIMP, which stands for GNU Image Manipulation Program, is a free and open-source
raster graphics editor used for tasks such as photo retouching, image composition, and
image authoring. It's a powerful tool similar to Adobe Photoshop, offering features like
layers, filters, and various tools for editing and enhancing images

ADOBE XD

Adobe XD, short for Adobe Experience Design, is a UI/UX design and prototyping tool
developed by Adobe Inc. It is used by designers and developers to create wireframes,
prototypes, and interactive designs for websites, mobile apps, and other digital
experiences. Adobe XD offers features such as artboards, responsive resizing,
prototype interactions, and collaboration tools, making it a popular choice for designing
user interfaces and user experiences.
Result:
Thus exploration of various open source collaborative platforms had
been done successfully
Ex.06: Hands on Design Thinking Process for a new product

Aim:

To apply the design thinking process for a new product.

Algorithm/Procedure:

Empathize: Begin by conducting user research and interviews to gain insights into
potential user needs and pain points related to smartphone usage.
Define: Analyze the gathered information to define a clear and specific problem
statement. For example, "Users need a more efficient way to track their daily fitness
activities."
Ideate: Organize brainstorming sessions with a diverse team to generate a wide range
of creative solutions. Encourage free thinking and open collaboration.
Prototype: Create a low-fidelity prototype of the smartphone app. This can be a paper
sketch or a digital wireframe that represents the app's basic functionality.
Test: Conduct user testing sessions with a small group of potential users. Observe how
they interact with the prototype and gather feedback.
Iterate: Based on user feedback, refine the prototype and make necessary
improvements to address user concerns or suggestions.
Prototype (Again): Create a more advanced prototype, closer to the final product. It
should incorporate the changes and improvements identified during the initial testing
phase.
Test (Again): Conduct another round of user testing, this time with a larger group of
users. Gather data on usability, functionality, and overall user experience.
Refine: Analyze the results of the second testing phase and make further refinements to
the app design and functionality.
Implement: Develop the final version of the smartphone app, incorporating all the
changes and improvements identified during the design thinking process.
Test (Final Testing): Conduct thorough testing of the fully developed app to ensure it's
bug-free and ready for launch.
Launch: Release the app to the target market, accompanied by marketing and
promotion efforts.
Output :

Result:

Thus the design thinking process for new product has been studied.
Ex.07: Brainstorming feature for proposed product

Aim:
The aim of this process is to generate innovative and practical feature ideas for a
proposed product, ensuring that the final product meets user needs, addresses pain
points, and has a competitive edge in the market.

Algorithm/Procedure:
Understand the Product Concept:
Begin by thoroughly understanding the proposed product's concept, its target audience,
and its unique selling points.
Gather a Diverse Team:
Assemble a cross-functional team with members from various departments (e.g.,
product development, marketing, design) to bring different perspectives to the
brainstorming session.
Set Clear Objectives:
Define clear objectives for the brainstorming session. What problems should the new
features solve? What goals should they achieve?
Warm-Up and Icebreaker:
Start the session with a warm-up or icebreaker activity to encourage creative thinking
and open communication within the team.
Idea Generation:
Allow team members to freely brainstorm feature ideas. Encourage a "no idea is a bad
idea" mindset. Use techniques like mind mapping, brainstorming software, or post-it
notes on a whiteboard to record ideas.
Categorize and Prioritize:
Group similar ideas together, and prioritize them based on factors like feasibility,
potential impact, and alignment with the product concept.
SWOT Analysis:
Conduct a SWOT (Strengths, Weaknesses, Opportunities, Threats) analysis for each
feature idea to evaluate its potential in the market.
Feasibility Assessment:
Assess the technical, financial, and resource feasibility of implementing the proposed
features.
Market Research:
Conduct market research to identify user preferences and gather insights that can
inform feature development.
Prototype and User Testing:
Create prototypes or mockups of the proposed features and conduct user testing to
gather feedback and refine the ideas.
Cost-Benefit Analysis:
Evaluate the expected cost of development against the projected benefits, such as
increased user engagement, retention, or revenue.
Risk Assessment:
Identify potential risks associated with each feature and develop mitigation strategies.
Finalize Feature Set:
Based on the assessment, finalize the set of features to be included in the product.
Ensure they align with the product's vision and goals.
Documentation:
Document the chosen features, their objectives, and the rationale behind their selection.
This document will guide the development team.
Iterate as Needed:
Keep an open line of communication for ongoing feature refinements and iterations,
especially as more data and insights become available.

Example:
Suppose a software company is developing a new mobile messaging app. During the
brainstorming session, the team generates a wide range of feature ideas, including:

End-to-End Encryption: To ensure user privacy and data security.

Message Scheduling: Allowing users to schedule messages to be sent at a specific
time.
Reaction Emojis: A feature that lets users react to messages with emojis for more
expressive communication.
Dark Mode: A night-friendly theme for the app.
Polls and Surveys: Integration of polls and surveys within the chat for easy
decisionmaking.
Auto-Translate: Real-time language translation for international communication.
Output:

Result:
Thus brainstorming feature for proposed product has been applied and
executed successfully.
Ex.08: Defining the Look and Feel of the new Project

Aim:
The aim is to establish the visual design and user experience for a new project,
ensuring it aligns with the project's goals and provides an appealing, intuitive, and
cohesive interface for users.

Algorithm/Procedure:
1.Project Goal Assessment:
Understand the project's objectives, target audience, and scope. This sets the
foundation
for design decisions.
2.Research and Inspiration:
Gather inspiration from existing designs and industry trends. Create mood boards or
design boards to collect visual references.
3.Define Design Principles:y, accessibility, and branding.
4.Wireframing and Prototyping:
Create wireframes or low-fidelity prototypes to plan the layout and structure of the user
interface. Use tools like Figma, Sketch, or Adobe XD for digital projects.
5.Visual Design:
Develop a color palette, typography choices, and graphic elements (icons, images,
logos) that reflect the project's identity. Create high-fidelity designs using design
software.
6.User Interaction Design: Define user interactions and behaviors, including animations,
transitions, and microinteractions.
Ensure a smooth and intuitive user experience.
7.Responsive Design:
Adapt the design to various screen sizes and devices, focusing on mobile
responsiveness.
8.Accessibility and Usability Testing:
Evaluate the design for accessibility, ensuring it's usable by individuals with
disabilities. Conduct usability testing with potential users to gather feedback.
9.Iteration and Feedback:
Refine the design based on feedback from users and stakeholders.
10.Documentation:
Create design documentation that includes guidelines for developers to implement
design.
11.Development Integration:
Collaborate with developers to ensure the design is implemented accurately in the
project.
12.User Testing:
Conduct user testing with real users to verify the design's effectiveness.
13.Finalization:
Make necessary adjustments and finalize the design elements for deployment.

Output:

Result:
Thus the Look and Feel of the new Project has been defined successfully
EX.9:Create a sample pattern library for product(mood board, font and colors
based on principles)

Aim:
To develop a pattern library for product that involves creating mood board,fonts and
colors based on principles.

Algorithm:
1.Establish Product Vision:Define the overall vision and target audience for your
product. This sets the tone for the mood board, font choices, and design principles.

2.Create a Mood Board:Compile images, textures, and color palettes that reflect the
desired mood or theme.Include a variety of imagery (abstract, realistic, etc.) to inspire
creativity and direction.
3.Select a Color Palette:Define a set of primary colors that align with the product's
theme.Add secondary colors for accent and contrast.Include neutral tones for balance.
4.Choose Typography:Select a font family for headings and another for body text.
Ensure readability and consistency.Incorporate font weights for different levels of
emphasis (bold, regular, light, etc.).
5.Develop Layout Templates:Create templates for common layouts (e.g., homepage,
product page, contact page).Use a grid system to maintain consistency in alignment
and spacing.
6.Define Design Principles:Establish principles for visual hierarchy, consistency, and
responsiveness.Include guidelines for accessibility (e.g., color contrast, screen reader
compatibility).
7.Design Components and Controls:Develop consistent designs for buttons, forms,
and other interactive elements.Ensure these components follow the established color
palette and typography.
8.Create Icons and Graphics:Develop a set of icons that align with the product's
theme and are easily recognizable.Use consistent styles and proportions for icons.
9.Document the Pattern Library:Create a guide that documents all components,
design principles, and examples.Include code snippets or style sheets for developers to
implement the pattern library.
10.Implement a Review and Feedback Process:Establish a process to review new
design elements for consistency with the pattern library.
OUTPUT:

RESULT:

This implementation of sample pattern library has been implemented successfully.

 Ex.10: Identify a customer problem to solve

Aim:
The aim of this experiment is to identify a customer problem to solve effectively,
which is crucial for product development, customer satisfaction, and business
success.

Algorithm/Procedure:

1. Customer Segmentation:Begin by segmenting your customer base into

different groups based on demographics, behavior, or other relevant criteria.
2.Data Collection: Gather data from these customer segments through surveys,
interviews, feedback forms, and analytics tools. You can also utilize data from
your customer support system, website, or app analytics.
3. Problem Identification Metrics: Define key metrics and indicators to identify
customer problems. Examples include high bounce rates on a specific webpage,
low customer satisfaction scores, or a surge in support tickets related to a
specific issue.
4.Data Analysis: Analyze the collected data to identify patterns, trends, and
common issues reported by customers. Data analysis tools and techniques, such
as data mining or sentiment analysis, can be useful.
5. Prioritization: Prioritize the identified problems based on their impact on
customers and your business. You can use techniques like the Moscow method
(Must- haves, Should-haves, Could-haves, Won't-haves) to prioritize.
6.Root Cause Analysis: Conduct a root cause analysis for each identified
problem. Understand why these issues are occurring by delving into the
underlying causes. 7.Solution Ideation: Brainstorm potential solutions for the
identified problems. Encourage cross-functional teams to contribute ideas and
consider how these solutions align with your business goals.
8.Experiment Design: Design controlled experiments or A/B tests to validate the
proposed solutions. Ensure you have a clear hypothesis and success criteria for
each experiment.
9.Implementation: Implement the proposed solutions on a small scale to
observe their impact. This might involve website changes, process adjustments,
or feature additions.
10.Data Collection Post-Implementation: Continue to collect data after
implementing the solutions to assess their effectiveness. Monitor key metrics to
see if they improve.
11.Analysis and Validation: Analyze the post-implementation data to validate
whether the proposed solutions have effectively addressed the customer
problem. Make data- driven decisions.
12.Feedback and Iteration: Collect feedback from customers regarding the
changes and iterate on the solutions based on their input. Continuous
improvement is key.

Output:

Result:

Thus a customer problem was identified and understood successfully.

Ex.11: Conduct end-to-end user research - User research, creating
personas, Ideation process (User stories, Scenarios), Flow diagrams, Flow
Mapping

Aim:

The aim of this experiment is to conduct end-to-end user research and

design process to

develop a user-centered solution for a specific problem. This process

includes user

research, creating personas, ideation (user stories, scenarios), and

creating flow diagrams and flow maps.

Algorithm/Procedure:

Define the Problem:

Clearly define the problem or challenge you want to address through this
user-centered

design process.

User Research:

Conduct user interviews, surveys, or observations to gather insights and

data about the

target users. Analyze the collected data to identify user needs, pain points,
and behaviors.

Create Personas:

Based on the research findings, create user personas. Personas are

fictional representations of your typical users, including their goals, needs,
and characteristics.
Ideation:
Brainstorm creative ideas to address the identified problems and fulfill user
needs. Develop user stories and scenarios to articulate how users will
interact with the proposed solution.

User Stories:
Create user stories using the "As a [type of user], I want [an action] so that
[benefit/value]" format. User stories should capture specific user tasks and
their motivations.

Scenarios:
Develop detailed narratives (scenarios) that illustrate how users will use
the solution to achieve their goals. Scenarios should provide context, user
actions, and expected outcomes.

Flow Diagrams:
Create flow diagrams to visualize the user's journey through the solution.

Use symbols and arrows to represent user actions, system responses, and
transition between different screens or stages

Flow Mapping:

Develop flow maps to provide a holistic view of the user experience.

Connect user stories

and scenarios to specific steps in the flow, highlighting decision points and
potential pain points.

Iterate and Test:

Review and refine your user stories, scenarios, flow diagrams, and flow
maps based on feedback from stakeholders or potential users. Conduct
usability testing to validate the proposed user experience.

Implementation: Work with developers and designers to implement the

user-centered solution based on the finalized flow and design.
Evaluation:

After the solution is implemented, evaluate its effectiveness by gathering

user feedback

and monitoring key performance metrics.

Iterate and Improve:

Continuously iterate on the design and user experience based on user

feedback and changing needs.

Output:
Result:
Thus a user-centered problem was identified to solve through a comprehensiveprocess
of user research, persona creation, ideation (including user stories and scenarios),flow
diagrams, and flow mapping, with the goal of successfully addressing user needs and
delivering an exceptional user experience.
Result:

Thus a user-centered problem was identified to solve through a comprehensive

process of user research, persona creation, ideation (including user stories and
scenarios),flow diagrams, and flow mapping, with the goal of successfully addressing
user needs and delivering an exceptional user experience.

Ex.12: Sketch, design with popular tool and build a prototype and
perform usability testing and identify improvements

Aim:
The aim of this experiment is to design a user-friendly mobile app for task
management, create a prototype using a popular design tool, perform usability
testing, and identify improvements to enhance the user experience.

Algorithm/Procedure:

1.Define Objectives and User Persona: Define the objectives of the task
management app. Create a user persona to represent the target audience.
2.Sketch and Wireframe: Start with sketching the basic layout and functionality
of the app on paper or digitally. Create low-fidelity wireframes to visualize the
app's structure and layout. 3.Design with a Popular Tool: Choose a popular
design tool such as Adobe XD, Sketch, Figma, or In Vision. Create high fidelity
designs with attention to visual elements, typography, and color schemes.
Implement the user interface (UI) based on best practices and your user
persona's preferences.
4. Prototype Creation: Use the design tool to create interactive prototypes with
clickable elements and transitions. Ensure that the prototype represents the
app's core functionalities. 5.Recruit Participants for Usability Testing: Identify
potential users or participants who match the user persona. Prepare a usability
testing plan, including tasks to be performed within the prototype.
6. Usability Testing: Conduct usability testing sessions with participants. The
participants are asked to perform specific tasks within the prototype. Observe
and record their interactions and gather feedback on their experience.
7. Analyze and Identify Improvements: Analyze the usability testing data to
identify pain points and areas of improvement.Look for common patterns and
issues encountered by users.
8. Iterate on the Design: Implement the necessary design improvements based
on the feedback received.Make changes to the prototype to address identified
issues.
9. Second Round of Usability Testing: Conduct a second round of usability
testing with new or the same participants to evaluate the impact of the design
improvements
10. Finalize the Prototype: Make any final adjustments based on the results of
the second usability testing round.
11. Document Findings and Recommendations: Document the findings from
both rounds of usability testing. Provide clear recommendations for further
improvements or development. 12.Conclusion: Conclude the experiment by
summarizing the improvements made to the prototype and how they enhance the
user experience.
Output:

Result:
Thus, Sketching, building a prototype, performing usability testing and identifying
improvements has been executed successfully.