Websites, Mobile Applications and Graphical User Interfaces (GUIs) directly interact with end users and therefore need to be planned carefully. As the actual layout and design depends on various factors, designers have varying design procedures.
I believe that there is actually no way to standardize a complete process for designing and layouting without loosing some creativity and constraining the minds of designers. A manager of some agency would be looking for standardized processes trying to optimize the process and generating revenues. But there is a clear trade-off to be made between unique passionate design and highly efficient rapid result generation. I personally like the idea of having building block technologies that can support parts of the design process. Depending on the project the screendesigner can simply use pre-defined building block phases in his design process.
In this article, i try to give an idea about some techniques used in the process of developing software and designing user interfaces and websites.
Wireframes, Sketches, Mockups and Prototypes are technology buzzwords that are often used to create user interfaces that show the end user what the software will look like without having to build the software or the underlying functionality. There are different levels of abstraction and different possibilities to draft concepts for user interfaces and screens, but all share the ultimate goal to improve the actual design process.
Aren’t all these techniques the same?
Terms are used in a confusing manner, actually, most people have a rough idea about the topic and simply mention one or more of these words to sound important. While trying to gather the real meaning of the words i got even more confused. Therefore, i am proposing the following distinctions in my little knowledge network after reading a bit through web resources. I hope it helps you grasp through it..
Sketches are not part of a design process but rather a means of memorizing a quick idea that pops up in somebody’s mind. It is not a visual model and does by no means claim any kind of completeness.
Wireframe are visual models that depict the relationship between information, navigation and user interface elements. Speaking about websites the result is the page layout. Wireframes are blueprints, they basically represent the skeletal framework of the user interface or website. It answers the question: What does a screen do? not what does it look like. Usually wireframes are part of the design process and get more concrete in several iterations, thus they are used to get clarity on requirements and constraints step-wise.
What do wireframes contain?
- and priority of content
What are not contained in wireframes?
- typographic style
- or graphics
Depending on the level of abstraction or detail, two main classes of fidelity are distinguished for wireframe models. You should however keep in mind that a model is always bound to a purpose. There is no good or bad model, but a purpose-fitting or non-fitting model.
- Low-fidelity wireframes
- less detail and quick to produce
- help a project team collaborate more effectively since they are more abstract
- UI elements are sample texts, dummy data/pics/elements, symbolic contents
- High-fidelity wireframes
- level of detail that more closely matches the design of the actual user interface / website
- often used for documenting
- slower creation process
Another distinction can be made among static and dynamic wireframes:
- static wireframes are rather single independent page layouts or visual models of the UI or website structure (close to mockups)
- dynamic wireframes are rather functional prototypes, that interconnect single screens with each other interactively (close to prototype in last iterations)
Wireframes are considered a very helpful tool for communication between the different involved actors like designers, programmers, end-user, managers etc. They can further be used for simulation, testing (e.g. usability, functionality, functionality requirements fulfillment), cost estimation, training, code generation.
A mockup is a scaled or full-size model or simulation of an object or a design. It is often used to describe an abstract scaffold of a user interface or website. A mockup does not include functionality. Thus, it simulates only the appearance of the original.
There is an often quoted distinction between a prototype and a mock-up. A mockup is called a prototype if it provides at least part of the functionality of a system and enables testing of a design.
Unfortunately, the term is often used a bit wrong in software development, which decreases the differences to wireframes and prototypes. To not confuse all these terms, i suggest to use the term mockup for static high-level wireframes in a very late iteration step. Accordingly, the focus is more on the design and layout aspect. It should already be very close to the final design after a few iterations through wireframes. Moreover, i suggest to cherish the idea of not showing functionality, thus not linking mockups to other mockups or including real data sources and animations.
Commonly understood, a prototype is more concrete than a sketch or a wireframe. There is more clairity about requirements and constraints, but the prototype is not the final design. It is a concrete set of defined ideas to be further refined in the final design drafts. Prototypes contain functionality and tend to focus more on usability. They contain interaction or demonstrate functionality rather than pure layout design like mockups.
How does it all fit together?
In my understanding prototyping and mockups can be seen as some kind of wireframe. Thus, wireframes have the broadest definition. I tried to summarize some of my ideas above in the following figure:
As is stated above, i like the idea of seeing these techniques as building blocks to help in the communication process with end-users / clients, to meet usability requirements, speed up the design and development process, enable collaboration among designers and software developers and thereby improve quality and reduce costs. A possible way to integrate these building blocks techniques (as i call them) maybe before actually creating real design drafts (see image below).
But many people use wireframes also through the whole process until the endproduct is actually delivered as a kind of communication help and documentation that is refined until product delivery. In any case it should be carefully evaluated for each project to what extend these techniques are to be used to not do the same work twice (e.g. refining wireframes parallel to developing the real design).
Alternative rapid prototyping approach: CSS Frameworks
The above introduced techniques are often mentioned in the context of rapid prototyping of websites or applications. The term rapid prototyping actually comes from manufacturing and was applied to software development in a similar manner. It is the same driving force of cost efficiency and process optimization that made the topic popular in webdesin and mobile development.
Wireframes, prototyping and mockups are not the only approach used to achieve this goal. Rapid prototyping with CSS Frameworks is also very popular, as the prototype and the real layout can be developed at the same time:
- 960 Grid CSS Framework (Link)
claims to cover the whole design process, but results often look similar (trapped in the grid)
- YAML (Link)
more flexibility and easy prototyping with the YAML-Builder
- YUI Grids (Link)
- Blueprint (Link)
Well-known software for wireframing
- Web Standards Magazine 03/09