SlideShare a Scribd company logo
1 of 40
OXFORD ENGINEERING COLLEGE
DEPARTMENT OF CSE & IT
CCS370 - UI AND UX DESIGN
LAB MANUAL
YEAR - III SEM - VI
PREPARED BY
ROHINI P
AP/CSE
CCS370 UI AND UX DESIGN
LAB MANUAL
S.NO. EXPERIMENTS
PAGE NO
DATE SIGNATURE
1. Designing a Responsive layout for an societal application.
Æ. Exploring various UI Interaction Patterns
3.
Developing an interface with proper UI Style Guides
4.
Developing Wireflow diagram for application using open source software
5.
Exploring various open source collaborative interface Platform
6.
Hands on Design Thinking Process for a new product
7.
Brainstorming feature for proposed product
8.
Defining the Look and Feel of the new Project
9.
Create a Sample Pattern Library for that product (Mood board, Fonts, Colors
based on UI principles)
10. Identify a customer problem to solve
11.
Conduct end-to-end user research - User
research, creating personas, Ideation
process (User stories, Scenarios), Flow
diagrams, Flow
12.
Sketch, design with popular tool and build
a prototype and perform usability testing
and identify improvements
EXP
.NO:1
DESIGNING A RESPONSIVE LAYOUT FOR AN SOCIETAL APPLICATION
DATE:
AIM:
To design a responsive layout for an societal application
Procedure:
Step 1: Design Guidelines in Figma Create a design system file with color styles, text styles, and components.
Step 2: Breakpoint Artboards in Figma Use the "Artboard" tool to create artboards for each breakpoint.
Step 3: Wireframing in Figma Use the "Pen" or "Shape" tools to draw wireframes within each artboard.
Step 4: Content and Elements in Figma Add text, images, buttons, and forms within the wireframes.
Step 5: Responsive Design in Figma Set constraints for each element to determine how they adapt to different
screen sizes. Use "Auto Layout" to maintain flexibility.
Step 6: Components and Styles in Figma Create components by selecting elements and converting them into
components. Apply shared styles for text, colors, and typography.
Step 7: Interactions and Animations in Figma Use the "Prototype" tab to define interactions and animations.
Link frames to create a seamless user flow.
 Step 8: Feedback and Collaboration in Figma Share your Figma project
with team members, allowing them to comment and provide feedback
directly in the tool.

 Step 9: Accessibility in Figma Use the accessibility checker to identify
and fix accessibility issues in your design.

 Step 10: Finalize and Export in Figma Apply final design changes as
needed and then use the "Export" feature to export assets in suitable
formats for development.

EXP
.NO:2
EXPLORING VARIOUS UI INTERACTION PATTERNS
DATE:
AIM:
To explore various UI interaction patterns
Theory:
Understanding different UI interaction patterns is essential for creating engaging and user-friendly digital interfaces. This
document provides a brief overview of ten UI interaction patterns commonly used in design.
List of Explained UI Interaction Patterns:
1. Hover Effects
2. Sliders and Carousels
3. Pop-up Modals
4. Expandable Menus
5. Drag-and-Drop Interactions
6. Parallax Scrolling
7. Toggle Switches
8. Progress Bars
9. Swipe Gestures
10. Tooltips
Common UI Interaction Patterns:
1. Hover Effects
Hover effects are dynamic changes that occur when a user hovers their mouse pointer over an element. Common examples
1. Sliders and Carousels
 Sliders and carousels allow multiple pieces of content to occupy a single screen space, which users can navigate through by
swiping or clicking arrows. They are useful for showcasing multiple images or content pieces without cluttering the interface.
1. Pop-up Modals
 Pop-up modals are overlay windows that display additional content or actions. They often appear when triggered by a button or link,
providing focused user interactions without leaving the current context.

1. Expandable Menus
 Expandable menus, such as accordions or collapsible panels, reveal hidden content or options when clicked. They are effective for
organizing and presenting information in a compact format.

1. Drag-and-Drop Interactions
 Drag-and-drop interactions enable users to move elements within a digital interface. These interactions are often used for reordering
items, organizing content, or customizing layouts.

1. Parallax Scrolling
 Parallax scrolling creates a 3D effect by moving background elements at different speeds as users scroll. It's often used for
storytelling or adding depth to web pages.

1. Toggle Switches
 Toggle switches allow users to turn features on or off with a simple toggle. They are common in settings, preferences, and
filtering options.

1. Progress Bars
 Progress bars display the completion status of a task, providing visual feedback to users. They are commonly used in forms, file
uploads, and loading screens.

1. Swipe Gestures
 Swipe gestures involve horizontal or vertical finger movements on touch screens. They are used for navigation, image galleries,
and content browsing.

1. Tooltips
 Tooltips provide supplementary information when users hover or tap on an element. They are useful for explaining functions,
features, or abbreviations in a concise manner.
EXP
.NO:3
Developing an interface with proper UI Style Guides
DATE:
AIM:
To develop an interface with proper UI style guides
PROCEDURE:
Step1: Open Figma Launch the Figma application on your computer.
Step2: Create a New Project In Figma, click on "New" and choose "New Project" to start a new design
project.
Step3: Define Project Scope Begin by defining the scope and objectives of your design project. Understand the
purpose, target audience, and goals.
Step4: Gather Design Assets Collect any existing design assets such as logos, color schemes, typography
guidelines, and brand-specific elements.
Step 5:Set Up Style Guide Components In Figma, create components for various UI elements, including
buttons, typography, icons, and form elements.
 Step9: Grid Systems: Establish grid systems and layout guides for different screen sizes to ensure
consistent spacing and alignment.

 Step10: Document UI Elements and Patterns: Create a document in Figma that outlines UI elements
and design patterns, such as navigation menus, forms, and buttons. Create variants for different states
(normal, hover, active).

 Step11: Interactive Prototyping: Utilize Figma's interactive features to prototype and test the interface
with real interactions. Link frames to create a seamless user flow.
 Step12: Collaboration and Feedback: Share your Figma project with team members, allowing them
to comment and provide feedback directly within the tool.
 Step13: Accessibility Check: Use Figma's accessibility checker to identify and fix accessibility
issues in your design.

 Step 14: Finalize and Export: Apply any final design changes as needed and then use the "Export"
feature in Figma to export assets in suitable formats for development.

 Step15: Developer Handoff: Utilize Figma's developer handoff feature to generate CSS, HTML, or
other code snippets for implementation. Collaborate with developers to ensure accurate
implementation.
OUTPUT:
EXP
.NO:4
Developing Wireflow diagram for application using open source software
DATE:
AIM:
To develop a Wireflow diagram for application using Figma
PROCEDURE:
Step 1: Open Figma: Launch the Figma application on your computer.
Step 2: Create a New Figma File: In Figma, click on "New" and choose "New File" to start a new project specifically
for your wireflow diagram.
Step 3: Define the Application's User Flow: Begin by understanding the user flow of your application. Identify key
screens and interactions that users will experience.
Step 4: Create Artboards for Screens: In your Figma file, create individual artboards for each screen of the
application. Artboards represent the visual interface of your app.
Step 5: Design Screen Elements: Within each artboard, design and arrange the user interface elements, including
buttons, text, images, and other components.
Maintain a consistent design throughout.
 Step 6: Linking Screens: Use Figma's interactive features to link screens together. Define interactions, such as
tapping a button to navigate to another screen.

 Step 7: Create Arrows for Navigation: On your artboards, use Figma's line tool to draw arrows or lines
