UXPin for UX Design

Course details

Explore UXPin, the collaborative product design tool that allows you to create and present wireframes, mockups, and prototypes. Instructor Tom Green starts with a review of how to set up UXPin, then shows how to import existing artwork and start to create wireframes. See how to add interactivity and motion to prototypes to simulate real-world app experience, and how to share prototypes and documentation with a team and workgroup.

Topics include:
- Getting started with UXPin
- Creating artwork
- Creating a low-fidelity wireframe
- Building a high-fidelity prototype
- Adding interactivity and motion
- Practical UXPin projects
- Sharing a prototype

Concepts

Introduction

uxpin for ux design
exercise files
what you should know

Getting Started with UXPin

uxpin dashboard
ux documents
review of the uxpin interface
using the view options
create a new document
using the library
creating and using components
fonts and the uxpin text element
adding layers
using the uxpin smart grid
import video
previewing a project

Create a Low-Fidelity Wireframe

create user flow diagrams
adding device screens
create a content wireframe
create a low-fidelity wireframe
adding pages
Creating Artwork for UXPin

adding screen transitions

create assets in photoshop
create assets in sketch
using the pen tool
importing artwork
working with color
creating imaging effects
editing a design system

Building a High-Fidelity Prototype

adding content
creating a component
using states
adding scrolling
a component teacher trick

Adding Interactivity and Motion

adding interactions
create hot spots
using multistate elements
using data in uxpin
adding animations
animating state changes

Practical UXPin Projects

create an accordion menu
create a navigation drawer
create a pop down menu
create navigation using uxpin elements
design a carousel
add interactivity to a carousel
style elements with custom css

Sharing Your Prototype

using the share menu
export color and type styles to json
exporting your project

Conclusion

next steps