Web Design


Interactive Website's Landing Page Design - Adobe XD

Learn to wireframe and design a website's landing page from A-Z using Adobe XD and improve your UI/UX Design skills

4.50 (1 reviews)


2 hours


Jun 2021

Last Update
Regular Price

What you will learn

Create an interactive website's landing page from scratch

Detailed wireframing process

The theory behind using such visual components

Interactivity and prototyping

Iconography/Logo desgin

Adobe XD manipulation


Hey guys , this is Mehdi Baoueb , im a graphic designer and am glad to have you here. If you aim to improve your UI UX design skills , this course will help you.

In this course we are going to create an educational website's landing page from scratch using Adobe XD.

In order to fully understand everything in this course , basic knowledge is required.

I've devided the course into 4 parts that will make you able to Sketch , Design and make your work interactive and also presentable.

In the first part we'll be going through the theory , where I would be explaining the idea behind using such structure and visual components.

In the second part , we start wireframing and that's when we will keep improving our sketch until it gets ready for our third chapter which is the design process.

Once done designing , we start with the fourth part. Here you're going to learn how to make your landing page interactive which means we're working on prototyping and hover state.

If you have many ideas in your mind and you still find it difficult to apply them on a project , watch this course and take your UI/UX skills to the next level !


Interactive Website's Landing Page Design - Adobe XD
Interactive Website's Landing Page Design - Adobe XD
Interactive Website's Landing Page Design - Adobe XD
Interactive Website's Landing Page Design - Adobe XD


Theoretical Introduction to The Course


Color Theory



Landing Page Wireframing

Chapter Introduction

Header Wireframe

Body/main Wireframe

Footer Wireframe

Landing Page Design

Chapter Introduction

Logo Design

Header Design

Body - (video section) Design

Video Player Iconography

Body - (website content section) Design

Body - Subscription section + Footer Design

Landing Page Interactivity

Chapter Introduction

Explaining Hover State in Adobe XD

Header Interactivity

Body interactivity 1

Body interactivity 2

Footer interactivity

Prototyping for portfolio presentation


Udemy ID


Course created date


Course Indexed date
Course Submitted by