Scribd
Upload
26 views30 pages

UIUX Final Lab Manual

The document outlines various exercises focused on UI interaction patterns, UI style guides, wireflow diagrams, and defining the look and feel of projects. It includes sample code and step-by-step instructions for implementing UI elements and creating cohesive design identities. Each exercise aims to enhance understanding and application of UI design principles using HTML, CSS, and JavaScript.

Uploaded by

M. Vichithra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
26 views30 pages

UIUX Final Lab Manual

The document outlines various exercises focused on UI interaction patterns, UI style guides, wireflow diagrams, and defining the look and feel of projects. It includes sample code and step-by-step instructions for implementing UI elements and creating cohesive design identities. Each exercise aims to enhance understanding and application of UI design principles using HTML, CSS, and JavaScript.

Uploaded by

M. Vichithra
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 30

EX.

NO: Exploring various UI Interaction Patterns


DATE:

Aim:
Exploring various UI Interaction Patterns Creating a program to explore
various UI interaction patterns involves implementing different patterns in a
sample application. Below is a simple example using HTML, CSS, and
JavaScript to demonstrate some basic interaction patterns. Note that this
example focuses on showcasing the patterns and may require additional styling
and optimization for a production environment.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Interaction Patterns</title>
<style>
/* Add your styles here */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #f0f0f0;
}

.container {
text-align: center;
}
.box {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
display: inline-block;
margin: 10px;
padding: 20px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.box:hover {
background-color: #2980b9;
}
.draggable-box {
width: 100px;
height: 100px;
background-color: #e74c3c;
color: #fff;

display: inline-block;
margin: 10px;
padding: 20px;
cursor: move;
user-select: none;
}
.droppable-area {
width: 250px;
height: 250px;
background-color: #2ecc71;
margin: 10px;
padding: 20px;
display: inline-block;
}
.swipe-container {
width: 300px;
height: 150px;
overflow: hidden;
position: relative;
margin: 10px;
}
.swipe-content {
white-space: nowrap;
transition: transform 0.3s ease;
}
.swipe-item {
display: inline-block;
width: 100px;
height: 100px;
background-color: #f39c12;
color: #fff;
margin: 10px;
padding: 20px;
cursor: pointer;
}
.modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
justify-content: center;
align-items: center;
}
.modal-content {
background: #fff;
padding: 20px;
border-radius: 5px;
}
.tabs {
display: flex;
margin: 10px;
}
.tab {
flex: 1;
padding: 10px;
text-align: center;
cursor: pointer;
border: 1px solid #ccc;
border-radius: 5px;
}
.tab-content {
display: none;
}
.dropdown {
position: relative;
display: inline-block;
margin: 10px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0 8px 16px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.toggle-switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.toggle-switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;

bottom: 4px;
background-color: #fff;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #2196F3;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.stepper {
margin: 10px;
}
.stepper input {
width: 50px;
text-align: center;
margin: 0 5px;
}
.progress-bar {

width: 300px;
height: 20px;
background-color: #ccc;
margin: 10px;
position: relative;
}
.progress-bar-fill {
height: 100%;
background-color: #3498db;
width: 0;
transition: width 0.3s ease;
position: absolute;
}
</style>
</head>
<body>
<div class="container">
<div class="box" onclick="alert('Click/Tap Interaction')">Click/Tap</div>
<div class="draggable-box" draggable="true"
ondragstart="drag(event)">Drag
Me</div>

<div class="droppable-area" ondrop="drop(event)"


ondragover="allowDrop(event)">
Drop Here
</div>
<div class="swipe-container" ontouchstart="handleTouchStart(event)"
ontouchmove="handleTouchMove(event)">
<div class="swipe-content">
<div class="swipe-item" onclick="alert('Swipe Interaction 1')">Swipe
1</div>
<div class="swipe-item" onclick="alert('Swipe Interaction 2')">Swipe
2</div>
<div class="swipe-item" onclick="alert('Swipe Interaction 3')">Swipe
3</div>
</div>
</div>
<div class="modal" onclick="closeModal()">
<div class="modal-content" onclick="event.stopPropagation()">
<p onclick="alert('Modal/Popup Interaction')">Modal Content</p>
</div>
</div>
<div class="tabs">
<div class="tab" onclick="showTab('tab1')">Tab 1</div>
<div class="tab" onclick="showTab('tab2')">Tab 2</div>
<div class="tab" onclick="showTab('tab3')">Tab 3</div>

</div>
<div class="tab-content" id="tab1">
<p>Tab 1 Content</p>
</div>
<div class="tab-content" id="tab2" style="display:non"</div>
Output:

Result:
EX.NO:2 Developing an interface with proper UI Style Guides
DATE:

