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.
Tools for Creating Website Wireframes
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.
Please use your favourite Adobe or Office tools if you think it will be easier.
- Power Point
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.
Next chapter, I will tell you how to design by Photoshop!