Diagrams is an upcoming Mac application for creating structured diagrams. It allows you to easily create flowcharts, functional diagrams or anything else. It leverages a semantic approach which enables better suited user interactions for the creation of diagrams.
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.
The project is still in progress hence this is a presentation of the current state of the design which may change during further development.