What are wireframes?

First let's go back to the beginning, because what are wireframes actually? The wireframes of your website can be seen as the “skeleton” of every page that will be in your website. Below you can see an example of the wireframes that were used for the blog detail page of our own website, the page you are looking at now.

What you see is a schematic representation of the elements that should appear on the page. At the top we start with the header, in this case the logo on the left and the menu button below it. Then to the right follows the title of the post, an intro text, a button with a category name and so on to the bottom of the page.

Are wireframes the same as a design?

What you see above in the wireframe doesn't look anything like it the design of this page. In the wireframes we pay attention purely to layout and functionality. The use of visuals, colors and effects has been omitted here. It is true that there are already some design "hints" in it, things that the web or app designer will have to take into account later. For example, the section where users can sign up for the newsletter. There you see two elements that are positioned playfully from each other. Or the horizontal lines, which indicate that you are going to another part of the page. How the designer solves that and what that will look like, you determine in the design phase.

Accompanying document

In addition to creating a wireframe per page (or template), you also create an accompanying document for the wireframes. In that document you provide special explanations for each element about its operation, if necessary. A good example is the image at the very bottom of the footer with the title “flying cow”. We want to have an image of a cow that, as it were, "flies away" when the user clicks and the user automatically scrolls all the way back to the top. Such functionality cannot be properly represented in a wireframe, which is why you add it separately with text and explanation. The designer then knows that he has to come up with an effect for a cow that flies away and the developer of the site knows that he has to build in a function that allows the user to scroll up when he clicks on the cow.

Our advice is to really describe everything you see in an accompanying letter, this can be part of it Technical Document. Some things seem very obvious, but appearances can sometimes be deceiving. Take for example the paragraph shown in the wireframe. That is just a piece of text in the wireframe, but there is a good chance that you will also want to put an image in there later. This is currently not taken into account in the wireframes, in other words, there is currently no consensus on how an inline image should be displayed. And there are quite a few details that you have to coordinate. For example, do you want a caption under the image or do you want a large one? border around it? If you don't record these kinds of things now, it will lead to confusion, disappointment or discussion later. A designer and a developer cannot design or build something they don't know exists or what it looks like.

By By checking and describing elements in your wireframes, you clearly indicate what you want and you quickly find out whether you have forgotten to add things in your wireframes. It's better that you forget something in the wireframe phase than when your website is already live!

Do you create a wireframe for each page?

No, basically you just create wireframes for the different ones templates of contentblocks that appear on your website. You can have multiple pages that all use the same template or reuse the same content blocks. The template of this blog page is the same template as the blog page we published last week. So two pages, but they both use the same template.

The number of templates in a website also largely determines the time required (and therefore the costs) to create a website. The smallest differences between two pages can result in the need to create two separate templates. For example, you have a wireframe for an “about us” page. That is a fairly simple page with a title, some text, image, header and footer. Suppose you create a contact page that looks exactly the same, except that this page contains an extra column on the right with contact information for your company. This means that you need two separate templates, one for “about us” and one for “contact”. That means extra work for the designer and extra work for the programmer.

Always look critically at the amount of templates you need. You can often make major cost savings by making small concessions. If you omit the right column in your contact page and put your contact details as text at the bottom of the page, you save on creating an extra template.

Tip: think about the content in advance!

During the wireframe phase you record all the elements that should appear in your website. This is actually also the time to think about the content you want on your website. When you have the wireframes of your website in front of you, you can see exactly where you have room for text and you can therefore determine whether you have enough space, too little or perhaps even too much space. Nothing better than to correct and make adjustments during this phase. Because it is better that you see now that you do not have enough space (or too much) for your content, than when the site is almost live and you find out that the texts are not suitable for you!

Which tool do I use to create a wireframe?

There are many ways to create wireframes for your website. The first and simplest is with pen and paper. Because you don't have to work pixel perfect in a wireframe, you can draw the elements globally. Sketching wireframes also does not require enormous drawing skills, so pen and paper can be used as a first draft.

It is of course easier to do this digitally immediately. The tool we use at Van Ons is called Balsamiq Mockups. With that program you set up a canvas and drag all the elements into your canvas. The wireframe above was created with Balsamiq.

You can also create wireframes with InDesign or Photoshop. The disadvantage of this is that your wireframes look too good from the start - and this may sound crazy. With Photoshop and InDesign, standard elements are so beautifully displayed or finished that you can almost think that your wireframes are your designs. To avoid this miscommunication, we advise you to use a tool that makes the wireframes as simple as possible (almost ugly).