What is website wireframe?

White background, black letters and rectangles in different shades of grey – that doesn’t sound like the most compelling website design, does it? It is, however, how most designs we do in our studio come to be. Before a design is taken over by a graphic artist who spices it up with visual effects, it is first planned and designed like an architectural blueprint. This phase of the design process is called wireframing.

Some business owners think that wireframes are just sketches of the final website design and are not worth the investment. They couldn’t be more wrong – I dare to say that most of the actual designing is done at this very stage of the work process. During this time – away from colors, typography, icons, and illustrations – assumptions are made, business goals are set, and tools to achieve them are picked.

Wireframes and mockups play an important part while designing a website or e-commerce store. They are not alone, though – other useful tools include information architecture, user paths, and detailed analysis. Their place in the process is constant and always precedes visual design – wireframes are the only way to properly plan work at later stages, guarantee consistency among other parts of the projects, and avoid serious problems (described later in this article).

Where are wireframes in the process?

1. Analysis (investigating the competition, client’s needs, propositions, and business goals)
2. Information architecture
3. User paths
4. Discussion, improvements, direction consolidation
5. Wireframing (iterations)
6. Visual design
7. Implementation (coding)

Better be prepared

It lies in every business owner’s best interest to provide all possible information when starting a new project. The more details, the easier it is for a UX designer to understand business specifics. Unique features, business goals, conversion goals, sales tools – the more they know, the more efficient will the new website or store be.

There are countless ways to design a proper user experience on the web. Store or website can be simple and straightforward. Or on the contrary – mysterious and extremely engaging. While designing the experience, one must keep in mind business and image goals and look out for various traps. It is easy to make a website mockup that will just be, tick a box on the list and push the project forward. Unfortunately, not paying attention to wireframes may cause additional problems that will snowball into serious issues at later stages.

If a wireframe is not sufficiently considered and detailed, visual design based on it will be implemented with all lacks and deficiencies that will become apparent too late. Making changes to already implemented site or store causes difficulty and additional costs. It is reasonable for a company to trust the specialists and spend more time polishing up the wireframes, dispelling any doubts, and setting a common direction for the project.

Information architecture, simply

Just like visual design follows wireframing, information architecture and user paths precede website mockups. It is a very important stage of work when the UX designer makes decisions about site structure (map) and different connections between its elements.

Information architecture is also a great support for developers before they start the implementation. For large and complicated projects like extensive websites and apps, solid structure with well-described functionality will help them plan and estimate their work. Information architecture makes things easier but doesn’t guarantee anything – client’s corrections, adding features, and testing also have a great impact on project completion time. Solid but flexible information architecture allows the project to grow while maintaining full control over its scope and quality of final result.

There’s a reason why the word „architecture” is hidden in the name of this phase. Just like architecture, UX design revolves around users, their needs, goals, and expectations. It considers real-world issues and solves them within constraints. When an architect decides to pick cheaper build materials to fit within their client’s budget, a UX designer collects plugins and ready-made solutions that will decrease overall costs of the project and advance the implementation. While working on a website, designer specifies the number of pages, sets goals for each of them, and accentuates the connections between the elements. He’s driven by his will to design an intuitive and logical experience but keeps his client’s business goals in mind at all stages of the work.

Business goals can be very different:

• increase number of pageviews
• put greater emphasis on branding
• boost communication
• optimize sales and conversion solutions
• improve level of customer support
• reach new and existing clients
• shorten the time required to complete a certain task
• improve usability and accessibility
• redesign the application or service

There are many ways to achieve these goals. One of the most helpful ones is called user paths. It is a highly analytical tool that focuses on user’s behavior on the site. It helps discover pages that do not have many views or interrupt a path important for the site’s business goals (for example buying a product or signing up for newsletter). User paths are planned alongside the information architecture – with the right mixture of page structure, connections between them and layout, users can be funneled into the product page and encouraged to make a purchase.

User paths play one more important role: they guarantee intuitiveness and consistency for the site as a whole. It is good practice to make them as short and simple as possible, allowing the user to reach key parts of the site in just a few clicks. While planning user paths, UX designer is guided by their comfort and pleasant experience.

For SmartYou, we visualized website structure as a tree built of small blocks. The most important pages have been highlighted using a different colors and showed an essential, most suitable for our goals user path. The visualization helped the client see the big picture of the overall user experience on the site and pinpoint moments that required additional work or redesign. It also gave him a better view of the project which, from the initial 1-3 pages, turned into complex conversion-lead website.

Simulating the experience

Finished and accepted information architecture lays a good groundwork for the wireframes. At this stage the designer is familiar with overall site structure and knows all key features. In spite of appearances, his next step is not just making a black-and-white sketch of the site but rather give shape to its content. A wireframe is a mold for the substance.

