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. There'll be a follow-up video, where I make the visual design on top of this wireframe in Photoshop.
How to Create a Website Layout with Photoshop from Wireframe: • How to Create a Website Layout with Photos...
********************************************************************
You can use the demo version for free: https://balsamiq.com/givingback/free/
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.
********************************************************************
YOUTUBE SET-UP
Camera: *Canon PowerShot SX260 http://amzn.to/2mMVSDL
Tripod: *Hama Star 700 EF http://amzn.to/2nWnoPr
Microphone: Camera's microphone
Video editing: HitFilm 4 Express / *Adobe Premiere Pro http://amzn.to/2n0L9X5
Audio editing: Audacity
My filming equipment and set-up: http://bit.ly/YouTubeFilming
My art supplies: http://bit.ly/ArtSupply
WHAT'S NEXT
https://www.ivylilycreative.com/2017/...
SHOP
Coloring pages: http://www.ivylilyart.etsy.com/
Art prints - Redbubble: http://www.redbubble.com/people/almonda
FOLLOW
Blog: http://ivylilycrafts.blogspot.fi/
Twitter: / ivylilyblog
Instagram: / ivylilycreative
Pinterest: / ivylilycrafts
Facebook: / ivylilycreative
MUSIC
• Acoustic Meditation 2 by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Artist: http://audionautix.com/
• Guitar 1 by Audionautix is licensed under a Creative Commons Attribution license (https://creativecommons.org/licenses/...)
Artist: http://audionautix.com/
DISCLAIMER
Links marked with * are affiliate/referral links that let you support the channel at no extra cost to you.