CCS 370 - UI and UX Lab Manual - Final

Ex.NO.
1 Designing a Responsive Layout for a societal application
Aim:
To Design a Responsive Layout for a societal application by using HTML and CSS.
Algorithm:
 Create two files one for html and other for CSS
 Write basic html code by using Emet Abbreviation
 We have to create a link for accessing the CSS page which should be in header
tag
 Write down the necessary html code with respect to your need which should be
in body section
 The style that you want can be applied in your layout by using CSS which should
be in style.css
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise_1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<section class="parallax-1">
<div class="parallax-inner">
<h1>Scroll Down</h1>
</div>
</section>
<h2>Parallax Effect</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis minima fuga
debitis quasi eius aliquid
sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa,
sit illo, eum doloribus
doloremque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Excepturi
reprehenderit voluptatum
aperiam pariatur numquam praesentium recusandae, ipsa at iusto eveniet, distinctio
sunt dolore nemo veniam
maiores vitae deserunt cum ducimus. Lorem ipsum dolor sit amet consectetur
adipisicing elit. Veritatis
minima fuga debitis quasi eius aliquid
sapiente? Cumque blanditiis quibusdam, ex totam aliquam provident alias culpa, sit
illo, eum doloribus
maiores vitae deserunt cum ducimus.</p>
<h1>Parallax Effect</h1>
</div>
</section>
illo, eum doloribus
<h1>Scroll Up</h1>
</div>
</section>
illo, eum doloribus
</section>
</body>
</html>
CSS Code:
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;
700;800;900&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: #f2f2f2;
}
h1 {
font-size: 120px;
text-align: center;
color: rgba(255, 255, 255, .4);
}
.parallax-1 {
background: url('img1.jpg') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.parallax-2 {
}
.parallax-3 {
}
.parallax-inner {
padding: 10% 0;
}
h2 {
font-size: 32px;
color: #555;
text-align: center;
font-weight: 300;
letter-spacing: 2px;
margin: 20px 0 10px;
}
p{
font-size: 16px;
color: #555;
text-align: justify;
line-height: 30px;
margin: 0 50px 40px;
}
p:nth-of-type(2),
p:nth-of-type(3) {
margin: 40px 50px;
}
Output:
Result:
Thus, the program was successfully executed.

Ex.No.2 Exploring Various UI Interaction Patterns
Aim:
To Explore Various UI Interaction Patterns by using HTML and CSS.
Algorithm:
 Create two files, one for html and other for CSS
 Write basic html code by using Emet Abbreviation
 We have to create a link for accessing the CSS page which should be in header
tag
 Write down the necessary html code with respect to your need which should be
in body section
 The style you want can be applied in your layout by using CSS which should be
in style.css
Program for Glow Neon Button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exercise_2</title>
</head>
<body>
<a href="#">Button</a>
</body>
</html>
CSS Code:
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@400&display=swap');
*{
margin: 0;
padding: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
a{
position: relative;
display: inline-block;
font-size: 1.5em;
letter-spacing: .1em;
color: #0ef;
text-decoration: none;
text-transform: uppercase;
border: 2px solid #0ef;
padding: 10px 30px;
z-index: 1;
overflow: hidden;
transition: color 1s, box-shadow 1s;
}
a:hover {
transition-delay: 0s, 1s;
color: #fff;
box-shadow:
0 0 10px #0ef,
0 0 20px #0ef,
0 0 40px #0ef,
0 0 80px #0ef,
0 0 160px #0ef;
}
a::before {
content: '';
position: absolute;
top: 0;
left: -50px;
width: 0;
height: 100%;
background: #0ef;
transform: skewX(35deg);
z-index: -1;
transition: 1s;
}
a:hover:before {
width: 100%;
}
Output:
2 - Source Code for - Login Form Animation CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Exercise_2.2</title>
</head>
<body>
<div class="login-light"></div>
<div class="login-box">
<form action="#">
<input type="checkbox" class="input-check" id="input-check">
<label for="input-check" class="toggle">
<span class="text off">off</span>
<span class="text on">on</span>
</label>
<div class="light"></div>
<h2>Login</h2>
<div class="input-box">
<span class="icon">
<ion-icon name="mail"></ion-icon>
</span>
<input type="email" required>
<label>Email</label>
<div class="input-line"></div>
</div>
<div class="input-box">
<span class="icon">
<ion-icon name="lock-closed"></ion-icon>
</span>
<input type="password" required>
<label>Password</label>
<div class="input-line"></div>
</div>
<div class="remember-forgot">
<label><input type="checkbox"> Remember me</label>
<a href="#">Forgot Password?</a>
</div>
<button type="submit">Login</button>
<div class="register-link">
<p>Don't have an account? <a href="#">Register</a></p>
</div>
</form>
</div>
<script type="module"
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</body>
</html>
CSS Code:
@import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900
&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
min-height: 100vh;
background: #000;
overflow: hidden;
}
.login-box {
position: relative;
width: 400px;
height: 450px;
background: #191919;
border-radius: 20px;
display: flex;
}
h2 {
font-size: 2em;
color: #fff;
text-align: center;
transition: .5s ease;
}
.input-check:checked~h2 {
color: #00f7ff;
text-shadow:
0 0 15px #00f7ff,
0 0 30px #00f7ff;
}
.input-box {
position: relative;
width: 310px;
margin: 30px 0;
}
.input-box .input-line {
position: absolute;
bottom: -2px;
left: 0;
width: 100%;
height: 2.5px;
background: #fff;
}
.input-check:checked~.input-box .input-line {
background: #00f7ff;
box-shadow: 0 0 10px #00f7ff;
}
.input-box label {
position: absolute;
top: 50%;
left: 5px;
transform: translateY(-50%);
font-size: 1em;
color: #fff;
pointer-events: none;
}
.input-box input:focus~label,
.input-box input:valid~label {
top: -5px;
}
.input-check:checked~.input-box label {
color: #00f7ff;
text-shadow: 0 0 10px #00f7ff;
}
.input-box input {
width: 100%;
height: 50px;
background: transparent;
border: none;
outline: none;
font-size: 1em;
color: #fff;
padding: 0 35px 0 5px;
}
.input-check:checked~.input-box input {
color: #00f7ff;
}
.input-box .icon {
position: absolute;
right: 8px;
color: #fff;
font-size: 1.2em;
line-height: 57px;
}
.input-check:checked~.input-box .icon {
color: #00f7ff;
filter: drop-shadow(0 0 5px #00f7ff);
}
.remember-forgot {
color: #fff;
font-size: .9em;
margin: -15px 0 15px;
display: flex;
justify-content: space-between;
}
.input-check:checked~.remember-forgot {
color: #00f7ff;
}
.remember-forgot label input {

accent-color: #fff;
margin-right: 3px;
}
.input-check:checked~.remember-forgot label input {

accent-color: #00f7ff;
}
.remember-forgot a {
color: #fff;
transition: color .5s ease;
}
.remember-forgot a:hover {
text-decoration: underline;
}
.input-check:checked~.remember-forgot a {
color: #00f7ff;
}
button {
width: 100%;
height: 40px;
background: #fff;
border: none;
outline: none;
cursor: pointer;
font-size: 1em;
color: #191919;
font-weight: 500;
}
.input-check:checked~button {
box-shadow: 0 0 15px #00f7ff, 0 0 15px #00f7ff;
}
.register-link {
color: #fff;
font-size: .9em;
text-align: center;
margin: 25px 0 10px;
}
.input-check:checked~.register-link {
color: #00f7ff;
}
.register-link p a {
color: #fff;
font-weight: 600;
transition: color .5s ease;
}
.register-link p a:hover {
text-decoration: underline;
}
.input-check:checked~.register-link p a {
color: #00f7ff;
}
.login-light {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 500px;
height: 10px;
}
.light {
position: absolute;
top: -200%;
left: 0;
width: 100%;
height: 950px;
background: linear-gradient(to bottom, rgba(255, 255, 255, .3) -50%, rgba(255, 255, 255,
0) 90%);
clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.input-check:checked~.light {
top: -90%;
}
.toggle {
position: absolute;
top: 20px;
right: -70px;
width: 60px;
height: 120px;
background: #191919;
}
.toggle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 10px;
height: 80%;
background: #000;
}
.toggle::after {
content: '';
position: absolute;
top: 5px;
left: 50%;
width: 45px;
height: 45px;
background: #333;
border: 2px solid #191919;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}
.input-check:checked~.toggle::after {
top: 65px;
}
.input-check {
position: absolute;
right: -70px;
z-index: 1;
opacity: 0;
}
.toggle .text {
position: absolute;
top: 17px;
left: 50%;
color: #fff;
font-size: 1em;
z-index: 1;
text-transform: uppercase;
}
.toggle .text.off {
opacity: 1;
}
.input-check:checked~.toggle .text.off {
top: 76px;
opacity: 0;
}
.toggle .text.on {
opacity: 0;
}
.input-check:checked~.toggle .text.on {
top: 76px;
opacity: 1;
color: #00f7ff;
text-shadow:
0 0 15px #00f7ff,
0 0 30px #00f7ff,
0 0 45px #00f7ff,
0 0 60px #00f7ff;
}
Output 1: Toggle Button in Off Mode

Output 2: Toggle in ON Mode
Result:
Thus, the program was successfully executed.

Ex.NO.3 Developing an interface with proper UI Style Guides
Aim:
To develop an interface with proper UI Style Guide by using Figma.
Introduction about Figma:
UI vs UX:
UX relates to the user’s experience of the product or service whereas UI refers to the
visual components through which humans connect with a product therefore UX focuses
on visual interface elements like fonts, colors, menu bars, and much more whereas UI
focuses on user and their experience with the product.
Top UI UX Tools:
 Adobe XD
 Sketch
 Invision studio
 Figma
o Figma is one of the top UI design programs. It features a drag and drop
user interface. One of the most widely used design tools is Figma.
o The software can also be used to make mood boards and other outputs
like wireframes.
o It works on Browser, Mac OS and Windows.
 Framer X
 Flow Mapp
 Origami Studio
 Balsamiq
 Marvel
 Axure
What is Figma:
Figma is online tool for designing and editing users.
Used for a variety of graphic design tasks, such as wireframing websites, designing
mobile application user interfaces, generating design prototype, and making social
media posts.
[it has also really good collaboration so we can have multiple people working on the
same design file at the same time at its really fast]
Layer mode:
Layer grid & angle Mode:

Insert image at background & Desktop column:
Tile Grid:
Slice Tool for export particular area:
Shift + Alt = Customize rectangle from the center point
For alignment:
Advanced Stroke:
Select Circle using dot:

Count Dot:
Using Alt + obj and drag then do below hint

Using control + d for coping multiple objects in the same size and space:
Create group:
Assets : Create Component  button:

You can use many times that component:
Detach instance  you can change the selected component object:
 You can share your component to your team members for maintaining consistency
level by using publish option.
 Using page option, you can organize your story easily
Union selection  1 + 1 object = 1 object:
UI - Style Guide
 Go to menu section and select plugins which gives the required options for us either
its free or cost.
Here we have selected wire frame and flow kit tools for our third and fourth exercise.
we have used the following tools from wire frame component for designing user flow
and wire frame.
 For our fourth exercise we have been using following colors and typography styles.
C50AA7
00F00A
1E26DB
Ex.NO.4 Developing Wireflow diagram for application using open-source
software
Aim:
To develop wireflow diagram for application using Figma.
Algorithm:
 Go to Figma menu option and select plugin.
 Search the required libraries for your application, at last we have selected the two
libraries’ such as Wireframes and Flow kit.
 Wireframe library having many options of which we have selected two tools such as
o Flow kit by is graphic
o Wire flow map kit by Andrey Kovalev
 We have drawn the user flow diagram by using flow kit tools, here We used three
elements only, such as start, process and flow line
 Then we made the flow of execution for our application in step by step process
 After that we have converted the user flow diagram into wireframes by using wire
flow map kit
Output:
Result:
Thus the program was executed successfully.
Ex: No: 5 Exploring Various Open-Source Collaborative Interface Platform
Aim:
To explore various open-source collaborative interface platform
Algorithm:
The following application will be used in our field for open communication
Kolab:
Kolab is a free open-source collaboration software that includes powerful scheduling,
sharing, & resource management tools enabling people to work together effectively.
OpenProject:
OpenProject is an open-source project management software that allows a team to
collaborate, starting from project initiation to closure
OpenPass:
OpenPass is a free and open-source collaboration suite that helps teams to stay
connected and work together with ease
Group Office:
Group office is a free and open-source collaboration software that allows sharing
projects, calendars, files, and emails with teammates and clients
Collaborative:
Collaborative is a free and open-source web-based project management software. It is
written using PHP and JavaScript
Cyn.in:
Cyn.in is a free and open-source collaborative software that helps teams communicate
faster and share knowledge through different forms of digital content
eXo Platform:
eXo Platform is an open-source collaborative tool that offers a free demo. It is not a
free collaboration software
Result:
Thus the program was practiced successfully.
Ex: No: 6 Hands on Design Thinking Process for a new product
Aim:
To practice hands on session on design thinking process for a new product
Procedure:
Design Thinking:
It is a problem-solving approach that involves understanding people’s needs and

empathizing with their challenges to create solution that meet their needs.
It focuses on achieving practical results and solutions
The 5 steps of design thinking process:
 Empathise
 Define
 Ideate
 Prototype
 Test
Practical tips for applying empathy:
 Conduct user interviews to gain insight into their needs and experiences
 Observe users in their natural environment to understand their behaviour and context
For define:
 Use insights gathered during empathy to create a user persona and problem statement
 Ensure that the problem statement is specific, actionable, and measurable
For ideation:
 Encourage wild ideas and brainstorming without judgement

 Use ideation techniques such as mind mapping, SACMPER, and reverse brainstorming
to stimulate creativity
For prototype:
 Use low fidelity prototypes to test and refine ideas quickly

 Create multiple prototypes to explore different solutions
 Test prototypes with users to gather feedback and insights
For Test:
 Use A/B testing to compare the effectiveness of different solutions

 Use feedback from testing to refine the solution and iterate
New Product Development: (NPD)
The process by which entrepreneur designs and creates new product or service that will
be sold to customers (that meet the customer’s needs….)
Importance of new product development:
Market Growth & Survival
Result:
Thus the program was practiced successfully.
Ex.NO.7 Brainstorming Features for Proposed Product
Aim:
To build the session for creating the community platform
Algorithm:
Step1: To select appropriate platform for build the brainstorming session
Step2: We have chosen the Figma
Step3: Build the community with your target user, stakeholder as well
Step4: We would use the necessary tools for sharing their thoughts such as sticky note, flow
kit etc.…
Step5: At the end of the session, we have more information about our problem then it will
make into documents.

What is Brainstorming:
Brainstorming is a creative thinking technique for coming up with new ideas and solving problems.
Teams use this ideation method to encourage new ways of thinking and collectively generate solutions.
Brainstorming encourages free thinking and allows for all ideas to be voiced without judgment, fostering
an open and innovative environment. This process typically involves a group of people, although it can
be done individually as well.
What is the main purpose of brainstorming?
The primary purpose of a brainstorming session is to generate and document many ideas, no matter how
“out there” they might seem. Through this lateral thinking process, inventive ideas are suggested, which
sparks creative solutions. By encouraging everyone to think more freely and not be afraid to share their
ideas, teams can build on each other’s thoughts to find the best possible solution to a problem.
Benefits of brainstorming
Encourages creativity:
Brainstorming sessions are meant to be free of judgment. Everyone involved is meant to feel safe and
confident enough to speak their minds. There will be some good and some bad ideas, but this doesn’t
matter as long as the final outcome is one that can solve the problem. This kind of free-thinking
environment, along with a few essential brainstorming rules, encourage creativity in the workplace.
Fosters collaboration and team building:
Brainstorming is not only good for problem-solving. It also allows employees and team members to
understand how the people around them think. It helps the team get to know each other’s strengths and
weaknesses and helps build a more inclusive and close-knit workforce.
Result:
Thus, the program was executed successfully.
Ex.NO.8 Defining the look and feel of the new project
Aim:
To define the look and feel of the new product.
Introduction:
The “look and feel” of a website or portion of software designates its entrance and
functionality. People may use this period to discuss how website appearances and how it feels
to steer it.
Look and Feel of a Website?
In its most common terms, the “look and feel” of a website is in what way the site looks to
the user and just how it feels once he or she is cooperating through it.
The “look” is defined by the following workings of your website:
– Color themes
– Images
– Design
– Font size and style
– Complete designing
The “feel” is determined by these features:
– The undertaking and response of active components like dropdown menus,
forms, buttons,
and galleries
– Sound properties
– The speed by which sheets and images load
Why is the Look and Feel of a Website Important?
Your website’s overall look and feel is significant because it rapidly conveys an attitude to
your customers before they even start an interpretation of the content on the site. Before you
start a website rewrite, check your areas against business standards by looking at your
participants’ websites.
How to Use “Look and Feel” to Improve Your Web Design
Look and feel can be defined using adjectives just like you would define a friend or business
assistant.
Here are some examples of the kinds of adjectives you might use to define your website:
 Friendly
 Open-minded
 Fashionable
 Exclusive
 Cutting edge
 Advanced
On the other hand, websites with poorly measured overall design and usability schemes can
unintentionally fall into less satisfying categories, such as:
 Uninteresting
 Outdated
 Cluttered
 Unclear
 Childish
Tips to Improve Look and Feel of a Website
Keep the Layout Simple
The modest way to start a plan is to draft out an idea before you exposed any tool such as
Photoshop or Canva. Set sketch to paper or create a wireframe in software such
as OmniGraffle or Balsamic.
Keep Your Design Balanced
 Choose A Color Theme:
 background-image: linear-gradient(45deg, aqua, blue, Magenta, red,

orange, yellow, green, cyan, blue, violet, cyan, skyblue);
 Create Graphics
 .Text_Animation{
 font-size: 60px;
 line-height: 1;
 text-align: center;
 font-family: bebas neue;
 background-clip: text;
 -webkit-background-clip: text;
 color: transparent;
 background-image: linear-gradient(45deg, aqua, blue, Magenta, red,
orange, yellow, green, cyan, blue, violet, cyan, skyblue);
 background-size: 400% 400%;
 animation: animate 15s ease infinite;
 }
 .Text_Animation span{
 font-size: 80px;
 }
Output
 Improve Website Typography
 @import
url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;
400;500;600;700;800;900&display=swap');
Output:
 Adding White Space

Output:
 Social Media Widgets
 <link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-
awesome/4.7.0/css/font-awesome.css">
Output:
 Purpose
o The most important factor to improve your website: Remember your purpose of
having a website. Each side of your site should be linked with the determination
of having a website. All your pictures, graphics, colors and associations should
help you attain what you required from having a website in the first place. If
you want more sales and to encourage your business or provision, you have to
go for a sales-oriented website instead of one that is just good-looking.
Result:
Ex.NO.9 Create a sample pattern library for that product – Mood board,
Fonts, Colors based on UI principle
Aim:
To create a sample library for one product in mood board pattern.
Algorithm:
 Select A4 page and change that name into mood board
 Go to dribbble.com for getting sample page
 https://dribbble.com/shots/popular/product-design
 https://dribbble.com/shots/23938151-SpaceCloud-SaaS-Website
For this exercise we have used the last exercise concept for creating mood board section
What is Mood Board?
an arrangement of images, materials, pieces of text, etc. intended to evoke or project a
particular style or concept
A mood board is essentially an arrangement of images that evoke certain feelings or
emotions. They can be made up of anything from photos to drawings to textiles — anything
that conveys the desired “vibe” or feeling.
What industries use mood boards?
 Film
 Fashion
 Architecture
 Design
Why are mood boards helpful?
The main advantage of using a mood board is that it helps you quickly organize all of your
thoughts into one cohesive package. It gives everyone involved in the project — including
yourself — a clear view of what direction the project should take and where it should end up.
Output:
Result:
Ex.NO.10 Identify a customer problem to solve
Aim:
To identify the customer problem to solve
Algorithm:
Step 1: (Topic Selection)
 We have to select the topic according to your domain
 Once you have identified your problem, don’t get into next level, because people
already have given some solution about that problem. so you will have to search how
to enhance that
 For this exercise we have selected one topic for the community platform to make the
learners and mentors communication about their products
Step 2: (Researching on current issues)
 Researching on current issues about that problem that what they have faced while using
some other community platform
Step 3: (Finding a problem)
 Once you have fixed your problem in step 2, you will be able to step forward
Step 4: (Framing it to a statement)
 As most of the people who are new to design from different states are struggling to find
a mentor (from whom you get consistent knowledge and guidance throughout your
journey with them). Even if they find communication and language is being one of a
barrier.
Objective:
 To find mentor who has decent design background and can teach in both in their native
and English language
 To find workshops and bootcamps on particular topics
 To expand skillset, get support and gain insights from the mentors with less and no cost
 Career assistance support and training particularly for getting into UI/UX design
 To get specialised training on various topics
 To connect and communicate with fellow designers – again language should not be a
barrier
Output:
Result:
Ex.NO.11 Conduct end-to-end user research – User Research, Creating Personas,
Ideation Process(User Stories, Scenarios), Flow Diagram, Flow Mapping
Aim:
To conduct end to end user research using Fig Jam in Figma
Algorithm:
Step 1: Go to FigJam and select appropriate template for your process
Step 2: In previous exercise we have selected one problem statement and the research for that
has been done step by step here
Step 3: First, we have started the ideation process by using story board method
Step 4: We have created the personas for learner and mentor as well
Step 5: We have mapped the learner’s journey throughout the process
Step 6: Finaly, we have drawn the information architecture for this journey using FigJam
Output: Story Board
User Persona:
Output 1:
Output 2:
Mentor Persona:
Output 1:
Output 2:
Learner Journey Mapping:

Information Architecture:
Result:
Ex.NO.12 Sketch, design with popular tool and build a prototype and perform usability testing
and identify improvements
Aim:
To design the prototype for community platform in Figma and perform the usability testing
Algorithm:
Step1: Go to FigJam and select the appropriate template for the prototype
Step2: We will have to make the necessary changes for that template according to your
product
Step3: After designing the prototype, then we will have to do the usability testing to
enhance our product
Step4: Usability testing is done by target users that people would perform all the task and
discover the pain points
Step5: After finding the pain points, we will have to make the necessary change for it.
Output:
Prototype
Community Platform: (By FigJam)
Usability Testing:
Result:

CCS 370 - UI and UX Lab Manual - Final

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CCS 370 - UI and UX Lab Manual - Final

Uploaded by

Copyright:

Available Formats

Ex.NO.

1 Designing a Responsive Layout for a societal application

Thus, the program was successfully executed.

Program for Glow Neon Button:

2 - Source Code for - Login Form Animation CSS:

.remember-forgot label input {

.input-check:checked~.remember-forgot label input {

Output 1: Toggle Button in Off Mode

Thus, the program was successfully executed.

Layer grid & angle Mode:

Shift + Alt = Customize rectangle from the center point

Select Circle using dot:

Using Alt + obj and drag then do below hint

Assets : Create Component  button:

Detach instance  you can change the selected component object:

It is a problem-solving approach that involves understanding people’s needs and

It focuses on achieving practical results and solutions

The 5 steps of design thinking process:

Practical tips for applying empathy:

 Encourage wild ideas and brainstorming without judgement

 Use low fidelity prototypes to test and refine ideas quickly

 Use A/B testing to compare the effectiveness of different solutions

New Product Development: (NPD)

Importance of new product development:

Market Growth & Survival

Step1: To select appropriate platform for build the brainstorming session

Step2: We have chosen the Figma

make into documents.

What is the main purpose of brainstorming?

Fosters collaboration and team building:

 background-image: linear-gradient(45deg, aqua, blue, Magenta, red,

 Adding White Space

Learner Journey Mapping:

enhance our product

discover the pain points

You might also like