Digital prototype development

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.

Medium-Fidelity
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.

High-Fidelity
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:

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

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.