Video Description
Get to grips with advanced UX techniques!
About This Video
- Learn how to ideate and use Sketch App
- Understand high-fidelity sketching and prototypes.
- Explore concepts such as Ideation, sketching, high-fidelity UI sketching, prototyping, and more.
In Detail
User experience (UX) design is a theoretical understanding of how users interact with websites. User experience design is the process of enhancing user satisfaction with a product by improving the usability, accessibility, and pleasure provided by interacting with the product. Everything humans interact with has an experience associated with it.
You will start off your journey by looking at how to set up a high-fidelity UX design process and defining the steps and interactions a user is engaging in. Learn to sketch wireframing, symbols and prototyping here. You will also learn how to export PNGs. Moving on, you’ll master high-fidelity prototyping; here you will learn to use interface styles, typography styles, color styles, and more. Further you will master interaction design and motion studies, reviewing motion patterns and identifying areas that require animation. You will learn why we should use prototypes and Invision App, connecting prototypes via Invision App, and sharing.
Finally you will finish the course by looking at motion prototypes, setup principle by Mac, uploading assets, animating components, and exporting video and app assets for testing.
Table of Contents
-
Chapter 1 : Sketching into Wireframes
- The Course Overview 00:03:35
- Paper Sketch > Wireframe 00:04:15
- Sketch App and Setup 00:09:32
- Wireframe Assets 00:06:58
- Wireframes Pages – Idea Choice 00:11:00
-
Chapter 2 : Sketch Wireframing Symbols and Prototyping
- User Interface and Sketch Symbols 00:09:51
- Sketch Layers and Labels 00:11:25
- PNG Exporting 00:06:56
- Refreshing InVision Prototype 00:08:13
-
Chapter 3 : High-Fidelity Prototyping
- UI Styling and Sketch Symbols 00:12:30
- UI Style Guide 00:10:53
- Typography Styles H1 - H6 00:15:00
- Color Styles Hex Code 00:12:15
- Imagery and Composition 00:06:39
- Headlines and Copy 00:09:26
- PNG Exporting 00:07:06
- Refreshing InVision 00:14:00
-
Chapter 4 : Interaction Design and Motion Studies
- Why Does Motion and Interaction Matter 00:05:35
- Review Motion Patterns 00:06:15
- Identify Areas That Need Animation 00:07:09
- Define Interactions and Motion Prototypes 00:07:50
- Separate Layers and Export Layer Assets 00:07:11
-
Chapter 5 : Build a Motion Prototype
- Set Up Principle for Mac 00:04:18
- Upload/Import Assets 00:05:32
- Animate Components 00:09:16
- Iterate Animations and Re-Upload 00:07:12
- Export Video and Review 00:09:31