UI & UX Web Design using Adobe XD - User Experience Design
Offered By: Skillshare
Course Description
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
Taught by
Daniel Walter
Related Courses
Introduction to Graphic DesignCanva via OpenLearning HTML5 Canvas
Udacity Introdución a la Cultura Visual: los fundamentos artísticos
Build Academy via EdCast Inglés Empresarial: el márketing y ventas
Arizona State University via Coursera مقدمة في التصميم الجرافيكي
Edraak