that represent the flow of navigation between screens.

 Step 8: Add Descriptive Text: Include text labels to describe the purpose of each screen and interaction.
This helps in clarifying the wireflow for viewers.

 Step 9: Organize the Flow: Arrange the artboards and arrows in a logical sequence to represent the intended
user flow through the application.

 Step 10: Test Interactions: Use Figma's prototype mode to test the interactions and ensure that the wireflow
accurately represents the user journey.

 Step 11: Collaboration and Feedback: Share your wireflow diagram with team members and stakeholders.
Allow them to provide feedback and comments directly within Figma.
 Step 12: Refine and Update: Based on feedback, refine and update the wireflow diagram as needed.
Ensure that it accurately reflects the application's user flow.
 Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in various formats or
share it with relevant team members for implementation.

OUTPUT:
EXP
.NO:5
Exploring various open source collaborative interface Platform
DATE:
AIM:
To explore various open source collaborative interface Platform
Theory:
Exploring various open-source collaborative interface platforms is essential for designing user-
friendly and efficient digital interfaces. This document offers an overview of different open-source
platforms to facilitate UI/UX design collaboration.
List of Explored Open Source Collaborative Interface Platforms:
1. Figma Community
2. GitHub
3. GitLab
4. InVision Freehand
5. Adobe XD (Starter Plan)
6. Miro (Free Plan)
7. Sketch for Teams (Beta)
8. Gravit Designer
9. Vectr 10.Penpot
1. Figma Community Figma Community offers real-time collaboration, version history
tracking, commenting, and prototyping capabilities. It provides access to a vast library
of community-created design resources.

1. GitHub GitHub, known for version control with Git, offers collaboration via
repositories, issue tracking, project management, and extensive integration options. It
is a platform used by developers and designers alike.

1. GitLab GitLab is an end-to-end DevOps platform that features repository
management, continuous integration and deployment (CI/CD), and collaboration tools.
It serves as a comprehensive tool for software development and design.


1. InVision Freehand InVision Freehand is an online whiteboard for collaboration, allowing real-time sketching,
ideation, and integration with InVision's design tools. It supports commenting and feedback, focusing on design
collaboration and prototyping.

1. Adobe XD (Starter Plan) Adobe XD is a vector-based design tool with shared cloud documents, co-editing
with collaborators, prototyping, and animation features. It integrates seamlessly with other Adobe products.

1. Miro (Free Plan) Miro is an online collaborative whiteboard for visual brainstorming and ideation. It
supports real-time collaboration, integrations with design and project management tools, and is ideal for
brainstorming and visual collaboration.

1. Sketch for Teams (Beta) Sketch for Teams is a vector-based design tool with shared cloud documents,
collaboration features with team members, and support for third-party plugins and integrations. It is designed
for design collaboration and system design.

1. Gravit Designer Gravit Designer is a cross-platform vector design tool with real- time collaboration, multi-
user editing, and sharing capabilities. It offers cloud storage for design files and is suitable for vector design
collaboration.

1. Vectr Vectr is a web-based vector graphics editor with real-time collaboration, shareable design projects,
simplicity, and ease of use. It is a beginner-friendly option for design collaboration.

1. Penpot Penpot is an open-source design and prototyping platform featuring real-time collaboration, version
control, a vector-based design tool, and a user-centric interface. It is ideal for design system collaboration.

EXP
.NO:6
Hands on Design Thinking Process for a new product
DATE:
AIM:
To explore various Hands On Design Thinking process stages for a new product
Theory:
The hands-on design thinking process is a vital approach for creating user- centered websites and web applications. This document provides
an overview of the key stages and methods involved in designing a new website or web app.
1. Empathize
In this stage, empathize with the potential users of the website or web app. Conduct user interviews, surveys, and observations to gain a
deep understanding of their needs, preferences, and pain points. Create user personas to represent different user segments.
1. Define
Based on the insights gathered during the empathy stage, define the core problem you aim to solve with your website or web app. Craft a
clear problem statement that serves as a guiding beacon throughout the design process.
1. Ideate
Foster creativity and brainstorm potential solutions to the defined problem. Gather your design team and employ techniques like
brainstorming sessions, mind mapping, and sketching to generate a wide range of design concepts and ideas.
1. Prototype
Create tangible representations of your design ideas through prototyping. Develop low-fidelity wireframes, interactive mockups, or
clickable prototypes using design tools such as Figma or Adobe XD. Focus on quick, iterative design iterations.
1. Test
Gather valuable user feedback by conducting usability testing with the prototypes. Observe how users interact with your website or web
app concept and collect insights into their preferences and behaviors. Iterate on the design based on user reactions and identified needs.
EXP
.NO:7
Brainstorming feature for proposed product
DATE:
AIM:
To understand what brainstorming is and to come up with features for the proposed product that we are going to be designing.
THEORY:
Introduction:
The success of a website depends on the quality and relevance of its features. Brainstorming is a crucial step in identifying the
features that will make your website innovative and user-friendly. This document outlines the process of brainstorming features
for your website design.
1. Define Project Goals and Audience:
Clearly define the goals and objectives of your website. Identify your target audience and their needs, problems, and
preferences.
1. Assemble a Diverse Team:
Gather a diverse team that includes stakeholders from different departments and backgrounds. This diversity can bring fresh
perspectives and ideas to the brainstorming process.
1. User Personas:
Create user personas to represent your target audience. Understand your users' needs and pain points to brainstorm features
that cater to their specific requirements.
1. Brainstorming Features:
Hold brainstorming sessions with your team. Encourage open and creative thinking. Focus on generating a wide range of
feature ideas. Here are some sample features that could be added to your website design:
 User Registration and Profiles:Allow users to create accounts and manage their profiles.
 Search Functionality: Implement a robust search feature for easy content discovery.

 Responsive Design: Ensure that the website is accessible and functional on various devices.

 Navigation Menus: Create intuitive navigation menus for easy user movement.

 Content Management System (CMS): Enable content creation, editing, and publishing.

 Feedback and Contact Forms: Provide options for users to share feedback and contact the website owner.

 Social Media Integration: Incorporate social sharing and linking for wider exposure.

 E-commerce Features: If applicable, add features like product listings, shopping carts, and secure payment
processing.

 Blog or News Section: Share relevant and engaging content to keep users informed.

 User Reviews and Ratings: Allow users to rate and review products or services.

 Notification System: Implement alerts or notifications for user engagement.

 Analytics and Reporting: Include tools for tracking website performance and user behavior.

 Chat or Support Feature: Offer real-time support or chat options for user inquiries.
1. Prioritize Features:
 After generating a list of potential features, prioritize them based on their alignment
with project goals, potential impact on user experience, and feasibility within your
project's scope and resources.
1. FeasibilityAssessment:
 Assess the technical, financial, and resource feasibility of each feature.
1. Prototyping and Testing:
Create low-fidelity prototypes or mockups with selected features. Conduct user testing to
gather feedback and refine the feature list.

1. Iteration:
 Based on user feedback, iterate on the website's feature set. Adjust, enhance, or eliminate
features as needed to improve the user experience.
EXP
.NO:8
Defining the Look and Feel of the new Project
DATE:
AIM:
To define the look and feel of a project
PROCEEDURE:
STEP 1 : Emphasize the importance of a user friendly UIUX design. Set clear expectations for the lab's
outcome. Highlight the impact of good design on user engagement and satisfaction.
STEP 2: Clearly define the project's objectives and goals. Specify the target audience and their
characteristics. Identify any specific requirements or constraints (e.g., branding guidelines, platform
limitations).
.
 STEP 3: Study competitors and industry leaders for design inspiration. Conduct user
