Wireframes as interface between conception and implementation

  • User Experience

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 and 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 good visual aid for programming the conceived functions.

Wireframes focus on how a screen is built and works, not how it looks.

What are the different types of wireframes?

Basically, one can distinguish between low-fidelity & high-fidelity wireframes. Low-fidelity wireframes are very abstract 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 also be used for an early click dummy.

How do we use wireframes?

We rely on Hi-Fidelity wireframe development for all web apps and websites. This allows us to work with our clients to design and optimize the desired content and functionality on a visual level in a focused and effective way before we start the 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. From our wireframes, we usually also create a first clickable prototype. Together with our customers, we try to optimize the wireframes step by step as far as possible so that we can 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 Sketch's prototyping features, we create the click dummies that we make available to our customers via the Sketch Cloud.