Adobe Xd Masterclass: Design a Mobile App & Website Wireframe
Offered By: Skillshare
Course Description
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
Related Courses
Innovation Strategy with Goldman Sachs 10,000 WomenGoldman Sachs via Coursera Human-Centered Design 201: Prototyping
Ideo.org via Acumen Academy Introduction to Human-Centered Design
Acumen Academy Additive Technologies in Metallurgy & Mechanical Engineering
St. Petersburg State Polytechnic University via Coursera Arduino y algunas aplicaciones
Universidad Nacional Autónoma de México via Coursera