Adobe XD for UI Design (Plus Muse)

Create Web and Mobile User Interfaces

Created byGreg Rog

Last updated 2/2018

English

What you'll learn

How to create a UI for Website
XD Interface & Tools
Master Adobe XD Tips & Tricks
Prototyping transitions
Working with Adobe Muse
Creating a responsive website

Course content

1 section • 37 lectures • 5h 33m total length

Introduction2:08
Grids and Artboards8:15
Resolutions and Retina Screens5:59
Assets Exchange12:07
Document Navigation3:59
Interface and Shortcuts6:22
Searching for Inspiration6:02
Colors and Structure12:28
Typography15:59
Working with Shapes7:03
Symbols5:50
Learn to create and reuse symbols in Adobe XD, convert groups to master symbols, drag instances from the library, edit text overrides, and detach or ungroup without affecting other instances.
Working with Image Assets7:45
Create web layouts in Adobe XD by importing high-resolution images, dragging assets onto artboards, and using shapes as image masks and fills with gradients for responsive design.
Import from Text File7:00
Pen Tool9:58
Repeat Grid5:48
Generating Grid10:55
Next Screens7:15
Demonstrates a rapid Adobe XD workflow to create two new screens by duplicating sections, arranging backgrounds, adding images, and refining headers and text.
Testimonials Screen8:16
Boolean Operations5:55
Repeat Grid Sections5:51
Working with Form9:04
Prototyping11:05
Sharing your Work7:12
Mobile Version15:30
Port a desktop layout to mobile first using side-by-side artboards, responsive grids, and minimal assets; emphasize readability with larger mobile text and a hamburger menu.
Device Preview7:38
Exporting Assets9:00
Muse Import16:04
Using Google Fonts13:52
Mobile Menu5:41
Design a four-item mobile menu in Adobe XD, using colors, backgrounds, and borders for items like pricing and contact; set breakpoints and pin the hamburger to the right.
Second Screen18:55
Third and Fourth Screen15:22
Fifth Screen10:48
Sixth Screen9:10
Seventh and Eight Screen12:07
apply responsive states across desktop, tablet, and mobile breakpoints, resize and reposition sections, and export assets while building a form with interactive states in muse.
Interactive Elements9:43
Exporting to Server6:43
Thank You0:55

Requirements

Basic Graphic Design knowledge

Description

Version: This course includes all the new features of Adobe XD CC 1.0, such as Libraries!

Do you want to design interfaces quickly and without issues? Adobe Experience Design is an extremely versatile tool for UI/UX designers because it also lets the users create interactive prototypes. Not only are we going to discuss working techniques for Adobe XD but also make our project into a working website with Adobe Muse!

Course lessons will show you how to exchange data between Adobe XD, Photoshop, Illustrator, and even mobile apps, which you can use to quickly prototype with your tablet or smart phone. Wireframes created this way can be easily imported to XD where you can continue your work. In Experience Design, you can use Assets panel and Creative Cloud Libraries to manage all the assets and keep them consistent in your software.

This course focuses on the creation of a practical website project. The site advertises the intelligent home app we have worked on during our previous UI courses. However, the start might seem a bit unusual because we deal with a desktop view, then we create a responsive view and test it on a mobile phone. Next we prototype transitions and interactions for a finished project and prepare graphic assets to be exported to the Web.

Who this course is for:

User Interface Designers
UX Designers
Graphic Designers