surveys or interviews to understand preferences and pain points. Analyze user behavior
on similar platforms or products to inform design decisions.

 STEP4 : Include a variety of visual elements (images, icons, patterns) to explore
different design directions. Ensure that the mood board reflects the project's intended
tone, style, and emotion. Experiment with different color palettes and typography
options to find a cohesive look.


STEP 5:

Focus on creating clear, intuitive layouts that prioritize functionality. Avoid incorporating specific design
elements; concentrate on structure and navigation. Seek input from team members to refine wireframes
for optimal usability.

 STEP 6: Apply feedback from stakeholders to refine and enhance the highfidelity mockups. Pay
attention to details such as spacing, alignment, and consistency. Ensure that the design aligns with
the project's overall vision and goals.

STEP 7:
Create interactive prototypes that simulate real user interactions. Test and refine the prototypes to
ensure seamless navigation and functionality Use animations and transitions to provide a realistic
user experience.

 STEP 8: Select a diverse group of users to gather a range of perspectives. Ask specific questions
about usability, navigation, and overall experience. Use user feedback to identify areas for
improvement in the UIUX design.

 STEP 9: Include a clear rationale for design choices, explaining how they support the project's
goals. Create a comprehensive style guide with specific details on colors, typography, and UI
elements. Provide organized access to wireframes, mockups, and prototypes for future reference.
 STEP 10: Use visuals and clear explanations to effectively communicate design choices.
Highlight how the design aligns with the project's objectives and target audience. Invite questions
and feedback from stakeholders for further refinement.

 STEP 11: Prioritize feedback based on its impact on user experience and project goals.
Collaborate with team members to implement necessary revisions efficiently. Conduct additional
testing if major design changes are made to ensure optimal usability.
EXP
.NO:9
Create a Sample Pattern Library for that product
DATE:
AIM:
To create a sample pattern library for the product that we are going to build
PROCEDURE:
STEP 1: Establish a cohesive design foundation through a pattern library.
Emphasize the importance of consistent design elements.
STEP 2: Purpose: Set visual direction with images, color schemes, typography, and UI elements. Use digital tools for compilation.
Ensure alignment with project goals and target audience.
STEP 3: Importance: Fonts impact readability and visual consistency. Research and choose fonts that match the
project's tone and style. Consider legibility across different screens and devices.
STEP 4: Significance: Colors convey emotions and establish visual hierarchy. Generate primary and secondary colors
for accessibility and contrast. Ensure a balanced and harmonious palette.
STEP 5: Provide usage guidelines for headings, body text, and special cases (e.g., buttons, labels). Specify font sizes,
weights, and styles for different UI elements. Maintain consistency in font choices.
 STEP 6: Define styles for common UI elements (e.g., buttons,
forms, icons). Ensure consistency in appearance and behavior across
the project. Specify states like hover, active, and disabled.
 STEP 7:Stress the importance of designing for accessibility for inclusivity.
 Provide guidelines for text legibility and color contrast. Ensure
compliance with accessibility standards (e.g., WCAG).
 OUTPUT:
EXP
.NO:10
Identify a customer problem to solve
DATE:
AIM:
To identify a customer problem to solve and come up with solutions for the said
problem
THEORY:
Introduction:
Understanding and addressing customer problems is a critical aspect of business success. This document
outlines a systematic approach for identifying customer problems and crafting tailored solutions.
1. Customer Research:
Customer research is the foundation of identifying problems. Start with surveys and interviews to
directly engage with your target audience.
Analyzing customer data, feedback, and behavior patterns can also provide valuable insights into their
pain points. Additionally, studying your competitors can reveal common industry issues. Conduct
market research to understand market trends and customer preferences.
1. Problem Definition:
Once you have gathered data, prioritize the problems based on their impact on customers and your
business. Create clear and concise problem statements to articulate the challenges your customers face.
These statements serve as the foundation for developing solutions that directly address these issues.
Ensure that problem definitions are aligned with your business goals.
1. Solution Ideation:
 Brainstorming is a crucial step in generating innovative solutions. Collaborate with a diverse team,
including individuals from various departments and backgrounds. They can provide fresh perspectives
and creative ideas. Techniques such as mind mapping, ideation sessions, or design thinking workshops
can help in generating a wide range of potential solutions.
1. Prototype and Testing:
 To develop effective solutions, create prototypes or minimum viable products (MVPs) that represent your
ideas. Testing these prototypes with actual users is essential to gather feedback and validate the proposed
solutions. Iteration based on user feedback is key to refining and improving your solutions to ensure they
effectively address the identified problems.
1. Implementation:
 Once you have refined and validated your solutions, move forward with development and
implementation. Collaborate with your team to ensure a smooth transition. During the implementation
phase, it's crucial to monitor the performance and user satisfaction of your solutions. Be prepared to make
adjustments and improvements as needed.
1. Customer Feedback Loop:
 Establishing channels for ongoing customer feedback is vital. This can include feedback forms, surveys,
customer support interactions, and social media. Create an iterative feedback loop where customer
insights drive continuous improvements. Responding to feedback promptly and making necessary
changes helps maintain strong customer relationships.

 Additional Methods for Identifying and Solving Customer Problems:

 Social Listening: Monitor social media channels and online forums to gain real-time
insights into customer sentiments, concerns, and pain points.

 Customer Journey Mapping: Visualize the customer journey to identify touchpoints
where problems may arise and opportunities for improvement.

 User Testing and User Experience (UX) Research: Observe how users interact with your
products to uncover usability and design issues.

 A/B Testing: Experiment with different solutions to identify which ones work best
through data-driven testing.

 Customer Support and Service Data: Analyze customer support interactions and
service data to identify recurring issues and areas for improvement.

 Innovation Workshops: Organize workshops or brainstorming sessions with cross-
functional teams to explore creative solutions.



EXP
.NO:11
Conduct end-to-end user research - User
research, creating personas, Ideation process, Flow diagrams, Flow Mapping
DATE:
AIM:
To Conduct end-to-end user research - User research, creating personas, Ideation process, Flow diagrams,
Flow Mapping
PROCEDURE:
STEP 1: Goal: Gather comprehensive insights about end users and ideate based on those insights.
Emphasize user centric design approach.
STEP 2: Methods: Use surveys, interviews, analytics to understand user needs and preferences.
Focus on gathering data about user behaviors, pain points, and goals.
 STEP 3: Purpose: Create fictional representations of different user types for
reference. Include demographics, behaviors, goals, and pain points to make personas
relatable.
 STEP 4: Importance: Ideation is key to designing usercentric solutions.
 Start with user stories and scenarios to define specific user tasks.


 STEP 5: Format: "As a [type of user], I want to [perform an action] so that [achieve a
goal]." Define specific user tasks within the project.


 STEP 6: Provide detailed contexts for user stories to help visualize the user's
journey. Describe the context, actions, and expected outcomes.

 STEP 7: Visualize user flows using flowcharting tools or software.
 Map out the sequence of steps a user takes to accomplish tasks.


 STEP 8: Create a visual map illustrating the entire user journey.
Include decision points, interactions, and touchpoints with the
project.

 STEP 9: Compile all research data, personas, user stories,
scenarios, flow diagrams, and flow mapping. Provide explanations
and justifications based on user insights.
 STEP 10:Share documentation for team and stakeholder review.
 Gather feedback on user research findings and ideation process.

