Scribd
Upload
20 views

UI and UX Lab - Print Out

Uploaded by

peer87374
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
20 views

UI and UX Lab - Print Out

Uploaded by

peer87374
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

Ex.NO.

1 Designing a Responsive Layout for a societal application

CSS Links
Sample 1:
Output 1:
Web Layout:
Output:

For Responsive Layout:


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
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.</p>
<section class="parallax-2">
<div class="parallax-inner">
<h1>Parallax Effect</h1>
</div>
</section>
<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.</p>
<section class="parallax-3">
<div class="parallax-inner">
<h1>Scroll Up</h1>
</div>
</section>
<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.</p>
</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 {
background: url('img2.jpg') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.parallax-3 {
background: url('img3.jpg') no-repeat;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.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:
Ex.No.2 Exploring Various UI Interaction Patterns

Navigation Bar
Sample 1:

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
}
nav {
position: relative;
width: 524px;
height: 50px;
background: #222;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
}
nav a {

position: relative;
display: inline-block;
font-size: 1em;
color: #fff;
text-decoration: none;
padding: 0 23px;
z-index: 1;
}
nav span {
position: absolute;
top: 0;
left: 0;
width: 95px;
height: 100%;
background: linear-gradient(45deg, #2e3192, #1bffff);
border-radius: 8px;
transition: .5s ease;
}
nav a:nth-child(1):hover~span {
left: 0;
}
nav a:nth-child(2):hover~span {
left: 95px;
}
nav a:nth-child(3):hover~span {
left: 189px;
width: 110px;
}

nav a:nth-child(4):hover~span {
left: 298px;
width: 115px;
}
nav a:nth-child(5):hover~span {
left: 413px;
width: 110px;
}
Output:

Sample 1:
Output:

Sample 2:
Output:

CSS Borders:
Output:
Program for Glow Neon Button:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise_2</title>
<link rel="stylesheet" href="style.css">
</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;
font-family: 'Poppins', sans-serif;
}
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>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exercise_2.2</title>
<link rel="stylesheet" href="style.css">
</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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule
src="https://unpkg.com/[email protected]/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;
font-family: 'Poppins', sans-serif;
}

body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #000;
overflow: hidden;
}

.login-box {
position: relative;
width: 400px;
height: 450px;
background: #191919;
border-radius: 20px;
display: flex;
justify-content: center;
align-items: center;
}

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 {
.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%;
transform: translateX(-50%);
width: 45px;
height: 45px;
background: #333;
border: 2px solid #191919;
border-radius: 10px;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, .5);
transition: .5s ease;
}
.input-check:checked~.toggle::after {
top: 65px;
}
.input-check {
position: absolute;
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
Ex.NO.3 Developing an interface with proper UI Style Guides

Output:
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
Output:
Ex: No: 5 Exploring Various Open-Source Collaborative Interface Platform

Output: Figma Platform


Ex: No: 6 Hands on Design Thinking Process for a new product

Output:
Ex.NO.7 Brainstorming Features for Proposed Product

Output:
Ex.NO.8 defining the look and feel of the new project

Output:
 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.
Ex.NO.9 Create a sample pattern library for that product – Mood board,
Fonts, Colors based on UI principle

Output:
Ex.NO.10 Identify a customer problem to solve

Output:
Ex.NO.11 Conduct end-to-end user research – User Research, Creating Personas,
Ideation Process(User Stories, Scenarios), Flow Diagram, Flow Mapping

Output: Story Board

User Persona:

Output 1:
Output 2:

Mentor Persona:

Output 1:
Output 2:

Learner Journey Mapping:


Information Architecture:
Ex.NO.12 Sketch, design with popular tool and build a prototype and perform usability testing
and identify improvements
Prototype
Community Platform: (By Figjam)
Usability Testing:

You might also like