Diagrams for macOS

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.

Q1 2018 – Now

Lukáš Kubánek

(Structured Path GmbH)

Roles

Icon Design

Interface Design

Web Design

Visit Website

On February 5, 2020 got released to the public.

App Icon

project preview project preview

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

UI/UX Design

project preview

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.

project preview

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.