UX/UI Design

Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself. Graphic design and typography are utilized to support its usability, influencing how the user performs certain interactions and improving the aesthetic appeal of the design; design aesthetics may enhance or detract from the ability of users to use the functions of the interface.
The design process must balance technical functionality and visual elements (e.g., mental model) to create a system that is not only operational but also usable and adaptable to changing user needs. Interface design is involved in a wide range of projects from computer systems, to cars, to commercial planes; all of these projects involve much of the same basic human interactions yet also require some unique skills and knowledge. As a result, designers tend to specialize in certain types of projects and have skills centered on their expertise, whether it is a software design, user research, web design, or industrial design.
Getting Started
• Introduction to the User Experience
• What is UI vs UX
Wireframing Low Fidelity
• Wire framing
• Working with UI kits
Type, Color & Icon Introduction
• Working with type in your XD wireframes
• Basic Colors & buttons in Adobe XD wireframes
• Free icons for your Adobe XD & UX UI projects
• Adding footers & Lorem Ipsum to our XD wireframe
• New Pages & Artboards in Adobe XD
Prototyping a Website - Introduction
• Prototyping & adding interactivity
• Popup Modal or popup
Symbols & Repeat Grids
• Working with groups & isolation mode
• make & use symbols
• Using the repeat grid in Adobe XD
• Prototype Trick
• Navigation tricks & tips
Prototyping a App - Introduction
• Mocking up an App
• use the XD App on iPhone & Android
High Fidelity UI Design
• Mood Boards & resources for Hi fidelity UI design
Drawing
• How to draw your own custom icons
• Working with stokes & lines
• Learn to drawing with the pen tool
Working with InDesign
• Working with InDesign in Adobe XD
Working with Illustrator
• Working with Illustrator
• Draw your own icons
Images
• The pros & cons for working with images
• Working with images and CC Library
• Adobe Stock connection to find similar image
• Free images to use in your XD mockups - Unsplash Pexels Freeimage
• Masking & Opacity & Blurring background images
Working with Photoshop
• Working with Photoshop in Adobe XD
APP Design
• Mobile phone mockup
Placeholder content & Plugins
• Hidden features
• Plugins
Asset Panel
• Advanced Asset Panel tricks
Symbol - Advanced
Advanced Symbol Tricks & Tips
Micro Interactions
• UI micro interactions • Button grow or full screen image micro interaction • Animated Image Gallery with micro interactions • Full vector changes micro interaction
Prototyping Advanced
• Time delay transitions
• Create a popup menu
• Animated mobile side nav for burger menu
• Working drop down menu
• Drag transition
• Number ticker scroll using masks
Pitching to clients & customers
• Mocking up designs
• micro interactions & prototyping
• add animation

Get in touch with us
close slider