Learn Adobe XD for Designing User Interface

Name: Learn Adobe XD for Designing User Interface
Rating: 4.4 (8 reviews)

Repeat Grid | Auto animate | UI Design | Prototyping for Mobile applications

Created byHarshit Srivastava

Last updated 7/2023

English

English [Auto],

What you'll learn

You could Create and Design User Interface for mobile and web applications
You could Build Prototypes for applications
You could build toggle button, auto-animate, overlay, and other actions
You could build responsive design for Left navigation, status bar and signup form

Course content

6 sections • 11 lectures • 1h 9m total length

Introduction1:48
Learn Adobe XD to design user interfaces for web and mobile apps, from basics to interactive prototypes. Build thumbnail galleries, icons, toggle animations, and left-navigation with a hamburger menu.

XD interface and tools7:13
Explore the Adobe XD interface, tools, and properties for shapes, text, and artboards. Preview designs, prototype animations, and manage layers, groups, and duplicates with intuitive controls.
Repeat Grid4:21
Explore repeat grid in Adobe XD to create a photo gallery of city thumbnails by grouping images with text, then using repeat grid handles to replicate and arrange with spacing.

Create a Toggle Button5:13
Learn to create a toggle button in Adobe XD by building a two-state component, adjusting colors for on/off, previewing the interaction, and duplicating the component for multiple switches.
Create Prototype- Auto animate ball4:41
Create an interactive prototype in Adobe XD by drawing a ball on an artboard, enabling auto-animate to drop and bounce back between two artboards, and previewing the navigation flow.

Designing Left Navigation9:17
Design a left navigation in Adobe XD by building a top bar with a hamburger button, grouping icons, and six categories like home, wooden, plastic, and miscellaneous, with reusable components.
Prototyping Left Navigation4:31
Prototype a left navigation panel in Adobe XD by linking two-way actions between the home screen and the overlay panel, using transitions, dissolves, and overlays with easing.

Building app by using components from UI Kit10:37
Learn to use UI kits in Adobe XD to assemble a mobile e-commerce interface by copying and customizing components, then prototype navigation across three screens.
Designing Background theme and icon5:23
Create and personalize app themes in Adobe XD by adding layered green backgrounds, icons, and transparent shapes, while adjusting layering and exploring dark, light, and power-saving modes.

Requirements

No designing experience required for learning Adobe XD and you would learn most of the concepts with practical examples in this course.

Description

In this course, you will learn about Designing User Interface and Experience with Adobe XD. Here you will learn various tools and techniques used in the process of creating user interface and workflow for the Mobile app. User Experience Designing is a crucial step in overall application development cycle, being the early stage, it allows core team of designers, managers and developers to visualize the application with a prototype. It enables them to make sufficient changes in the UI before the code development and testing begins.

Working in the Adobe ecosystem allows its users to easily integrate with other Adobe CC software such as Photoshop and Illustrator.

What is Adobe XD?

Adobe XD is an industry recognized Designing software used for creating Design prototypes and wireframes for the Mobile applications and Websites. It is used for visualizing complete User Interface by designing individual components that lead to a overall improved User Experience.

This training would give you full insight into how the interface works, all the main tools and features, and the most common shortcuts which will dramatically increase your productivity. Here you will learn how you can give life to your design and create a working prototype directly within Adobe XD, without the need of any third-party software.

Here you will learn to-

Create Photo gallery with thumbnails using Repeat Grid
Create toggle button using component states
Designing and Prototyping Left Navigation panel
Create a prototype for Auto-animate ball game
Designing Signup form, Status and Navigation bar

Who this course is for:

This course is for anyone who is interested to learn Adobe XD for Designing User Interface

Learn Adobe XD for Designing User Interface

What you'll learn

Explore related topics

Course content

Introduction1 lecture • 2min

Getting started with Adobe XD2 lectures • 12min

Toggle button and Ball game using Auto-animate2 lectures • 10min

Left Navigation- Design to Prototype2 lectures • 14min

Designing Signup form and Navigation bar2 lectures • 16min

Building app by using UI components and designing background theme2 lectures • 16min

Requirements

Description

Who this course is for: