The point of wireframing

Wireframing in Ergomania’s practice is an easily transparent and comprehensible method that demonstrates what elements will be on each page when designing a digital interface.

In order to design UX-oriented websites and applications, process-centric tracking of user behavior and task execution is paramount. The basic units of design are the processes that realize functions, but we present them through unique mockup screens.

Thanks to the wireframing we use, the representatives of the business and development side can easily see how their site will be built, whether we look at the structure or the planned functions and their use.

Wireframing can be used to essentially develop the structure and functionality of an entire website, software, or application before the actual (and extremely costly) development begins. Wireframes do not contain aesthetic, final visual elements, the emphasis is purely on functionality and client experience.

Wireframing at Ergomania

During wireframing, we determine the following in relation to the planned digital product:

• What the basic structure is (menus, submenus, structure of page type)
• Where and what type of basic elements are placed within each page (Navigation, content blocks and their hierarchy, etc.)
• What groups the individual item form (input fields, labels, and their exact layout of a form)
• Text blocks on static pages, location, and nature of images, etc.
• Accurate and final writing of shorter texts
• What experiences should the user have when opening and using each page
• Accurate and detailed structure of some functional and content elements and definition of their operation

The wireframe of the website can be freely designed, either using paper and pencil or wireframing software. Wireframing requires a prior definition of the structure, functions, and processes of the digital product.

The main methods of wireframing

The Ergomania team uses two practical tools for wireframing:

• Felt-tip pen and whiteboard
• Target software

Classic tools are mainly used in offline environment or in the drafting/brainstorming phase when ideas can flow freely, and it is enough to “roughly outline” how the website will be built.

Target software already represents a more serious level of wireframing. Of these, we mainly use Figma, because it allows us to adapt to a design system when designing wireframes. In addition to Figma, Axure is mainly used if the goal is to accurately display the interactions.

Finally, the resulting design is uploaded to Invision or Zeplin as assets. The wireframes obtained are mostly black and white, but we sometimes use colors as well.

What do our clients gain from wireframing?

Ergomania’s clients will gain a lot with wireframing, but indirectly our clients’ users will be the biggest winners:

• They are presented with a client experience-centric website/application blueprint, so the actual website or application can be implemented quickly and easily
• Simplifies the design process, thus reducing costs
• They get an accurate picture of where what components and interaction elements go, how they behave
• Save time by finalizing visual and textual content types during wireframing.

Our clients get a website structure that is perfectly understandable, transparent and clear to decision makers, developers and graphic artists just like prospective clients.

What is the role of our clients in wireframing?

The participation of our clients is extremely important during wireframing, as they know first and foremost what they want – but at least they decide which of the 2-3 options that are best suited for the given purpose will be preferred.

Although most of the work is done by Ergomania experts, it is also important that our clients outline their own ideas, because the more information we have, the more optimal results we can produce.

The result of successful wireframing

The result of the wireframing is a diagram that shows the simplified structure of the website and clearly displays to all key players the main groups of content, the structure of the information display and the appearance of processes available to users and their possible description, which together allows the UX-centric building of a website or application.