Library

Course: Adobe XD UI/UX Design, Prototype and Handoff from Scratch

Adobe XD UI/UX Design, Prototype and Handoff from Scratch

  • Life Time Access
  • Certificate on Completion
  • Access on Android and iOS App
  • Self-Paced
About this Course

Adobe XD is a powerful tool for UI/UX designers giving you the power to design and prototype an entire app, all from one program. 

This course starts off with Adobe XD basics and quickly gets up to speed on designing and prototyping a full fledged app with amazing images, colors, and animations.

You will learn:

  • How to navigate around the interface and toggle on/off the panels you wish to use
  • How to set up art boards to rapidly assemble wireframes
  • how to make your art boards responsive using auto-resize
  • How to design icons using the pen tool and boolean effects
  • How to convert icons and buttons into symbols to reuse across your entire project
  • How to apply text and color style presets and change on the fly
  • How to use the repeat grid to create fast, repeating columns and/or rows
  • How to prototype and test your prototype within seconds
  • How to share projects, prototypes, and design assets
  • and much much more

When you're through with this course, you will be able to share a complete design and prototype with friends and colleagues that they can interact with directly on their phone or desktop.

Who this course is for: 

  • UI/UX designers who want to improve their skills and learn the latest design tools
  • Photoshop or Illustrator users who want to switch to a program dedicated exclusively for UX design
  • SketchApp users who want an all-in-one solution for designing and prototyping
  • Product Managers who want to increase their design skills to create better products and communicate more effectively with developers
  • Anyone who wants to learn Interface Design
  • Anyone who wants to learn User Experience Design
Basic knowledge
  • You should be know how to navigate around your Mac or PC
  • You will need Adobe XD installed on your computer. You can download the free beta version for mac or windows
What you will learn
  • You'll learn how to use Adobe XD to design and prototype apps from scratch
  • You'll learn tools that are universal across multiple design apps to enhance your design workflow
  • You'll learn how to incorporate best practices in reusing design elements and styles to increase efficiency
Curriculum
Number of Lectures: 54
Total Duration: 03:46:06
Getting started with this course
  • What is Adobe XD?  
  • Installing Adobe XD  
  • Using the exercise files  
Getting Familiar with Adobe XD
  • About this section  
  • The Start Screen  

    Learn about the start screen and the quick tools that will help you start your first project or your hundredth project in a snap.

  • Learning the Interface  
  • A note to Windows users  
  • Keyboard Shortcut Sheet Sheet  
  • The Menu Bar  
  • The Tools Panel  
  • The properties panel  

    Learn the properties panel and how it changes with each object you select to give you properties relevant to that object.

  • Using The Wireframe UI Template  
  • The Layers Panel  
  • The Assets Panel  
  • Using Keyboard Shortcuts  
  • Copy & Paste Appearances  
  • The Prototype Workspace  
  • Prototype Sharing  
  • Using Device Preview  
Get Started with The Project
  • Introduction to the DoLocal App  
  • Creating Artboards  
  • Grids & Layouts  
  • Creating Content Wireframes  
  • Designing Your Wireframes  
  • Using repeat grids  
  • Adding and formatting text  
  • Adding Images  
  • Working with Object Styles  
  • Working with color  
  • Using Color Assets  
  • Using Character Styles  
Working with images and vectors
  • Importing Icons  
  • Masking images  
  • Preparing Images in Photoshop  
  • Preparing Icons in Illustrator  
Creating Content in Adobe XD
  • Creating a Logo  
  • Creating Icons  
  • Using Symbols  
  • Design Challenge  
  • Completing our Design  
Prototyping and Sharing
  • Why Do We Prototype?  
  • Adding Interactions to your Prototype  
  • Adding Overlays To Your Prototype  
  • Recording Your Prototype to Video  
  • Using Mobile Device Preview  
Prototype Sharing
  • Sharing a Prototype as a Web Link  
  • Embedding Your Prototype In a Web Page  
Developer Handoff
  • Exporting Your Designs and Assets  
  • Creating Design Specs for Developers  
  • Working with 3rd Party Apps like Zeplin and ProtoPie  
Adobe XD for Power Users
  • Importing Sketch & Photoshop Files into XD  
  • Importing Icons from the Web and 3rd Party Tools  
  • Using CC Libraries for Icons & Images  
Resource Files
  • Exercise Files  

    Please find all the relevant resource files here for each chapters.

Reviews (0)