
Master Adobe XD fundamentals to design and prototype responsive mobile apps and websites. Explore wireframes, artboards, repeat grids, color styles, logo design, and interactive prototypes with sharing.
Discover how to manage your Adobe account, view your seven-day trial status, cancel or upgrade from the account website, and avoid billing surprises.
Create a perfect 400 pixels by 400 pixels circle with orange fill and a black border using the ellipse tool and Shift. Copy appearances and use eyedropper to sample colors.
Learn how to add and style text in Adobe XD, switching between point and paragraph text, adjusting font, size, weight, letter spacing, line height, and auto height/width, with font customization.
Discover how grids in Adobe XD align and distribute objects on art boards. Use layout and square grids, adjust columns, gutters, margins, and manage defaults for web layouts.
Complete low-fidelity wireframes for a restaurant app, detailing profile menu, payments, and an order flow with item cards, calories, price, and delivery progress.
Design and implement a cohesive navigation structure in an iOS app using the Apple design kit in XD, including iOS 15 design template, SF Pro fonts, and cross-page navigation bars.
Convert the login button into a reusable component, create a main component with instances, and rely on overrides to propagate changes across the design.
Design a restaurant menu page with category sections and card-based items. Create reusable food item components, use instances and states, and employ stacks to organize items in XD.
Design the order page in Adobe XD by adding item cards, a delivery address section, and a subtotal, tax, and delivery fees, then place order with a color variant button.
Add icons to profile page buttons in Adobe XD by importing icons from Flat Icon, creating a light version with icon left, and aligning colors and sizes for consistency.
Finish the location page by adding drop shadows to shapes, text boxes, and icons, then design history card showing restaurant name, total, item count, and date/time as a reusable component.
Adobe XD's responsive resize adapts designs to multiple screen sizes with auto mode, manual fixes, and image scaling, while preserving groups and components.
Learn how to perform a developer handoff in Adobe XD by sharing development-ready assets, specs, and CSS code, with colors, fonts, and component states for web, EOS project, or Android.
Discover how to import sketch files into Adobe XD, bring over components, and continue editing, while ensuring fonts are installed and managing multi-page canvases.
Use the prototype tab to connect pages and design a splash-to-login flow with dissolving transitions, duration and easing settings, then preview the automated sequence.
Import a video into the login page from assets, resize to fit, center, and anchor at the bottom. Keep it under 15 MB, enable loop, mute, and set a thumbnail.
Design a one-page landing page for healthy bites in Adobe XD, featuring a hero section, app download, restaurant cards, and a contact form, using the Bootstrap XD kit.
Design a four-section landing page by crafting a low-fidelity wireframe in Adobe XD, using a 12-column layout grid, navigation bar, and placeholder sections for a future mockup.
Apply Bootstrap UI kit cards to build a restaurant section on the landing page, using repeat grids for a horizontal restaurant card layout and group components for text and images.
Design the contact us section with a left form featuring name and email fields and a right team image, using Bootstrap UIKit and a clean card layout.
Design and prototype with adobe xd to showcase mobile app and website for food delivery service health bites, using components, repeat grid, stacks, animations, and plugins to polish the product.
In this course, you'll learn how to create beautiful mobile & web user interfaces that you can then turn into real usable prototypes with the help of Adobe XD.
Adobe XD is a vector-based user experience design tool for web apps and mobile apps, developed by Adobe Inc. It's available for macOS and Windows.
In this course, we'll work with a fictional client called Healthy Bites to design a mobile app and a landing page for their food ordering app.
Is this course for you?
You're in the right place if any of these apply to you:
You’re interested in user interface & user experience design (UI/UX) but not sure where to start.
You’re an entrepreneur with an app idea and want to turn your idea from a sketch to a realistic mockup and prototype.
You want to brush up your design skills to get the job that you want at companies like Airbnb, Google, Apple, etc.
You’re already designing and want to jump into Adobe XD and further your knowledge of more design software.
You’re interested in earning income as a freelance designer.
You simply want to enter a new career path, and graphic design has interested you.
By the end of this course:
You will learn many useful design tools available in XD and how to design complete mobile apps and landing pages from scratch. You will also gain the skill to turn your designs into usable prototypes that you can share with your team members, colleagues, or clients.
What do I need?
This course is for both beginners & experienced designers looking to expand their skills.
All you need is a computer (macOS or Windows), an Adobe Account, and a web browser (to Install Adobe Creative Cloud).
About your instructor:
This course is taught by entrepreneur & designer Nima Tahami. Nima has more than 12 years of experience designing and developing dozens of mobile apps and web apps for both clients and startups of his own. Nima's latest startup, ShiftRide, has been covered in many news outlets, including Forbes, where his app was highlighted for its ease of use.
Nima has created this course to help people become the best designer they can be. Design is part of the foundation of many things from great products & websites to great advertisements and everything in between. Nima has also designed and developed an open-source iPhone development library by the name of FCAlertView, helping 350,000+ app developers use beautiful customizable alert prompts within their applications.
Course Overview:
The course is broken down into 4 main parts: Getting Introduced to Adobe XD, Designing a Full Mobile Mockup, Creating a Usable Prototype, and Designing a Landing Page.
Getting Introduced to Adobe XD:
Installing Adobe XD and Creating Files.
Understanding the layout and menu options.
Creating shapes, lines, paths, and text.
Aligning & distributing objects.
Using Wireframe UI Kits.
Designing a Full Mobile Mockup:
Introducing a food ordering app project called Healthy Bites.
Creating wireframes from our app requirements.
Designing the pages required for the app.
Designing cards and inputting sample data.
Using repeat grid & stacks.
Using components to reuse objects.
Using plugins to speed up our design process.
Using responsive resize to create designs.
Exporting and sharing our designs.
Developer handoff
Creating a Usable Prototype:
Adding interactivity to our designs and turning them into a prototype.
Creating scrollable pages.
Previewing our app on the desktop.
Browsing our prototype on our mobile devices.
Recording and sharing prototypes
Adding animations to our prototypes.
Designing a Landing Page:
Designing a landing page with multiple sections
Creating beautiful backgrounds
Adding images & text to our landing page
So what are you waiting for?
Let’s get started learning how to design real-world projects using Adobe XD and take our design skills to a whole new level together.