Wireframes as interface between conception and implementation

What are wireframes?

Wireframes are an early conceptual design of a website or app. A wireframe can be used to visualize the content structure and interaction options of a single page or screen. The main focus is on the arrangement and positioning of the individual elements, not yet on the concrete visual design. Graphic design elements such as colors, shapes, images or typography do not yet play a role here. As an interface between conception and implementation, they serve on the one hand as a blueprint for the implementation of the visual design, and on the other hand as a visual aid for programming the conceived functions.

Wireframes focus on how a web app or website is built and functions, not how it looks.

What are the different types of wireframes?

Basically, you can distinguish between low-fidelity & high-fidelity wireframes. Low-fidelity wireframes abstract a lot and show graphical placeholders instead of concrete content. High-fidelity wireframes are more complex. Here, for example, realistic amounts of text and clearly defined interaction areas are placed. High-fidelity wireframes can thus also be used for an early click dummy.

How do we use wireframes?

We rely on hi-fidelity wireframes for all web apps and websites. This allows us to work with our clients in a focused and effective way to conceptualize and optimize the desired content and functionality on a visual level before moving on to actual implementation.

For us, wireframes are one of the final products of the conception phase and one of the most important intermediate results for the further implementation of our digital products. We usually also use them as the basis for a first clickable prototype. In the next step, we try to optimize the wireframes as much as possible together with our customers in order to be able to define the most concrete requirements possible for implementation.

How do we create our wireframes?

Currently, we work out our wireframes with the design software Sketch. For effective visualization, we have built our own extensive component library with flexibly reusable elements. Using the included prototyping functions, we create click dummies that are made available to our customers via the Sketch cloud.