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

In the first part of the wireframes series we explained to you why we need wireframes at all and why they are so important at the beginning of a process.

Today in the second part we’ll briefly explain why we’re not done developing wireframes yet and what the difference is between different types of wireframes.

There is not only the kind of wireframes we described in the first part. Another type of wireframes is widespread, the so called high-fidelity wireframes. Unlike the low-fidelity wireframes we developed earlier, these are much more advanced. We leave the analog development of our game and dive into digital production.

Advantages of high-fidelity wireframes:

• They look like a finished application
• There is more information for the further process
• They contain real content
• They are the perfect transition to prototypes

The high-fidelity wireframes are much more complex than their less elaborate predecessors. They contain more of the actual content. Fonts are defined, images are arranged and even the interface, such as buttons, are designed. As a result, they form a perfect basis for later prototypes.

It is important for us to take the next step, in the development of Yora Adventures. That’s why we decided to design digital high-fidelity wireframes. One of the main reasons for the decision is the fact, that we want to create a look and a feeling for the game and the world of Yora. At this point, it’s no longer enough to just know where some of the content is located. We want to spread a vision and for that we need something that visually supports this project.

Choosing the right tool

Our main tool for the implementation of this project is Sketch. Sketch is an excellent tool for developing UI and UX elements, but only to a certain extent. What we’re going to do with Yora Adventures should be beyond all imaginable limits. We’ve divided the development into three main areas: main menu, gamemaster- and player-area. At the end of the digital implementation we had developed 177 different screens for Yora Adventures. From navigation in the main menu, to character creation or dice checks.

The advantage here was the structuring into UI libraries, which are possible within Sketch. This allowed us to edit different areas simultaneously and independently from each other. These libraries were then linked together. So we had always the latest state of the other areas in mind.

With the resulting screens, we now had the basis for the further process. Now we were able to focus primarily on the content in the design team, the development had a basic framework for the visual implementation and the marketing had a basis for spreading the idea of Yora Adventures.

We hope that we were able to offer you an interesting insight into the initial development of Yora Adventures and look forward to welcoming you soon, to the first adventure of Yora Adventures.Paragraph

While you are waiting for the first adventure, you could tell your friends about it on Facebook, Twitter or Instagram.