Ex No: EXPLORING VARIOUS UI INTERACTION
PATTERN
Date:
AIM
To explore various UI interaction patterns using Figma.
PROCEDURE
1. Create a frame for iPhone-14 pro for the home page of travel app.
2. Add a rectangle to the frame of the same size and add a image above it.
3. Add the icon, status bar and text to the 1st frame.
4. Create the same frame for the next page for discovering new places.
5. Add the rectangle and place a image over it.
6. Add the icons and align it properly.
7. Create another frame for the next page of the blog about the place.
8. Place the icons, images and the text box accordingly.
9. Create another frame for checking the liked posts.
10. Place the icons, text, images accordingly.
11. In the prototype add interactions with each frame for exploring the interaction
patterns.
sPROGRAM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>UI Interaction - Course Selection</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f9;
}
header {
background-color: rgb(107, 15, 107);
color: white;
padding: 20px;
text-align: center;
}
h1 {
margin: 0;
}
main {
padding: 20px;
text-align: center;
}
h2 {
font-size: 24px;
margin-bottom: 15px;
}
/* Form Styles */
.form-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
margin: 30px auto;
width: 100%;
max-width: 500px;
display: flex;
flex-direction: column;
align-items: center;
}
form label {
display: block;
margin-bottom: 8px;
}
form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border: 1px solid #ccc;
border-radius: 4px;
}
form button {
background-color: rgb(107, 15, 107);
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
form button:hover {
background-color: rgb(80, 10, 80);
}
/* Card Styles */
.card-container {
display: none; /* Initially hidden */
flex-wrap: wrap;
justify-content: center;
gap: 20px;
padding: 20px;
}
.card {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 250px;
text-align: center;
}
.card img {
width: 200px;
height: 200px;
object-fit: cover;
}
.card-action {
background-color: #08223d;
color: white;
padding: 10px 15px;
border: none;
border-radius: 4px;
cursor: pointer;
margin-top: 15px;
}
.card-action:hover {
background-color: #04162b;
}
/* Footer Styles */
footer {
text-align: center;
padding: 10px;
background-color: rgb(107, 15, 107);
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<header>
<h1>UI Interaction - Course Selection</h1>
</header>
<main>
<!-- Form Section -->
<section class="form-container" id="formSection">
<h2>Jai Shriram Engineering College</h2>
<form id="feedbackForm">
<label for="name">Your Name:</label>
<input type="text" id="name" placeholder="Enter your name" required>
<label for="regNo">Reg No:</label>
<input type="text" id="regNo" placeholder="Enter your Register Number" required>
<label for="department">Department:</label>
<input type="text" id="department" placeholder="Enter your Department" required>
<label for="email">Email Id:</label>
<input type="email" id="email" placeholder="Enter your Email Id" required>
<button type="submit">Submit</button>
</form>
</section>
<!-- Courses Section (Hidden Initially) -->
<section class="card-container" id="coursesSection">
<h2>UI Cards of Courses</h2>
<div class="card">
<h3>Java</h3>
<img src="https://external-preview.redd.it/java-22-launch-event-v0-
VKfyXB99AEiHiPvIbK-vLRHcejGsT7-
_XARIBlJwh38.jpg?auto=webp&s=0839fef377ec7e8428306c5b174bbab8ed470b4a"
alt="Java">
<p>Java is a widely used object-oriented programming language.</p>
<button class="card-action">Select</button>
</div>
<div class="card">
<h3>Python</h3>
<img src="https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSKSkjA64ptIZHXfiI4AA-6w2U-_d5t1h2ojQ&s"
alt="Python">
<p>Python is a high-level, general-purpose programming language.</p>
<button class="card-action">Select</button>
</div>
</section>
</main>
<footer>
<p>© 2025 UI Interaction Design</p>
</footer>
<script>
document.getElementById("feedbackForm").addEventListener("submit",
function(event) {
event.preventDefault(); // Prevent default form submission
// Hide the form section
document.getElementById("formSection").style.display = "none";
// Show the courses section
document.getElementById("coursesSection").style.display = "flex";
// Store form data in localStorage (optional)
localStorage.setItem("name", document.getElementById("name").value);
localStorage.setItem("regNo", document.getElementById("regNo").value);
localStorage.setItem("department", document.getElementById("department").value);
localStorage.setItem("email", document.getElementById("email").value);
});
</script>
</body>
</html>
OUTPUT
RESULT
The above design for a exploring various UI interaction patterns is completed.