EXP
.NO:12
Sketch, design with popular tool and build a prototype and perform usability testing and
identify improvements
DATE:
AIM:
To Sketch, design with popular tool and build a prototype and perform usability testing and identify
improvements
PROCEDURE:
STEP 1: Goal: Progress from initial sketches to a refined prototype through a structured design
process. Emphasize the importance of 
user centered design.
STEP 2: Initial phase: Start with rough sketches on paper to visualize layout and navigation.
Focus on basic elements before transitioning to digital design.
STEP 3: Translate sketches to digital designs using a design tool like Adobe XD or Figma.
Incorporate specific design elements, color schemes, and typography for a polished look.
 STEP 4: Create an interactive prototype with the chosen design tool to simulate
user interactions. Ensure smooth transitions and functionality for an accurate
representation.

 STEP 5: Prepare a usability testing plan with tasks for participants (or
selftesting).Record observations and gather feedback on usability and user experience.
Focus on identifying pain points and areas for improvement.
 STEP 6: Analyze usability testing results to pinpoint areas for enhancement.
Prioritize changes based on impact on user experience and project goals. Aim to
address usability issues and refine the overall experience.

 STEP 7: Implement necessary adjustments to the prototype based on
identified improvements. Ensure that changes positively impact usability and user
satisfaction.

 STEP 8: Record the entire process, including sketches, digital designs,
prototype, usability testing plan, and results. Provide detailed explanations and
justifications for design choices and improvements. Create a comprehensive
resource for future reference and collaboration.

 STEP 9: Conduct a final round of usability testing to validate the
effectiveness of the improvements. Ensure that the refined prototype meets user
expectations and project goals.
OUTPUT:
CONCLUSION:
 Hence we have Sketched, designed with figma and built a prototype and performed
usability testing and identified improvements

More Related Content

What's hot

Time, Schedules, and Resources in Artificial Intelligence.pptx
Time, Schedules, and Resources in Artificial Intelligence.pptxTime, Schedules, and Resources in Artificial Intelligence.pptx
Time, Schedules, and Resources in Artificial Intelligence.pptxkitsenthilkumarcse
 
Basis path testing
Basis path testingBasis path testing
Basis path testingHoa Le
 
Operating systems chapter 5 silberschatz
Operating systems chapter 5 silberschatzOperating systems chapter 5 silberschatz
Operating systems chapter 5 silberschatzGiulianoRanauro
 
Design and analysis of Algorithm By Dr. B. J. Mohite
Design and analysis of Algorithm By Dr. B. J. MohiteDesign and analysis of Algorithm By Dr. B. J. Mohite
Design and analysis of Algorithm By Dr. B. J. MohiteZeal Education Society, Pune
 
First Order Logic resolution
First Order Logic resolutionFirst Order Logic resolution
First Order Logic resolutionAmar Jukuntla
 
Operating System 3
Operating System 3Operating System 3
Operating System 3tech2click
 
What is knowledge representation and reasoning ?
What is knowledge representation and reasoning ?What is knowledge representation and reasoning ?
What is knowledge representation and reasoning ?Anant Soft Computing
 

What's hot (11)

Time, Schedules, and Resources in Artificial Intelligence.pptx
Time, Schedules, and Resources in Artificial Intelligence.pptxTime, Schedules, and Resources in Artificial Intelligence.pptx
Time, Schedules, and Resources in Artificial Intelligence.pptx
 
Basis path testing
Basis path testingBasis path testing
Basis path testing
 
Operating systems chapter 5 silberschatz
Operating systems chapter 5 silberschatzOperating systems chapter 5 silberschatz
Operating systems chapter 5 silberschatz
 
Bankers algorithm
Bankers algorithmBankers algorithm
Bankers algorithm
 
Design and analysis of Algorithm By Dr. B. J. Mohite
Design and analysis of Algorithm By Dr. B. J. MohiteDesign and analysis of Algorithm By Dr. B. J. Mohite
Design and analysis of Algorithm By Dr. B. J. Mohite
 
First Order Logic resolution
First Order Logic resolutionFirst Order Logic resolution
First Order Logic resolution
 
Daa notes 1
Daa notes 1Daa notes 1
Daa notes 1
 
Intelligent agents (bsc csit) lec 2
Intelligent agents (bsc csit) lec 2Intelligent agents (bsc csit) lec 2
Intelligent agents (bsc csit) lec 2
 
Operating System 3
Operating System 3Operating System 3
Operating System 3
 
What is knowledge representation and reasoning ?
What is knowledge representation and reasoning ?What is knowledge representation and reasoning ?
What is knowledge representation and reasoning ?
 
Semaphores
SemaphoresSemaphores
Semaphores
 

Similar to EXPLORING VARIOUS UI INTERACTION PATTERNS

1.Figma Community Figma Community offers
1.Figma Community Figma Community offers1.Figma Community Figma Community offers
1.Figma Community Figma Community offersROHISIVAM
 
Figma Community Figma Community offers r
Figma Community Figma Community offers rFigma Community Figma Community offers r
Figma Community Figma Community offers rROHISIVAM
 
InVision Freehand InVision Freehan is an online d
InVision Freehand InVision Freehan is an online dInVision Freehand InVision Freehan is an online d
InVision Freehand InVision Freehan is an online dROHISIVAM
 
GitHub GitHub, known for version control
GitHub GitHub, known for version controlGitHub GitHub, known for version control
GitHub GitHub, known for version controlROHISIVAM
 
UI vs UX Design-Divergent and Convergent
UI vs UX Design-Divergent and ConvergentUI vs UX Design-Divergent and Convergent
UI vs UX Design-Divergent and ConvergentROHISIVAM
 
Divergent and Convergent Thinking – Brain
Divergent and Convergent Thinking – BrainDivergent and Convergent Thinking – Brain
Divergent and Convergent Thinking – BrainROHISIVAM
 
Interface Design
Interface DesignInterface Design
Interface Designgavhays
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenAndiNurkholis1
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resumejyothsna joy
 
The Web Development Process
The Web Development ProcessThe Web Development Process
The Web Development ProcessMatt Bryant
 
Kv work samples
Kv work samplesKv work samples
Kv work sampleskay_sjc
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAAiman Hud
 
Case Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVUCase Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVUMar High
 
1.Design Modelling for Web Apps.pdf software engineering
1.Design Modelling for Web Apps.pdf software engineering1.Design Modelling for Web Apps.pdf software engineering
1.Design Modelling for Web Apps.pdf software engineeringSukhmanSingh91
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba productsFlavio Fabiani
 
Microsoft Nokia developer programmes and opportunity
Microsoft Nokia developer programmes and opportunityMicrosoft Nokia developer programmes and opportunity
Microsoft Nokia developer programmes and opportunityLee Stott
 
Multimedia Authoring Tools.ppt
Multimedia Authoring Tools.pptMultimedia Authoring Tools.ppt
Multimedia Authoring Tools.pptKalai Selvi
 
5 Best Prototyping Tools for Mobile Apps in 2023
5 Best Prototyping Tools for Mobile Apps in 20235 Best Prototyping Tools for Mobile Apps in 2023
5 Best Prototyping Tools for Mobile Apps in 2023Baek Yongsun
 

Similar to EXPLORING VARIOUS UI INTERACTION PATTERNS (20)

1.Figma Community Figma Community offers
1.Figma Community Figma Community offers1.Figma Community Figma Community offers
1.Figma Community Figma Community offers
 
