Description

This course will guide you on how to design a responsive website from scratch without any previous experience in Adobe XD. You will also learn the principles of UI and UX and get your design ready for coding.

Create beautiful and responsive website designs in Adobe XD. Adobe XD is the next big thing in terms of design tools. It makes you look like a professional designer even if you are just a beginner. Start right now and take your designs to another level. This course will show you how you can design a beautiful website from scratch without any previous experience. This course will cover essential exercises that will teach you how to work like a professional; a complete web design project, from start to finish, both the desktop version and the responsive version; how to prepare the design for coding; how to understand what clients want and how to help them achieve their goals; and UI and UX principles that will help you design any website, no matter the style or client. This course is designed for anyone who is interested in web design-from beginners to professionals, from designers to coders, from business owners to someone who is looking to start a new career or earn some money. At the end of this course, you will not only have a beautiful project for your portfolio but also a deep understanding of what makes a website design successful. The code bundle for this course is available at https://github.com/PacktPublishing/Adobe-XD-for-Web-Design-Essential-Principles-for-UI-and-UX

What You Will Learn

Design modern websites in Adobe XD
Learn the principles of UI and UX
Create beautiful designs for real companies
Learn how to prepare a design for coding
Essential exercises that will teach you how to work like a professional
How to prepare the design for coding

Audience

This course is designed for anyone who is interested in web design: from beginners to professionals, from designers to coders, from business owners to someone who is looking to start a new career or earn some money-with or without any previous experience. You will just need Adobe XD; it's a free design program from Adobe.

Approach

This is a project-based course where we will be designing a responsive website for desktop and mobile versions.

Key Features

A complete web design project, from start to finish, both the desktop and the responsive versions * Learn UI and UX principles that will help you design any website, no matter the style or client * How to understand what clients want and how to help them achieve their goals

Github Repo

https://github.com/PacktPublishing/Adobe-XD-for-Web-Design-Essential-Principles-for-UI-and-UX

About the Author

Cristian Doru Barin

Chris Barin is a seasoned web and app designer with extensive Photoshop experience. As an Adobe Certified Instructor and Photoshop Expert, he has gained the trust of over 270,000 students worldwide. Chris's courses are practical and result-driven, emphasizing efficiency. From his freelance beginnings to running a successful Android design studio, he has earned over $50k and amassed 100 million app downloads. Passionate about teaching, Chris shares his experiences vocally, offering top-rated/best-selling courses on Udemy. His responsiveness, clear explanations, and effective teaching style have a huge fan following. He loves to connect with learners to enhance their learning experience and gain valuable insights into the design industry.

Course Outline

1. Getting Started with Web Design

In this section, we will get started with the basics of web design.

1. Introduction

This is an introductory video to this section.

2. Quick Answers to Popular Questions

In this video, let us look at some quick answers to popular questions.

3. Web design - What You Need to Know

In this video, let us understand what web design is and what you need to know about it.

4. How to Select Layers like a Professional Designer

In this video, we will understand how to select layers like a professional designer.

5. Exercise: Practice Your Selecting

In this exercise video, we will practice your selecting.

6. Here's what Coders Do with Our Designs

In this video, let us understand what coders do with our designs.

7. Exercise: Test Your Skills and Attention to Detail

In this exercise video, we will test your skills and attention to detail.

8. Solving the Previous Exercise

In this video, we will be solving the previous exercise.

9. The Three Keys to Becoming a Great Web Designer

In this video, we will look at the three keys to becoming a great web designer.

2. Our First Complete Responsive Website Design Project

In this section, let us create and build our first complete responsive website design project.

1. The Most Important Question when Starting a New Project

In this video, we will look at the most important question when starting a new project.

2. How to Research/Find Inspiration for Your Project

In this video, we will understand how to research/find inspiration for your project.

3. Set Up the Most Important Part of the Layout

In this video, we will set up the most important part of the layout.

4. Create the Top Bar

In this video, we will create the top bar.

5. How to Choose Fonts for Your Project

In this video, we will understand how to choose fonts for your project.

6. How to Choose Beautiful Colors

In this video, we will understand how to choose beautiful colors.

7. Organize the Top Bar

In this video, we will organize the top bar.

8. Create the Structure for the Header

In this video, we will create the structure for the header.

9. Set a Style for the Header

In this video, we will set a style for the header.

10. Attention to Detail in the Header

In this video, we will learn to pay attention to detail in the header.

11. Building a Great Hero Area

In this video, we will be building a great hero area.

12. Redesign the Categories Menu

In this video, we will redesign the categories menu.

13. How to Display All the Product Details in a Grid

