Diagrams is a Mac application for creating structured diagrams. It allows you to quickly create flowcharts, functional diagrams, and many more. It leverages a semantic approach that enables better-suited user interactions for the creation of diagrams.
Lukáš Kubánek
(Structured Path GmbH)
Icon Design
Interface Design
Web Design
On February 5, 2020 got released to the public.
The project started with creating an app icon using the existing logo. After creating a lot of sketches (some of them shown in the photo), we’ve decided to go for the 3D look of the icon. For the first time I actually, modeled the icon completely in a 3D software (Blender). The developer Lukáš wanted me to create alternate icon versions for Beta, Alpha and Developer versions of the app.
Read more about the process in my blog post: The Making of Diagrams App Icon
After finishing the app icon, Lukáš asked me if I could also help him designing the UI and UX for Diagrams. I’m working on a visual style which feels like a native Mac app. The app is based on a semantic approach which enables creation of element and relationship types by choosing from a predefined set of colors and by setting values for different style attributes. These types are then used when creating elements and relationships in the canvas. In the future, the user will be able to choose from handcrafted themes which will change the color spectrum of the diagram.
Besides the visual appearance of the glyphs, colors, fonts and more, I’m working on creating a seamless UX for several features of the app. One of the core aspects is creating different relationship types between element boxes as well as changing the automatically generated relationship route.