UX/UI Design with Adobe XD

Master UX Design and UI Interfaces

UI/UX Design 4.6(57)4h 36m19 lectures3 sections

What you'll learn

Understand UX terminology and the design process
Research and study users and competitors
Carry out the analysis phase and prepare a case study
Build information architecture and a site map
Create a persona and a user flow map
Draw sketches and design wireframes
Get to know Adobe XD and use it
Design visual graphics and prototypes

About this course

This course teaches user experience design (UX) and website and app interface design (UI) using Adobe XD. It starts with an introduction, terminology and the UX design process, then user and competitor research, with a practical competitive case study and the analysis phase. Next you learn how to build information architecture and a site map, create a persona and a user flow map, then sketching, wireframing and design principles. In the hands-on part, you get to know Adobe XD, draw sketches and design wireframes in three parts, then move on to visual graphic design, user interface design skills and prototyping. At the end of the course there is a file of extras you can download. It suits graphic designers, web designers, mobile app developers and anyone who wants to enter the UX and UI field. You do not need previous experience with Adobe XD, since the course starts with the basics. After finishing, you will be able to study users, plan their experience, and design an interface and a prototype for a website or an app.

Expected outcomes

Ability to design attractive and effective user interfaces using Adobe XD.
Understanding user journeys and creating integrated user experiences.
Producing interactive prototypes that reflect user experience professionally.
Designing virtual personas and user flows to enhance the experience.
Preparing complete design projects that include visual graphics and prototypes.

Learner reviews

These reviews are from learners who bought the content and completed at least 50% of it — there are no reviews from anyone who hasn't gone through the material.

4.6

★★★★★

57 reviews

5★

4★

3★

2★

1★

Course content

UX

9 lectures

Introduction to User Experience DesignIntroduces user experience design: its history and concept, the difference between UX and UI, the designer's tasks, practical examples, the honeycomb model, and the relationship between designer and programmer.15:02
User Experience Design TerminologyExplains core UX terms: the honeycomb model with concepts like usefulness and usability, human-computer interaction, interaction design, work environment, content strategy, and usability testing.13:15
User Experience Design PathPresents the UX design process and its stages: strategy, research and discovery, analysis, design, production, then trial launch, evaluation and final launch.7:04
User Research and StudyExplains user research techniques: interviews, surveys, tools that analyze user behavior inside the app, observing the user's environment, and studying a typical day of the user.7:50
Competitor Research and StudyExplains studying project goals from different levels, then competitor analysis: how to find competitors, gather their strengths and weaknesses, and identify the competitive features that attract users.6:59
Practical Competitive Case StudyA practical competitor case study for a restaurant app: finding competitors and comparing features such as offers, menu updates, payment methods, and special or large orders, to identify where to stand out.16:00
Analysis PhaseExplains the UX analysis stage: analyzing a project's details, goals, problems and solutions using a restaurant app example, then listing the needed screens from welcome to payment, search and settings.13:32
Building Information Architecture and Site MapExplains information architecture as organizing information to match user expectations, with examples and a card sorting technique, then building a site map that links the screens and their navigation order.8:13
Creating User Persona and User Flow MapExplains building a persona and the data, goals and behaviors it contains, then the User Flow map that shows the user's path across the app's screens.11:18

UI using Adobe XD

9 lectures

Sketch and WireframeDefines the sketching and wireframe stages of interface design: a sketch is a rough paper drawing to convey an idea, and a wireframe is an organized computer layout with either low or high detail.4:17
Design PrinciplesExplains design principles and their effect on users' psychology: warm and cool colors and their meanings, choosing fonts, shapes, visual hierarchy, and white space.20:34
Introduction to Adobe XDIntroduces Adobe XD: its interface and panels, shape drawing tools and resizing with the Shift key, alignment, shadows, and combining or cutting shapes.22:20
SketchingDraws initial sketches in Adobe XD for the app screens: splash, welcome, sign-up, login, home, product and profile, using boxes and X marks to stand for images and icons.20:00
Wireframe Design (Part One)Converts sketches into wireframes in Adobe XD for the splash, welcome and sign-up screens, adjusting sizes, margins, corner radius, colors, text and buttons.23:16
Wireframe Design (Part Two)Continues the wireframe of the home screen in Adobe XD: header and footer, search, voice and filter icons, product cards, and using Repeat Grid to duplicate elements.24:48
Wireframe Design (Part Three)Completes the wireframe of the product and menu screens in Adobe XD, including the image, favorites, image indicator, product details, quantity counter, and grouping elements.21:33
Visual Graphic DesignTurns the wireframe into a final UI design in Adobe XD: adding images by drag and drop, coloring text, shadows, gradients, and restyling icons and indicators.21:55
UI Visual Graphic Design Skills and PrototypingCovers Adobe XD skills: deleting screens and grouping elements, color gradients, screen boundary and height, then building a prototype with transitions between screens and a timer for the splash screen.18:32