Aim:
Creating a program with a proper UI style guide involves using HTML,
CSS, and potentially JavaScript to ensure consistency and adherence to design
principles. Below is a simple example that incorporates basic UI style guide
elements. Note that this is a starting point, and you can expand and customize it
based on your specific design requirements.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Style Guide Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
line-height: 1.6;
background-color: #f5f5f5;
color: #333;
margin: 0;
padding: 0;
}
/* Header Styles */
header {
background-color: #3498db;
color: #fff;
padding: 10px;
text-align: center;
}
/*
Navigation Styles */
nav {
background-color: #2c3e50;
padding: 10px;
text-align: center;
}
nav a {
color: #fff;
text-decoration: none;
padding: 10px;
margin: 0 10px;
display: inline-block;
}
/* Main Content Styles */
.container {
max-width: 800px;
margin: 20px auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h1, h2, h3 {
color: #333;
}
p{
margin-bottom: 20px;
}
/* Button Styles */
.btn {
background-color: #e74c3c;
color: #fff;
padding: 10px 20px;
text-decoration: none;
border-radius: 3px;
display: inline-block;
transition: background-color 0.3s ease;
}
.btn:hover {
background-color: #c0392b;
}
/* Form Styles */
form {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
}
input[type="text"], input[type="email"], input[type="password"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 3px;
}
input[type="submit"] {
background-color: #2ecc71;
color: #fff;
padding: 10px 20px;
border: none;
border-radius: 3px;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #27ae60;
}
/* Footer Styles */
footer {
background-color: #34495e;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>UI Style Guide Example</h1>
</header>
<nav>
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Contact</a>
</nav>
<div class="container">
<h2>Main Content Heading</h2>
<p>This is a simple example of a UI style guide. Feel free to
customize and
expand it based on your project requirements.</p>
<a href="#" class="btn">Call to Action</a>
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="password">Password:</label>

<input type="password" id="password" name="password" required>


<input type="submit" value="Submit">
</form>
</div>
<footer>
<p>&copy; 2024 UI Style Guide Example. All rights
reserved.</p>
</footer>
</body>
</html>
Output:

Result:
EX.NO:3 Developing Wireflow diagram for application using open-
DATE: source software

Aim:
Creating a wireflow diagram involves combining wireframes and user
flow diagrams to represent the structure and flow of a user interface. In this
example, I'lldemonstrate using the open-source desktop application Pencil
Project for creating a wireflow diagram.
Using Pencil Project:
1. Download and Install Pencil Project:
 Visit the Pencil Project GitHub Releases page.
 Download the latest version suitable for your operating system
 (Windows, macOS, Linux).
 Install the application on your computer.
2. Open Pencil Project:
 the Pencil Project application.
3. Create a New Document:
 Click on "File" and select "New."
 Choose the type of document you want (e.g., Desktop or Mobile).
4. Add UI Components
 On the left toolbar, select the "Wireframe" category.
 Drag and drop UI components onto the canvas to represent screens or
 components of your application.
5. Connect Components:
 Use connectors or arrows from the toolbar to represent the flow
 between different screens or components.
 Connect the components to illustrate the user journey.
6. Label Components:
 Double-click on components to add labels and provide more
 information about each screen or component.
7. Group and Align:
 Group related components together to maintain a clean and organized
 layout.
 Use alignment tools to ensure a consistent structure.
8. Add Annotations:
 Utilize the annotation feature to add notes or comments to specific
 components, explaining functionality or user interactions.
9. Customize Styles:
 Customize the appearance of your wireflow by adjusting colors, fonts,
 and other styling options.
10.Save Your Project:
 Click on "File" and choose "Save" to save your wireflow project for
 future editing.
11.Export as Image or PDF:
 Once you're satisfied with your wireflow, you can export it as an
 image (PNG, JPEG) or a PDF.
 Click on "File" and select "Export Document.
Result:
EX.NO:4 Defining the Look and Feel of the new project
DATE:

Aim:
Defining the look and feel of a new project involves creating a cohesive
and visually appealing identity that aligns with the project's goals and
resonates with the target audience. Here are step-by-step guidelines to
help you in this process:

1. Understand Project Goals and Audience

Project Overview:

 Define the purpose and goals of the project. What problem does it
 solve, and what are its key objectives?

Identify Target Audience:

 Understand the demographics, preferences, and needs of your


target
 audience.
2. Create a Mood Board

Gather Inspirations:

 Collect visual elements, colors, textures, and images that resonate


 with the project's theme.
Use Digital Tools:

 Create a digital mood board using platforms like Pinterest, Figma,


or
 Adobe XD.
3. Define Visual Style

Color Palette:
 Choose a color scheme that reflects the project's personality.
Consider
 the emotions associated with each color.
Typography:

 Select fonts that align with the project's tone. Consider readability
and
 hierarchy.
Imagery and Iconography:

 Define the style of images and icons. Consistency is key for a


unified
 look.
4. User Interface (UI) Elements

Buttons and Controls:

 Decide on the style of buttons, form controls, and other interactive


 elements.
Navigation:

 Plan the navigation structure. Consider user flow and ease of use.
Icons:

 Choose a set of icons that complement the visual style and


enhance
 user understanding.
5. Create Wireframes or Prototypes

Sketch Initial Designs:

 Create rough sketches or wireframes of key pages or screens.


Iterate and Refine:

 Gather feedback and iterate on your designs. Consider user


feedback
 and usability.
6. Collect Feedback

Internal Review:

 Share your design concepts with team members for input.


User Testing:

 Conduct usability testing with a small group of target users to


gather
 insights.
7. Iterate Based on Feedback

Refine Designs:

 Make necessary adjustments based on feedback received.


Maintain Consistency:

 Ensure that the changes align with the established visual identity.
8. Document the Style Guide

Compile Style Guide:

 Document the chosen color palette, typography, UI elements, and


any
 specific design guidelines.
Share with Team:

 Share the style guide with the development team, ensuring


 consistency in implementation.
9. Finalize Look and Feel
Approve Final Designs
 Obtain final approval on the visual identity from key stakeholders.
Prepare Assets:

 Create design assets and resources needed for implementation.


10. Implement and Monitor

Handover to Development:

 Provide the finalized designs and assets to the development team.


Monitor User Response:

 After launch, monitor user response and make minor adjustments


if necessary.

By following these steps, you can systematically define the look and feel
of your new project, ensuring a visually appealing and user-friendly
experience. Regular collaboration and feedback loops with stakeholders
and users are crucial for refining and enhancing the project's visual
identity over time.
Result:
EX.NO:5 Create a sample pattern library for the product(Mood
DATE: board,Fonts,Colors based on UI principles)

Aim:
Create a sample pattern library for a product, including a mood
board, font choices, and a color palette based on UI principles. This
sample is fictional and serves as a starting point for your own product.

1. Mood Board:
Mood Description:

Colors: Earthy tones, inspired by nature, evoke a sense of calmness and


reliability.
Imagery: Clean and minimalistic visuals, with a focus on user
engagement
and collaboration.
Textures: Subtle textures to add depth and warmth.

2. Fonts:
Primary Font: Lato

Usage: Headings and main content.


Characteristics: Modern, clean, and highly readable.
Example:
cssCopy code
font-family: 'Lato', sans-serif;
Secondary Font: Open Sans

Usage: Subheadings, captions, and supporting text.


Characteristics: Friendly, versatile, and easy on the eyes.
Example:
cssCopy code
font-family: 'Open Sans', sans-serif;
3. Colors:
Primary Color Palette:
1. #3498db - Dodger Blue
2. #2ecc71 - Emerald Green
3. #e74c3c - Tomato Red
4. #f39c12 - Orange
Neutral Colors:
1. #ecf0f1 - Cloud White
2. #bdc3c7 - Silver Gray
3. #34495e - Midnight Blue
Usage:

 Dodger Blue for primary actions and highlights.


 Emerald Green for success messages and positive indicators.
 Tomato Red for error messages and warnings.
 Orange for calls to action and important elements.
 Cloud White for backgrounds.
 Silver Gray for subtle UI elements and borders.
 Midnight Blue for text and accents.
4. UI Principles:

 Consistency: Maintain consistent use of colors, fonts, and UI


elements across the product.
 Hierarchy: Use font size, color, and spacing to establish a clear
visual hierarchy.
 Contrast: Ensure sufficient contrast between text and background
for readability.
 Accessibility: Choose accessible colors and provide alternatives
for userswith visual impairments.
 Whitespace: Use ample whitespace for a clean and uncluttered
design.
 Responsiveness: Design for various screen sizes, ensuring a
seamless experience on different devices.
5. Sample UI Elements:
Buttons:
 Primary Button:
cssCopy code
background-color: #3498db; color: #ecf0f1;

 Secondary Button:
cssCopy code
background-color: #ecf0f1; color: #3498db;
Form Inputs:
 Active State:

cssCopy code
border-color: #3498db;

 Error State:
cssCopy code
border-color: #e74c3c;
Alerts:

 Success Alert:
cssCopy code
background-color: #2ecc71; color: #ecf0f1;

 Error Alert:
cssCopy code
background-color: #e74c3c; color: #ecf0f1;
Feel free to adapt and customize this sample pattern library based on your
project's
Result:

You might also like