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

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.

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.

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.

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.

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.

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.

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.

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.

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.

1. What's next?

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