Wireframe, mockup, software development, GUI elements, interface
Visual communication between customer and software development
A software project will only be successful if the customer and the software developer find a common language. This is particularly important at the beginning of the collaboration, but it is also difficult so soon after first getting to know each other.
A software project starts with the recording of the requirements. In the process, the software developer acquires a great deal of specialist knowledge from his customer. Then he implements what he has learned and designs a new program. Besides technical aspects, the appearance of the software plays a major role.
Wireframes
In fact, a clearly structured and well thought-out interface often leads to a functionally convincing program. The so-called wireframes are used as an aid here. These are images that visualize the appearance of the later software. A distinction is made between wireframes and mockups. Wireframes are limited to the arrangement and function of the GUI elements, similar to the wireframe model of a form.
Mockups
In contrast, mockups are close to a visual prototype of the software to be created. They convey an impression of the function and appearance of a program. It does not matter whether it is a desktop, web or mobile application.
Well planned from the start
Interactive wire frames and mockups
Wire frames and mockups are primarily images that can be shared and discussed between the client and the software developer. One can point to the elements of the images and discuss them. This facilitates communication. Dynamic wireframes or mockups also have clickable areas marked. This makes it possible, for example, to simulate that a click on a button opens a new web page. This is very close to the user experience of the later application.
The following table contains some programs that support the creation of wire frames and mockups:
| Name | URL | Advantages and disadvantages |
| Evolus Pencil | https://pencil.evolus.vn/ | + Free desktop application.
+ Clickable areas. – Must be installed. |
| InVision | https://www.invisionapp.com/
|
+ A free project.
+ Clickable areas. + Mockups are provided clickable on the web. |
| Axure RP | https://www.axure.com/ | + Installable desktop application
+ Partially programmable behavior – 30-day trial version, after that paid (expensive). |