Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Design You First Website In Adobe XD

Name: Design You First Website In Adobe XD
Rating: 4.6 (8 reviews)

Get To Know Adobe Xd and Design and Prototype Your First Website

Created byDawid Tuminski

Last updated 3/2023

English

English [Auto],

What you'll learn

Design Websites in Adobe Xd
Independently use Adobe Xd
Design and Prototype a Website
Use Adobe Xd's Tools and Techniques To Build a Website

Course content

11 sections • 63 lectures • 6h 16m total length

What You Will Find in This Course2:07
Explore how to start and master Adobe XD, from download and artboard basics to designing and prototyping web layouts, saving, sharing, and building an independent design career.

The Home Screen3:58
Explore the home screen in Adobe XD, where the left panel offers task links like new file and open, and the right workspace updates with artboard presets and recent files.
The Workspace3:53
Explore the Adobe XD workspace, featuring the main menu, design, prototype, and shared workspaces, and device preview to manage layers, artboards, and document assets.
Designing vs Prototyping in Xd2:10

Adding And Managing Plugins2:33
Plugins You Are Most Likely to Use in Your Designs9:04
How To Use the Document Assets2:29
Explore document assets panel in Adobe XD, organizing fonts, colors, character styles, components, and videos for consistent projects. Learn to replace missing fonts, apply fill color, and group assets.
Quick Introduction to Design Systems in Xd2:47
Learn how design systems promote consistency across layouts, featuring colors, typography, and components, and how to use document assets in Adobe XD to store and reuse design elements.

The Project Overview1:59
Design a desktop and mobile web project in Adobe XD that showcases your skills, builds a portfolio with a blog post page, and an interactive prototype.
Let’s Create a New File First4:59
Create a file with a custom size (1920 by 4000), learn the 12-column grid and gutter, use the select tool to shape a header with logo and navigation, saving locally.
Finding the Right Colors for Our Design3:42
Prototype the navigation and define a color scheme from a hero image; import a no-background portrait PNG from Raw Pixel as color reference in XD.
Add the Colors and Fonts6:28
Let’s Add the Logo and the Navigation4:09
Let’s Prototype Our First Element8:05
Let’s Add the Active State and the First Hero Elements5:19
Let’s Start the Mobile Version of the Design6:46
Let’s Add the Mobile Menu5:50
Let’s Learn a Better Way of Animating the Menu Icon11:04
Let’s Add More Hero Elements4:59
Let’s Add the Social Media Icons5:07
Let’s Make the Hero Section Responsive3:13
Make the hero section responsive by stacking elements for mobile, centering content, setting icons to a light gray default, and using a crop mask on the image.
Let’s Start the Services Section4:19
Let’s Add the Services15:26
Let’s Add the Call to Action Button2:24
Let’s Make the Services Responsive10:04
Learn to make service cards responsive in Adobe XD by resizing the mobile artboard, adjusting background and text, grouping elements, and stacking cards for a clean mobile layout.
Let’s Start Adding the Portfolio Items8:32
Let’s Finish the Portfolio8:27
Let’s Make the Portfolio Reponsive6:42
Let’s Add an Image Carousel11:54
Let’s Start Adding the Blog Section4:56
Organize your design by grouping home page elements and create a dark blog section with a centered 'Here's my blog' title, white text, and category buttons; distribute items evenly.
Let’s Start Adding the Blog Post Excerpts12:55
Let’s Set Up Blog Pages12:15
Design blog pages by building front page, blog post layouts, and a single post view with header, categories, mosaic excerpts, and a load more button with lazy loading.
Let's Learn Some Pagination Fx7:50
Learn to build pagination effects in Adobe XD, including a load more button and a two-state post component. Prototype hover-based indicators and an active-page circle behind numbers.
Let's Set Up the Single Post Page and Finish the Section7:45
Design a single blog post page in Adobe XD, including featured image, category, date, title, text, likes, comments, social icons, and a related posts sidebar; prototype interactions.
Let’s Add the About Me Section11:13
Let’s Add the Contact Me Section12:56
Let’s Add the Footer8:58
Add a footer in Adobe XD by creating a colored rectangle, adding text blocks and icons, and aligning three lists with copyright, privacy policy, and terms of service links.
Let’s Make the Footer Responsive1:38
The Finishing Touches2:58
Build an Adobe XD site with a hero featuring image, logo, navigation, and services with icons; a portfolio with animated thumbnails, a blog, about me, contact, and footer, responsive.

Requirements

Basic computer skills and design knowledge is advised, thoug not essential
It would be great if you had Xd installed on your system, though it's not essential to start the course

Description

Would you like to learn how to design and prototype a website using Adobe Xd?

Well, if you are here you clearly would and I wanted to thank you for choosing this course

Here you will learn how to design and prototype your first website using Xd.

If you are completely new to the subject, let me just tell you that with Xd you can design an interactive website so that you can show your clients not only what the site would like, but also how it would work

And the best part is, that Xd comes with a full-fledged, free version, that we will be using in this course, so there really is no excuse not to at least try it out.

I’ve divided this course into two main parts. In the first one, you will learn all there is to know to get yourself started with the software, like:

how to use the interface
how to create new files
how to use the tools, plugins and assets
the differences between designing and prototyping
and only real-world aspects of web typography, best practices and trends

In the second part, we will roll up our sleeves and get our hands dirty and design and prototype a website. We will create a desktop and a mobile version of a web design freelancer’s website.

In the process, we will go deeper into adding and using elements that you are most likely to use in a real-life web design project, like mobile menus, sliders, testimonial, portfolios and so much more.

When that’s done, you will learn how to save and share your design either with a client or with other stakeholders.

The course will take you step by step from learning the basics of using Xd through designing and prototyping a website all the way to saving and sharing it.

So, if you want to become a web design freelancer or you maybe want to land a job in a web design agency, learning Adobe Xd is really a must.

So, jump right in and I really hope to see you inside!

Who this course is for:

Beginner web designers who want to learn of the industry's standard tools

Design You First Website In Adobe XD

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Basic Concepts3 lectures • 8min

Getting To Know the Program3 lectures • 10min

Your First New Document4 lectures • 21min

Plugins and Assets4 lectures • 17min

Getting Ready to Start Designing4 lectures • 27min

The Design and the Prototype Process31 lectures • 3hr 43min

How To Share Your Project3 lectures • 10min

Summary1 lecture • 2min

BONUS section1 lecture • 1min

Requirements

Description

Who this course is for: