Udemy

Platform

English

Language

User Experience

Category

UI and UX App Design in Adobe XD

Learn how to design engaging mobile app with Adobe XD

UI and UX App Design in Adobe XD

Students

5 hours

Content

Feb 2021

Last Update
Regular Price

SKILLSHARE
SkillShare
Unlimited access to all SkillShare courses
EXCLUSIVE 30-DAY FREE TRIAL

What you will learn

You will learn how design and prototype apps from scratch

You'll learn tools that are universal across multiple design apps to enhance your design workflow

You'll learn how to incorporate best practices in reusing design elements and styles to increase efficiency


Description

Adobe XD is a powerful tool for UI/UX designers giving you the power to design and prototype an entire app, all from one program.

This course starts off with Adobe XD basics and quickly gets up to speed on designing and prototyping a full-fledged app with amazing images, colors, and animations.

What to expect for this course:

  • How to navigate around the interface and toggle on/off the panels you wish to use

  • How to set up artboards to rapidly assemble wireframes

  • how to make your artboards responsive using auto-resize

  • How to design icons using the pen tool and boolean effects

  • How to convert icons and buttons into symbols to reuse across your entire project

  • How to apply text and color style presets and change on the fly

  • How to use the repeat grid to create fast, repeating columns and/or rows

  • How to prototype and test your prototype within seconds

  • How to share projects, prototypes, and design assets

  • and much much more

Adobe XD is a brand new design and prototyping tool made by Adobe, totally dedicated to UI/UX designers.

In this course, I will teach you the basics of this new software and will show you step by step how you can design a beautiful and modern iOS mobile app.

In the first part of the course, you will see how the interface works, all the main tools and features, and the most common shortcuts which will dramatically increase your productivity.

Then we’ll jump right into the design and we’ll start creating a dating-inspired mobile app, made of 7 great-looking screens: home, login, signup, browse, sidebar menu, inbox, settings.

Not only that, I'll teach you how you can give life to your design and create a working prototype directly within Adobe XD, without the need for any third-party software.

The source .xd file of the app we designed will be included, along with the other resources I used.

This course has a learn-by-doing approach. There won’t be much theory, it’s all about teaching you how to design a real-world mobile product and showing you the full potential of Adobe XD.

By the end of the course, you will have a very clear picture of how Adobe XD works, and you will be able to apply the design techniques, productivity tips, and all the skills you have learned in your future design projects.



Content

Introduction

Introduction To The Course

Introduction Of The Instructor

Why Should You Learn User Interface And User Experience In Adobe Xd

Quick Win

What Is UI Vs UX Vs Product Design

Course Requirements (What Software, Experience)

Wireframing Low Fidelity

What Will We Learn In This Section

Wireframing In Adobe XD

How Wide Should Your Site Or App Be In Adobe XD

Work With Existing UI Kits In Adobe XD

Work with Type, Color and Icons in Adobe XD

What Will We Learn In This Section

Work With Type In XD Wireframes

Basic Colors And Buttons In Adobe XD Wireframes

Make A Gradient In Adobe XD

Free Icons For Adobe XD And UX UI Projects

Add Footers To Your XD Wireframe

Add Lorem Ipsum To Your XD Wireframe

New Pages And Artboards In Adobe XD

Build A Wireframe Homepage

Build A Wireframe Contact Us Page

Section Summary

Prototype a website

What Will We Learn In This Section

Prototype And Add Interactivity In Adobe XD

Build A Popup Modal Or Popup Box

Components and Repeat Grids

What Will We Learn In This Section

Work With Groups And Isolation Mode

Make And Use Components

Left Navigation

Use The Repeat Grid

Update Components

Section Summary

Prototype an app

What Will We Learn In This Section

Mock Up An App In Adobe XD

Use The XD App On iPhone And Android

Add iPhone And Android Battery And Status Icons To Mockup

Build Login And Dashboard Screens

Section Summary

Share your wireframes

What Will We Learn In This Section

Share Wireframes For Comments In Adobe XD

Record Interactions Via Video With Adobe XD

Advanced text and fonts

What Will We Learn In This Section

Use Web Safe Fonts For iOS

Use Android Specific Fonts In Adobe

Build Realistic Buttons With Paste Properties

Section Summary

Work with images in adobe XD

What Will We Learn In This Section

Work With Images And Cc Library Connection

Adobe Stock Connection To Find Images

Find Free Images To Use In XD Mockups (Pixabay)

Masking And Opacity And Blurring Background Images

Section Summary

Micro interactions

What Will We Learn In This Section

What Are Micro Interactions

Button Grow Interaction

Full Screen Image Interaction

Animated Image Gallery With Micro Interactions

Full Vector Change Micro Interaction

Section Summary

Advanced prototyping

What Will We Learn In This Section

Time Delay Transitions

Animated Mobile Side Navigation For Burger Menu

Build A Working Drop Down Menu

Use The Drag Transition

Section Summary

Exporting to developers

What Will We Learn In This Section

Export Images And Assets To Developers

Export Code To Engineers With Design Specs

Course Summary

Course Summary And Next Steps

Source Files


Related Courses

SKILLSHARE
Mastering Effective, User-centered UI Design with Material Design Principles and Adobe XD
Mastering Effective, User-centered UI Design with Material Design Principles and Adobe XD
SKILLSHARE
Design Professional CV/Resume for Your Dream Job | Adobe XD
Design Professional CV/Resume for Your Dream Job | Adobe XD
SKILLSHARE
Adobe XD Masterclass : UI Design
Adobe XD Masterclass : UI Design

3871146

Udemy ID

2/24/2021

Course created date

3/8/2021

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram