When the ideation phase with research, creative workshops and scribbles is over, we start working out the ideas. This happens in the form of wireframes in Axure. With the finished wireframes we finally go to the customer.

Again and again we find that we get feedback that goes one step further and relates to the design. Statements like "The button is not striking enough" or "We don't like the icon" come up. Then we argue that these are just wireframes for now and that such details are taken into account when creating the visual design. But how do these questions actually arise? Are our wireframes already too detailed? Does it therefore give the impression that the design team will only paint them colorfully later, and that's it?

I took these questions as an opportunity to look into the nature, style and level of detail of wireframes. According to "Form follows Function", the first question to be asked is what wireframes are actually for.

In general, wireframes are intended to illustrate the contents of a view, the individual elements and their placement, and the interaction paradigm. Thus, these topics can be coordinated with the customer and development team before entering the design phase. This prevents the finished visual design of a view from ending up in the garbage can just because the page is generally supposed to be structured or function differently. Additionally, unnecessary costs can be saved.

The wireframes also serve as briefing for the designers. Therefore, they should not give the impression of already having made specifications for visual design, so that the designers can start the creative implementation uninfluenced and free. In the last step, the specification is written using the wireframes, the briefing for the developers for programming.

Against this background we do not use colors, different fonts or even style elements like drop shadows in our wireframes. A typical wireframe is therefore created in grayscale.

Clearly unshaped. Or maybe not? If you take a closer look at the wireframe, you will notice that the buttons have round corners. (And that's just because that's the standard button shape of Axure.) Moreover, the title of the movies is on a transparent surface above the images. Both style elements that actually already provide guidelines for the visual design. In addition, some elements are provided with icons.

So what to do? I found suggestions in the blog article Why the Best Wireframe Style Is No Style, in which the following consideration is made: "The best wireframe style is no style. The result of no style is monochrome - one color against white. The author justifies this with the argument that the elements would then all be equally weighted and the viewer would then be able to concentrate better on the overall user experience. This way, one would discuss the placement of the elements and not their appearance.

So I tried to ban all style elements from our wireframes.

The result could look like this. Somehow this version looks nicer than the grayscale version. But I would like to doubt if it is more target-oriented.

In my opinion, the task of a concept designer is not only to determine which elements should be placed where on a view, but also to think about the user's gaze. For this purpose it is important to display the elements with different importance and thus to make a hierarchy clear. And this works not only with the size of elements, but also with contrasts, with some elements being light and others dark.

I also think that the conceptual designer should think about the use of icons. After all, an icon is not just a decorative element, but can help the user to find his way around a view and to understand functions faster.

So it only remains for me to take a step back again. Grayscales and icons are back in, but round corners and transparencies stay outside.

This will probably not be the solution for the problem described at the beginning. But maybe it is not that bad. After all, remarks like "The button is not striking enough" can be wonderfully taken as a briefing for the visual design to make this button especially striking.