Digital prototype development

Visualization of the product vision: methodology and tools

Prototyping - the importance of visual input

In the various projects that we at eggs unimedia implement together with our clients, we often work very closely with the responsible design teams. Especially in the coordination phases, it is very important to visually represent the visions in order to give both the clients and the development teams an early idea of what the final product might look like. Terms like wireframes, layouts and prototypes are often used in this context. However, what they mean and what purpose they serve is not always known to many developers and customers.

This article deals in the first part with the conceptual design of digital products and in particular with the iterative design process from the perspective of a user experience (UX) designer. The second section introduces two powerful prototyping tools that assist with concept visualizations. In addition, this blog post is a companion to the Techtalk post in June 2022 - more info here.

Iterative Design Process

Iterativer Design Prozess


The iterative design thinking process is a popular methodology that many UX designers use to continually refine the visualization of a product based on feedback. Specifically, it involves gathering requirements, defining them, finding creative solutions, designing a prototype, and gathering feedback via testing. If changes are requested, the respective phase is repeated to adjust the requirements and modify the prototype. In this way, error corrections are perceived at an early stage and feedback can be collected and processed again and again for the development of a product. Various resolutions of prototypes are also of great importance here, which are described in the following section.


Design templates in different "fidelities" (can be thought of as different resolutions) allow you to select and, if necessary, adjust a level of detail. This makes it easier to address suggested changes and continue product development. From the perspective of developers who receive the templates for implementation, technical terms often come up, which are explained below:



Low fidelity
Design templates in different "fidelities" (can be thought of as different resolutions) allow you to select and, if necessary, adjust a level of detail. This makes it easier to address suggested changes and continue product development. From the perspective of developers who receive the templates for implementation, technical terms often come up, which are explained below:in Low-fidelity prototype has a low resolution. Quick sketches are often put on paper to represent what is desired. In this way, it is possible to quickly and easily collect and record the ideas. It is also possible to combine different pages to give a first impression for the customer.

In this stage there are already concrete requirements and ideas for the final product. Here, arrangements are visualized and concrete placements of various components are worked out. These are referred to as wireframes, i.e. blueprints of the system, which are intended to represent the vision in medium resolution using simple means.

In the high-fidelity variant, the results are called design templates. They represent a concrete, non-functional copy of what the user will see in the finished product. At this late stage, criteria and styles are fully defined and delivered in an almost finished state. From a technical perspective, this template is used to develop and finalize the product. In particular, it is important to consider the behavior on different end devices. Guidelines that define spacing, color assignments, arrangements, etc. support this.

If you are wondering with which software or on which website this can be done easily and quickly, here are a few suggestions:

Prototyping Software

There are various software solutions that are used in the professional environment. These include widely used tools such as Sketch or Axure RP. But what alternatives could you use if you want to be independent of operating systems? From my own positive experience, I would now like to go into more detail about two systems:

Adobe XD

Adobe XD is a vector-based graphics software for designing graphical user interfaces for web apps and mobile apps. It is part of Adobe's Creative Cloud. After a long beta phase since 2015, it has proven its marketability and is used in professional environments by UX and UI designers to create high-fidelity prototypes and functional prototypes.



Due to the open interfaces and Creative Cloud connection, it is easy to graphically edit designs directly with Adobe Illustrator, Photoshop, and directly with Adobe Experience Manager, for example, and to convert them into web pages. In addition, the layer- and component-based structure of a prototype is advantageous to ensure the reusability of the library. Thus, various screens can be designed and edited in a short time. With the help of the preview function, it is also possible to share a functional version in the browser window with a link and thus obtain feedback. Graphical solutions can be designed and shared in all possible resolutions. A small disadvantage is that the software has to be installed beforehand.


Figma is a collaborative design tool for creating designs (for web, mobile, UI and UX). With the help of this tool, classic design features and design systems can be developed as well as digital prototypes can be created. It is a platform-independent system available as a browser, desktop and mobile application. The own collaboration cloud enables real-time editing in the team as well as in private use.


The origins of this software date back to 2012. Computer science students at Brown University had the idea to develop software under the motto "anyone be creative by creating free, simple, creative tools in a browser." They wanted to increase user creativity by providing a platform to unleash creativity in a browser window. Today, 10 years later, the software is already able to integrate font systems, design systems and analytics libraries. An extensive community also provides a number of pre-built modules that are released for sharing. It also comes with a whiteboard that can be used for brainstorming and idea collection. Figma can be used both in the commercial sector as a paid version with more functionality, and in the private sector as a free version with basic functionalities.


A wide range of software and tools ensures maximum flexibility in the working environment. With this in mind, I wanted to give a brief insight into the world of graphics processing and design systems with this blog entry. I believe that it should be possible to capture creative thoughts not only quickly as an analog sketch on a piece of paper. It should also be possible with digital tools to make quick sketches right away digitally. The experiences with the presented tools were very satisfying in the past. The further developments and constant improvements of the applications are to be followed with excitement and will become even more interesting in the future. We at eggs unimedia are also close to these topics in order to remain up to date.