Prototyping and wireframing are discussed fairly regularly in the early stages of UI/UX design for software. It may seem that these concepts are interchangeable when in actuality they are drastically different. While both produce useful deliverables and help advance the development lifecycle, each requires different skills and produces different end results.
Often, when someone has an idea for an app, they begin development by deciding how the app might look. By sketching the user interface on cards or a whiteboard, it becomes possible to extract functional and other requirements for what must be built.
Wireframes can be drawn in many ways. The simplest designs may start out as simple ink sketches on paper. Notecards are a great way to add size constraints to the interface, and to rapidly swap out components in order to simulate how using the app might feel. Later on in the process, the designs might be transferred to tablets or other digital media, and may even be exported as an interface draft for initial app prototypes.
Wireframes are useful tools in UI/UX design for software. They allow designers and developers to quickly get a sense for how an app might look without technical constraints. Wireframes also facilitate extracting interface components, UI requirements and technical goals from an idea. Yet, while a wireframe achieves much, what it accomplishes is only skin deep.
Wireframes only address how software looks. Prototype development is essential to truly get a sense for how an idea will actually work. Prototyping is a stage in software development where code is written to begin putting an idea into practice.
Instead of merely drawing interface components, prototypes actually lay out a basic user interface with whatever widgets are appropriate for the platform. Prototypes also create just enough interaction to make the app feel usable. In this stage, it is more important to experience the app than it is to start building a sound technical foundation.
Prototyping should not be thought of as beginning to build an app. In other words, prototype development tests the idea. It may do this by faking some features, eliminating others, and deferring any significant technical decisions until software development on the idea itself begins. Be prepared to throw away the prototype once it has tested the specific assumptions about the design.
Wireframing and Prototyping
Exactly how these stages interact varies widely. Some development companies wireframe before prototyping so the prototype’s user interface feels more polished. Others start with a prototype, taking more time to build an interface that connects directly to working code. There is no right answer, and the choice is ultimately determined by what works best for a given team’s skills.
But each has its advantages. Wireframing is great for covering lots of ground without building out technology. Prototyping gives a deeper sense for how a narrower piece of the app might work. Both are useful stages in the software development process.