A Basic Guide To Website Wireframes
Creating a website design is no easy task. Starting from zero, there are lots of factors to think about. Who will be using it? How much content should it have? What will it look like?
A website wireframe helps answer these questions up front. It’s a fast and simple way to lay out the basic concepts, before jumping into more complex details. These basic concepts are drafted around the main purpose, functions and goals of the new website.
Wireframes are a helpful way to outline a new idea for a website. In fact, wireframes are so useful to communicate simple ideas fast, they’re also used in other industries to draft designs for new products, vehicles, and homes - before they can get built.
In this quick guide we line out the basic features of using wireframes for a good, working creative web design.
What Is A Website Wireframe?
A wireframe is a basic layout of a web page without any color, graphics, imagery or text. It’s a 2-dimensional drawing outlining the basic structure of a website in the simplest terms, in black and white. It’s like the skeleton of a website, using only plain lines and shapes without any color or style.
It acts as a visual guide indicating where the graphic and UI components are located in each page or section. Wireframes serve as a quick mockup to show how website elements look when placed together for a specific purpose. They can also be called a page blueprint or schematic.
In home architecture for example, a building plan drawing or blueprint helps the architect see the fit and size of all floor plans and construction elements before building a home. Wireframes are also like a blueprint, a drawn plan that gives a fast visual reference. Clients, designers, developers, marketers, and other stakeholders can then get an idea of the final design before the actual website gets assembled.
A website wireframe is really just a sketch of what you want your final site design and layout to look like. It’s meant to be simple and lean, without any formats or functions added in yet. Wireframes can be sketched out with pencil and paper, or with a digital sketching program. Nowadays, there’s a ton of free wireframe sketching applications online you can use.
Like architect blueprints, website wireframes don't include any color or definition. They’re drawn in black and white, meant as a basic outline of thet final website design - not it’s complete or final version. Any sort of design details come about later in the process.
Much like home architecture plans, wireframes will show the fit of all the website elements, and provide a fast and easy way of changing the design draft ideas.
Why Use Wireframes For Web Design?
Wireframes help design teams visualize and agree on the website concept and layout, before any intensive coding or style work happens. They're also a great way to communicate a basic web design idea with a client. Clients can easily add key pieces or functions needed, better defining the website goals at this stage in the wireframe mockup. Responsive design elements are easier for the team to consider here as well.
A simple website wireframe can also be made by anyone, including non-designers. Even clients and managers can easily convey their ideas to the team with wireframe outlines. Wireframes are an effective communication tool for anyone to use. They’re especially useful for larger projects that need more direction.
Without any design distractions, a team can focus on the strategic layout for the new website design, based on the ultimate goals: user experience, adoption, conversion, loyalty, and social validation.
How Are Wireframes Created?
This simple, 2-D sketch can be done with old-fashioned paper and pencil, or with a basic digital drawing application for creating wireframe outlines.
The goal of any website wireframe is to see how all sections will fit together. Pencil and paper drawing can be the easiest way to sketch it out. A math notebook with a square grid can help you trace lines more evenly and with a better sense of overall proportions. Plus you can take your ideation out to a coffeehouse or a park bench, to help your inspiration.
Or, go digital with the many online software tools for wireframing a website. Many of these are free and fairly simple to use. They can also help you generate a great looking wireframe design relatively quickly and easily. An online wireframe tool is probably your best option for making or sharing wireframes with any team members spread across the globe.
So, first things first: draw out all your website ideas to figure out where they fit. At this stage, ideas are more important than detail or precision. Remember, the wireframes are the best stage for open discussion on the placement of different web parts and functions.
Wireframes need to remain simple, in black in white. Keep details to a minimum to avoid confusion in this phase. Rough sketches can even allow for faster edits and help draft better solutions. Keep focus on the fit and function of many elements coming together on the page, vs. any actual design that comes into play later on.
Still, even with designers as part of the process, wireframing is not an exact science. Stay open to the possibility for multiple revisions at the wireframe stage until the team or client is happy with the layout. You also don’t need to draft out every single page in the wireframe. Sometimes you can wireframe the main page templates and allow for some sections to remain more flexible later on.
No matter what, it’s good practice to craft your wireframe for your intended website type. Keeping the site’s purpose in mind helps drive its look and layout. For example, company sites and brand pages may have more graphic elements at the top to inspire emotion. Sales pages or articles make use of larger text block areas and strategic side-menus to drive your eye down further toward action items.
Whether your site’s goal is to inform, entertain, sell or display, your chosen wireframes should reflect a layout that best serves its intended use, purpose and strategy.
Wireframes For Responsive Website Designs
More users are now accessing websites from their mobile phones and tablets, over the classic desktop computers. A website needs to be accessible, functional and displayed properly on all user screens. Thinking of responsive design challenges designers to plan ahead their webpages better. Site designs should consider almost any device screen size and shape for proper display.
Developing wireframes with responsive design in mind helps ensure the success of a website. It prevents costly oversights and redos further along in the project too. Teams can ideate the perfect placement for all elements on a page, and ensure its displays look good across each device and screen type.
Responsive design helps developers and clients decide what content they need to have displayed across all devices, and which content is exclusive to certain device types. By iterating these variations in the wireframe phase, developers will ultimately be more confident of the site’s uniformity and use.
Quick List Of Tips For Drafting Your Web Wireframes:
- Keep it simple! Basic, black-&-white shapes and lines only.
- Use a digital prototyping or wireframing tool. It makes it easy to collaborate with colleagues and clients.
- If you prefer working on paper: use a math notebook with a square grid
- Make a mobile wireframe as well. Especially for certain functionalities that work differently on mobile (sliders or interactive elements, for example).
- Keep the website purpose in mind at all times.
- Ask your client for feedback and review the wireframes before continuing to the next phase in your creative process.
What are some wireframe techniques or best practices you or your team use? Share your thoughts, questions and comments with us on facebook. Let us know anything different or innovative you use for website wireframes in your own creative web development process!
Start building today
Streamline your creative process and keep your team aligned with our collaboration tool.
