terça-feira, 13 de setembro de 2016

The importance of wireframes in the creative process of gaming

Information architecture is the basis for many digital products in the contemporary scenario. Apps, games, sites, bank phones and many other platforms are designed following the principles of this discipline.

We have many definitions for information architecture, but one that fits better in this post’s subject comes from Rosenfeld and Morville (2002, p.4): I.A. is “an emerging discipline and community of practice focused on bringing principles of design and architecture to the digital landscape”. When we talk about I.A. we are talking about carefully planning a project. One architect will never build a house without a plan, a map or blueprints – so, we will never build a game without instructions, plans, rules, prototypes or models.

In this post, I want to emphasize the importance of wireframes in the creative process of a digital mobile game. After the definition of the concept, the development of rules and the first tests of the game, it’s fundamental to structure one grid with the basic gaming features and mechanics.

I will use my new game Rock Flickz as an example for this post: after the definition of a theme and a “match the color” mechanics, we started to work on the wireframes – simple structures that indicate the core movements and contents of the game. The function of a wireframe is not to “block” the structure, but to build the functionality of the game. Check below some wireframes with the basic mechanics, menu and main screens from the game (and in the end, the final interface).

So, before the complex codes and final layouts, it’s important to plan – in a simple way – how the game works. It may not be as cool, but it is a fundamental guide to bring the product to life.

It’s important to highlight that wireframes are one curious intersection between the prototype and the final version. It’s a tool to gain time and minimize errors. It’s one methodological process that can be used in analogical and digital game.



ROSENFELD, Louis; MORVILEE, Peter. Information architecture for the world wide web. Sebastopol: O’Reilly, 2002.

Um comentário:

  1. você pode encontrar alguns mais IOS / android wireframe templates em comunidade diagrama Creately. Há 100s de exemplos e modelo de lá para ser utilizado livremente.