| UX/UI with Figma |
| a. UX Information Architecture |
|
What Is Information Architecture? |
|
Unlimited |
|
What’s the Value of Information Architecture? |
|
Unlimited |
|
The Key Processes for Information Architecture? |
|
Unlimited |
|
How to Define the Information Architecture Of Your Site |
|
Unlimited |
|
What Tools Do Information Architects Use? |
|
Unlimited |
|
Section Review |
|
Unlimited |
| b. User Interface Design |
|
Visual Design Mockups Exploration |
|
Unlimited |
|
Choosing A Design Testing Approach |
|
Unlimited |
|
Qualitative and Quantitative Research |
|
Unlimited |
|
In-Person and Remote Research |
|
Unlimited |
|
Moderated and Automated Techniques |
|
Unlimited |
|
Usability Testing |
|
Unlimited |
|
Research |
|
Unlimited |
|
Logistics |
|
Unlimited |
|
Facilitation |
|
Unlimited |
|
Analyzing Results |
|
Unlimited |
|
Crafting Recommendations |
|
Unlimited |
| c. Flexible Content Strategies |
|
Approaching Content Strategies |
|
Unlimited |
|
Flex Content Creation |
|
Unlimited |
|
CMS’s |
|
Unlimited |
|
Delivering Across Devices |
|
Unlimited |
|
Delivering Across Apps |
|
Unlimited |
|
Flexible Architecture |
|
Unlimited |
|
Personalizing Content |
|
Unlimited |
|
Design Fundamentals and Branding |
|
Unlimited |
| d. Graphic Design Theory |
|
Color Theory |
|
Unlimited |
|
Typography Theory |
|
Unlimited |
|
Photography Theory |
|
Unlimited |
|
Layout Theory |
|
Unlimited |
|
The Legal Side of Design |
|
Unlimited |
| e. Photoshop |
|
Tools and Workspace |
|
Unlimited |
|
Production Tips and Tricks |
|
Unlimited |
|
Image Editing |
|
Unlimited |
|
Using Bridge with Photoshop |
|
Unlimited |
|
Selection Techniques |
|
Unlimited |
|
Painting and Retouching |
|
Unlimited |
|
Color Correction |
|
Unlimited |
|
Layers and Masking |
|
Unlimited |
| f. Illustrator |
|
he Illustrator Workspace |
|
Unlimited |
|
– The Illustrator Workspace |
|
Unlimited |
|
Working with Colors |
|
Unlimited |
|
Using the Drawing Tools |
|
Unlimited |
|
Gradients and Additional Color Options |
|
Unlimited |
|
Adding and Formatting Text |
|
Unlimited |
|
Placing Text on A Path |
|
Unlimited |
|
Working with Layers |
|
Unlimited |
| g. Figma |
|
Figma Tools and Interface |
|
Unlimited |
|
Apple Watch Project |
|
Unlimited |
|
Collaboration in Figma |
|
Unlimited |
|
Components in Figma |
|
Unlimited |
|
Exporting Graphics |
|
Unlimited |
|
Optimizing Vectors |
|
Unlimited |
| h. HTML/CSS |
|
Introduction to CSS3, Basic Selectors |
|
Unlimited |
|
Working with Sizes, Colors and Files, Styling Text |
|
Unlimited |
|
Web Fonts, Gradients without Images |
|
Unlimited |
|
Advanced Selectors, Lists, and Navigation Menus |
|
Unlimited |
|
Exploring Generated Content |
|
Unlimited |
|
Transforms and Transitions |
|
Unlimited |
|
Animating Elements with Keyframes |
|
Unlimited |
|
Styling Tables |
|
Unlimited |
|
Elements Positioning, Working with Layouts |
|
Unlimited |
|
Multi-Column Layouts with CSS3 |
|
Unlimited |
|
Dealing with Cross Browser Layouts |
|
Unlimited |
|
Media Queries, Print CSS3 |
|
Unlimited |
| UI/UX with Adobe |
| Getting Started |
|
Introduction to the User Expereince course |
|
Unlimited |
|
Getting stated with your Adobe XD project |
|
Unlimited |
|
What is UX vs UI vs Product Designer |
|
Unlimited |
| The Brief |
|
The UX brief and persona of our relaife project |
|
Unlimited |
|
Wireframing Low Fidelity |
|
Unlimited |
|
Wireframing (low fidelity) in Adobe XD |
|
Unlimited |
|
How wide should my website or app be in Adobe XD? |
|
Unlimited |
|
Working with existing UI kits in Adobe XD |
|
Unlimited |
| Type, Color, and Icon Introduction |
|
Working with type in your XD wireframes |
|
Unlimited |
|
Basic Colors & buttons in Adobe XD wireframes |
|
Unlimited |
|
Free icons for your Adobe XD & UX UI projects |
|
Unlimited |
|
Adding footers & Lorem Ipsum to our XD wireframe |
|
Unlimited |
|
New Pages & Artboards in Adobe XD |
|
Unlimited |
|
Class Project 01 – Wireframe Homepage & Contact Us Page |
|
Unlimited |
| Prototyping a Website - Introduction |
|
Prototyping & adding interactivity to Adobe XD |
|
Unlimited |
|
How to create a Popup Modal or popup box in Adobe XD |
|
Unlimited |
|
Class project 02 – Prototype |
|
Unlimited |
| Symbols & Repeat Grids |
|
Working with groups & isolation mode in Adobe XD |
|
Unlimited |
|
How to make & use symbols in Adobe XD |
|
Unlimited |
|
Production Video – Left Nav |
|
Unlimited |
|
Using the repeat grid in Adobe XD |
|
Unlimited |
|
Updating symbols & problems with using repeat grids |
|
Unlimited |
|
Prototype Trick to save time in Adobe XD |
|
Unlimited |
|
Navigation tricks & tips in Adobe XD |
|
Unlimited |
|
Class Project 03 – Symbols & Repeat Grids |
|
Unlimited |
| Prototyping a App - Introduction |
|
Mocking up an App in Adobe XD |
|
Unlimited |
|
How to use the XD App on iPhone & Android |
|
Unlimited |
|
Adding iPhone & Android battery & status icons to mockup |
|
Unlimited |
|
How to fixed the position of the nav or battery icons in XD |
|
Unlimited |
|
Production Video – Login & Dashboard |
|
Unlimited |
| Wireframe Feedback |
|
Sharing Wireframes for comments in Adobe XD |
|
Unlimited |
|
Recording your interactions via video using Adobe XD |
|
Unlimited |
|
Class project – Wireframe Feedback |
|
Unlimited |
| High Fidelity UI Design |
|
Mood Boards & resources for Hi fidelity UI design in Adobe XD |
|
Unlimited |
|
Class project – Mood Board |
|
Unlimited |
|
How to create a 12 Column or Grid in Adobe XD |
|
Unlimited |
| Colors |
|
Working with colors inside Adobe XD CC |
|
Unlimited |
|
Tricks for using colors in Adobe XD |
|
Unlimited |
|
How to create gradients in Adobe XD |
|
Unlimited |
|
Class project 06 – Colors |
|
Unlimited |
| Text & Fonts Advanced |
|
Use Web safe fonts or iOS or Android specific fonts in Adobe XD |
|
Unlimited |
|
How to use Character Styles in Adobe XD |
|
Unlimited |
|
Font & Text tips tricks in Adobe XD |
|
Unlimited |
|
Adding our first Plugin Lorem Ipsum to Adobe XD |
|
Unlimited |
|
Creating realistic buttons in Adobe XD with paste properties |
|
Unlimited |
|
Class project 07 – Text & Buttons |
|
Unlimited |
| Drawing |
|
How to draw your own custom icons in Adobe XD |
|
Unlimited |
|
Working with stokes & lines in Adobe XD |
|
Unlimited |
|
Learn to drawing with the pen tool in Adobe XD |
|
Unlimited |
|
Drawing practise with the pen tool in Adobe XD |
|
Unlimited |
|
Production Video with some drawing tips |
|
Unlimited |
| Working with Illustrator |
|
Back and forth with Illustrator in Adobe XD |
|
Unlimited |
|
Class project 08 – Draw your own icons |
|
Unlimited |
| Working with InDesign |
|
Working with InDesign in Adobe XD |
|
Unlimited |
| Images |
|
The pros & cons for working with images inside Adobe XD |
|
Unlimited |
|
Working with images and CC Library connection |
|
Unlimited |
|
Adobe Stock connection to find similar image for XD project |
|
Unlimited |
|
Free images to use in your XD mockups – Unsplash Pexels Freeimage |
|
Unlimited |
|
Masking & Opacity & Blurring background images |
|
Unlimited |
| Working with Photoshop |
|
Working with Photoshop in Adobe XD |
|
Unlimited |
|
Production Video – Infographic |
|
Unlimited |
|
Class project 09 – Full Hi Def mockup |
|
Unlimited |
| APP Design |
|
How to make a mobile phone mockup with Adobe XD & Photoshop |
|
Unlimited |
|
Class project 10 – Mobile APP/Website |
|
Unlimited |
| Placeholder content & Plugins |
|
Hidden features for Adobe XD Repeat Grid |
|
Unlimited |
|
Plugin – Content Generator in Adobe XD |
|
Unlimited |
|
Plugin – UI Faces adding random profile photos to XD |
|
Unlimited |
|
Plugin – PhotoSplash automatically import Unspash images |
|
Unlimited |
|
Plugin – Copy Cat or Mimic to style and images from a site |
|
Unlimited |
| Asset panel |
|
Advanced Asset Panel tricks in Adobe XD |
|
Unlimited |
| Symbol - Advanced |
|
Advanced Symbol Tricks & Tips for Adobe XD |
|
Unlimited |
| Micro Interactions |
|
What are UI micro interactions in Adobe XD |
|
Unlimited |
|
Button grow or full screen image micro interaction in Adobe XD |
|
Unlimited |
|
Animated Image Gallery with micro interactions in Adobe XD |
|
Unlimited |
|
Full vector change micro interaction in Adobe XD |
|
Unlimited |
|
Class project 11 – Micro Interactions |
|
Unlimited |
| Prototyping - Advanced |
|
Time delay transitions in Adobe XD |
|
Unlimited |
|
How to create a popup menu or modal in Adobe XD |
|
Unlimited |
|
Animated mobile side nav for burger menu in Adobe XD |
|
Unlimited |
|
How to make a working drop down menu in Adobe XD |
|
Unlimited |
|
How to use the drag transition in Adobe XD |
|
Unlimited |
|
How to make a number ticker scroll using masks in Adobe XD |
|
Unlimited |
| Voice Interactions |
|
How to add Alexa style voice commands to Adobe XD |
|
Unlimited |
| User Testing |
|
What is user testing in Adobe XD |
|
Unlimited |
|
How to run an unmoderated UX User Test in Adobe XD |
|
Unlimited |
|
Class Project 12 – User testing |
|
Unlimited |
| Pitching to clients & customers |
|
Mocking up your designs in situ on a real phone in Photoshop |
|
Unlimited |
|
Advanced micro interactions & prototyping with Protopie in Adobe XD |
|
Unlimited |
|
How to add animation in Adobe XD using Adobe After Effects |
|
Unlimited |
| Exporting |
|
How to export images & assets from Adobe XD for developers |
|
Unlimited |
|
How to export code in XD for engineers using Design Specs |
|
Unlimited |
|
Class Project 13 – Roar Cycles |
|
Unlimited |
