So, you are ready to start setting up your website from scratch.  You have certain requirements of content layout and functionality.  A wireframe is what you have before visual effects and content are added.

Let´s take a look at the basic steps of wireframing.  Get ready to get your feet wet as you go deeper into this important step in any screen designing process.

First Step:  Think of an Idea

The best way to think of an idea is to find inspiration.  You can do this by visiting several websites and try to figure out what each designer had in mind while wireframing.

But you still need to get the idea of the wireframe and see what is the content designers are giving priority to.  You can do this with an app called Wirify, which allows you to watch any website in wireframe.

As you go through each wireframe, try to find common places in all the designs and check out how well it has worked for them.

Second Step: The Process Design

You must then decide on the type of process you are going to implement. This process is organic, which means that designers approach the whole wireframing and translation to code or visuals differently.

Decide which process brings out your strengths and makes you feel more comfortable.  Perhaps you will feel comfortable with a 12-column grid and use a tool called cssgrid to get your design.

Third Step: The Tools

There are several wireframing tools that you can use for a faster and better wireframing.  Here is a list for you to go and check out.  Remember, do what works best with what you are.

  • Omnigraffle
  • Balsamiq
  • Adobe CS
  • Keynotopia
  • Axure
  • Flairbuilder

There are much more in town but these are the most widely-used products.

Fourth Step: Grid and Layout

Once you have set your mind in a tool and already have it running, it is time for the grid and then the layout.   For starters, you should set a document size.  A proper size is 1280 x 900, especially if the picture will need some color enhancement.

Next, you will import your template from cssgrid to your document.

When it comes to layout, you should think of boxes.  Think of what is the most important things on the website and which will be the easiest and most comfortable position for your template.

Fifth Step: Start Placing Information

You can start adding information little by little.  This will help you decide what design has a better flow for informing.   Also, think of your client’s requirements and actual needs.

Sixth Step: Fine-Tuning

Use Grayscale to determine the visual strength of your elements.  The advantage of it is that it will later help you in the design process.