The Making of Diagrams App Icon

Hello! I’m Alex, the creator of Diagrams’ app icon. While working on refining the UI and UX of the application, I’d like to share a few bits from the logo and app icon design process.

Logo

The logo itself was designed by Knick Design, a design agency based in Leipzig, Germany. They did a great job creating an interesting and unique symbol which eventually became the main part of the logo.

But of course, every design has to go through a long process with many changes. It’s impossible to find the right design in just one sketch or idea. Lukáš and the design team worked on a lot of different variations. Some of the early ideas included elements like whiteboards, light bulbs, and diagram objects.

In such a design process, you typically start with basic ideas and elaborate on them taking various directions before you find something that works. You come up with more crazy ideas along the way and continue to create different versions until you eventually find that one interesting draft that everyone can agree on.

We aimed to make a logo which reflects our vision and the core features like creating structures. It also had to be easy to recognize. In the end, the idea of an ant was chosen. You may ask, “What does an ant have to do with a diagramming application”?

Ants are very structured, systematic and architectural animals. That’s exactly what Diagrams aims to be! Using an ant as a logo differentiates us greatly from other diagramming applications. Most of them use some kind of diagram objects in their logos and app icons which all look very similar to each other.

The animal metaphor wasn’t enough, though. The idea was to visually link the logo to what our application does – creating diagrams. That’s why the ant head is built out of parts which can be found in the application. The head shape represents an element, the antennae represent relationships, and the eyes represent connection points.

A remarkable and unique logo was born! But what about the app icon that sits in the dock of every user?

App Icon

As mentioned at the beginning, I came into play for this specific phase. My task was to create an icon for the Mac application which respects the platform and is based on the logo in some way.

Why don’t we just use the logo as it is for the icon? Mac apps always have a certain visual look that gives the icon depth and materiality. Adopting this look makes the app feel at home on macOS and also shows that we care about this platform. Being able to stand out is a challenge. I always aim to be unique while blending in with the platform when designing app icons!

I started by creating drafts of the icon which could be divided into two categories. The first category was built around the ant head symbol from the logo and the second category depicted the app’s capabilities in a more direct way. The result can be found in this sketch:

It’s common for icons to represent the purpose of applications in direct ways. For example, Keynote shows a presentation desk where you will stand when presenting your slides and Mail shows a postage stamp as a symbol for sending electronic mails. Inspired by this approach we decided to elaborate on the concept of a whiteboard with a marker and I created more drafts.

Although this icon would perfectly represent what Diagrams does; it felt too clunky and noisy to us. But more importantly, it lost all the uniqueness which was put into the logo. And so we went back to the drafts with the ant head and decided to try a 3D representation. I’ve modeled the ant head in a 3D program and placed it on a variety of rectangular backgrounds. We quickly settled on the icon with the paper stack in the background.

Creating the icon in a 3D program was kind of new to me, as I usually work with vector drawing tools. In this case, it made sense to create everything in 3D as we were able to tweak the perspective, material, and light in the most realistic way. For example, the page curl of the paper stack looks just the way I wanted it to look, seen from the final perspective, but it looks stretched from other angles as you can see in the screenshot. Sometimes you have to push the limits in order to come up with a good-looking icon.

This is the final icon you will soon see in your Dock. It looks very clean and doesn’t have many details which make it easily recognizable even in smaller sizes. Its unique shape makes it stand out among other icons as more and more Mac icons are flat and wrapped in circles these days.

For internal use, I also created a few alternate variants to distinguish between the release, beta, alpha, and development versions of the application. They are too cool to just use them behind closed doors. Enjoy this bit of trivia.

At Diagrams, we currently see the red alpha icon on our Macs. Soon we’ll step up to the beta for the first time. Do you want to help us with testing and polishing the app for the final release? Feel free to subscribe to our mailing list and we’ll let you know when the public beta will arrive.

Thanks for reading this in-depth look. We hope you like the logo and the app icon.

See you later,
Alex

Yet Another Diagramming Application

People often tell us they know other solutions on the market that do something similar to Diagrams. They are right, those tools indeed do something similar. So why are we building yet another diagramming application?

Because Diagrams differs in a few fundamental aspects which have the potential to change the way people create structured diagrams. In this post, we are going to briefly introduce them to you.

Meta-model

We believe that diagram types with different layouts require different interactions. Supporting all possible diagram types in one application would mean dropping to the least common denominator of the interaction model and this would be a suboptimal solution.

