
Explain the difference between ui and ux designer, then cover ux steps: research, interviews, personas, use cases, journey maps; brainstorm with user flows and wireframes, then ui design and reporting.
Download Adobe XD from the website, sign in or create a free account with Adobe Creative Cloud, and explore the XD interface, tools, layers, properties, and prototype features.
Master shapes and lines in Adobe XD, from ruler lines and guidelines to rectangles, circles, and triangles with fills, strokes, gradients, and corner roundness.
Create and organize assets, colors, character styles, and components in Adobe XD, build master components with instances, and apply states like hover and pressed to propagate changes.
Demonstrate responsive resize in Adobe XD by configuring artboards, groups, and text to stick to edges, adjust sizes manually when needed, and using stacking for horizontal or vertical layouts.
Design a finance app UI in Adobe XD by building credit card layouts, backgrounds, and repeat grid, using Rubick, Chihiro, and Electrolytes fonts with color, borders, gradients, and masked numbers.
Design the homepage for a client project in Adobe XD by building a skeleton with basic shapes, then craft the header, menu, and blurred gradient background.
Design a landing page in adobe xd by placing a slogan and intro text on the left, graphics on the right, and a phone number input with decorative shapes.
Learn to design the benefits section of a homepage in Adobe XD by building icon-based cards with gradient backgrounds, precise alignment, typography, and a bottom action bar, ready for prototyping.
Duplicate the home screen to create the favorite screen, remove extras, center elements, and apply a blurred background with a white border, a heart, and the favorite label.
Prototype onboarding and sign in and sign up flows in Adobe XD by looping onboarding slides with time triggers, adding tap and back navigation, and animating sign-up panels.
Download Adobe XD, sign in with your Adobe account, connect your phone via USB, and run your prototype on mobile to test interactions.
Hi everyone welcome to Adobe XD mega course.
Before I jump into the details of the course I want to quickly tell what adobe xd is used for.
Adobe XD is a simple easy to use application dedicated to UI UX design we can call it user interface or user? basically, we use adobe xd to design mobile apps and websites
Just like our other mega courses this course is designed to take you from absolute beginner to advanced level in UI design.
This course is divided into 4 main parts, basics of design mode, basics of prototype mode, advanced technique and finally working with real projects.
In the design mode basics. We will start with downloading Adobe XD and installing then we will open it for the first time.
I will show you how to work with artboards, shape tools line tools, I will teach you how to use text tools, how to use images easily and effectively. After that, we will cover alignment tools and boolean operations. Then I will show you how to work with components and assets inside XD. later, we will cover a very exciting feature in XD which is a repeat grid. After that, we will cover responsive resize I will show how to use it and how to get an advantage from it for your designs. The last thing we will cover some free Plugins, we will cover the most useful ones. When you finish this part you will have a complete understanding of Adobe XD design tools, you will be ready to use what you have learnt to create some professional design. Together we are going to design two screens of a finance app, we will use all that we learnt in the design mode basics part.
After we covered and practised everything about design mode we will move to the prototype model. We will start with the basics and then we will cover all of the tools and settings in the prototype mode. We will cover time transition, component states, scrolling groups, overly animation, drag animation, sound, voice and keyboard triggers and much more. At the end we will cover an exciting prototype feature which is auto animate, we are going to animate the design we made in the design part with auto animate.
After we covered both design and prototype mode we will cover some advanced techniques. Like 3D transform and animation, Glassmorphisms, input prototype, scroll number scroll colours.
At the end of the course, we are going to create two projects together, the first one is a website homepage for a financial company, we will create it from scratch, we will start with the brainstorming and written form then we will design and prototype it.
The second project will be an e-commerce app, we will start this one from the brainstorming to the design and then to prototyping.
After you finish this course you will have a full understanding of Ui design and Adobe XD. You will be ready to use Adobe XD effectively and professionally. You will be ready to start your carrier with UI design.