What is Wireframing?
Recently, I became a web designer at a new company, which is exciting for me! There are many differences between the print and web worlds that I have had to learn, such as the newest markup languages (CSS3 and HTML5), CMS, how to use templates, and a little about the functionality of PHP so I don’t drive the developers nuts. Web design has many steps to the process, one of which is called wireframing. I had previously never done wireframing, and am still learning. So far what I have learned about wireframes is that it is the first step in the design process after collecting content and the creative brief from the client.
What is it?
The wireframe is an essential part of the process that defines possible directions and layout styles for a website. It contains the basic structure and items on a web page, which is determined by a sitemap. The content will determine what types of modules or sections of a website will be needed. Then a designer or developer will block out the content and the various modules in a way that they feel is going to be the best user experience and look aesthetically pleasing. The wireframing stage is also where you determine what is going to be “above the fold” or “below the fold” on the screen or on mobile. There are a few elements, such as header and navigation, that should always stay above.
Some popular tools that designers and developers like to use for creating wireframes are:
Each of these tools will produce a different style or look to your wireframes, so it really depends on what you want to show your client. Balsamiq and mockingbird will have a more “sketchy” look than if you use Illustrator or InDesign, which will also not have pre-made elements such as other specific wireframing tools.
Many designers start with the home page layout, and that style will be repeated to some extent throughout the site to create unity. One thing to consider when creating the home page layout, or your landing page, is where the users are coming from. Are they clicking through from promotional ads on the internet or from social media links? If so, then those types of promotions should be visible on the page. What are the users interested in, and why are they coming to your site? These things should be clear the moment someone links to your site, or else you could lose their business or interest quickly. This is why understanding content is key to being able to proceed with design. The creative brief will give insight into what a client is trying to accomplish through their site as well. Also, designers should have a rough site map, or flow chart, to help plan out which pages will need to be created.
The first thing I would add is the logo and navigation placement and functionality. Will it be on the side or at the top? Will it be sticky or will it be fixed? Decisions like this will depend what content is on the home page. If it is a one-page type of layout where you scroll and scroll, I would have it be sticky at the top so you can always see it and navigate easily. If the home page is short and simple I would just leave it at the top because it is easy to return to.
Call to actions, such as phone numbers, subscribe now buttons, images, and video links that would be relevant to what the user is looking for, etc. should be quickly visible on the home page. This can often be accomplished by adding a main header/slider, and putting content below it. Or you can have a text header and flow content beside or below it without a slider.
All of the layout decisions will be determined by what the purpose of the site is. A lead generating site will have a very different layout and purpose than an e-commerce site, which will have a focus on products and sales.
Once the designer has two or three wireframes/layouts of the main pages of the site, it is presented to the client. During this stage, it must be explained that the user has clicked through to the site because of content they were interested in, or it was an organic search, etc. The user experience has to be factored in, not just the pretty layout. Hopefully that makes sense.
This is just a really rough summary of what a wireframe is and how to get started. I plan to post more as I continue to learn about the web design process! What I do know is that following a process and communicating clearly with wireframes, mockups and contracts is crucial to having a smooth launch!
For a designer, this step is crucial because the client will give an approval based on a wireframe, and this will define the direction the project will go. Any major deviations from this layout later in the process, due to client changes, will be subject to charge, since the client agreed to move forward at the beginning. This should be clearly defined in a client-designer contract.