🚀 Create your own Missions, build Guilds & turn users into real lifelong fans! ACT NOW!
watching now
5 Students

Description

What Will You Learn?

  • From Block Level Design to Style Guides to Prototypes. Do all that step by step
  • Learn UX of Paper & Interactive Prototypes and add it to your UX portfolio
  • Developer hand off tools like Avocode and Zeplin to easily hand off your designs to Dev teams
  • Detailed Specs for Desining an iPhone (IOS) App Step by Step
  • Get full command on all the tools and features in Adobe XD and become an Expert

Requirements

  • install Adobe Xd
  • NFT Certificate
  • 82 Lessons
  • Beginner
  • English
  • +100 XP

Share Course on Social media

Curriculum

Course consist of total 8h 31min of content, in total.

Section 2: Basics of Adobe XD in detail
1:56:02
Artboards and Grids in Adobe XD
07:48
8 tools in Xd
04:44
Rectangle tool to create button
05:46
Background and Object Blur
03:21
Ellipse tool
01:50
Basics of Pen tool
02:43
Pen tool to create Icons
05:34
Line tool
01:16
Polygon tool in Xd
01:54
Text tool
03:25
Colors Palettes
03:51
Color Gradients in Adobe Xd
05:59
Generating Color Schemes using Coolors.io
03:44
Custom Masks in Adobe Xd
05:41
Using Guides in Xd
02:54
Character Styles in Xd
04:48
Creating and Reusing Symbols
07:04
Using Linked Assets and Design system
09:35
Repeat Grids in Xd
08:48
Common Keyboard Shortcuts in Adobe Xd
05:48
More Keyboard Shortcuts in Xd
08:26
Nested Symbols in Adobe Xd
05:35
Re-usable Components in Xd
05:28
Section 3: All about Paper and Interactive Prototyping
1:05:40
What is Block-level Design?
12:16
Sketching First Design Idea - Block Level Paper
08:14
Adding details to your drawn Block Sketch
04:06
What are Vertical, Horizontal, T and Local prototypes?
08:59
Static and Interactive Prototypes → What is low, medium and high fidelity design
04:19
Adding Details to block design using Adobe XD
07:37
Using UI Kits and Pattern libraries to speedup your design workflow
06:04
Exericse → Design Signup Screen using IOS UI Kit
14:05
Section 4: Designing real world Medical iPhone App Screens in Adobe XD
2:16:09
Preparing for Design → Downloading Assets and Recources
05:11
Getting Color Scheme Ideas and Inspirations
05:27
Solving UX (User Experience) problems of old medical App
04:11
Design Welcome Screen of Medical App
09:42
Designing the Login Screen
14:29
Designing the active Login Screens
11:40
Desining the Signup Screen
07:04
Designing the Dashboard Screen Part 1
12:24
Designing the Dashboard Screen Part 2
11:09
Designing the Hamburger Sidebar menu screen
09:03
Designing Activities Screen
10:36
Designing Sync to Cloud Screen
08:14
Designing Sync Status Screen
04:25
Using Grids to fine-tune your App Screens
05:12
Refining your Style Guide in XD
08:23
IOS Design Guidelines, Specs and Measurements you must learn
08:59
Section 5: Prototyping in Adobe XD - Creating, sharing and using Design Inspect
1:00:28
Fixing Tap Targets and tap boundary area in your designs
06:14
Prototyping Login and Signup Screens
10:11
Prototyping Dashboard, Activities and Sync Screens
11:15
Sharing your Prototype with others in Adobe XD
03:51
Recording Video of your Prototype on MAC
02:15
Using Design Inspect in Adobe XD with me
03:58
Auto Animate in Prototyping (New Feature)
09:36
Voice controlled Prototype in Adobe XD (NEW FEATURE)
06:08
Drag in Prototypes (NEW FEATURE)
07:00
Section 6: Export your Artboards and Assets in 1X, 2X and 3X sizes
30:48
Why we need to export in 1X, 2X and 3X sizes?
09:10
Perfect Example to understand 1X 2X 3X concept
02:46
Export Artobards and create Device Mockups in Adobe Photoshop
07:31
Batch export all your designs assets from your App
06:23
Using Photoshop Mockup Files with Xd
04:58
Section 7: Developer Handoff using Zepling and Avocode and a lot more XD Integrations
36:36
Live preview of your App prototype on your iPhone
02:12
Collaborate with Developers using Zeplin tool
12:58
Using Avocode to handoff your designs to Developers
13:47
Opening Sketch, Photoshop and Illustrator files in XD
07:39
Section 8: Adobe XD Updates → Whats new in Adobe XD
42:17
Adobe XD New Updates (April May 2018)
04:10
Fixed elements and Overlays Adobe XD June 2018 Update
10:11
Better control for image fills and Design using math calculations June2018
03:03
Time Trigger in Prototyping (NEW Update)
06:16
Responsive Sizing in XD (NEW SEP 2018 Update)
05:36
Stacking Order
04:38
All resource files
For latest Adobe Xd updates watch these.
First Assignment
02:36
Second Assignment
02:51
Third Assignment
02:56

About the Instructor

Muhammad Ahsan Pervaiz

UX UI Designer 10+ Years of Experience
90% of students rated this instructor as excellent!

Ahsan Butt has gone through the challenges of learning web design the hard way, going from scratch ending up working for Fortune 500 companies and creating designs for companies like Intel, Coca Cola, Panasonic and others. If you happen to enter his private office, you’ll find a gold medal hanging proudly from the times when he won Panasonic’s poster design competition, and then a stack of diplomas for creating awesome landing page designs in contests on 99designs.

What will make you identify even more with Ahsan Butt is that he’s not just a trainer who’s confidently giving away tips and tricks of his craft. He’s also a freelancer himself, having his international client base. He’s still actively into it knowing the pain points that you struggle with most. One of them, as for any freelancer out there, is lack of time. That’s why Ahsan makes learning the easiest it can get, so you have less pain absorbing the valuable information.

Join Ahsan Butt’s course on BitDegree to learn the workflow of the modern web design. In no time, you’ll be able to use wireframes, style guides, and much more to help you in your quest of creating outstanding web designs!

See All Instructor Courses

BitDegree platform reviews