WireframevsMockupPrototype

Although they are interrelated, a sketch, wireframe, mockup and a prototype are different.

These are different activities, or rather, pre-development procedures that make sure that you are on the right path and you have understood (and even convinced the stakeholders that you have understood) what the stakeholders or the product managers want the app to achieve.

Coding, development, debugging and installation can be expensive and time-consuming affairs. Even a small communication gap can lead to big disasters later, in terms of effort and money spent on some needless activity.

Hence, it is very important that before you plunge into the deep waters of programming, you must have a clear idea of what the app intends to achieve and how it should look and behave. Creating a sketch first, then a wireframe, then a mockup, and finally the prototype, can nip all the communication gaps in the bud and you can start the software development process safely.

The main points that we are going to cover in this blog post are:

  • What is the design phase in a software development life-cycle?
  • What is a sketch?
  • What is a wireframe?
  • What is a mockup?
  • What is a prototype?
  • Why all these design stages are important and integral to a successful software development process and what are the most appropriate tools for these stages?

What is the design phase in a software development life-cycle?

You must have often come across the expression “software design and development”. Well, “design” doesn’t just mean some artistic expression. In terms of software development, the design part decides how an app is going to look and feel and how it is going to behave when users interact with it. The actual programming begins when the stakeholders have approved the design prepared by your team.

A software design process consists of, as briefly introduced above, the following stages

1. Sketching
2. Wireframing
3. Preparing a mockup
4. Prototyping

Process image

These software design processes follow a sequence and after every sequence, the intention is to get a clearance from the project manager or the department overseeing the app development.

