Enjoy studying with me Online – Specialisation in UI/UX designing

Become a UI/UX designer and design high-impact user experiences. research, design, and prototype effective, visually-driven websites and apps. Start your UI/UX design journey today.
Start Now

100% online

Format – Live classes
}

Duration

Approx. 40 hours to complete

Language

Hindi, English

About this Course

I’m here to help you learn Adobe XD efficiently and comprehensively. XD is a fantastic design tool used by industry professionals to product high quality & functional mockups. By the end of this course, you will be able to produce practical and effective User Experience (UX) and User Interface (UI) designs.

This course is aimed at people interested in UI/UX Design. We’ll start from the very beginning and work all the way through, step by step.

First, we will go over the differences between UX and UI Design. We will look at what our brief for this real-world project is, then we will learn about low-fidelity wireframes and how to make use of existing UI design kits.

I’ll go over all of the essential tools necessary for creating excellent wireframes, including: type, colours, icons, Lorem ipsum, artboards, prototyping, models and popups, symbols and repeat grids. We will even make use of the new prototyping app so that you can experience your prototype on your mobile device.

An important part of maximising your UX Design workflow is being able to utilise other software such as Photoshop and Illustrator. This is why I’ll be teaching you how to make use of both to help boost your XD productivity.

One of the awesome new features of XD is micro-interactions. I’ll be teaching you all about those and how to use them to grow icons and scenes. This is one of the parts of web design that’s growing and being adopted rapidly so you won’t want to miss out on learning it early.

There are two class projects for you to complete during this class, these will help develop your skills and will give you something for your own portfolio.

It is now time to upgrade yourself & learn Adobe XD.

Learner Career Outcomes

25%

Started a new career after completing this specialization.

18%

Got a pay increase or promotion

Who am I?

I’m Mohammad, and I’ve been building websites for about 7 years now. Sharing is who I am, and teaching is where I am at my best, because I’ve been on both sides of that equation, and getting to deliver useful training is my meaningful way to be a part of the creative community.

Syllabus – What you will learn from this course

  1. Introduction to the User Experience Course
  2. Getting started with your Adobe XD project
  3. What is UI vs UX – User Interface vs User Experience vs Product Designer
  4. The UX brief & persona for our real life project
  5. Wireframing (low fidelity) in Adobe XD
  6. How wide should my website or app be in Adobe XD?
  7. Working with existing UI kits in Adobe XD
  8. Working with type in your XD wireframes
  9. Basic Colors & buttons in Adobe XD wireframes
  10. Free icons for your Adobe XD & UX UI projects
  11. Adding footers & Lorem Ipsum to our XD wireframe
  12. New Pages & Artboards in Adobe XD
  13. Class Project 01 – Wireframe Homepage & Contact Us Page
  14. Prototyping & adding interactivity to Adobe XD
  15. How to create a Popup Modal or popup box in Adobe XD
  16. Class project 02 – Prototype
  17. Working with groups & isolation mode in Adobe XD
  18. How to make & use symbols in Adobe XD
  19. Production Video – Left Nav
  20. Using the repeat grid in Adobe XD
  21. Updating symbols & problems with using repeat grids
  22. Prototype Trick to save time in Adobe XD
  23. Navigation tricks & tips in Adobe XD
  24. Class Project 03 – Symbols & Repeat Grids
  25. Mocking up an App in Adobe XD
  26. How to use the XD App on iPhone & Android
  27. Adding iPhone & Android battery & status icons to mockup
  28. How to fixed the position of the nav or battery icons in XD
  29. Production Video – Login & Dashboard
  30. Sharing Wireframes for comments in Adobe XD
  31. Recording your interactions via video using Adobe XD
  32. Class project – Wireframe Feedback
  33. Mood Boards & resources for Hi fidelity UI design in Adobe XD
  34. Class project – Mood Board
  35. How to create a 12 Column or Grid in Adobe XD 2018
  36. Working with colors inside Adobe XD CC
  37. Tricks for using colors in Adobe XD
  38. How to create gradients in Adobe XD
  39. Class project 06 – Colors
  40. Use Web safe fonts or iOS or Android specific fonts in Adobe XD
  41. How to use Character Styles in Adobe XD
  42. Font & Text tips tricks in Adobe XD
  43. Adding our first Plugin Lorem Ipsum to Adobe XD
  44. Creating realistic buttons in Adobe XD with paste properties
  45. Class project 07 – Text & Buttons
  46. How to draw your own custom icons in Adobe XD
  47. Working with stokes & lines in Adobe XD
  48. Learn to drawing with the pen tool in Adobe XD
  49. Drawing practise with the pen tool in Adobe XD
  50. Production Video with some drawing tips
  51. Back and forth with Illustrator in Adobe XD
  52. Class project 08 – Draw your own icons
  53. Working with InDesign in Adobe XD
  54. The pros & cons for working with images inside Adobe XD
  55. Working with images and CC Library connection
  56. Adobe Stock connection to find similar image for XD project
  57. Free images to use in your XD mockups – Unsplash Pexels Freeimage
  58. Masking & Opacity & Blurring background images
  59. Working with Photoshop in Adobe XD
  60. Production Video – Infographic
  61. Class project 09 – Full Hi Def mockup
  62. How to make a mobile phone mockup with Adobe XD & Photoshop
  63. Class project 10 – Mobile Website
  64. Hidden features for Adobe XD Repeat Grid
  65. Plugin – Content Generator in Adobe XD
  66. Plugin – UI Faces adding random profile photos to XD
  67. Plugin – PhotoSplash automatically import Unspash images
  68. Plugin – Copy Cat or Mimic to style and images from a site
  69. Advanced Asset Panel tricks in Adobe XD
  70. Advanced Symbol Tricks & Tips for Adobe XD
  71. What are UI micro interactions in Adobe XD
  72. Button grow or full screen image micro interaction in Adobe XD
  73. Animated Image Gallery with micro interactions in Adobe XD
  74. Full vector change micro interaction in Adobe XD
  75. Class project 11 – Micro Interactions
  76. Time delay transitions in Adobe XD
  77. How to create a popup menu or modal in Adobe XD
  78. Animated mobile side nav for burger menu in Adobe XD
  79. How to make a working drop down menu in Adobe XD
  80. How to use the drag transition in Adobe XD
  81. How to make a number ticker scroll using masks in Adobe XD
  82. How to add Alexa style voice commands to Adobe XD
  83. What is user testing in Adobe XD
  84. How to run an unmoderated UX User Test in Adobe XD
  85. Class project 12 – User Testing
  86. Mocking up your designs in situ on a real phone in Photoshop
  87. Advanced micro interactions & prototyping with Protopie in Adobe XD
  88. How to add animation in Adobe XD using Adobe After Effects
  89. How to export images & assets from Adobe XD for developers
  90. How to export code in XD for engineers using Design Specs
  91. Class Project 13 – Roar Cycles
  92. Adobe XD CC 2021 New Features & Updates!
  93. Conclusion for Adobe XD training course

Still Not Convinced ?

Take A Free Demo Now!

Yes! Book My Free Demo

Hey,
Look at related course

Web Designing

HTML, CSS, Bootstrap
Explore

Wordpress

Divi / Elementor layout design
Explore

Pin It on Pinterest