Figma Community Figma Community offers r
Figma Community Figma Community offers rFigma Community Figma Community offers r
Figma Community Figma Community offers r
 
InVision Freehand InVision Freehan is an online d
InVision Freehand InVision Freehan is an online dInVision Freehand InVision Freehan is an online d
InVision Freehand InVision Freehan is an online d
 
GitHub GitHub, known for version control
GitHub GitHub, known for version controlGitHub GitHub, known for version control
GitHub GitHub, known for version control
 
UI vs UX Design-Divergent and Convergent
UI vs UX Design-Divergent and ConvergentUI vs UX Design-Divergent and Convergent
UI vs UX Design-Divergent and Convergent
 
Divergent and Convergent Thinking – Brain
Divergent and Convergent Thinking – BrainDivergent and Convergent Thinking – Brain
Divergent and Convergent Thinking – Brain
 
Authoring metaphors
Authoring metaphorsAuthoring metaphors
Authoring metaphors
 
Interface Design
Interface DesignInterface Design
Interface Design
 
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash ScreenMobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
Mobile Programming - 9 Profile UI, Navigation Basic and Splash Screen
 
Jyo_UI-UX Designer Resume
Jyo_UI-UX Designer ResumeJyo_UI-UX Designer Resume
Jyo_UI-UX Designer Resume
 
The Web Development Process
The Web Development ProcessThe Web Development Process
The Web Development Process
 
Kv work samples
Kv work samplesKv work samples
Kv work samples
 
hema ppt (2).pptx
hema ppt (2).pptxhema ppt (2).pptx
hema ppt (2).pptx
 
POLITEKNIK MALAYSIA
POLITEKNIK MALAYSIAPOLITEKNIK MALAYSIA
POLITEKNIK MALAYSIA
 
Case Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVUCase Study: Starting a Design System with MOVU
Case Study: Starting a Design System with MOVU
 
1.Design Modelling for Web Apps.pdf software engineering
1.Design Modelling for Web Apps.pdf software engineering1.Design Modelling for Web Apps.pdf software engineering
1.Design Modelling for Web Apps.pdf software engineering
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba products
 
Microsoft Nokia developer programmes and opportunity
Microsoft Nokia developer programmes and opportunityMicrosoft Nokia developer programmes and opportunity
Microsoft Nokia developer programmes and opportunity
 
Multimedia Authoring Tools.ppt
Multimedia Authoring Tools.pptMultimedia Authoring Tools.ppt
Multimedia Authoring Tools.ppt
 
5 Best Prototyping Tools for Mobile Apps in 2023
5 Best Prototyping Tools for Mobile Apps in 20235 Best Prototyping Tools for Mobile Apps in 2023
5 Best Prototyping Tools for Mobile Apps in 2023
 

Recently uploaded

CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosDuyDo100
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headersekinlvnt
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxDoraemon495609
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Cloud99 Cloud
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign designAkankshaD3
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidiLivengood
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfjeffreycarroll14
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...Amil baba
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...JIT KUMAR GUPTA
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityTracy Lipscomb
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationajroy0196
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...Amil baba
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...Amil baba
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理cyebo
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxe-Definers Technology
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证ugzga
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkWave PLM
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...Amil baba
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein
 

Recently uploaded (20)

CADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product PhotosCADD 141 - Puzzle Cube Project - Product Photos
CADD 141 - Puzzle Cube Project - Product Photos
 
Week of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_HeadersWeek of Action 2022_EIT Climate-KIC_Headers
Week of Action 2022_EIT Climate-KIC_Headers
 
The Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptxThe Impact of Artificial Intelligence on Modern Healthcare.pptx
The Impact of Artificial Intelligence on Modern Healthcare.pptx
 
Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678Webhost NVME Cloud VPS Hosting1234455678
Webhost NVME Cloud VPS Hosting1234455678
 
Levi's Advertisement and camapign design
Levi's Advertisement and camapign designLevi's Advertisement and camapign design
Levi's Advertisement and camapign design
 
Heidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD PortfolioHeidi Livengood's Professional CADD Portfolio
Heidi Livengood's Professional CADD Portfolio
 
Recycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdfRecycled Modular Low Cost Construction .pdf
Recycled Modular Low Cost Construction .pdf
 
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
NO1 Best Best Black Magic Specialist Near Me Spiritual Healer Powerful Love S...
 
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Columbia College毕业证书)纽约市哥伦比亚大学毕业证成绩单本科硕士学位证留信学历认证
 
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...Knowing, Understanding and Planning Cities- Role and Relevance  Physical Plan...
Knowing, Understanding and Planning Cities- Role and Relevance Physical Plan...
 
Onyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets DurabilityOnyx Tiles Where Elegance Meets Durability
Onyx Tiles Where Elegance Meets Durability
 
Presentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentationPresentation on 3D Printing.pptx presentation
Presentation on 3D Printing.pptx presentation
 
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
NO1 Best Best Amil In Rawalpindi Bangali Baba In Rawalpindi jadu tona karne w...
 
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
NO1 Best Vashikaran Specialist in Uk Black Magic Specialist in Uk Black Magic...
 
一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理一比一原版格林威治大学毕业证成绩单如何办理
一比一原版格林威治大学毕业证成绩单如何办理
 
Top 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptxTop 10 Website Designing Hacks for Beginners.pptx.pptx
Top 10 Website Designing Hacks for Beginners.pptx.pptx
 
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
如何办理(Bath毕业证书)巴斯大学毕业证成绩单本科硕士学位证留信学历认证
 
The Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to CatwalkThe Journey of Fashion Designer Sketches - From Concept to Catwalk
The Journey of Fashion Designer Sketches - From Concept to Catwalk
 
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
NO1 Best Kala Jadu Expert Specialist In Qatar Kala Jadu Expert Specialist In ...
 
Eric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-INEric Parein CV. Parein in English is best pronounced as PARE-IN
Eric Parein CV. Parein in English is best pronounced as PARE-IN
 

