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