Wireframes are like the blueprint of a website, an overview of the project. There are two types of wireframes; low-fidelity or low-fi design tools are useful for quick sketches, making them easy to create in the early design stages. They help designers form their initial model for the overall layout and navigational structure. High-fidelity or hi-fi has more bells and whistles and is typically used to mocking up the final design versions. In this instance, to create a low-fi wireframe, one can use applications such as Balsamiq, Azure and InVision. And for things hi-fi, InVision Studio, Sketch and Adobe XD.
In this video tutorial, we will be using InVision, one of the standard software used in the industry.
Let’s get started. Go to Invisionapp.com (https://www.invisionapp.com)
To create a new Freehand document:
- After signing in, it may take you to the projects dashboard.
- Near the top-right of the page, click the + button in the red circle.
- Three options are available: Prototype, Freehand and Board. Click on Freehand to create a new freehand.
- Type a name for the freehand and click the red button, create.
- Select any of the templates, or click blank to create an empty freehand canvas.
Before we start to create our wireframes, let’s take a minute )to look at the interface.) familiarize ourselves with everything on the screen. In the next sections, we’ll look at these features in greater detail.
The whole blank space is called your canvas, where you can draw endlessly. In the top left-hand corner is the InVision logo to go back to your dashboard. Besides the logo is the title of your document.
In the middle is the sketch colours with the line thickness and endpoints. In the top right-hand corner are the menu options. Access an additional menu for exporting and version history, see your collaborators, and enter Presenter mode to share your work. On the left-side middle is the toolbar to start your drawing. In the bottom right-hand corner is your Navigation for the canvas, Pan, Zoom, Shortcut keys, and where to get help.
Pointer
The pointer tool allows you to select, move, and resize objects on the canvas. To manipulate multiple items at once, click and drag, creating a box around the chosen things (like a marquee selection in Adobe Photoshop or Illustrator). Alternatively, hold Shift and click each object. Keyboard Shortcut: V or 1
Pencil
Draw on your canvas with the pencil tool. When you select the pencil tool, you can change the colour, adjust the line thickness, or set the default end caps at the top. With a chosen colour, you’ll see three different opacity options along with an opportunity to add fill. But, remember to keep the wireframe as simple as possible by using black and white and greys.
To create neat circles or squares, hold down the Option key while drawing. Hold the Shift key while drawing will help you create straight lines at 0°, 45°, or 90°. To create a straight line at any angle, hold Shift when you click to draw, but release Shift before finishing your line. Keyboard Shortcut: P or 2
Eraser
To erase or clear the canvas shape with the eraser tool, click once on the pencil tool. It can be found when selecting the Pencil tool. A menu rolls out to reveal the eraser. Place the eraser on top of the line that you want to remove, and it gets erased. Keyboard Shortcut: E
Text
When the text tool is selected, click once on the canvas. The text tool adds to type something. Go ahead and enter text on your canvas. To create a line break, press Enter. Switch to the pointer tool to resize your text. If you use the pointer to select the text, you can change the colour, formatting, and alignment. Or highlight the text, and you can format the line of text to be bold, italicize, highlight and set the text alignment to be left, right or centre. You can also lock text on the canvas to keep it in place or convert any text block into a Sticky Note. Keyboard Shortcut: T or 3
Shape
With the shape tool, you can create rectangles, circles, or straight lines. Click the shape tool, and then select the appropriate shape (rectangle, circle, or line). Hold Shift while drawing to create perfect squares and rectangles. Holding Shift while drawing a line will lock your line to 0°, 45°, or 90°. Keyboard Shortcut: S or 4
Image
Upload images directly to the canvas with the image tool. Once you upload a photo, switch to the selector tool to resize your image. You can also drag and drop images directly onto the canvas, or you can sync your files from Sketch and Photoshop Keyboard Shortcut: I or 5
Avoid using graphics and images in your wireframes. Use simple rectangles and squares as placeholders. If you place an “x” through the middle of the box, this will signal where the image will be placed. We call this for position only or FPOs. For videos, put a triangle as a play button at the box’s center too.
Sticky Note
Got a note you want to clarify a point? Sticky Notes allows you to add notes anywhere on the canvas. With a sticky note selected, you can change its colour, adjust its width, and add and format text. Keyboard Shortcut: N or 6
Reactions
See something you like go ahead and add an emoji!
Freehand editing toolbars
The editing toolbar appears when you have one or more objects selected. The editing toolbars are contextual menus, so you’ll only see the tools available when a tool is selected.
Editing shapes and lines
After creating shapes and lines, you can edit them using the menus. Select a shape, and use the menu at the top of the page to change the colour, add a fill, or adjust the outline opacity or weight. When ready, try selecting the line, then change the colours, add a filler, or modify the line opacity or weight. Select any line you’ve drawn, and you’ll see an option to start and end the line with a dot, arrow, or flat end. For shapes on the canvas, you can align objects to each other or lock one or more shapes in place. To work correctly, you need to select at least two items or more to align them.
Editing text
When you have text selected, you can change the colour, formatting, and alignment. You can also lock text on the canvas to keep it in place or convert any text block into a Sticky Note.
Navigation Tools
Click on the hand tool at the bottom to pan around the canvas. Or press and hold the Spacebar to access the Hand tool, enabling you to move around an image by pushing on it.
Click on the calendar icon, which is the keyboard shortcuts. If keyboard shortcuts are used, the faster your productivity and workflow will be.
The question mark is the help section to what’s new and sends feedback to InVision. And the magnifying tool to zoom in or out of the canvas. Just like Adobe products, you can Command/Control plus or minus to zoom in and out. One can even zoom in at 6400%