Wireframe creation – creation of user-friendly
function layouts

What is a wireframe and when should it be used?

The term wireframe is alternatively to the term 'mock-up' that means a very early conceptual prototype of a website or of a software fronted. With reference to a website these are central elements like e. g. the navigation, content areas and picture areas whereby their positioning is roughly drafted (=layout).

The creation of wireframes is especially qualified in the early development/conception phase because one develops a variety of different concepts to chose finally the best one (e. g. within focus groups or (paper prototyping).

The development of a wireframe takes a fractional part of time compared to a traditional layout/design. Therefore it is possible to loop several refining steps in the same time or to plan several conceptional different versions.

Generally one has to differentiate between two kinds of wireframes:

• static wireframes: schematic illustrations of single site masters (on paper or with help of MS Visio or PowerPoint). Thereby the basic elements of the site are drafted.
• dynamic wireframes: Several sites that are interactive linked with each other as a functional prototype. So navigation from one site to another site is possible. Dynamic wireframes are often completed with attached navigation trees or a flow chart or a structure chart. Both to abstract the structure and to make it more comprehensible.

Generally it is sufficient to illustrate graphic components rudimentarily because wireframes – no matter if static or dynamic – have primary to do with concepts and they do not deal with the design.

Possible questions

• How can I work out and test several alternative concepts within a relatively short period?
• What alternative concepts are possible for my website/application?
• How can I implement the findings of my users into a user-centered concept?
• How can one create the interaction sequences of central action processes (for instance search, contact support, order, newsletter subscription, booking, integration of contents) 'logical' or intuitionally?
• How can I create a website/application that can efficiently, effectively and satisfying be operated by the users?
• How can I create a concept that is conform to the current usability heuristics and ISO standards?
• What existing solutions and interaction principles can be used for the conception of my website/application?

And many more…

In what project phase applicable?

• Development/conception
  Due to wireframes a large number of different concepts can be developed within short period. Afterwards – for instance within focus groups - iterative user tests in lab (usability test in laboratory or rapid prototyping /a>) oder Tests von Papier-Prototypen (paper prototyping)can be tested.

How does one create wireframes?

On the base of existing user structure data (sociodemographic data completed with intentions, requirements and expectations as well as web analytics/user tracking data – if available) our usability experts and interaction designers create alternative concepts for your website or applications.

Thereby you can chose between the creation of static or dynamic, clickable sites. We work with different tools like MS Visio, PowerPoint, Axure RX Pro and Adobe Dreamweaver CS 3 depending on your requirements and desires.

The development of user-friendly layouts base on our experts' experiences in the usability field, on existing heuristics and guidelines as well as on findings from a variety of user tests.

The key factor of conception is that one focuses on the requirements and expectations of the users that are previously ascertained (by onsite surveys, panel surveys, usability test in laboratory or focus groups and that are available (for instance as personas, requirement catalogues und use cases.

We claim to work out concepts that base on these data. The concepts are supposed to be user-friendly and consider the goal-settings of the users.

Strengths of this method

• User-centered design: Due to the thoroughly consideration of ascertained user data it is guaranteed that the developed concepts meet the requirements, expectations and goal-settings of the users and that they are aligned to your target-group, status quo or to aim for a goal.
• Consideration of heuristics and standards: Besides the consideration of user data our usability experts and interaction designers generate their expert and branch knowledge with reference to usability guidelines and best practices (competition analysis).
• Avoiding expensive undesirable developments: Due to a relative short development time of wireframes several conceptional versions can be created and be compared, or rather, tested against each other. The work out of a detailed interface design start not until the concept is finalised or intensively tested.
• Improved communication in the development team: Due to short development cycles it is more simple to react fast to your needs or wishes. It is absolutely possible to change the requirements during the project. Time-consuming undesirable developments can be reduced.
• Time saving: The development of a wireframe just needs the fractional part of time compared to traditional layouts/designs. Possibly several refining loops can be implemented in the same time or several alternatives can be created.
  The implementation of a finished wireframe to a layout takes much less time because the positioning, size and form of many elements have been determined ex-ante. The effectivity increases and the misplanning decreases.

Who should create wireframes?

The mere creation of wireframes exclusively happens without direct user participation but the already ascertained and existing user data are thoroughly considered. A possible final evaluation of a representative of your subject group(s) is not ruled out of course. Depending on the complexity of the developing concepts for your website/application several usability experts or interaction designers with long term experience in your branch contribute to the conception.

How long takes the creation of alternative wireframes?

The effort exclusively depends on the complexity of the conceiving website or application and on the desired numbers of screens for the central sites, or rather, use cases. Wireframes for less complex websites/applications can be provided within about 1 to 1,5 weeks.

What input do you have to provide?

Optimally comprehensive data about your target-group(s) already exist for example in terms of personas, a requirement catalogue, web analytics data and/or use cases, that we use to conceive wireframes.

On demand we would like to support you during the ascertainment of end-user data. Therefore we draw on our comprehensive project experience in fields of requirements and user structure analyses.

In addition, it is possible to work out the ideas within a collective concept or innovation workshop.

What do you receive from us?

According to your desires you receive a static or dynamic wireframe incl. a generally intelligible documentation of single elements or function fields from us.

On demand we present the by us created concepts within a moderated workshop.

Do you have any further questions? Please do not hesitate to contact us! We would like to consult you.