Wireframes – At the beginning was a pen & a paper [Part 1]

Before we start telling you about the development and design of Yora Adventures’s wireframes, we need to clarify what we’re talking about. If you’ve never heard the term before, or if you don’t know exactly what it means, well, you’re probably asking yourself: “What the heck are wireframes?”.

We want to define it as follows: Wireframes are a framework of basic informations, which are arranged in a hierarchy under certain aspects. This framework then is used to plan a layout that at best navigates the user through the information. The understanding and simplicity of the user’s interface is the main goal.

To simplify the topic, here is an example for you: 

A house can be built out of stone and concrete, but not without a blueprint in advance.

So, a wireframe is a blueprint that describes all the functions, which a design can be based on.

Why do need wireframes for Yora Adventures? We want to use all navigation paths of users to be tested and elaborated by users already at this stage of development.

The analog way of development

In the beginning, everything happens analog – on large, white sheets of paper. We collected thoughts and functional concepts, how the user could navigate through our game.

In order to make this process as easy as possible for everyone who was involved, we’ve used the easiest ways to visualize certain information blocks for the tests. Areas were shown only as boxes and fonts were partly shown as lines. Looking at the design of the quest area, you will get an impression, how we’ve started the process. The user experience is the most important thing in this case.

This is also the reason why we have repeatedly played through the same loops in the wireframes. As we got that point where there were logical breaks, we had to try to eliminate them. In the quest area, for example, it quickly became clear that it would be easier for the user to have an entire quest log available.

During this phase it quickly becomes clear what works and what doesn’t. Flexibility and the associated time savings are enormously important. We can carry out tests so quickly, because nothing has to be coded. Wireframes are such an excellent first version of the later game.

But why we haven’t reached the end of our journey of game development with these wireframes, is explained in the second part of our series.

For now stay tuned and maybe have a look at our Facebook, Twitter or Instagram profile for future updates.