UI & UX Web Design using Adobe XD - User Experience Design

Go to class
Write Review

Free Online Course: UI & UX Web Design using Adobe XD - User Experience Design provided by Skillshare is a comprehensive online course, which lasts for 5 hours worth of material. The course is taught in English and is free of charge. UI & UX Web Design using Adobe XD - User Experience Design is taught by Daniel Walter.

Overview
  • Overview

    Hi there, my name is Dan & I am an Adobe Certified Instructor. Together we are going to learn how to use Adobe XD. We will use this UX and UI design tool to create a beautiful User Interface & streamlined User Experience.  

    During our course we will use an actual freelance project which I am working on. It’s a project that needs both a website interface & a mobile app, so it will give you a good idea of how to manage your own UX projects.  

    This course is aimed at people new to design & user experience. We will start right at the beginning and work our way through step by step. 

    First I’ll show you how to construct a good brief & UX persona. Then you will learn to create simple wireframes, from there we will learn how to implement colours & images correctly in your designs. You will learn learn the do's and don'ts of choosing fonts for web & mobile apps. We will also cheat a little by exploring pre-made UI kits to speed up our workflow. 

    We will build & prototype both a website design and a mobile app design, connecting pages and also adding full interactivity ready for user testing. I will share with you all the secret tricks inside Adobe XD that help you speed up repetitive tasks and we will work all the way through to exporting correct files & creating your design specs. 

    There is a project for you to complete during this class which will help develop your skills and will give you something for your own portfolio.

    It is now time to upgrade yourself & learn Adobe XD. 

    Get your downloadable exercise files here.

    Get your downloadable completed files here.

    What are the requirements?

    • You will need a copy of Adobe XD 2018 or above. A free trial can be downloaded from Adobe.
    • No previous design experience is needed.
    • No previous Adobe XD skills are needed.

    What am I going to get from this course?

    • 42 lectures of well-structured, step by step content.
    • Learn to design websites & mobile phone apps.
    • Work with fonts & colors. 
    • Prototype your designs with interactions. 
    • Test on mobile phones. 
    • Send your designs for feedback & commenting.
    • Export production ready assets. 
    • Create your first UX brief & persona. 
    • Create quick wireframes. 
    • How to use premade UI kits. 
    • Learn professional workflow tricks & shortcuts. 
    • You will get the finished files so you never fall behind
    • Downloadable exercise files
    • Forum support from me and the rest of the BYOL crew
    • All the techniques used by UX professionals

    What is the target audience?

    • This course is for beginners. 
    • Aimed at people new to the world of design & user experience. 
    • No previous Adobe XD experience is necessary.
    • For anyone that needs to add ‘UX Design’ to their portfolio.

Syllabus
    • Introduction to Adobe XD
    • Getting started with your Adobe XD project
    • What is UI vs UX User Interface vs User Experience
    • The brief persona for our real life project B
    • Wireframing low fidelity in Adobe XD
    • Working with existing UI kits in Adobe XD
    • Working with type in your XD wireframes
    • How to create forms checkboxes buttons in Adobe XD
    • Free icons for your Adobe XD UX UI projects
    • ProtoTyping adding interactivity to Adobe XD
    • Production video student views
    • How to make use symbols in Adobe XD
    • Using the repeat grid in Adobe XD
    • Mocking up an App in Adobe XD
    • How to use the XD App on iPhone Android
    • Production Video Sign up screen Dashboard
    • Sharing Wireframes for comments in Adobe XD
    • Mood Boards resources for Hi fidelity UI design in Adobe UX
    • Why do you need a 12 column grid in Adobe XD
    • how to create a 12 Column Grid in Adobe XD 2018
    • Working with colors inside Adobe XD CC
    • Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD
    • How to use Character Styles in Adobe XD
    • Creating realistic buttons in Adobe XD with paste properties
    • How to draw your own custom icons in Adobe XD
    • How to make a gradient blur in Adobe XD
    • The pros cons for working with images inside Adobe XD
    • Working with Illustrator Photoshop InDesign in Adobe XD
    • How to mask in Adobe XD
    • Production Video Adding text fields buttons in Adobe XD
    • How to make a popup model in Adobe XD with a blurred background
    • Creating 12 column card dashboard using the repeat grid tool in Adobe XD
    • How to make a mobile phone mockup with Adobe XD Photoshop
    • Make an APP version of your Adobe XD UX project
    • Hidden features for Adobe XD Repeat Grid
    • Advanced prototyping using buttons dropdown menus in Adobe XD
    • One more Prototype trick faking depth of field for mockup
    • UX User Testing in Adobe XD
    • How to export images code from Adobe XD for developers
    • Class Project for Adobe XD
    • Shortcuts & Cheat Sheet for Adobe XD
    • Conclusion for Adobe XD training course