EXPLORING VARIOUS UI INTERACTION PATTERNS

  • 1. OXFORD ENGINEERING COLLEGE DEPARTMENT OF CSE & IT CCS370 - UI AND UX DESIGN LAB MANUAL YEAR - III SEM - VI PREPARED BY ROHINI P AP/CSE
  • 2. CCS370 UI AND UX DESIGN LAB MANUAL S.NO. EXPERIMENTS PAGE NO DATE SIGNATURE 1. Designing a Responsive layout for an societal application. Æ. Exploring various UI Interaction Patterns 3. Developing an interface with proper UI Style Guides 4. Developing Wireflow diagram for application using open source software 5. Exploring various open source collaborative interface Platform 6. Hands on Design Thinking Process for a new product 7. Brainstorming feature for proposed product 8. Defining the Look and Feel of the new Project 9. Create a Sample Pattern Library for that product (Mood board, Fonts, Colors based on UI principles)
  • 3. 10. Identify a customer problem to solve 11. Conduct end-to-end user research - User research, creating personas, Ideation process (User stories, Scenarios), Flow diagrams, Flow 12. Sketch, design with popular tool and build a prototype and perform usability testing and identify improvements
  • 4. EXP .NO:1 DESIGNING A RESPONSIVE LAYOUT FOR AN SOCIETAL APPLICATION DATE: AIM: To design a responsive layout for an societal application Procedure: Step 1: Design Guidelines in Figma Create a design system file with color styles, text styles, and components. Step 2: Breakpoint Artboards in Figma Use the "Artboard" tool to create artboards for each breakpoint. Step 3: Wireframing in Figma Use the "Pen" or "Shape" tools to draw wireframes within each artboard. Step 4: Content and Elements in Figma Add text, images, buttons, and forms within the wireframes. Step 5: Responsive Design in Figma Set constraints for each element to determine how they adapt to different screen sizes. Use "Auto Layout" to maintain flexibility. Step 6: Components and Styles in Figma Create components by selecting elements and converting them into components. Apply shared styles for text, colors, and typography. Step 7: Interactions and Animations in Figma Use the "Prototype" tab to define interactions and animations. Link frames to create a seamless user flow.
  • 5.  Step 8: Feedback and Collaboration in Figma Share your Figma project with team members, allowing them to comment and provide feedback directly in the tool.   Step 9: Accessibility in Figma Use the accessibility checker to identify and fix accessibility issues in your design.   Step 10: Finalize and Export in Figma Apply final design changes as needed and then use the "Export" feature to export assets in suitable formats for development. 
  • 6.
  • 7. EXP .NO:2 EXPLORING VARIOUS UI INTERACTION PATTERNS DATE: AIM: To explore various UI interaction patterns Theory: Understanding different UI interaction patterns is essential for creating engaging and user-friendly digital interfaces. This document provides a brief overview of ten UI interaction patterns commonly used in design. List of Explained UI Interaction Patterns: 1. Hover Effects 2. Sliders and Carousels 3. Pop-up Modals 4. Expandable Menus 5. Drag-and-Drop Interactions 6. Parallax Scrolling 7. Toggle Switches 8. Progress Bars 9. Swipe Gestures 10. Tooltips Common UI Interaction Patterns: 1. Hover Effects Hover effects are dynamic changes that occur when a user hovers their mouse pointer over an element. Common examples
  • 8. 1. Sliders and Carousels  Sliders and carousels allow multiple pieces of content to occupy a single screen space, which users can navigate through by swiping or clicking arrows. They are useful for showcasing multiple images or content pieces without cluttering the interface. 1. Pop-up Modals  Pop-up modals are overlay windows that display additional content or actions. They often appear when triggered by a button or link, providing focused user interactions without leaving the current context.  1. Expandable Menus  Expandable menus, such as accordions or collapsible panels, reveal hidden content or options when clicked. They are effective for organizing and presenting information in a compact format.  1. Drag-and-Drop Interactions  Drag-and-drop interactions enable users to move elements within a digital interface. These interactions are often used for reordering items, organizing content, or customizing layouts.  1. Parallax Scrolling  Parallax scrolling creates a 3D effect by moving background elements at different speeds as users scroll. It's often used for storytelling or adding depth to web pages.  1. Toggle Switches  Toggle switches allow users to turn features on or off with a simple toggle. They are common in settings, preferences, and filtering options.  1. Progress Bars  Progress bars display the completion status of a task, providing visual feedback to users. They are commonly used in forms, file uploads, and loading screens.  1. Swipe Gestures  Swipe gestures involve horizontal or vertical finger movements on touch screens. They are used for navigation, image galleries, and content browsing.  1. Tooltips  Tooltips provide supplementary information when users hover or tap on an element. They are useful for explaining functions, features, or abbreviations in a concise manner.
  • 9. EXP .NO:3 Developing an interface with proper UI Style Guides DATE: AIM: To develop an interface with proper UI style guides PROCEDURE: Step1: Open Figma Launch the Figma application on your computer. Step2: Create a New Project In Figma, click on "New" and choose "New Project" to start a new design project. Step3: Define Project Scope Begin by defining the scope and objectives of your design project. Understand the purpose, target audience, and goals. Step4: Gather Design Assets Collect any existing design assets such as logos, color schemes, typography guidelines, and brand-specific elements. Step 5:Set Up Style Guide Components In Figma, create components for various UI elements, including buttons, typography, icons, and form elements.
  • 10.  Step9: Grid Systems: Establish grid systems and layout guides for different screen sizes to ensure consistent spacing and alignment.   Step10: Document UI Elements and Patterns: Create a document in Figma that outlines UI elements and design patterns, such as navigation menus, forms, and buttons. Create variants for different states (normal, hover, active).   Step11: Interactive Prototyping: Utilize Figma's interactive features to prototype and test the interface with real interactions. Link frames to create a seamless user flow.  Step12: Collaboration and Feedback: Share your Figma project with team members, allowing them to comment and provide feedback directly within the tool.  Step13: Accessibility Check: Use Figma's accessibility checker to identify and fix accessibility issues in your design.   Step 14: Finalize and Export: Apply any final design changes as needed and then use the "Export" feature in Figma to export assets in suitable formats for development.   Step15: Developer Handoff: Utilize Figma's developer handoff feature to generate CSS, HTML, or other code snippets for implementation. Collaborate with developers to ensure accurate implementation.
  • 12. EXP .NO:4 Developing Wireflow diagram for application using open source software DATE: AIM: To develop a Wireflow diagram for application using Figma PROCEDURE: Step 1: Open Figma: Launch the Figma application on your computer. Step 2: Create a New Figma File: In Figma, click on "New" and choose "New File" to start a new project specifically for your wireflow diagram. Step 3: Define the Application's User Flow: Begin by understanding the user flow of your application. Identify key screens and interactions that users will experience. Step 4: Create Artboards for Screens: In your Figma file, create individual artboards for each screen of the application. Artboards represent the visual interface of your app. Step 5: Design Screen Elements: Within each artboard, design and arrange the user interface elements, including buttons, text, images, and other components. Maintain a consistent design throughout.
  • 13.  Step 6: Linking Screens: Use Figma's interactive features to link screens together. Define interactions, such as tapping a button to navigate to another screen.   Step 7: Create Arrows for Navigation: On your artboards, use Figma's line tool to draw arrows or lines that represent the flow of navigation between screens.   Step 8: Add Descriptive Text: Include text labels to describe the purpose of each screen and interaction. This helps in clarifying the wireflow for viewers.   Step 9: Organize the Flow: Arrange the artboards and arrows in a logical sequence to represent the intended user flow through the application.   Step 10: Test Interactions: Use Figma's prototype mode to test the interactions and ensure that the wireflow accurately represents the user journey.   Step 11: Collaboration and Feedback: Share your wireflow diagram with team members and stakeholders. Allow them to provide feedback and comments directly within Figma.  Step 12: Refine and Update: Based on feedback, refine and update the wireflow diagram as needed. Ensure that it accurately reflects the application's user flow.  Step 13: Export or Share: Once the wireflow diagram is finalized, you can export it in various formats or share it with relevant team members for implementation. 
  • 15. EXP .NO:5 Exploring various open source collaborative interface Platform DATE: AIM: To explore various open source collaborative interface Platform Theory: Exploring various open-source collaborative interface platforms is essential for designing user- friendly and efficient digital interfaces. This document offers an overview of different open-source platforms to facilitate UI/UX design collaboration. List of Explored Open Source Collaborative Interface Platforms: 1. Figma Community 2. GitHub 3. GitLab 4. InVision Freehand 5. Adobe XD (Starter Plan) 6. Miro (Free Plan) 7. Sketch for Teams (Beta) 8. Gravit Designer 9. Vectr 10.Penpot
  • 16. 1. Figma Community Figma Community offers real-time collaboration, version history tracking, commenting, and prototyping capabilities. It provides access to a vast library of community-created design resources.  1. GitHub GitHub, known for version control with Git, offers collaboration via repositories, issue tracking, project management, and extensive integration options. It is a platform used by developers and designers alike.  1. GitLab GitLab is an end-to-end DevOps platform that features repository management, continuous integration and deployment (CI/CD), and collaboration tools. It serves as a comprehensive tool for software development and design.  
  • 17. 1. InVision Freehand InVision Freehand is an online whiteboard for collaboration, allowing real-time sketching, ideation, and integration with InVision's design tools. It supports commenting and feedback, focusing on design collaboration and prototyping.  1. Adobe XD (Starter Plan) Adobe XD is a vector-based design tool with shared cloud documents, co-editing with collaborators, prototyping, and animation features. It integrates seamlessly with other Adobe products.  1. Miro (Free Plan) Miro is an online collaborative whiteboard for visual brainstorming and ideation. It supports real-time collaboration, integrations with design and project management tools, and is ideal for brainstorming and visual collaboration.  1. Sketch for Teams (Beta) Sketch for Teams is a vector-based design tool with shared cloud documents, collaboration features with team members, and support for third-party plugins and integrations. It is designed for design collaboration and system design.  1. Gravit Designer Gravit Designer is a cross-platform vector design tool with real- time collaboration, multi- user editing, and sharing capabilities. It offers cloud storage for design files and is suitable for vector design collaboration.  1. Vectr Vectr is a web-based vector graphics editor with real-time collaboration, shareable design projects, simplicity, and ease of use. It is a beginner-friendly option for design collaboration.  1. Penpot Penpot is an open-source design and prototyping platform featuring real-time collaboration, version control, a vector-based design tool, and a user-centric interface. It is ideal for design system collaboration. 
  • 18. EXP .NO:6 Hands on Design Thinking Process for a new product DATE: AIM: To explore various Hands On Design Thinking process stages for a new product Theory: The hands-on design thinking process is a vital approach for creating user- centered websites and web applications. This document provides an overview of the key stages and methods involved in designing a new website or web app. 1. Empathize In this stage, empathize with the potential users of the website or web app. Conduct user interviews, surveys, and observations to gain a deep understanding of their needs, preferences, and pain points. Create user personas to represent different user segments. 1. Define Based on the insights gathered during the empathy stage, define the core problem you aim to solve with your website or web app. Craft a clear problem statement that serves as a guiding beacon throughout the design process. 1. Ideate Foster creativity and brainstorm potential solutions to the defined problem. Gather your design team and employ techniques like brainstorming sessions, mind mapping, and sketching to generate a wide range of design concepts and ideas. 1. Prototype Create tangible representations of your design ideas through prototyping. Develop low-fidelity wireframes, interactive mockups, or clickable prototypes using design tools such as Figma or Adobe XD. Focus on quick, iterative design iterations. 1. Test Gather valuable user feedback by conducting usability testing with the prototypes. Observe how users interact with your website or web app concept and collect insights into their preferences and behaviors. Iterate on the design based on user reactions and identified needs.
  • 19. EXP .NO:7 Brainstorming feature for proposed product DATE: AIM: To understand what brainstorming is and to come up with features for the proposed product that we are going to be designing. THEORY: Introduction: The success of a website depends on the quality and relevance of its features. Brainstorming is a crucial step in identifying the features that will make your website innovative and user-friendly. This document outlines the process of brainstorming features for your website design. 1. Define Project Goals and Audience: Clearly define the goals and objectives of your website. Identify your target audience and their needs, problems, and preferences. 1. Assemble a Diverse Team: Gather a diverse team that includes stakeholders from different departments and backgrounds. This diversity can bring fresh perspectives and ideas to the brainstorming process. 1. User Personas: Create user personas to represent your target audience. Understand your users' needs and pain points to brainstorm features that cater to their specific requirements. 1. Brainstorming Features: Hold brainstorming sessions with your team. Encourage open and creative thinking. Focus on generating a wide range of feature ideas. Here are some sample features that could be added to your website design:  User Registration and Profiles:Allow users to create accounts and manage their profiles.
  • 20.  Search Functionality: Implement a robust search feature for easy content discovery.   Responsive Design: Ensure that the website is accessible and functional on various devices.   Navigation Menus: Create intuitive navigation menus for easy user movement.   Content Management System (CMS): Enable content creation, editing, and publishing.   Feedback and Contact Forms: Provide options for users to share feedback and contact the website owner.   Social Media Integration: Incorporate social sharing and linking for wider exposure.   E-commerce Features: If applicable, add features like product listings, shopping carts, and secure payment processing.   Blog or News Section: Share relevant and engaging content to keep users informed.   User Reviews and Ratings: Allow users to rate and review products or services.   Notification System: Implement alerts or notifications for user engagement.   Analytics and Reporting: Include tools for tracking website performance and user behavior.   Chat or Support Feature: Offer real-time support or chat options for user inquiries.
  • 21. 1. Prioritize Features:  After generating a list of potential features, prioritize them based on their alignment with project goals, potential impact on user experience, and feasibility within your project's scope and resources. 1. FeasibilityAssessment:  Assess the technical, financial, and resource feasibility of each feature. 1. Prototyping and Testing: Create low-fidelity prototypes or mockups with selected features. Conduct user testing to gather feedback and refine the feature list.  1. Iteration:  Based on user feedback, iterate on the website's feature set. Adjust, enhance, or eliminate features as needed to improve the user experience.
  • 22. EXP .NO:8 Defining the Look and Feel of the new Project DATE: AIM: To define the look and feel of a project PROCEEDURE: STEP 1 : Emphasize the importance of a user friendly UIUX design. Set clear expectations for the lab's outcome. Highlight the impact of good design on user engagement and satisfaction. STEP 2: Clearly define the project's objectives and goals. Specify the target audience and their characteristics. Identify any specific requirements or constraints (e.g., branding guidelines, platform limitations). .
  • 23.  STEP 3: Study competitors and industry leaders for design inspiration. Conduct user surveys or interviews to understand preferences and pain points. Analyze user behavior on similar platforms or products to inform design decisions.   STEP4 : Include a variety of visual elements (images, icons, patterns) to explore different design directions. Ensure that the mood board reflects the project's intended tone, style, and emotion. Experiment with different color palettes and typography options to find a cohesive look.   STEP 5:  Focus on creating clear, intuitive layouts that prioritize functionality. Avoid incorporating specific design elements; concentrate on structure and navigation. Seek input from team members to refine wireframes for optimal usability. 
  • 24.  STEP 6: Apply feedback from stakeholders to refine and enhance the highfidelity mockups. Pay attention to details such as spacing, alignment, and consistency. Ensure that the design aligns with the project's overall vision and goals.  STEP 7: Create interactive prototypes that simulate real user interactions. Test and refine the prototypes to ensure seamless navigation and functionality Use animations and transitions to provide a realistic user experience.   STEP 8: Select a diverse group of users to gather a range of perspectives. Ask specific questions about usability, navigation, and overall experience. Use user feedback to identify areas for improvement in the UIUX design.   STEP 9: Include a clear rationale for design choices, explaining how they support the project's goals. Create a comprehensive style guide with specific details on colors, typography, and UI elements. Provide organized access to wireframes, mockups, and prototypes for future reference.
  • 25.  STEP 10: Use visuals and clear explanations to effectively communicate design choices. Highlight how the design aligns with the project's objectives and target audience. Invite questions and feedback from stakeholders for further refinement.   STEP 11: Prioritize feedback based on its impact on user experience and project goals. Collaborate with team members to implement necessary revisions efficiently. Conduct additional testing if major design changes are made to ensure optimal usability.
  • 26. EXP .NO:9 Create a Sample Pattern Library for that product DATE: AIM: To create a sample pattern library for the product that we are going to build PROCEDURE: STEP 1: Establish a cohesive design foundation through a pattern library. Emphasize the importance of consistent design elements. STEP 2: Purpose: Set visual direction with images, color schemes, typography, and UI elements. Use digital tools for compilation. Ensure alignment with project goals and target audience. STEP 3: Importance: Fonts impact readability and visual consistency. Research and choose fonts that match the project's tone and style. Consider legibility across different screens and devices. STEP 4: Significance: Colors convey emotions and establish visual hierarchy. Generate primary and secondary colors for accessibility and contrast. Ensure a balanced and harmonious palette. STEP 5: Provide usage guidelines for headings, body text, and special cases (e.g., buttons, labels). Specify font sizes, weights, and styles for different UI elements. Maintain consistency in font choices.
  • 27.  STEP 6: Define styles for common UI elements (e.g., buttons, forms, icons). Ensure consistency in appearance and behavior across the project. Specify states like hover, active, and disabled.  STEP 7:Stress the importance of designing for accessibility for inclusivity.  Provide guidelines for text legibility and color contrast. Ensure compliance with accessibility standards (e.g., WCAG).  OUTPUT:
  • 28. EXP .NO:10 Identify a customer problem to solve DATE: AIM: To identify a customer problem to solve and come up with solutions for the said problem THEORY: Introduction: Understanding and addressing customer problems is a critical aspect of business success. This document outlines a systematic approach for identifying customer problems and crafting tailored solutions. 1. Customer Research: Customer research is the foundation of identifying problems. Start with surveys and interviews to directly engage with your target audience. Analyzing customer data, feedback, and behavior patterns can also provide valuable insights into their pain points. Additionally, studying your competitors can reveal common industry issues. Conduct market research to understand market trends and customer preferences. 1. Problem Definition: Once you have gathered data, prioritize the problems based on their impact on customers and your business. Create clear and concise problem statements to articulate the challenges your customers face. These statements serve as the foundation for developing solutions that directly address these issues. Ensure that problem definitions are aligned with your business goals.
  • 29. 1. Solution Ideation:  Brainstorming is a crucial step in generating innovative solutions. Collaborate with a diverse team, including individuals from various departments and backgrounds. They can provide fresh perspectives and creative ideas. Techniques such as mind mapping, ideation sessions, or design thinking workshops can help in generating a wide range of potential solutions. 1. Prototype and Testing:  To develop effective solutions, create prototypes or minimum viable products (MVPs) that represent your ideas. Testing these prototypes with actual users is essential to gather feedback and validate the proposed solutions. Iteration based on user feedback is key to refining and improving your solutions to ensure they effectively address the identified problems. 1. Implementation:  Once you have refined and validated your solutions, move forward with development and implementation. Collaborate with your team to ensure a smooth transition. During the implementation phase, it's crucial to monitor the performance and user satisfaction of your solutions. Be prepared to make adjustments and improvements as needed. 1. Customer Feedback Loop:  Establishing channels for ongoing customer feedback is vital. This can include feedback forms, surveys, customer support interactions, and social media. Create an iterative feedback loop where customer insights drive continuous improvements. Responding to feedback promptly and making necessary changes helps maintain strong customer relationships. 
  • 30.  Additional Methods for Identifying and Solving Customer Problems:   Social Listening: Monitor social media channels and online forums to gain real-time insights into customer sentiments, concerns, and pain points.   Customer Journey Mapping: Visualize the customer journey to identify touchpoints where problems may arise and opportunities for improvement.   User Testing and User Experience (UX) Research: Observe how users interact with your products to uncover usability and design issues.   A/B Testing: Experiment with different solutions to identify which ones work best through data-driven testing.   Customer Support and Service Data: Analyze customer support interactions and service data to identify recurring issues and areas for improvement.   Innovation Workshops: Organize workshops or brainstorming sessions with cross- functional teams to explore creative solutions.   
  • 31. EXP .NO:11 Conduct end-to-end user research - User research, creating personas, Ideation process, Flow diagrams, Flow Mapping DATE: AIM: To Conduct end-to-end user research - User research, creating personas, Ideation process, Flow diagrams, Flow Mapping PROCEDURE: STEP 1: Goal: Gather comprehensive insights about end users and ideate based on those insights. Emphasize user centric design approach. STEP 2: Methods: Use surveys, interviews, analytics to understand user needs and preferences. Focus on gathering data about user behaviors, pain points, and goals.
  • 32.  STEP 3: Purpose: Create fictional representations of different user types for reference. Include demographics, behaviors, goals, and pain points to make personas relatable.  STEP 4: Importance: Ideation is key to designing usercentric solutions.  Start with user stories and scenarios to define specific user tasks.    STEP 5: Format: "As a [type of user], I want to [perform an action] so that [achieve a goal]." Define specific user tasks within the project.    STEP 6: Provide detailed contexts for user stories to help visualize the user's journey. Describe the context, actions, and expected outcomes. 
  • 33.  STEP 7: Visualize user flows using flowcharting tools or software.  Map out the sequence of steps a user takes to accomplish tasks.    STEP 8: Create a visual map illustrating the entire user journey. Include decision points, interactions, and touchpoints with the project.   STEP 9: Compile all research data, personas, user stories, scenarios, flow diagrams, and flow mapping. Provide explanations and justifications based on user insights.  STEP 10:Share documentation for team and stakeholder review.  Gather feedback on user research findings and ideation process. 
  • 34.
  • 35.
  • 36. EXP .NO:12 Sketch, design with popular tool and build a prototype and perform usability testing and identify improvements DATE: AIM: To Sketch, design with popular tool and build a prototype and perform usability testing and identify improvements PROCEDURE: STEP 1: Goal: Progress from initial sketches to a refined prototype through a structured design process. Emphasize the importance of user centered design. STEP 2: Initial phase: Start with rough sketches on paper to visualize layout and navigation. Focus on basic elements before transitioning to digital design. STEP 3: Translate sketches to digital designs using a design tool like Adobe XD or Figma. Incorporate specific design elements, color schemes, and typography for a polished look.
  • 37.  STEP 4: Create an interactive prototype with the chosen design tool to simulate user interactions. Ensure smooth transitions and functionality for an accurate representation.   STEP 5: Prepare a usability testing plan with tasks for participants (or selftesting).Record observations and gather feedback on usability and user experience. Focus on identifying pain points and areas for improvement.
  • 38.  STEP 6: Analyze usability testing results to pinpoint areas for enhancement. Prioritize changes based on impact on user experience and project goals. Aim to address usability issues and refine the overall experience.   STEP 7: Implement necessary adjustments to the prototype based on identified improvements. Ensure that changes positively impact usability and user satisfaction.   STEP 8: Record the entire process, including sketches, digital designs, prototype, usability testing plan, and results. Provide detailed explanations and justifications for design choices and improvements. Create a comprehensive resource for future reference and collaboration.   STEP 9: Conduct a final round of usability testing to validate the effectiveness of the improvements. Ensure that the refined prototype meets user expectations and project goals.
  • 40. CONCLUSION:  Hence we have Sketched, designed with figma and built a prototype and performed usability testing and identified improvements