It’s good to trust a specialist. Their knowledge, experience, and skills will help you get better results. Business owners who try to „design” their new website on their own, rarely take into account various functional, usability, and technology requirements (not all solutions can be implemented within the given budget). Furthermore, the first version of a wireframe rarely is similar to the last, while working on a prototype requires many iterations and changes. Even after a wireframe is accepted, when new information come up or the final results requires making changes to existing solutions, visual design will play the part of a wireframes. As you can see, it’s important for a UX designer to work closely with visual artist – he or she often supervises all work on the project.

Great wireframes are based on ready contents. When information architecture described the project’s structure and logic, texts and images are parts of direct communication that revolves around the single most important goal of wireframes: functionality. It consists of layout and content presentation on the site. A blog offers an entirely different experience from an e-commerce store, while a landing page requires other level of immersion from a complex application built in the browser. Thanks to texts, even if not in their final form, a designer can properly showcase on the site and assign to pre-planned user paths and scenarios.

It’s quite easy to find wireframe examples on the web. Usually they are just black letters and rectangles in different shades of grey scattered against a white background. There are a few reasons why they look that way:

• wireframes focus on specifics. Most of them do not include icons (if so, they’re usually just examples) and the designer rarely pays attention to spacing and grid. The goal of the wireframes is to work a functional and usable solution to a problem.
• wireframes are often expanded and must be flexible. More complex visual effects would slow down the iteration pace that often includes tens of different designs. Simple appearance allows the wireframes to be modular and expandable.
• simple style is a way to show information hierarchy. Thanks to different shades of grey across various elements on the site, it is easy to set the hierarchy and rhythm for the design. The darker the color, the most important an element is.
• wireframes are used for testing. Many of the mid- and hi-fi wireframes can be used for user testing. Usually they need to be turned into interactive prototypes that come with clickable buttons and links. User testing is used to verify initial functional assumptions and overall intuitiveness of a site or app. In our studio, we create prototypes in Adobe Xd that can export them as videos or clickable mockups in the browser.

Writing on a wall

Wireframes simulate user experience on the site and help the designer put in his or hers shoes. From their point of view, the designer can spot any shortcoming and mistakes that, when discovered during the visual design or implementation stage, would put the project and relationship with the client to a test. Therefore, wireframes offer an insight into the final feel of the site and make it easier to solve any problems at an early stage.

In black and white, they show how the client’s new website or app will look in the future. It highlights the navigation and layout in an almost final form. They are the first touchpoint between a client and his projects – even the first iterations of wireframes can give the vibe of the design and help the client imagine the final effect. Prototypes become a topic for discussion that often leads to interesting insights and corrections to earlier propositions.

While moving an element up or down is not an issue, often some changes are strategic. Clicking through the prototype can offer a fresh look on project. Wireframes highlight all shortcoming in communication and weak points on the site. Most frequent changes include:

• number of options and links in the navigation
• showcasing call-to-action buttons
• level of complexity among products or services
• length or size of texts
• priority given to important elements
• visibility of key elements above the fold

On the other hand, user testing can tell us that:

• they’re not sure what this button does
• this „Buy now” button is not clear and they almost missed it
• contact form has too many fields
• there’re too many elements on the product page and they feel overwhelmed
• that icon is too small and they can barely see it
• this copy says too much about the company but not enough about the product
• etc.

Sounds familiar? If so and you’ve noticed a recent drop in your site’s statistics, consider getting a UX audit and making some changes. Our studio provides such service where we analyze all aspects of user experience on the site: structure, information architecture, usability, appearance, and communication (copywriting, branding). The results are presented in the form of a detailed report that includes conclusions and improvement suggestions.

Solving important problems during the wireframing stage helps save time, money, and energy. If we would just proceed to visual design and coding after getting information architecture accepted, making any changes would leave an unpleasant mark on the budget and fluidity of the project.

To sum up (in a few words)

It’s good to end such a long text with a short and meaty summary. Now you know that:

• Wireframe is more than just a sketch. It is placed somewhere between strategy and planning and visual design and implementation.
• A well-designed wireframe can simulate the final product and solve any issues before they become real.
• It is also a great basis for user testing and a chance to objectively assess project progress.
• Information architecture is a plan for the general structure and logic behind all pages on the site. It precedes wireframing and helps lay the functional groundwork for all later work.
• User paths are created alongside information architecture and can be used to meet business goals – the right order and layout of pages within the site can encourage purchase, sign up for a newsletter or take action.

Making a website is not that much different from building a house. Both projects require groups of specialists and major financial investments. Like a building that needs meticulous architectural plans, implementing a website is always preceded by information structure, wireframes, and prototype. These tools help save time and money and avoid many unexpected problems in the future.

In our studio wireframes and prototypes are useful instruments for working on different projects – be it a low-key software house or a complex comparison tools for thousands of products.