Website Design From Scratch In Adobe Xd

Name: Website Design From Scratch In Adobe Xd
Rating: 4.1 (48 reviews)

Design and prototype a high conversion website from scratch

Created byAleksandar Cucukovic

Last updated 5/2020

English

What you'll learn

Adobe Xd
Become a UI Designer
Become a UX Designer
Secrets Of Great Workflow
How To Create High Converting Landing Page
Plan And Organize A Project
Secrets Of Smart Design
Design A Website
Prototype A Website
Prepare Designs For Development
How To Get Inspired
How To Work With Clients

Course content

8 sections • 46 lectures • 5h 49m total length

Course Overview3:18
Gather a design brief from the client, review the logo, create mood boards and wireframes, build and animate in Adobe XD, and deliver a style guide with revisions.
The Brief17:28
Competitor Analysis 19:05
Competitor Analysis 211:31
Competitor Analysis 310:15

What Is A Landing Page2:45
Why Conversion Matters2:49
Understand how conversion on a website turns an offering into money. Shape landing page strategy by researching niche size, value, and audience, then testing for profitable conversions.
Function Over Beauty11:33
Focus on the function of the landing page over beauty to enhance clarity and conversions. See Shopify and Airbnb examples to reinforce functional, high-converting layouts with clear calls to action.
Landing Page Structure6:24
What To Consider4:09

File Preparation + Resources3:37
Creating Wireframe 19:36
Creating Wireframe 26:31
Creating Wireframe 37:38
Create a responsive wireframe in Adobe XD using a 12-column grid, centered circles, white space, and text duplication to build a hotel landing page.
Creating Wireframe 46:15
Creating Wireframe 516:58
Design a hotel room wireframe in Adobe XD, building repeatable room cards with grid-aligned images, pricing, features, and learn more or book actions.
Creating Wireframe 65:48
Create a hotel website wireframe in Adobe XD by adding a hero image, rooms and pool features, private parking, and testimonials, arranged in a six-column layout with navigation.
Creating Wireframe 76:23
Creating Wireframe 813:44
Creating Wireframe 913:22
Finish the wireframe by adding a newsletter sign-up form and a footer, aligning on a grid with consistent spacing and a subscribe button.

Organization4:41
Master prototyping in Adobe XD by creating before and after states for rooms and flags dropdowns, organizing design files, and building prototype screens to share transitions with a client.
Prototyping 17:18
Learn to organize prototyping in Adobe XD by separating prototypes from the original design, linking arrows with auto animate, and building language dropdown interactions for multilingual sites.
Prototyping 25:11
Prototyping 312:18
Demonstrate prototyping in Adobe XD by turning design mode into prototype mode, animating dropdowns and arrows, and exporting assets with a style guide for developers.

Creating Style Guide18:44
Sharing With Client10:12
Learn how to share design prototypes with clients for review and development, adjust link permissions, enable comments, record walkthrough videos, and export assets for web and developers.
Packaging Structure2:24
Exporting Assets12:00
Export assets for developers from Adobe XD by batching logos, hero images, icons, buttons, and dropdown backgrounds at 1x and 2x, organized for easy handoff.
Delivering To Client4:50

Requirements

Adobe Xd. You can download it from Adobe's website
For Windows users Windows 10. Adobe Xd does not work in Windows 7 or 8.
No previous Adobe XD experience required.
No previous design experience required.
There is no coding in this course.

Description

When you design a website it's more important that it converts, then to have a trendy design. Because website is there to sell a service or a product so you have to design with that in mind.

Knowing how to structure a page for high conversion is really important because it makes you more valuable to client and more desirable as a designer. Using Adobe Xd to create it gives you unlimited possibilities because it's free, cross platform, vector based and it has regular updates.

Hey there my name is Alex and in this course you will learn:

Secrets of the good design brief
What makes the good landing page
How to create landing pages that convert
How to apply those principles to plan, draw and create a wireframe
Add images, icons and shadows to create a design
Then add movement and transitions to create prototypes
Share the work with your client to get feedback
And finally, how to export your assets for developers

You don't need any previous knowledge of UI / UX or Adobe Xd, we are going to cover it all in this course. All you need is an interest in this field and you will do well by the end of this course.

Through this course you will also learn about important resources which you can use in your work, that will save you hours and sometimes even months of your projects. Hours that you can charge extra for, while keeping your free time.

So what are you waiting for? Click enroll and i'll see you in class.

Have a creative day!

Aleksandar

Who this course is for:

Anyone interested in UI / UX design
Anyone interested in Adobe Xd and it's lightning speed
Beginners and newbies but also for mediors, looking to expand their knowledge
Designers looking to switch to UI / UX
For anyone who needs a UI / UX design experience in their portfolio

Website Design From Scratch In Adobe Xd

What you'll learn

Explore related topics

Course content

Project Overview5 lectures • 52min

Landing Page Anatomy5 lectures • 28min

Design Process4 lectures • 27min

Wireframing10 lectures • 1hr 30min

Design9 lectures • 1hr 7min

Prototyping4 lectures • 29min

Exporting Designs5 lectures • 48min

Conclusion And Resources4 lectures • 8min

Requirements

Description

Who this course is for: