×

Creating Wireframes

When getting started on a design, you often first need to first create mockups and wireframes. Tools commonly used by designers for prototyping include Sketch and Photoshop, both of which integrate with InVision through Craft.

InVision has also created a design tool called Studio, which allows you to create robust prototypes with beautiful interactions. Although it's not yet publicly available, you can request early access and begin using Studio today—for free! 

Other great free online tools for creating wireframes include Pencil Projectwireframe.cc, and moqups.com.

Image calculators like this are helpful for validating image sizes before uploading and testing on your iOS device. You can also check out material.io for popular image sizing, including desktop and laptop monitors. For more information on screen sizing, be sure to check out this article: What size should my screens be?

You will need to edit your images using an external image editor (InVision Studio, Sketch, Adobe Photoshop, Pencil Project, etc.) prior to uploading your image files in InVision. Once your wireframes are ready, you can upload your screens and start adding interactivity, fixed headers and footers, overlays, etc.

Note: Please do not use actual end-customer personally identifiable information (PII) in your mockups (or otherwise provide such PII to InVision), except for the limited PII of users required for them to access the InVision service. While using our service, please do not provide us with any personal health information (e.g. information subject to HIPAA), personal financial information (e.g. data subject to PCI or the Gramm-Leach Bliley Act (GLBA)), or student education records subject to the Family Educational Rights and Privacy Act (FERPA). If you need to generate realistic placeholder data, check out the Craft Data plugin. 

 

Getting Started: Prototypes (
)

Creating Wireframes

Prev