UXPin for UX Design

Introduction

• UXPin for UX design
• Exercise files
• What you should know

1. 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

2. Create a Low-Fidelity Wireframe

• Create user flow diagrams
• Adding device screens
• Create a content wireframe
• Create a low-fidelity wireframe
• Adding pages
• Adding screen transitions

3. Creating Artwork for UXPin

• Create assets in Photoshop
• Create assets in Sketch
• Using the Pen tool
• Importing artwork
• Working with color
• Creating imaging effects
• Editing a design system

4. Building a High-Fidelity Prototype

• Adding content
• Creating a component
• Using states
• Adding scrolling
• A component teacher trick

5. Adding Interactivity and Motion

• Adding interactions
• Create hot spots
• Using multistate elements
• Using data in UXPin
• Adding animations
• Animating state changes

6. 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

7. Sharing Your Prototype

• Using the share menu
• Export color and type styles to JSON
• Exporting your project

Conclusion

• Next steps