In this video, we will understand how to display all the product details in a grid.

14. Here's How You Find the Best Layout for the Grid of Products

In this video, let us understand how you find the best layout for the grid of products.

15. Create the First Version of the Product Card

In this video, we will create the first version of the product card.

16. The Second Version of the Product Card

In this video, we will look at the second version of the product card.

17. The Third Version of the Product Card

In this video, we will look at the third version of the product card.

18. How to Design a Clean and Modern FAQ Section

In this video, we will understand how to design a clean and modern FAQ section.

19. Create a Newsletter Sign Up Form

In this video, we will create a newsletter sign up form.

20. How to Design a Beautiful Footer

In this video, we will understand how to design a beautiful footer.

21. Final Variation and Thoughts About the Homepage

In this video, we will work on the final variation and thoughts about the homepage.

3. How to Create Interior Pages

In this section, let us look at how to create interior pages.

1. Analyzing How We can Improve the Product Page

In this video, we will be analyzing how we can improve the product page.

2. Setting Up the Layout for the Top Part of the Product Page

In this video, we will be setting up the layout for the top part of the product page.

3. How to Organize Lots of Information on the Product's Page

In this video, we will understand how to organize lots of information in the product's page.

4. How to Add Small Details that Make a Difference

In this video, we will understand how to add small details that make a difference.

5. How to Handle Large Quantities of Text

In this video, we will understand how to handle large quantities of text.

6. Creating the Sidebar

In this video, we will be creating the sidebar.

4. How to Create a Responsive Design

In this section, let us look at how to create a responsive design for mobile version.

1. Introduction to the Mobile Version

This is an introductory video to the mobile version.

2. How to Start the Mobile Version for the Homepage

In this video, we will understand how to start the mobile version for the homepage.

3. How to Adjust the Top Bar for the Mobile Version

In this video, we will understand how to adjust the top bar for the mobile version.

4. Here's How You Create the Header for the Mobile Version

In this video, let us understand how you create the header for the mobile version.

5. Modify the Hero Area and Categories for the Mobile Version

In this video, we will modify the hero area and categories for the mobile version.

6. Improve the Navigation for the Mobile Experience

In this video, we will learn how to improve the navigation for the mobile experience.

7. Create a Grid of Products Suited for the Mobile Version

In this video, we will create a grid of products suited for the mobile version.

8. Finishing the Grid of Products - Mobile Version

In this video, we will be finishing the grid of products - mobile version.

9. Make the Text Easy to Read in the FAQ Section

In this video, we will make the text easy to read in the FAQ section.

10. How to Make the Newsletter Form Fit the Mobile Version

In this video, we will understand how to make the newsletter form fit the mobile version.

11. Make a New Layout for the Footer

In this video, we will make a new layout for the footer.

12. Conclusions: E-Commerce Mobile Version

In this video, let us conclude the e-commerce mobile version.

5. Responsive Design for Interior Pages

In this section, we will work on responsive design for interior pages.

1. The Mobile Version for the Product's Page

In this video, we will look at the mobile version for the product's page.

2. Create the Mobile Structure for the Product's Page

In this video, we will create the mobile structure for the product's page.

3. How to Style Items in Terms of their Importance

In this video, we will understand how to style items in terms of their importance.

4. Create a Variation to Improve Sales

In this video, we will create a variation to improve sales.

5. 10% More Work for 50% Better Results

In this video, we will understand why 10% more work is needed for 50% better results.

6. Create Another Layout for the Product's Page

In this video, we will create another layout for the product's page.

7. Make a Smarter Structure for the Mobile Version

In this video, we will make a smarter structure for the mobile version.

8. Create Reviews and Nutritional Tabs

In this video, we will create the reviews and nutritional tabs.

9. Adding Small Details that Matter

In this video, we will be adding small details that matter.

10. Checking the Design on a Real Phone

In this video, we will be checking the design on a real phone.

11. Incredible Variations in No Time at All

In this video, we will work on incredible variations in no time at all.

6. Prepare the Design for Coding

In this section, let us see how to prepare the design for coding so that coders or developers can work with it.

1. Preparing the Design for Coding

In this video, we will be preparing the design for coding.

2. How to Give the Coder what They Need from Adobe XD

In this video, we will understand how to give the coder what they need from Adobe XD.

3. How to Prepare Graphics for Coding

In this video, we will understand how to prepare graphics for coding.

4. Server-Side Content and Multi-Layer Graphics

In this video, we will work on the server-side content and multi-layer graphics.

5. Getting Up and Running with Zeplin

In this video, we will be getting up and running with Zeplin.

