Why it’s better to choose prototypes over mockups

While customers often use the terms “website mockups” and “clickable prototypes” interchangeably, everybody involved in web design services should clearly differentiate these two ideas. This article is meant to give a grasp of important distinctions amongst clickable prototypes and web page mockups, when the mockup works best, when web design prototype does the job and, ultimately — why it’s better to choose prototypes over mockups.

Website mockups and why clients and designers need them

Let’s start with definitions. Website mockup is actually a highly informative and visually rich representation of what the website looks like. This demonstration most often consists of series of the PSD images of website pages created in Adobe Photoshop or Illustrator. This mockup serves two major website creation goals:

• It shows the information structure, helps the customers visualize the future website appearance and depicts the screenshots of website functioning taken at certain moments
• Website mockup helps the non-developers to evaluate the visual part of the website and understand whether they like the fonts and color palette, backgrounds, images and positioning of different elements, etc.

The main advantage of mockups lies in the fact they are the quickest way to show all the possible stances of all website pages. Website designers mainly create website mockups to provide a quick glance of the future product’s visual form.

The main drawback of the mockup comes straight out of its main benefit: it’s a picture drawn with graphics software, not code. The customers see their future website pages as a collection of images and they have to go back and forth to evaluate all the stages of the actions or processes. This leads to multiple repetitions of the same steps that can be pretty tiresome for a customer, who just wants to have the job done.

To say even more — once every last mockup is approved, web designers need to build the website anew, using HTML, CSS and JS. Unless the customers are aware of this from the very beginning, they will inevitably ask why should they pay for the same job twice?

How to make mockups work? Simply involve them where they are most useful — as the quick-to-build means of gathering feedback from the customers.

How to create prototype and what makes it better than mockup?

Website design prototype — a clickable website model, aimed at depicting the website functionality. It might not contain all the features, yet it provides a solid grasp of the future website UI/UX, and is produced involving the tool like InvisionApp, Proto.io, or Flinto. Unlike mockups, the clickable prototype is responsive and lets the customer try out the almost finished solution instead of browsing images.

While web page prototype requires a bit more time to be produced as compared to mockups, it saves quite a lot of time and effort in the long run. Here is why it is so:

• Responsive prototype enables cross-browser and cross-platform testing on multiple gadgets
• Designers can adjust prototypes quickly, by using comments submitted directly to prototype parts, instead of going back and forth to PSD images
• Prototypes turn into sites really fast, as nearly all the code needed is in place and is already working in the browser

How to create a prototype then? An approximate workflow looks like this:

• Create sketches of future website pages (a pencil and a sheet of paper should suffice)
• Use some digital mockup tool like Balsamiq Mockups
• Use Photoshop or Illustrator for visualization (or skip this step at all)
• Use InvisionApp, Flinto or Proto.io to create a responsive prototype

Why would a designer want to create such prototypes? It allows the clients feel their future website performance firsthand, which is way more engaging than looking at the folders full of PSD files. Besides, working with a prototype provides a ton of data on UX and usability much earlier than the actual website development stage begins, so that all the present UX/UI errors are identified and resolved immediately.

The clickable prototype creation tools listed above provide lots of essential gains to skilled developers:

• Static PSD images are uploaded into the framework and are rapidly turned into a responsive website prototype.
• Project is driven by designers instead of going back and forth to customers for approval of each image.
• Powerful collaboration tools simplify teamwork, shortening the design time.

What are the drawbacks of prototype use? There are but a few:

• Clickable prototypes can increase the project complexity, as applying all the feedback might expand the system scope far beyond the initial specifications and budget.
• The customers might also become too attached to the prototype and forget this is merely a test model, meaning they might expect all the prototype features to be included in the actual website.

Therefore, each prototyping cycle should end with gathering feedback on the features deployed, removing the experimental ones and leaving only the core functions in place. This helps ensure both the designers and the customers stay focused on the ultimate goal - staying within the specified development time and budget.

Over the years of providing web development services, DDI development team came to an undisputed conclusion that responsive prototypes are much more feasible as the main web design approach, as compared to mockups.

Undoubtedly, prototype construction requires a bit more time on the initial stages of website development, yet it saves tenfold more time on the final stages. We now have a polished workflow of clickable prototypes usage and are proud to provide some neat solutions that meet the clients’ needs and exceed their expectations.