Scribd
Upload
15 views9 pages

HCI Lab 3 Landing Page

The document outlines a UX/UI laboratory exercise focused on designing a responsive and user-friendly landing page. Students will learn to apply core UX/UI principles, including clarity, visual hierarchy, and responsive design, while creating the page using HTML and CSS. The lab includes specific instructions, assessment criteria, and deliverables to ensure students effectively implement their designs.

Uploaded by

Dela Rita Joshua
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
15 views9 pages

HCI Lab 3 Landing Page

The document outlines a UX/UI laboratory exercise focused on designing a responsive and user-friendly landing page. Students will learn to apply core UX/UI principles, including clarity, visual hierarchy, and responsive design, while creating the page using HTML and CSS. The lab includes specific instructions, assessment criteria, and deliverables to ensure students effectively implement their designs.

Uploaded by

Dela Rita Joshua
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/ 9

UX/UI Laboratory Exercise: Designing a Landing Page

Objective:
The goal of this lab is to guide students in designing and developing a responsive,
visually appealing, and user-friendly landing page using core UX/UI principles. This
includes understanding how to structure content, apply typography, colors, spacing,
and integrate basic animations for better user interaction.

Lab Overview:
 Title: Landing Page Design
 Duration: 3 Hours
 Tools Needed:
o Code editor (e.g., VSCode)

o Browser (for preview)

o HTML, CSS (No JavaScript required for basic functionality)

Lab Instructions:
1. Landing Page Layout
Design a basic landing page that contains the following sections:
1. Header with Navigation (Links: Home, Features, About, Contact)
2. Hero Section with a Call to Action (CTA)
3. Features Section (Three or four features with icons and descriptions)
4. Testimonial Section (Use quotes from users or clients)
5. Footer (With links to social media and copyright information)
2. UX/UI Principles
Focus on the following key UX/UI principles:
 Clarity: Make sure the content is easy to read and follow.
 Visual Hierarchy: Use headings, subheadings, and font sizes to guide the
user’s attention.
 Whitespace: Allow breathing space between elements to avoid clutter.
 Consistency: Keep the style consistent throughout the page (font choices,
colors, button designs).
 Responsive Design: Ensure that the page looks good on different screen
sizes (mobile, tablet, desktop).

Lab Breakdown
Step 1: Set Up the Basic Structure in HTML
1. Create an index.html file and use the following template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Landing Page</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>

<!-- Header Section -->


<header>
<div class="logo">BrandLogo</div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Features</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<!-- Hero Section -->
<section class="hero">
<h1>Welcome to Our Landing Page</h1>
<p>Your solution for XYZ. Discover more below.</p>
<a href="#" class="cta-button">Get Started</a>
</section>

<!-- Features Section -->


<section class="features">
<div class="feature">
<i class="fa fa-star"></i>
<h3>Feature 1</h3>
<p>Short description of Feature 1.</p>
</div>
<div class="feature">
<i class="fa fa-cog"></i>
<h3>Feature 2</h3>
<p>Short description of Feature 2.</p>
</div>
<div class="feature">
<i class="fa fa-heart"></i>
<h3>Feature 3</h3>
<p>Short description of Feature 3.</p>
</div>
</section>

<!-- Testimonial Section -->


<section class="testimonials">
<h2>What Our Users Say</h2>
<p>“This product has changed the way I work!”</p>
<p>– User 1</p>
</section>

<!-- Footer Section -->


<footer>
<p>© 2024 Your Company Name</p>
<div class="social-icons">
<a href="#"><i class="fab fa-facebook-f"></i></a>
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-instagram"></i></a>
</div>
</footer>

</body>
</html>
Step 2: Add Basic Styling in CSS
Create a styles.css file and style the page based on UX/UI best practices.
/* General Styles */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
background-color: #333;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
color: white;
}

header .logo {
font-size: 24px;
font-weight: bold;
}

nav ul {
list-style: none;
display: flex;
gap: 20px;
}

nav ul li a {
color: white;
text-decoration: none;
}

.hero {
background-color: #f4b41a;
text-align: center;
padding: 100px 20px;
color: white;
}

.hero h1 {
font-size: 48px;
margin-bottom: 20px;
}

.hero p {
font-size: 20px;
margin-bottom: 30px;
}

.cta-button {
padding: 10px 20px;
background-color: #333;
color: white;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}

.features {
padding: 50px;
display: flex;
justify-content: space-around;
text-align: center;
}

.feature {
width: 30%;
}

.feature i {
font-size: 48px;
color: #f4b41a;
}

.testimonials {
background-color: #f9f9f9;
padding: 50px;
text-align: center;
}

footer {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}

.social-icons a {
color: white;
margin: 0 10px;
}

.social-icons a:hover {
color: #f4b41a;
}
Step 3: Add Basic UX/UI Features
Focus on the following design aspects:
 Typography: Choose a modern, sans-serif font (e.g., Poppins) for readability.
 Color Scheme: Use a simple color palette (dark background with contrasting
button colors).
 Call-to-Action (CTA): Place a noticeable CTA button ("Get Started") in the
hero section.
 Iconography: Use icons (FontAwesome) to represent each feature.
 Testimonials: Include user feedback for social proof.
 Footer: Add links to social media icons and create an easy-to-find footer.
Step 4: Responsive Design
Task: Adjust the layout to ensure that the webpage is mobile-friendly.
 Use flexbox or grid to manage layouts.
 Ensure that the design adapts to smaller screens (use media queries).
Example of a media query for mobile responsiveness:
css
@media (max-width: 768px) {
.features {
flex-direction: column;
align-items: center;
}
.feature {
width: 80%;
margin-bottom: 20px;
}
}
Step 5: Add Animations
 Add a subtle hover effect on buttons and icons to make the webpage
interactive and engaging.
Example of a hover effect for the CTA button:
.cta-button:hover {
background-color: #222;
transition: background 0.3s ease;
}
Lab Deliverables:
1. HTML and CSS code of the designed landing page.
2. A brief explanation of the UX/UI principles applied in the design.
3. Screenshot of the responsive version of the page (mobile view).

Assessment Criteria:
1. Visual Design: Proper use of typography, colors, and whitespace.
2. Usability: Easy navigation and clear call-to-actions.
3. Responsive Layout: The webpage should work well on both desktop and
mobile devices.
4. Code Quality: Clean, well-structured HTML and CSS code with appropriate
comments.

This lab will help students understand how to design a landing page by applying
key UX/UI principles while writing the HTML and CSS code. It emphasizes creating
user-friendly designs that are responsive and visually appealing.

You might also like