How to Create Website Wireframes

thumb-wireframe

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

  1. Planning a Perfect Website Content
  2. Visualize Website Structure – Sitemap
  3. How to Create a Website Wireframe ←We are here!
  4. Photoshop Website Design Tutorial
  5. Slicing Images for Your Website with Photoshop
  6. Guide to HTML Semantic Markup
  7. Basic Process to Apply CSS to Your Website
  8. 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

Wireframe Showcase – You’ll see actual design when you mouseover it.

wireframes

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.

I often use CacooandMoqups.

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.

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.

Cacoo

At first, create a new account.

Insert a box for a frame

Go to edit page. Insert a box for a frame.

Insert parts of web pages

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!

Wireframes are created like this!

Next chapter, I will tell you how to design by Photoshop!

» Next chapter: Photoshop Website Design Tutorial

Share

Comments