There will be multiple iterations during these processes and stages. All the stakeholders will repeatedly evaluate the work and suggest changes that will need to be incorporated there and then. Your project manager or the other stakeholders will respond, and you will again rework on the sketch, wireframe, mockup or the prototype part

      What is the biggest benefit of the initial design process?

      Take it as a map of a building. You don’t start constructing a building without an approved map. Once the map is approved, you can safely assume that everybody agrees to the overall design structure and you won’t have to dismantle any part of it later.

      On the other hand, if you start the construction without getting approval from the stakeholders, it will be very difficult to repeatedly dismantle it and then rebuild it, and then do it repeatedly – you can easily imagine how much effort and material will be wasted. The same goes for coding. Modifying a sketch or a wireframe is easier than modifying the code.

      Now let us quickly go through these processes.

      What is a sketch?

      The sketch is the most barebones representation of the idea obtained from the project manager and understood by the development team. It is a low-fidelity, visual representation of the app interface.

      You can do freehand drawings on a piece of paper or on a notebook using a pen or a pencil. If you’re more comfortable using a digital tool on an iPad or Microsoft Surface with a stylus, you can use that too. The basic idea is the ability to draw rough sketches and give them any shape you feel like.

      • Sketch

      A sketch helps you visually represent what your project manager has communicated to you and how you have comprehended it. Every individual has a different vision of the world around us and if you can represent that world through a sketch, it’s easier to get a common vision and agree upon the rough idea of what is needed.

      Although a sketch may not completely represent how the product is finally going to look, it gives you an idea of the layout. It gives your thoughts a shape to play with.

      Once the sketch is approved you can move on to the wireframe part.

      What is a wireframe?

      In the wireframing stage, you begin to fill up the missing information into the sketches you have prepared. It is a visual guide to what all is going to be there in the app. A wireframe may have the following:

      • A rough idea of how individual screen will look
      • A rough idea of all the elements existing on individual screens
      • A rough idea of what input will be expected from users
      • A rough idea of how that input will be processed
      • A rough idea of how the elements will behave when the users interact with them

      In the wireframe, you can tell what happens when someone taps on a button or when someone clicks the “Next” icon. You can draw diagrams – depicting a “tap” action and then what happens.

      A wireframe too is a low-fidelity representation of the main idea. It is not interactive. Changes don’t happen in real time. You can call it an advanced version of the sketch.

      If there is data on the screen or other bits of information, a wireframe gives you an idea how that information is going to be arranged on the screen.

      Different tools to create a wireframe

      Although you can create a wireframe using a conventional notepad or a brainstorming board, or any other sketching app that you can use on a digital device, it is better to use a dedicated wireframing app for the purpose. This is because a wireframe is a much more elaborate representation. It will have different components of not just individual screens, but of multiple screens. You also have to explain user behavior as well as app behavior through various symbols and actions. And, as they say, why reinvent the wheel when it is already there?

      In a wireframing app or tool, the basic components needed to represent your ideas are already there. For example, if you want to create a login screen for an app, all the components needed to represent a login screen are already there in a typical wireframing app or tool.

      Take for example a widely used wireframing app called Balsamiq. When you start creating a wireframe for a mobile app, for example, from the beginning itself it makes you draw all the elements within the scale of a mobile phone screen. So, whatever you’re doing, you always have an idea how various elements of the app are going to fit into the limited space. Hence, when you use a wireframing app, the fundamentals are already taken care of and all you have to do is fit in various bits of elements and information to quickly create a wireframe and even alter it, if need be, in just a few minutes, if not seconds. A few wireframing apps you can try are:

      What are the various elements of a wireframe?

      A wireframe, intentionally, looks like a drawing or a diagram so that the viewer can differentiate between the actual product and the ideation of the actual product. It normally has a greyscale color palette. It mostly consists of boxes, lines, and text.

      What does a wireframe achieve?

      • Present core visualization and descriptions of the app including various user interactions and interface behavior.
      • Draw the outline and structural layout of how the app may actually look.
      • Give an idea how the information is going to be represented on individual screens and how the very same information is going to be processed at the back-end.

      What is a mockup?

      Whereas a wireframe represents the basic structure, functions, and content of an app, a mockup introduces colors, style, typography and to an extent, the actual content the app is going to deal with.

      By the time you reach the mockup stage, you begin to get an idea of how the app is going to look and behave and how the data is going to be represented on different screens.

      A mockup is a mid to high fidelity representation of the basic idea of the app you’re working on (or will be working on). It gives a realistic perspective of how things are going to shape up. All the components of the app are going to be visually represented as they are going to appear in the final version of the app. They might be interactive, and they might not be interactive, it depends on how far you want to stretch your mockup.

      What are the different components and aspects of a mockup?

      A mockup is basically, an advanced version of a wireframe, just as a wireframe is an advanced version of a sketch. The difference is, a mockup resembles the finished product more. The stakeholders, with a look at the mockup, get a fair idea of how the mobile app or the website is going to shape up and how various components are going to look. A finished mockup may have the following components and aspects

      • Buttons, text bars and other visual parts of the app just as they are going to appear in the final version.
      • The content layout.
      • The colors and graphics that may appear in the final version of the app.
      • Typography according to the design of the app.
      • Spacing around various components to give an idea of how information and elements are going to look vis-à-vis the screen size.
      • Navigation graphics – buttons and text and how they are going to look on the screen and how they stand out.

      Various tools you can use to create a mockup

      You can use any tool that allows you to create graphics easily. The most favorite is Photoshop. The sketch is another app that is quite widely used in the software design community. Other than that, you can also use something like PowerPoint.

      Once you have the wireframe in front of you, it is easy to create a mockup because you simply have to fill in the details, the colors and the fonts to a structure that already exists.

      Some of the best tools to create application mockups are

      From the mockup, you move on to creating a prototype.

      What is a prototype?

      A prototype is a high-fidelity representation of the final app. It behaves and acts like the actual app to a great extent. The code is not used to create the prototype, but it contains clickable buttons and hyperlinks and many components of the prototype act as they would in the real app.

      The features of a prototype are

      • A prototype is as interactive as the final app.
      • It mimics almost the exact user experience as the real app.
      • It allows stakeholders scope for extensive testing.
      • It creates ground for new ideas. Sometimes innovative ideas shape up only when the stakeholders can interact with a working model.

      The greatest benefits of creating a fully-formed prototype

      Please keep in mind that the success of your app, website or software development project rests on how well you have created the prototype. Every behavior, every function that needs to exist in the real app must be clearly defined and simulated through the prototype. When the stakeholders are interacting with the prototype, they must feel like they are interacting with the actual app.

      Therefore, once you have created the perfect prototype, the only thing left is, write the code.

      What tools can you use to create the perfect prototype?
      Remember that the prototyping tool of your choice must allow some level of interactivity. So, you should use your prototyping tool according to the level of fidelity you are looking for your prototype. You may look for the following attributes before settling down to the most suitable prototyping tool for your team:

      • Collaboration: Does it allow your team members to work remotely? There are many online prototyping tools available that facilitate online collaboration. If you have a global team of software designers and developers, then this is one of the most vital features of your prototyping app or tool.
      • Lower learning curve: Learning any design tool is going to take some time but go for a prototyping tool that has a lower learning curve so that you can create intricate prototypes with minimum effort. Remember that you may also need to modify the prototype according to the feedback you get so an easier way of doing it is going to save you a ton of time in the long run.
      • Compatibility: How tolerant is your prototype tool towards files of other formats, for example, Photoshop? It doesn’t make sense to recreate visual elements when you have already created them using another app.
      • Affordability: When it comes to features, experience, and quality, you shouldn’t bother much about affordability, but if it is a factor you cannot escape, you may explore many tools that may even come free and their premium versions having features that perhaps you don’t need right now. Spend some time exploring around.


      Some of the most prevalent prototyping tools are

      Conclusion

      Creating a sketch makes it easier for non-technical persons to visually look at how the app is going to materialize. A wireframe gives it a three-dimensional shape. A mockup allows you to look at the representation of your idea and come up with visual suggestions that are not possible unless you actually see how various elements are being represented. Using a prototype is almost like using the real product. You are able to interact with various elements. You can dry run various functions and modules and see data outcomes.

      As mentioned above, a sketch, wireframe, mockup and finally a prototype is going to save you a ton of time, effort, and money. A well-defined software design process lays down a visual path that later you can easily follow.

      Do you agree that software design process is needed for successful software projects? Share why (or why not!) in the comments!

Dhananjay Goel

Dhananjay (DJ) Goel is the CTO at Alphalogic, passionate about technology, startups, game of thrones and coffee. He enjoys working on challenging problems with innovative startups.

Mobile App Development Rated 5 / 5 based on 5 reviews. | Review Me