Wireframes are like the blueprint of a website,
an overview of the project.
There are two types of wireframes:
low-fi fidelity or high-fi fidelity.
Low-fi design tools are used 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)
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.
Let's take a minute to look at the interface.
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.
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, you can hold down the Shift
and click each object.
Keyboard shortcut is: V or 1
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 is: P or 2
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 is: E
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, or highlight
and set the text alignment to be left, right or center.
You can also lock text on the canvas to keep it in place or convert
any text block into a Sticky Note.
Keyboard shortcut is: T or 3
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 square.
Hold Shift while drawing a line will lock your line
to 0°, 45°, or 90°.
Keyboard shortcut is S or 4
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 is: 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.
For videos, put a triangle
as a play button at the box's center too.
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 is: N or 6
See something you like go ahead and add an emoji!
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.
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.
Select 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.
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.
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.
Thanks, everyone, for watching.
If you enjoy the video, like it, share it,
and subscribe to the channel. And I will see you next time!