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

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

by Cristian Doru Barin
Released July 2021
Publisher(s): Packt Publishing
ISBN: 9781803230979

Read it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

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.

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.

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.

Table of contents

  1. Chapter 1 : Getting Started with Web Design
    1. Introduction
    2. Quick Answers to Popular Questions
    3. Web design - What You Need to Know
    4. How to Select Layers like a Professional Designer
    5. Exercise: Practice Your Selecting
    6. Here's what Coders Do with Our Designs
    7. Exercise: Test Your Skills and Attention to Detail
    8. Solving the Previous Exercise
    9. The Three Keys to Becoming a Great Web Designer
  2. Chapter 2 : Our First Complete Responsive Website Design Project
    1. The Most Important Question when Starting a New Project
    2. How to Research/Find Inspiration for Your Project
    3. Set Up the Most Important Part of the Layout
    4. Create the Top Bar
    5. How to Choose Fonts for Your Project
    6. How to Choose Beautiful Colors
    7. Organize the Top Bar
    8. Create the Structure for the Header
    9. Set a Style for the Header
    10. Attention to Detail in the Header
    11. Building a Great Hero Area
    12. Redesign the Categories Menu
    13. How to Display All the Product Details in a Grid
    14. Here's How You Find the Best Layout for the Grid of Products
    15. Create the First Version of the Product Card
    16. The Second Version of the Product Card
    17. The Third Version of the Product Card
    18. How to Design a Clean and Modern FAQ Section
    19. Create a Newsletter Sign Up Form
    20. How to Design a Beautiful Footer
    21. Final Variation and Thoughts About the Homepage
  3. Chapter 3 : How to Create Interior Pages
    1. Analyzing How We can Improve the Product Page
    2. Setting Up the Layout for the Top Part of the Product Page
    3. How to Organize Lots of Information on the Product's Page
    4. How to Add Small Details that Make a Difference
    5. How to Handle Large Quantities of Text
    6. Creating the Sidebar
  4. Chapter 4 : How to Create a Responsive Design
    1. Introduction to the Mobile Version
    2. How to Start the Mobile Version for the Homepage
    3. How to Adjust the Top Bar for the Mobile Version
    4. Here's How You Create the Header for the Mobile Version
    5. Modify the Hero Area and Categories for the Mobile Version
    6. Improve the Navigation for the Mobile Experience
    7. Create a Grid of Products Suited for the Mobile Version
    8. Finishing the Grid of Products – Mobile Version
    9. Make the Text Easy to Read in the FAQ Section
    10. How to Make the Newsletter Form Fit the Mobile Version
    11. Make a New Layout for the Footer
    12. Conclusions: E-Commerce Mobile Version
  5. Chapter 5 : Responsive Design for Interior Pages
    1. The Mobile Version for the Product's Page
    2. Create the Mobile Structure for the Product's Page
    3. How to Style Items in Terms of their Importance
    4. Create a Variation to Improve Sales
    5. 10% More Work for 50% Better Results
    6. Create Another Layout for the Product's Page
    7. Make a Smarter Structure for the Mobile Version
    8. Create Reviews and Nutritional Tabs
    9. Adding Small Details that Matter
    10. Checking the Design on a Real Phone
    11. Incredible Variations in No Time at All
  6. Chapter 6 : Prepare the Design for Coding
    1. Preparing the Design for Coding
    2. How to Give the Coder what They Need from Adobe XD
    3. How to Prepare Graphics for Coding
    4. Server-Side Content and Multi-Layer Graphics
    5. Getting Up and Running with Zeplin
    6. Best Way to Handle Assets for the Coders
    7. Here's Why it is Essential You Deliver what is Needed
    8. How the Coder Sees the Projects
  7. Chapter 7 : The First Key to Becoming a Great Web Designer
    1. The First Pillar of Web Design
    2. Best Settings for a Web Design Project
    3. Case Study: Non-Standard Layouts
    4. Exercise: Create a Standard Website Layout
    5. How to Size Your Web Elements Correctly
    6. My Formula for Perfect Text
    7. Case Study: Text Layers
    8. Color Contrast
    9. Case Study: Colors – Part 1
    10. Case Study: Colors – Part 2
    11. How to Align Elements in the Hero Area
    12. 3 Rules for Web Design Icons
    13. Case Study: Visual Balance
    14. Thoughts on the First Pillar of Web Design
  8. Chapter 8 : The Second Key to Becoming a Great Web Designer
    1. Introduction
    2. What's the Point of the Website?
    3. The User Versus the Business Owner
    4. Analytics in Web Design
    5. Templates and Website Builders – the Web Designer's Death?
    6. Case Study: 4 Versions of the Same Website
    7. E-Commerce Homepage Layout
    8. E-Commerce Product Details
    9. E-Commerce Checkout
    10. Why aren't Websites Pixel Perfect?
    11. Landing Page Versus a Website
    12. Case Studies: the Client's Needs
    13. Lead Generation in Landing Pages
    14. Why Landing Pages Have a Bad Reputation
    15. Digital Product Landing Page
    16. A/B Testing Landing Pages
    17. Case Study: Landing Page Analysis
    18. Final Thoughts About the Client's Needs
  9. Chapter 9 : The Third Key to Becoming a Great Web Designer
    1. Introduction
    2. What is UX?
    3. The Best Example of Good UX and Attention to Detail
    4. Improve the Checkout Process to Double Sales
    5. Improve the Mobile Version to Double Sales
    6. 7 Website Tweaks that Show Attention to Detail
    7. Upgrading the Mobile Product Page
    8. Doing 1-on-1 Sessions with a Coder
  10. Chapter 10 : Course Conclusion
    1. What's next?

Product information

  • Title: Adobe XD for Web Design: Essential Principles for UI and UX
  • Author(s): Cristian Doru Barin
  • Release date: July 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781803230979