How to Create Website Wireframes
Web Creator Box shares basic and advanced HTML, CSS, JavaScript or design techniques. However I noticed I haven’t wrote tutorials on how to create a website from scratch. So, in upcoming posts on Web Creator Box, I’m going to write a step-by-step creating a website guide! You will learn how to make a website wireframe on this chapter!
Step-by-Step Creating a Website Guide: Chapter 3
- Goal: Making a clear and well-strutured wireframe
- Things you need: A piece of paper and a pen
- Knowledge Requirement: Everyone is welcome
Table of Contents
- Planning a Perfect Website Content
- Visualize Website Structure – Sitemap
- How to Create a Website Wireframe ←We are here!
- Photoshop Website Design Tutorial
- Slicing Images for Your Website with Photoshop
- Guide to HTML Semantic Markup
- Basic Process to Apply CSS to Your Website
- Let’s Publish Your Website to the World!
What is a Wireframe?
After you decided main target users and what kind of website it will be, it’s time to make a wireframe. Wireframes are basic illustrations of the structure and components of a web page. Please do not start designing yet unless your website is super minimal design. Wireframing helps clarify exactly what needs to be on your website.
If it’s your own website, you can use only a piece of paper and a pen to make wireframes! I recommend to make images or PDF files if it’s client works because you will need to share wireframes by Email.
Great Examples of Wireframes
Viewing some examples will be easy to understand what wireframes are.
Wireframe Showcase – You’ll see actual design when you mouseover it.
Flickr: The I ♥ wireframes Pool – Flickr group.
I ♥ wireframes – There are many wireframes for tablet and mobile devices.
Tools for Creating Website Wireframes
Online Tools
Online tools for creating wireframes are very useful because there are many preset parts of website elements like image, tab, map or form. You can just drag and drop to make it.
- Cacoo – Free for 25 pages
- Moqups – Free
- Mockingbird – Free for 1 project, 10 pages
Offline Tools
Please use your favourite Adobe or Office tools if you think it will be easier.
- Illustrator
- Photoshop
- Fireworks
- InDesign
- Power Point
- Visio
Paper and a Pen
This is classic. Of course you can make wireframes by hand. Also check out those PDF template files.
- Download – Wireframe PDF Template (Landscape)
- Download – Wireframe PDF Template (Portrait)
- Sneakpeekit – You can download different type and size of template
Let’s Try to Make it!
OK, it’s time to try! Since it’s Step-by-Step creating guide, I will create a photographer’s portfolio website as an example. I’m going to use an online tool: Cacoo this time.
At first, create a new account.
Go to edit page. Insert a box for a frame.
Then Insert parts of website from “Web” tab. Main elements that you want to show the most will be top and be displayed bigger than the others.
Wireframes are created like this!
Next chapter, I will tell you how to design by Photoshop!