6. Best Way to Handle Assets for the Coders

In this video, we will work on the best way to handle assets for the coders.

7. Here's Why it is Essential You Deliver what is Needed

In this video, let us understand why it is essential you deliver what is needed.

8. How the Coder Sees the Projects

In this video, we will understand how the coder sees the projects.

7. The First Key to Becoming a Great Web Designer

In this section, we will cover the first essential pillar to become a great web designer by understanding execution mistakes.

1. The First Pillar of Web Design

In this video, we will look at the first pillar of web design.

2. Best Settings for a Web Design Project

In this video, we will work on the best settings for a web design project.

3. Case Study: Non-Standard Layouts

In this video, we will look at a case study for non-standard layouts.

4. Exercise: Create a Standard Website Layout

In this exercise video, we will create a standard website layout.

5. How to Size Your Web Elements Correctly

In this video, we will understand how to size your web elements correctly.

6. My Formula for Perfect Text

In this video, we will see my formula for perfect text.

7. Case Study: Text Layers

In this video, we will look at a case study for text layers.

8. Color Contrast

In this video, we will work on the color contrast.

9. Case Study: Colors - Part 1

In this video, we will look at a case study for colors - part 1.

10. Case Study: Colors - Part 2

In this video, we will look at a case study for colors - part 2.

11. How to Align Elements in the Hero Area

In this video, we will understand how to align elements in the hero area.

12. 3 Rules for Web Design Icons

In this video, we will work on the 3 rules for web design icons.

13. Case Study: Visual Balance

In this video, we will look at a case study for visual balance.

14. Thoughts on the First Pillar of Web Design

In this video, we will wrap up thoughts on the first pillar of web design.

8. The Second Key to Becoming a Great Web Designer

In this section, we will cover the second pillar to becoming a great web designer, which is understanding the client's need.

1. Introduction

This is an introductory video to this section.

2. What's the Point of the Website?

In this video, we will understand what's the point of the website.

3. The User Versus the Business Owner

In this video, we will look at the user versus the business owner.

4. Analytics in Web Design

In this video, we will cover analytics in web design.

5. Templates and Website Builders - the Web Designer's Death?

In this video, we will look at templates and website builders - the web designer's death?

6. Case Study: 4 Versions of the Same Website

In this video, we will look at a case study for 4 versions of the same website.

7. E-Commerce Homepage Layout

In this video, we will work on the e-commerce homepage layout.

8. E-Commerce Product Details

In this video, we will work on the e-commerce product details.

9. E-Commerce Checkout

In this video, we will work on the e-commerce checkout.

10. Why aren't Websites Pixel Perfect?

In this video, we will understand why websites aren't pixel perfect.

11. Landing Page Versus a Website

In this video, we will understand the difference between landing page and website.

12. Case Studies: the Client's Needs

In this video, we will look at a case study for the client's needs.

13. Lead Generation in Landing Pages

In this video, let us explore an impressive landing page.

14. Why Landing Pages Have a Bad Reputation

In this video, we will understand why landing pages have a bad reputation.

15. Digital Product Landing Page

In this video, we will work on the digital product landing page.

16. A/B Testing Landing Pages

In this video, we will work on the A/B testing landing pages.

17. Case Study: Landing Page Analysis

In this video, we will look at a case study for landing page analysis.

18. Final Thoughts About the Client's Needs

In this video, we will wrap up the final thoughts about the client's needs.

9. The Third Key to Becoming a Great Web Designer

In this section, we will see that the third pillar to becoming a great web designer is to pay attention to details.

1. Introduction

This is an introductory video to this section.

2. What is UX?

In this video, we will understand what is UX.

3. The Best Example of Good UX and Attention to Detail

In this video, we will look at the best example of good UX and attention to detail.

4. Improve the Checkout Process to Double Sales

In this video, we will learn how to improve the checkout process to double sales.

5. Improve the Mobile Version to Double Sales

In this video, we will learn how to improve the mobile version to double sales.

6. 7 Website Tweaks that Show Attention to Detail

In this video, we will cover the 7 website tweaks that show attention to detail.

7. Upgrading the Mobile Product Page

In this video, we will be upgrading the mobile product page.

8. Doing 1-on-1 Sessions with a Coder

In this video, we will be doing 1-on-1 sessions with a coder.

10. Course Conclusion

In this section, we will wrap up and conclude our course.

1. What's next?

In this video, we will see what's next for you.

Course Images

Adobe XD for Web Design: Essential Principles for UI and UX

By Packt

Booking options

Highlights

Description

Course Content

About The Provider

Tags

Reviews