How to Wireframe a Website || Balsamiq Mockups Tutorial


Hi everyone! Today we’re making a wireframe for a website
layout in Balsamiq Mockups. You can use the demo version online for free. I started by making a rough, hand drawn sketch,
where I drew all the elements I want on the front page of the website. And I’m using that as a guide to draw a cleaner
wireframe in Balsamiq Mockups. First, go to the Balsamiq Mockups website
and click on Launch demo version. Then go to Project, click on New mockup. I’m using a template for a 1200 px wide website
so I’m importing the mockup JSON by copy pasting the code here. Drag the template from one corner if you need
to adjust the size for your screen. There are all kinds of text boxes, shapes,
icons and buttons available. Go to common in the menu and choose rectangle
and just drag it on top of the template. This will be the banner area. Then drag an image box on top of the banner. Click outside of the image to lose the text
input box and then you can resize the image box. Go to text and drag a big title next to the
banner image. If your title is on more than one lines, you
need to drag in a new title for a new line. You can center the text using the grids. They will automatically pop up when you’re
moving the elements. You can change the font size, type, color
or alignment from the tab on the right. Then click on the subtitle and drag that under
the big title. The website I’m designing here is an art portfolio
so that’s what I’m typing in. Drag in a menu bar. Type in your navigation links, separated by
commas. You can choose which one is selected. I’m choosing home, because I want this to
be the home page. Drag in another rectangle under the menu. I’m also making the template longer. Add a big title and type in the title of this
section. Mine is a gallery section so I’m dragging
in images. If you need many elements of the same size,
you can just duplicate them using the button next to the undo and redo buttons. I’m dragging the section a little longer so
I can fit in a see more link. Find the link element and drag it in. Because this is the demo version, it will
self-destruct in one hour from starting so make sure to save it, in case you might take
longer than an hour. Go to project, export and choose mockup to
JSON. A text version of your wireframe is copied
on to your clipboard. Open a text editor, paste in the text and
save it. Duplicate the rectangle of the last section
to make a new one. You can also change the color of the rectangle. You might want to alternate colors between
the backgrounds of the different sections to make them stand out more. Duplicate the title of the last section and
drag it into the new section and type in the new title. Mine is an artist bio. I’m dragging in an image and then going into
text and dragging in a block of text. Duplicate the see more link from t
previous section. The next section is pretty much the same,
but I’m reversing the order of the image and text and making the image bigger. And instead of an image box, I’m going to
Big and dragging in a video player. I’m going into icons and adding the YouTube
play button on top of the video player to make it clearer it’s a video. You can’t change the size of the icons. If you have a template you’re working on top
of, you can use the stripes of the template as a guide for the element sizes. I’m trying to use thirds here: the text is
about one third wide and the video player is two thirds wide. The last content section will be divided into
two: contact information and an email list subscription form. Add a line of text as the email address and
then go to icons and find the social media icons you want to use. And add a line of text beside the icons and
an image in the subscribe section. Go to text and drag in a block of text beside
the image. Go into forms. Drag in a text input box. You can type in what you want the guide text
of the box to be. Then place button below it and type in subscribe. Drag in the last rectangle for the footer. Add a label, I typed in copyright information. Go to project, export and click on current
mockup to PNG to save it as an image. Download and save the file. Remember to also save the text version. Go to project, export and click on mockup
to JSON. You’ll have the text version on your clipboard,
paste it into a file and save it. If you want to modify the wireframe later,
you can just copy that text and import it into Balsamiq Mockups and continue it. This is what the finished wireframe looks
like. I’ll make a part 2 on how to draw a website
layout with colors, images, fonts and so on on top of this wireframe using Photoshop. Thanks for watching!

, , , , , , , , , , , , , , ,

Post navigation

13 thoughts on “How to Wireframe a Website || Balsamiq Mockups Tutorial

  1. I typically make traditional art videos with some DIY and images editing tips at times. But I wanted to make this video, cause I've been learning IT , business and graphic design stuff and wanted to share what I've learned in some of the classes.

Leave a Reply

Your email address will not be published. Required fields are marked *