The creation of Rooh, pt.3
How to develop a single logo into the design system
This article is written in two languages, Ukrainian and English. The Ukrainian version is here. Please follow the language you’re more comfortable with.
So, the logo
As you remember, I had developed several versions of the sign. Together with the team, we’d chosen one of them — one with the eternity mark in it.
Apart from the logo, I'd made the ‘identity sketch’ — a hypothetical style developed from the sign.
Great, what’s next? The sign itself is important, yet a very small part of the system. I needed to think about the colors, the shapes, and their further interaction — a lot of things to do.
Further steps
Though we’d chosen the option we loved, we were uncertain about the colors. The “eternity” version was inspired by poppy petals in the sun, so the colors created a violet-pink-red gradient. Such shades are fresh and modern, but we wanted to stick to the traditional combination — inspired by the embroidery.
Thus we’ve decided to take red and black from the “sword” version.
It was a great decision: black and red are universal colors, they could make good combinations with white, and black could be switched to white if needed (and vice versa). So, the first task was done.
Looking for the shape
The eternity sign is quite difficult to transform into anything. While experimenting, I tried to cut it, and I’ve got a cross. I’ve built a pattern and got something like embroidery, but very difficult to percept.
I decided to find a different way. The closest shape is a circle, and if you take a look at the sign construction, you can see it:
I’ve used circles on my first style sketch, but I understood that it was not enough — I needed a fuller image.
I decided to take a look at the embroidery pattern (once more). Yes, it reminds pixel art more, which consists of squares, but a circle can also play the role of an information-color particle. Thus I decided to make my own pixel art, but use circles instead, which, I decided, will be our primary shapes.
Developing the shape
I really liked the result. Actually, I could stop at that point, but I decided to continue my research.
First thing — the circles can be of different sizes (but they need to fit into the grid). Second — they can contain an opening inside (of different sizes). Some of the circles are only the halves. Some of them can have a gradient background. Sometimes it’s not a circle but two circles together, creating a rectangle with rounded corners. Some of them can be a mask for a photo or image. And all these circles are put together into the pattern in random order so that they’ll make a different pattern every next time. And this pattern will remind embroidery because of its color and shape.
As you can see, I’ve developed a wide range of circles, and they all can be not only beautiful but functional. But first, let’s talk about the background.
Background
Surely, we can use a plain white (or black) background. Nevertheless, sometimes an accent is needed, or the space is too empty and requires some additional elements. For that purpose, I’ve decided to use blurred semi-transparent red circles so that they create a light gradient background from white to light pink. Transparency numbers can vary so that the blurred spots have different looks and create a richer background.
The white background is the main one — nevertheless, black or even red versions can be used if needed.
Briefly about the font
The font is one of the principal elements of the design. For this design system, I decided to use the Jura font family. It’s geometric, nearly square, and makes a good duet with circles.
Creating the assets
I’ve mentioned that the pattern as a part of the design system is, first of all, functional. Let’s take a look at its primary use cases:
Here you can see the standard pattern that should be remembered and associated with our organization. It contains all forms I’ve described above and is more decorative, than functional. Now let’s take a look at social media banners.
I’ve started the communication with these:
The left one — the first one. Blurred background, our logo, text. It’s a statement: “We’re here! Hello, please remember our logo”. The one on the right had been made in some days, asking people to join us. The logo has moved; some circles appeared on the left — the image is dynamic, it represents movement.
Circles can be used as placeholders for icons. For example:
All these banners have random patterns, but icons in red and black circles give additional information.
The circles may represent a metaphor for the topic on the banner:
The project manager banner has circles neatly paired by their color and look showing the manager’s role: being logical, tidy, and precise. The circles on the business analyst banner create a pattern close to the chart milestones, and it also goes up, just like the income must.
Sometimes the circles create an image:
Here, for example, red circles represent petals, and the black one is the bullet. One of the petals is broken in two — additional dramatic effect.
This series is dedicated to Ukrainian outstanding people, so a big circle is used as a photo placeholder and long shapes — for people’s names.
Some of the banners have red background: they need to attract maximum attention.
The bigger assets
These were examples of social media designs. The system has proved its convenience and usability because, if you can use the design on small assets and make them look good, meaningful, and attractive — you will certainly be able to develop it into a big system, where there’s space for creativity.
For example, this is how the system is used in the presentation:
Pay attention to the isometric images — they are the new element of the design. Add only the touch of the corporate colors and you will not mix it up with another identity. That’s how the system works: colors, shapes, and their unique combination create an unforgettable association.
It’s a really important thing, this design. Ukrainian culture is still unknown to many people and, giving a second breath to our national pattern, which is one of our symbols, making it look modern and cool — these things are just what we need nowadays. And just what our organization is apt to: make our culture wide-known and interesting for many people.
The next article will be dedicated to the website, which will be available soon. Stay tuned!