Scribd
Upload
5 views

Ex No

The document outlines a procedure for exploring various UI interaction patterns using Figma, specifically for a travel app. It includes steps for creating frames for different app pages, adding images, icons, and text, and implementing interactions in a prototype. Additionally, it provides HTML and CSS code for a course selection interface, including form handling and dynamic content display.

Uploaded by

akshai9080
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Ex No

The document outlines a procedure for exploring various UI interaction patterns using Figma, specifically for a travel app. It includes steps for creating frames for different app pages, adding images, icons, and text, and implementing interactions in a prototype. Additionally, it provides HTML and CSS code for a course selection interface, including form handling and dynamic content display.

Uploaded by

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

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>&copy; 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.

You might also like