First, what are website wireframes? They are visual representations of a website scheme, the skeletal framework of a website. It has no added colors, color schemes, logo, specific fonts or elaborate content. It serves only as a guide showing how the website will look like in its final form.
Creating a website wireframe is part of the initial design process, one of the first steps to take in a website design.
Here’s how a website wireframe might look like:
What’s the role of a website wireframe in the design process?
The wireframe comes as the initial step in a web design process that’s intended to succeed. You create one or several versions of website schematic representations that you’ll show to the client. By starting a discussion at this level in the process, you can cut and trim, change and adapt, so you and the client agree upon the structure of the future website.
Thus, you limit the errors that might appear in the website structure, whose corrections will be much more costly at an advanced step of the web design process.
It serves for:
- Sketching a draft of how the website should look like; a preview of the form and structure the website will have. If changes have to be done, it’s better to intervene in this early stage of the design, and not involve big costs to alter important parts of the website in its nearly final form.
- Communicating among team members, and as a starting point for any ideas of improvement of the future website.
What’s the difference between wireframes and mockups?
Wireframes serve as a sketch of the website, in the very initial step of web design. They outline only the bare-bones structure of that website, what the layout will be and how information will be included in what sections of pages.
On the contrary, mockups approach more the final look of the website. They give a better idea of how the final website will look like. At this level in the process, changes to the website mockup should refer to tweaks and refines, after the overall website structure and design has been defined. A mockup is the visual representation of the final website. However, the mockup is not clickable, which means it only approaches the look of the final website.
Example of website wireframe:
Example of website mockup:
To give a more complete presentation of the web design process, we’ll also mention prototypes.
As compared to wireframes and mockups, prototypes provide a high-fidelity representation of the final website. Unlike the first two, the prototype comes packed with UX elements, interactivity and clickable items. A prototype simulates the future website, only it needs added functionality to turn into the final product: the website.
To get a clearer picture of the web design process (and how the website goes from wireframe to prototype), please watch this video:
The above presentation shows how a professional web design workflow should look like.
However, for small projects and time/budget-limited orders, one can stick to one of the first 2 website “drafts” (be it wireframe or mockup). Then, based on the feedback on the wireframe or mockup, the designer can go on to building the actual website. Sometimes, this should be enough to get an idea of how the website will be like.
How do you tackle the problem of creating a website wireframe?
It might look frightening to create a website wireframe, if you’re not accustomed to creating wireframes. However, if you use “website sketches” instead of “website wireframes”, it might look easier to deal with.
It’s not that difficult. In fact, it’s not difficult at all. All you need is have a clear process in mind, and how you put it in a document will be the simplest part.
Steps to follow to create a good website wireframe:
- It’s of uttermost importance to start by having in mind what you want to create; the elements structure will reflect what you intend to create, they’re the pattern that takes form after careful thinking.
- Then, it’s important to have your research done (this article will help you in doing it) and know what tools to use to create website wireframes. Some of the tools you might consider: Canva, InVision, Sketch, Pidoco. In the following lines, we’ll show you an example of wireframe created with Pidoco.
- Throughout the process of creating wireframes, you should constantly have in mind that a wireframe serves to better think the website design, as a draft where you can make modifications. You can quickly apply modifications during the process and remould the website structure in the wireframe phase.
- In creating this website sketch, the focus is on UX and layout, and not the actual design, nor even colors or color schemes. It’s known that flaws are more easily spotted in this early stage, into the website structure and layout, than when a website is filled with color, images and content.
What do you need to include in a wireframe?
In creating website wireframes, you have to consider the following:
- Information design – here, you should include the main website information, by putting an emphasis on the structure of content elements in pages. It’s recommended that you have prepared main content for the website, and use that customized content to place in the wireframe. Otherwise, with generic content, alignment and spacing might be well suited, whereas differences among content boxes with unequal amounts of content might arrange inappropriately.
- Navigation design – this refers to the way users navigate within the page sections/pages of the website. You’ll set here the main and secondary navigation, with a focus on user experience and the way web surfers are accustomed to pass from one section to another in your website. You need to think of the most intuitive navigation, that fits your presentation and is as user-friendly as it can be.
- Interface/layout design – this aspect relates to visuals and a description of the user interface. It helps deciding on the global structure of the website, the way information and navigation are placed into the website pages to better emphasize the presentation in the future website. It defines what’s seen first in a website, its layout and the manner of arranging items in the website pages.
Let’s dive into the wireframing process
Usually, the process consists of the following steps:
- Study several sites in the same niche as the one of your website; find what they do well, how items are laid onto the pages and what’s driving to their success. You might note their layout, their navigation, the structure of pages and page sections, and decide what makes users love such websites
- Then, after having attentively studied the competition, you can draw a sketch of how you want your website to look.
Here’s an example we’ll use to better outline the process:
With Pidoco, you have a left-hand menu with items you can use to create the website wireframe. By simple drag-and-drop and a few adjustments, you’ll get the desired look of the page/website to design. This tool is especially useful for beginners, they’ll see it’s much easier to create website wireframes than they used to think. Plenty of items on the left and a blank canvas on the right is all you need to create a wireframe. In your creation, put creativity and expertise at work, double-check your wireframe versions and then put them aside for later consultation.
After a while, you or your team will know which version is best to follow and guide the subsequent website design process.
How to use the options of the website wireframe tool?
Within the many options of items to drag and drop and arrange on your blank canvas, you have to pay special attention to those you need to outline:
- Navigation – choose buttons for the menu sections; decide onto how many sections you’ll have in the menu; their order can be set later
- Forms – choose where to place forms in a page, to get maximum conversions from users that’ll land onto your pages
- Content sections in page – decide if content sections will follow a symmetrical pattern or they’ll have an asymmetrical arrangement
- How content sections are aligned – the alignment of content sections can easily be adjusted due to functionalities in the tool: when you place items on canvas, you’ll be guided to the best alignment that’s possible
This is how we integrated menu items in the page draft:
Putting together all needed elements, you make the website wireframe that’ll serve as good guide for the actual website design.
This is how we added a form (and a map) to the page:
Elements that you can use to place in the page draft:
- Text – this adds a line of text to the canvas, in the place where you want it to be found
- Text block – this adds a block of text in a section of the page where it provides useful information for users to go on browsing the website
- Link – this is a link item you place wherever needed for driving users to a different point in the website
- Headline 1 – this serves as main heading in the page
- Headline 2 – this serves as secondary heading in the page
- Headline 3 – for better structuring of the website pages, you might consider including heading 3 items in the page
- Action area – these elements are good to use to create a form in the page
- Text input – this item shows where users will type in their text to continue their customized navigation within the website
- Button – all pages need a CTA button. The CTA can be marked by a button you place in a strategic point of the page
- Image – images are of high importance for a website; in the wireframe, show where images will be placed with the purpose of supporting text and enhancing the presentation with suggestive visuals
- Dropdown – this item refers to a dropdown menu that’ll help users restrain their navigation to only what’s important for their particular interest
- Comment – this items refer to components in a blog, so they are especially useful and frequently met in wireframes for professional blogs
- Checkbox – this item implies interactivity of users with the web page, so mark where this interaction will take place, with the help of checkboxes
- List – such items are useful to signal where lists of products/services/service packages are presented to potential clients
- Tab button – this is part of a tab component you might consider integrating into your web pages; it is good for economy of the page space and concise presentation of additional elements defining the company
- Menu – the menu item is essential and cannot miss from a website draft. From the very first draft of the website, the menu should be defined like this: where in the page will it be placed? How many section should it contain? What kind of menu would you use for your website?
- Slider – the slider element can be added to the wireframe, for the whole team to see there’s opportunity to impress using such a component. A slider can be roughly represented by the corresponding stencil in the left-hand menu, and it can be thoroughly defined later on.
- Rating – these items are good for ecommerce websites or blogs; rating and reviews contribute to building a community, so if you have in mind to gather a community around the future website, consider including ratings into its pages
- Arrow – you might need arrows that direct attention to particular elements in the page
- List grid – this can be useful for presenting offers of the company, or a portfolio of projects, in a stylish way. A well-defined structure of items in a list can work effectively in the site ergonomy. A list grid is also useful sometimes in making good looking ecommerce shops.
- Map – you can decide where to place contact information and a map that’ll display your office coordinates. It works well when creating the draft for the website contact page.
- Status bar, etc.
All in all, a website wireframe is a good start for successful website design. By thinking it carefully, you minimize errors and radical changes further in the design process. It’s time to start putting together your website wireframe and see what it looks like. Will you?