-
+91 6366370046
24/7 Student Support
-
Mon – Fri : 09:00AM – 08:00PM
Sat – Sun : 10:00AM – 06:00PM
Menu
Learn Digital will help you’ll thoroughly learn Adobe XD from beginning to advanced features for UI (user interface) and UX (user experience) design.
Adobe XD is a modern design app that was built with the specific needs of a modern web designer, UX designer, or app designer in mind. Unlike image editing programs such as Photoshop—which were originally created for print, photo retouching, or illustration—the entire focus of Adobe XD is on designing user interfaces and user experiences. You can craft the visuals and turn them into working prototypes all in a single app!
XD uses artboards, so you can efficiently design web layouts for mobile, tablet, and desktop (or screens for apps). It’s vector-based, so you can scale for a variety of screen sizes with ease, as well as export hi-res (Retina) graphics for the web or apps. You’ll find tools and features specifically relevant to UI (User Interface) design and UX (User Experience) design, such as symbols, repeat grids, built-in protyping tools, and much more.
Learn to design complex and realistic prototypes with advanced functionality. You’ll use compentent states to create hovers, add animations to your designs using auto-animate, make specific areas of content scrollable using scroll groups, and much more.
Make your graphics stand out with 3D transforms, create anchor links that let users scroll up or down within a page, add audio sound effects to your user interfaces, and more!
♦ Introduction to the User Experience
♦ Getting started with your Adobe XD project
♦ What is UI vs UX - User Interface vs User Experience vs Product Designer
♦ The UX brief & persona for our real life project
♦ Wire framing (low fidelity) in Adobe XD
♦ How wide should my website or app be in Adobe XD
♦ Working with existing UI kits in Adobe XD
♦ Working with type in your XD wireframes
♦ Basic Colours & buttons in Adobe XD wireframes
♦ Free icons for your Adobe XD & UX UI projects
♦ Adding footers & Lorem Ipsum to our XD wireframe
♦ New Pages & Art boards in Adobe XD
♦ Wireframe Homepage & Contact Us Page
to avoid Overfitting
♦ Transfer Learning
Style Transfer
♦ Prototyping & adding interactivity to Adobe XD
♦ How to create a Popup Modal or popup box in Adobe XD
♦ Class project 02 – Prototype
♦ Working with groups & isolation mode in Adobe XD
♦ How to make & use symbols in Adobe XD
♦ Production Video
♦ Using the repeat grid in Adobe XD
♦ Updating symbols & problems with using repeat grids
♦ Prototype Trick to save time in Adobe XD
♦ Navigation tricks & tips in Adobe XD
♦ Class Project 03 - Symbols & Repeat Grids
♦ Mocking up an App in Adobe XD
♦ How to use the XD App on iPhone & Android
♦ Adding iPhone & Android battery & status icons to mockup
♦ How to fixed the position of the nav or battery icons in XD
♦ Production Video - Login & Dashboard
♦ Sharing Wireframes for comments in Adobe XD
♦ Recording your interactions via video using Adobe XD
♦ Class project - Wireframe Feedback
♦ Mood Boards & resources for Hi fidelity UI design in Adobe XD
♦ Class project - Mood Board
♦ How to create a 12 Column or Grid in Adobe XD
♦ Working with colors inside Adobe XD
♦ Tricks for using colors in Adobe XD
♦ How to create gradients in Adobe XD
♦ Class project 06 – Colors
♦ Use Web safe fonts or iOS or Android specific fonts in Adobe XD
♦ How to use Character Styles in Adobe XD
♦ Font & Text tips tricks in Adobe XD
♦ Adding our first Plugin Lorem Ipsum to Adobe XD
♦ Creating realistic buttons in Adobe XD with paste properties
♦ Class project 07 - Text & Buttons
♦ How to draw your own custom icons in Adobe XD
♦ Working with stokes & lines in Adobe XD
♦ Learn to drawing with the pen tool in Adobe XD
♦ Drawing practise with the pen tool in Adobe XD
♦ Production Video with some drawing tips
♦ Back and forth with Illustrator in Adobe XD
♦ Class project 08 - Draw your own icons
♦ Working with InDesign in Adobe XD
♦ The pros & cons for working with images inside Adobe XD
♦ Working with images and CC Library connection
♦ Adobe Stock connection to find similar image for XD project
♦ Free images to use in your XD mockups – Un splash Pixels Free image
♦ Masking & Opacity & Blurring background images
♦ Working with Photoshop in Adobe XD
♦ Production Video – Infographic
♦ Class project 09 - Full Hi Def mockup
♦ How to make a mobile phone mockup with Adobe XD & Photoshop
♦ Class project 10 - Mobile Website
♦ Hidden features for Adobe XD Repeat Grid
♦ Plugin - Content Generator in Adobe XD
♦ Plugin – Photo Splash automatically import Un splash images
♦ Plugin - Copy Cat or Mimic to style and images from a site
♦ Advanced Asset Panel tricks in Adobe XD
♦ Advanced Symbol Tricks & Tips for Adobe XD
♦ What are UI micro interactions in Adobe XD
♦ Button grow or full screen image micro interaction in Adobe XD
♦ Animated Image Gallery with micro interactions in Adobe XD
♦ Full vector change micro interaction in Adobe XD
♦ Class project 11 - Micro Interactions
♦ Time delay transitions in Adobe XD
♦ How to create a popup menu or modal in Adobe XD
♦ Animated mobile side nav for burger menu in Adobe XD
♦ How to make a working drop down menu in Adobe XD
♦ How to use the drag transition in Adobe XD
♦ How to make a number ticker scroll using masks in Adobe XD
♦ How to add Alexa style voice commands to Adobe XD
♦ What is user testing in Adobe XD
♦ How to run an un moderated UX User Test in Adobe XD
♦ Class project 12 - User Testing
♦ Mocking up your designs in situ on a real phone in Photoshop
♦ Advanced micro interactions & prototyping with Protopie in Adobe XD
♦ How to add animation in Adobe XD
♦ How to export images & assets from Adobe XD for developers
♦ How to export code in XD for engineers using Design Specs
♦ Class Project 13 – Roar Cycles
♦ Conclusion for Adobe XD training course
♦ Adobe XD Updates BONUS Video
Coediting allows you to work right alongside your team to tackle projects at breakneck speeds. You can all design on a single screen or split up duties and work on separate artboards.
Component States allows you to save elements for future use and create additional versions of your buttons, toggles, fields, and more. Perfect for hover effects and micro-interactions.
Whether you’re building out long-form landing pages or want to create a ‘back to top’ interaction, anchor links in Adobe XD will add additional depth to your prototyping.
Thanks to an in-built function of rapid prototyping, Adobe XD allows you to develop your project with transitions and animations for each particular screen. The preview function lets you monitor your progress in the app itself or on a connected device. You are able to quickly test implemented solutions and choose a layout optimized for the device you are currently monitoring the project on!
Bring your designs into a new dimension using 3D Transforms. Switch it on and transform along the X and Y axis, and even control the Z depth of your layers
Copyrights © 2021 Learn Digital Academy. All Rights Reserved. Powered By Webi7
Copyrights © 2021 Learn Digital Academy.
All Rights Reserved. Powered By Webi7
