How to Wireframe a Website || Balsamiq Mockups Tutorial

In this Balsamiq Mockups tutorial I’m showing you how to wireframe a website with this mockup tool. You can use the demo version online for free: There’ll be a follow-up video, where I make the visual design on top of this wireframe in Photoshop.

I made a rough, hand drawn sketch, where I drew all the elements I want on the front page of the website. I used that as a guide to draw a cleaner wireframe in Balsamiq Mockups.

Go to the Balsamiq Mockups website and click on Launch demo version. Go to Project, click on New mockup. I used a template for a 1200 px wide website so I imported the mockup JSON. 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. 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 or alignment from the tab on the right.

The website I’m designing here is an art portfolio so that’s what I’m typing in. I’m designing the front page of the website and the wireframe consists of a banner, navigation bar, different content sections (gallery, bio, blog/videos, contact and subscription form) and a footer.

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.

You can also change the color of the rectangles. You might want to alternate colors between the backgrounds of the different sections to make them stand out more.

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.

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.

I’ll make a part 2 in this #webdesign series on how to draw a website layout with colors, images, fonts and so on on top of this wireframe using Photoshop.


ART SUPPLIES I USE (Amazon affiliate links)
Cotman Watercolor Set
Watercolor Masking Fluid
Metallic Acrylics
Acrylic Gesso
Gloss Varnish
Soft Pastel 24 pack
Pastel Pencil Skintones 12 pack
Black Acrylic Artists’ Ink
White Ink

Camera: Canon PowerShot SX260 (affiliate)
Tripod: Hama Star 700 EF (affiliate)
Microphone: Camera’s microphone
Video editing: HitFilm 4 Express / Adobe Premiere Pro (affiliate)
Audio editing: Audacity
My filming equipment and set-up:
My art supplies:

Subscribe to Ivy Lily Creative YouTube channel for more art and DIY:
Check out my blog:
Sign up to receive free coloring pages:

Coloring pages:
Art prints – Society6:
Art prints – Redbubble:
Art prints – Artflakes:


• Acoustic Meditation 2 by Audionautix is licensed under a Creative Commons Attribution license (
• Guitar 1 by Audionautix is licensed under a Creative Commons Attribution license (

• Etsy* – Get 40 free listings: (referral)
• GIMP – Free image editor
• PicMonkey – Free image editor online
• Screencast-O-Matic – Free screen recording


Xem thêm bài viết: