UI/UX & Web Design using Adobe XD 2018 - User Experience Design

Daniel Scott, Adobe Certified Trainer & UI/UX Expert

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
43 Lessons (6h 2m)
    • 1. Introduction to Adobe XD

      2:03
    • 2. Getting started with your Adobe XD project

      0:51
    • 3. What is UI vs UX User Interface vs User Experience

      2:08
    • 4. The brief & persona for our real life project

      11:22
    • 5. Wireframing (low fidelity) in Adobe XD

      1:58
    • 6. Working with existing UI kits in Adobe XD

      8:27
    • 7. Working with type in your XD wireframes

      5:21
    • 8. How to create forms, checkboxes & buttons in Adobe XD

      7:40
    • 9. Free icons for your Adobe XD & UX UI projects

      14:48
    • 10. ProtoTyping & adding interactivity to Adobe XD

      10:08
    • 11. Production video student views

      3:14
    • 12. How to make & use symbols in Adobe XD

      7:22
    • 13. Using the repeat grid in Adobe XD

      7:22
    • 14. Mocking up an App in Adobe XD

      8:34
    • 15. How to use the XD App on iPhone & Android

      6:55
    • 16. Production Video Sign up screen & Dashboard

      10:46
    • 17. Sharing Wireframes for comments in Adobe XD

      12:30
    • 18. Mood Boards & resources for Hi fidelity UI design in Adobe UX

      7:46
    • 19. Why do you need a 12 column grid in Adobe XD

      1:56
    • 20. How to create a 12 Column Grid in Adobe XD 2018

      2:46
    • 21. Working with colors inside Adobe XD CC

      5:30
    • 22. Use Web safe fonts or iOS or Andriod specific fonts in Adobe XD

      8:43
    • 23. How to use Character Styles in Adobe XD

      3:06
    • 24. Creating realistic buttons in Adobe XD with paste properties

      5:39
    • 25. How to draw your own custom icons in Adobe XD

      9:04
    • 26. How to make a gradient & blur in Adobe XD

      2:10
    • 27. The pros & cons for working with images inside Adobe XD

      3:38
    • 28. Working with Illustrator, Photoshop & InDesign in Adobe XD

      8:34
    • 29. How to mask in Adobe XD

      8:50
    • 30. Production Video Adding text fields & buttons in Adobe XD

      6:53
    • 31. 31b How to make a popup model in Adobe XD with a blurred background

      4:23
    • 32. Creating 12 column card dashboard using the repeat grid tool in Adobe XD

      23:00
    • 33. How to make a mobile phone mockup with Adobe XD & Photoshop

      14:42
    • 34. Make an APP version of your Adobe XD UX project

      14:39
    • 35. Hidden features for Adobe XD Repeat Grid

      8:56
    • 36. Advanced prototyping using buttons & dropdown menus in Adobe XD

      21:31
    • 37. One more Prototype trick & faking depth of field for mockup

      7:33
    • 38. UX User Testing in Adobe XD

      1:55
    • 39. How to export images & code from Adobe XD for developers

      12:50
    • 40. Class Project for Adobe XD

      5:07
    • 41. Shortcuts & Cheat Sheet for Adobe XD

      11:49
    • 42. BONUS: Software Updates

      37:24
    • 43. Conclusion for Adobe XD training course

      2:13
160 students are watching this class

Project Description

Hello lovely Skillshare people.

Let’s put your learning into action. We’ll work with the client below to redesign their old website interface. There are assets you can use that are in the exercise files, in a folder called ‘Class Project’. Download the exercise files here. Once you’ve created your design you have permission to use the brand in your own portfolio. For more information about the project, review video “40 Class Project” from the training course.

Client:

Bring Your Own Laptop - Online Video Training.

Description

Develop a new design for their student facing video page. Here is an example of the page they want re-imagined: www.bringyourownlaptop.com/xdproject

There is a folder ‘class project’ with logo assets you can use. You can use course titles & text from the example page above. There is no restrictions on images, colors or fonts. 

- Option B: You can run the same project with your own idea/business/client.

Who is this for?

Creatives - This product is used by creative individuals i.e graphic & web designers who want to upgrade their current skills.

Feature List (Product requirements)

  • Video Player
    • The site should be video centric. Viewing and movement to the next video should be the main priority for the design.
  • Navigation
    • HOME, COURSES, RESOURCES, CONTACT, FAQ, LOGIN, SIGNUP
  • Course title
  • Video title
  • Comments
  • Video Transcriptions
  • Search bar
  • Download course related files ‘Download Exercise Files’.

Competitors & Product Inspiration

  • Lynda.com
  • Teamtreehouse.com
  • Pluralsight.com

Deliverables

  • Wireframes for client approval.
    • JPGs uploaded to comments section.
  • High fidelity prototype.
    • JPGs uploaded to comments section.
  • Prototyping wires
    • While in prototype mode, select all the elements in your project and take a screenshot to show all the blue ‘wires’. So we can see your user flow.
  • Links
    • Create & share links for both wireframe & high fidelity XD projects.
  • Behance
    • Upload the designs to your Behance portfolio to show off you new skills.

Cost

  • You have a $0 budget :) 

Student Projects