This is why Diagrams supports only “structured diagrams” which are based on graphs. To put it simply, these are diagrams which consist of boxes (elements) connected with lines (relationships). This meta-model is universally applicable to a variety of diagram types like class diagrams, network diagrams, flowcharts, organizational charts, and many more.

Building upon this meta-model allows for interactions which are leveraging the specifics of elements and relationships. Among other things, this means that relationships stay connected to elements when moved.

Zero Distractions

Here is what we have figured out: Most tools out there are packed with tons of features. They attempt to support as many individual options and special use cases as possible. In our eyes, these are nothing but distractions. They keep you from focusing on the content of your diagram.

Even worse, those features create room for fiddling around with fine configurations of pixel sizes, layouts, colors, fonts, and so on. Although these settings are useful for graphic designers, they are certainly useless when creating structured diagrams.

This is the reason why Diagrams has no inspector pane on the right side of the application window, leaving more space for the canvas and therefore for your focused work. It’s almost like drawing on a paper.

Rethought Workflow

A lot of effort was put into designing the diagramming workflow right from the beginning of the development. For us, workflow optimization is all about speed, intuitive interactions, and standardization.

Canvas

We truly believe in the visual nature of diagramming as we think that automatic generation of diagrams can never reach the same quality level as a human can produce. This is why an interactive canvas plays an essential role in the diagram creation process. The canvas is the entry point into the application and we’ve equipped it with streamlined interactions to make diagram editing a joy.

Furthermore, the canvas leverages a grid which simplifies the layout as it is used to align the elements and relationships in the diagram. It prevents you from losing focus by fiddling with alignments and size adjustments. This feature is so essential that it sits at the core of the application and it is reflected in most canvas interactions.

There is also no need to set the size of your diagrams manually. Just grow them as big as your structures demand. Diagrams has an infinite canvas which will adapt to the size of your diagram.

Semantics

Diagrams follows a, what we call, “creational approach”. This means that instead of applying random visual attributes to generic shapes you pick the types for your elements and relationships from a palette at the time of their creation. Each type defines the visual attributes which leads to ensured consistency among all its instances.

This might sound like a minor change but it’s actually a deal breaker as this approach allows working in a semantic manner. When working on a diagram of a particular type the palette would show only the relevant element and relationship types from which you can choose. So if you are creating a class diagram, for example, you’re actually adding a class element and an inheritance relationship instead of a rectangle with a text field and a line with a non-filled arrowhead.

Native Application

Last but not least we believe that only native applications can deliver the user experience you deserve. We don’t compromise in this regard and therefore we’re building a native application which feels at home on macOS.

Stay Tuned!

Hopefully, we could illustrate that we’re doing everything we can to help your brain stay focused while removing clutter at the same time. That’s how we understand the user experience.

There is more to show. We can’t wait to share some more in-depth insights with you during the next months. The further we are in development, the more details we will be able to talk about.

But for now, let’s get back to Xcode.

Hello World!

Hi there, this is Lukáš.

I’m the founder and developer of Diagrams, an upcoming Mac application for creating structured diagrams. In this post, I’d like to introduce you to this project which I have dedicated my life to for the last few years.

I came into software development in one of the weirdest ways possible: Before I started programming, I taught myself UML, the visual modeling language for describing software systems. Despite the controversy about the usefulness of UML and the processes it is usually connected to, I saw greater value in its way of visual representation.

Since I’m a visually oriented person, I still do a lot of drawing when developing software nowadays. This helps me to structure my ideas and possibly to come up with better architectures in the end.

As I was looking for a digital solution which would support my workflows on the Mac, I wasn’t able to find any suitable applications.

The UML editors supported the logic, but looked really crappy, and were overloaded with tons of unnecessary features.

The vector graphics editors, on the other hand, were not designed with the logic in mind. I had to fight the features specific to graphics editing as well as the flexible formatting and layout possibilities.

These tools were too complex for my needs. I wanted something as simple as a plain paper with all the benefits of the digital world. This is why I decided to build it myself. In the form of a truly native macOS application.

Currently, the app is under development. The core architecture of the app is finished and a few internal alpha versions were already released. But there is still plenty of work to be done. You can expect the private release to come out next year.

Over the next weeks, we will reveal more details about Diagrams on this blog. We will explain where it tries to innovate and improve on the existing tools. We will share further concepts, show off some bits from the design process, and discuss individual features.

If you’re interested in these topics you should read this blog, subscribe to our mailing list, or follow us on Twitter.

Stay tuned!
Lukáš