Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Skillshare

Adobe Xd Masterclass: Design a Mobile App & Website Wireframe

via Skillshare

Overview


Adobe XD is the all-in-one UX/UI solution for designing websites, mobile apps, and more. 

That means you can design and create living wireframes and work through user journeys to create believable mock-ups to present to clients or to expand your portfolio to include more user experience and user interface design projects.

As a creative, graphic designer or web developer, learning this tool can expand your marketability and help you adapt to the in demand projects using UX/UI and beyond.

This class is one part graphic design, web design and UX/UI design as I incorporate all necessary disciplines together to create believable, real world projects. 

In this class, we will design a simple desktop website layout and learn how to use the prototyping tools to create interactions between all the design artboards to create a seamless working wireframe. We will also learn the repeat grid tool to make creating complicated layouts a breeze. 

In the intermediate level of this class we will create a mobile app. We will think about our user personas to create two unique user journeys and create a fully designed and polished layout. We will learn the auto-animate features and other transition features to create menu slide out effects and buttons that look real and authentic.

I talk about the why behind my design choices as we walk together through each step.

Everything you see here you will be able to do by the end of this class.  So join me for lessons that will up your design game and give you the upper hand as UX and UI becomes the top in demand skillset. 

Syllabus

  • Class Intro
  • Getting Started
  • Hero image
  • Repeat Grids
  • Creating The Footer
  • Creating Our Subpage
  • Responsive Grid
  • Prototyping
  • Sharing & Resizing
  • Mobile App Design - Setup & Ux/Ui
  • Mobile App Design - Homescreen
  • Mobile App Design - Homepage Animate
  • Mobile App Design - User Home Screen
  • Mobile App Design - User Home Screen - Part2
  • Popout Menu Design
  • Transaction Menu
  • Fine Tuning and Linking Our Design
  • Testing Your Design On Your Phone
  • Linking It All Up
  • Message Screen
  • Message Screen Part2
  • Message Screen Part3 - Animating Our Toggle Button
  • Student Project
  • Bonus Lesson - Create A Slidable Bar

Taught by

Lindsay Marsh

Reviews

Start your review of Adobe Xd Masterclass: Design a Mobile App & Website Wireframe

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.