{"id":460,"date":"2015-03-18T18:51:25","date_gmt":"2015-03-18T16:51:25","guid":{"rendered":"https:\/\/mndn.de\/?p=460"},"modified":"2022-09-30T13:41:02","modified_gmt":"2022-09-30T11:41:02","slug":"case-study-looperator-gui-ux-design-english","status":"publish","type":"post","link":"https:\/\/mndn.de\/en\/2015\/03\/18\/case-study-looperator-gui-ux-design-english\/","title":{"rendered":"Looperator GUI & UX Design"},"content":{"rendered":"

With Looperator<\/a>, Berlin based audio software studio Sugar Bytes<\/a> delivers a comprehensive tool for creating musical sound loops. A massive array of effects enables countless possibilities of sound manipulation. At the same time, the user is granted even more control through customised effects. It goes without saying: Only an equally refined interface design will guarantee that this powerful software\u2019s full potential unfolds.<\/p>\n

\"MNDN<\/a>

Looperator Main Screen<\/p><\/div>\n

Mondon Design was commissioned with the development of Looperator\u2019s entire visual design: This encompasses a visual language and concept, the graphic user interface design (GUI design) as well as the user experience design (UX design). Furthermore, we created the Looperator logo, respective app icons, promotional material and also the graphics for the software installer. This gave us the opportunity of creating a consistent user experience.<\/p>\n

UI Design that\u2019s looking ahead<\/h2>\n

We design interfaces to be resolution independent. This means, that the interface looks its best on every device. We kept in mind the potential release of Looperator on high-resolution displays (Retina iPad, high-res monitors) right from the start. Already while outlining it in Photoshop, the GUI was completely vector-based. This bares many advantages compared to a pixel-based design, since the whole interface can be scaled easily without suffering any loss in quality. Of course, throughout the process we have to ensure each items visual \u201cfunctionality\u201d on all resolution levels. Thanks to such standards in our work techniques we are able to very quickly transfer a user interface to another platform \u2013 straightforward and uncomplicated.<\/p>\n

\"MNDN<\/a>

The entire Looperator GUI is vector-built<\/p><\/div>\n

Efficiency through Reduction<\/h2>\n

Our work for Looperator is characterised by its high efficiency, especially regarding the conception of the GUI elements: As simple as possible, as complex as necessary. For example, scaling a drop down menu during the development was very quickly possible, since merely a single vector object had to be manipulated. This reduction naturally compelled us to boil the elements\u2019 design down to their essence. A welcome side-effect.<\/p>\n

\"MNDN<\/a>

Every UI element consist of only a single vector object<\/p><\/div>\n

The Process<\/h2>\n

The development of a user interface is an evolutionary process. For the Looperator we initially took a closer look at the software’s alpha version: Where lie it’s strengths and special features? Which situations require that we take the user a little more by the hand? Subsequently, during wireframing we optimised the workflow, suggested additional functions and saw to an intuitive handling. A clear separation of working areas, a coloured guide system and a deliberate arrangement of all controls create a lucid working environment. Speed is trumps: All effects are quickly accessible via popups. While developing, we take great care to observe and respect the user’s learned conventions of operating a software \u2013 a special challenge since after all the Looperator strikes a new path at certain points in order to speed up the workflow. It goes without saying that these solutions must work for mouse operation as well as on touch screen devices.<\/p>\n\n\t\t