Overview: Web design is a crucial skill in today’s digital world, and Adobe XD is a powerful tool for creating …
Upon successful completion of the Web Design with Adobe XD course, learners can obtain both a PDF certificate and a Hard copy certificate for completely FREE. The Hard copy certificate is available for a nominal fee of £3.99, which covers the delivery charge within the United Kingdom. Additional delivery charges may apply for orders outside the United Kingdom.
| Introduction | |||
| What You Will Find in This Course | 00:02:00 | ||
| Basic Concepts | |||
| What Is Adobe XD | 00:03:00 | ||
| The Starter Version | 00:02:00 | ||
| How to Download Adobe Xd | 00:02:00 | ||
| Getting To Know the Program | |||
| The Home Screen | 00:04:00 | ||
| The Workspace | 00:04:00 | ||
| Designing vs Prototyping in Xd | 00:02:00 | ||
| Your First New Document | |||
| Creating a New File | 00:03:00 | ||
| Managing Artboards | 00:03:00 | ||
| Layers | 00:03:00 | ||
| Tools Overview | 00:12:00 | ||
| Plugins and Assets | |||
| Adding And Managing Plugins | 00:03:00 | ||
| Plugins You Are Most Likely to Use in Your Designs | 00:09:00 | ||
| How To Use the Document Assets | 00:03:00 | ||
| Quick Introduction to Design Systems in Xd | 00:03:00 | ||
| Getting Ready to Start Designing | |||
| How to Choose the Right Colors for Your Designs | 00:04:00 | ||
| 5 Tools To Find the Right Colors for Your Layouts | 00:07:00 | ||
| How To Choose The Right Typeface for Your Website Designs | 00:08:00 | ||
| Best Practices Of Web Design | 00:07:00 | ||
| The Design and the Prototype Process | |||
| The Project Overview | 00:02:00 | ||
| Let’s Create a New File First | 00:05:00 | ||
| Finding the Right Colors for Our Design | 00:04:00 | ||
| Add the Colors and Fonts | 00:06:00 | ||
| Let’s Add the Logo and the Navigation | 00:04:00 | ||
| Let’s Prototype Our First Element | 00:08:00 | ||
| Let’s Add the Active State and the First Hero Elements | 00:05:00 | ||
| Let’s Start the Mobile Version of the Design | 00:07:00 | ||
| Let’s Add the Mobile Menu | 00:06:00 | ||
| Let’s Learn a Better Way of Animating the Menu Icon | 00:11:00 | ||
| Let’s Add More Hero Elements | 00:05:00 | ||
| Let’s Add the Social Media Icons | 00:05:00 | ||
| Let’s Make the Hero Section Responsive | 00:03:00 | ||
| Let’s Start the Services Section | 00:04:00 | ||
| Let’s Add the Services | 00:15:00 | ||
| Let’s Add the Call to Action Button | 00:02:00 | ||
| Let’s Make the Services Responsive | 00:10:00 | ||
| Let’s Start Adding the Portfolio Items | 00:09:00 | ||
| Let’s Finish the Portfolio | 00:08:00 | ||
| Let’s Make the Portfolio Responsive | 00:07:00 | ||
| Let’s Add an Image Carousel | 00:12:00 | ||
| Let’s Start Adding the Blog Section | 00:05:00 | ||
| Let’s Start Adding the Blog Post Excerpts | 00:13:00 | ||
| Let’s Set Up Blog Pages | 00:12:00 | ||
| Let’s Learn Some Pagination Fx | 00:08:00 | ||
| Let’s Set Up the Single Post Page and Finish the Section | 00:08:00 | ||
| Let’s Add the About Me Section | 00:11:00 | ||
| Let’s Add the Contact Me Section | 00:13:00 | ||
| Let’s Add the Footer | 00:09:00 | ||
| Let’s Make the Footer Responsive | 00:02:00 | ||
| The Finishing Touches | 00:03:00 | ||
| How To Share Your Project | |||
| Sharing by Exporting | 00:05:00 | ||
| The Share Workspace | 00:03:00 | ||
| What File Formats You Should Use to Deliver the File to the Client | 00:02:00 | ||
| Summary | |||
| Final Thoughts | 00:02:00 | ||