By accepting you will be accessing a service provided by a third-party external to https://magazine.joomla.org/
A new visual language for Joomla 4
The Joomla World Conference 2017 in Rome was a great moment to discuss the future of the project, which... surprise… will, for the most part, have a big "Joomla 4" stamp on it. In the context of the conference, I was invited to participate in the Marketing Sprint, kicking it off with a full day of meeting with the leaders and members responsible for the launch of the Joomla 4 marketing campaign. Together we brainstormed and discussed ideas, reviewed predictions and adjusted expectations to better fit realistic goals.
According to Sandra Decoux, Marketing and Communication Department Coordinator, "Joomla 4 will be a great big step forward for people that build websites and web applications"; Sandra went on to say that "we want to make sure that new and old users can feel and understand we are coming out with something big".
Learning from our errors
I still remember my first "Joomla version" launch back in 2014. At the time I was a Joomla Brand Manager and it was Joomla 3.3 that we were to launch.
For some reason that I don't recall, we ditched all that we had done until 3.2. A lot of ideas emerged during our meetings, some of them truly amazing (hey, we have some great minds in the community, in case you were wondering!). The final campaign was conceptually inspired by the life of bees. So, little bees were our tireless volunteers and a bustling beehive, the container of our precious product, the Joomla CMS. Each hexagon would be filled with the main features of each version and from then on the hexagon would be the new symbol of 3.x campaigns.
I felt it was a great idea and still I think it is. However, as with any volunteer-based project, many of the people involved in 3.3 campaign left soon after the launch while the new volunteers knew very little if nothing, about the why’s and what’s behind our marketing decisions.
Nothing was really documented. The campaign for Joomla 3.x continued to run using hexagons, but the real idea got lost in translation, evidenced by the lack of consistency and continuity.
We definitely don't want this to happen when it comes to Joomla 4. For this reason, we decided that the new campaign will:
- Have a strong visual language, not necessarily based on images.
- Have rules to allow that it can be consistently used for Joomla 4.0 and successive releases (4.1, 4.2, etc..).
- Be affiliated with the general Joomla brand, but with a fresh look.
The Visual Language
In the past, we used a combination of pictures and icons, most of them coming from stock resources. For this new release, we wanted to use illustrations specifically created for Joomla. Using illustrations has many benefits:
- they are able to explain complex concepts into understandable and clear bits of information.
- They don't need to be translated and, in an international community like ours, this is a big bonus.
- It is a friendly, colourful and recognisable language that can represent our brand, without sounding too "corporate".
But, of course, illustrations can easily be big trouble if they don't come with some rules!
Rule #1: Colour Palette
In the past, to guarantee that our brand was recognisable, we thought that using all 4 main colours was good practice. Unfortunately, over the years I came to understand that some colour combinations make for really poor design choices.
To sustain the growth of Joomla 4 and all upcoming releases, we need a colour scheme that could be used consistently in all our communication materials (online and offline) and that does not leave space for interpretation, causing a compromised representation of our brand and its product.
For this reason, we focused on 2 colour schemes, primary and basic, each of them supported bydifferent shades. Primary colour scheme: it includes the colours that most characterise the theme/release. The primary colour scheme comes with a darker and brighter shade to add accents and create contrasts between the different elements.
Basic colour scheme: the palette that complements the primary colour and is used for basic UI elements (background, text, etc,.).
- It supports and completes the primary colour scheme.
- It also helps to create a visual hierarchy between elements (for example, an active button vs. a disabled one).
- This scheme won’t change based on the release.
We envisioned that each Joomla 4.x release will use one theme colour (primary colour) so that it will be easy to switch colours when we move to a next release.
The specific chart below already contains 10 different colours, so this means you are good-to-go until the release of Joomla 4.10!
So let's imagine that we are at the release of Joomla 4.4.
What we need is to :
- Pick the main colour.
- Create its hues.
- Pair them (main colour+hues) with our basic colour scheme.
Now you need to apply this specific palette to all your communication. Game over!
Rule #2: The Illustration Style
Once the colour palette has been defined, creating an illustration style just for Joomla was another exciting experiment Liliana and I embraced.
We worked together to create a simple language full of beautiful and meaningful icons that can then sit together to develop the Joomla world.
We are still developing more of them, but here is a small sneak peek.
When creating icons, it is important to understand which colour will be used for the stroke and which one for the shade.
The small colour palette definitely helps a lot define these details. While the main colour will be used to define the strokes of the icon, the different hues of the same colour are helpful to create flat shading (so no gradient, please) and also to add depth to the illustrations.
Rule #3: Create the Joomla World
What most of the users are able to achieve with Joomla is "building" and sustain the growth of their business. The proof of this statement is the show that former Open Source Matters President, Sarah Watz, is leading in the past year.
We are extremely proud of our CMS features and of our energetic community, but every time we promote our products, it seems we forget to answer one recurring question: why is Joomla a good fit for the growth of my business?
For this reason, we all agreed that although the features of Joomla 4 and upcoming versions are important, our marketing campaign needs to focus on the benefits of using Joomla in general.
Time to build!
At the moment of writing, we identified 6 advantages to using Joomla and we illustrated them in six small worlds.
The above illustrations are made of basic elements (icons) that were once combined to deliver a structured and complex message.
The elements are combined to identify a specific message that appeals to our key audiences: Decision Makers in SMEs (CEOs, Marketing Leaders, Sales Managers, etc.), Technical People (Developers, Programmers, Integrators, etc), Creatives (Creative Agencies, Designers, Students, etc).
The illustrations are all about communicating the rich features and functionalities of Joomla.
Building these worlds can be a bit challenging but we will try our best to set some rules.
Everything is still in development, but there are two important concepts to keep in mind:
- Combine the icons keeping the message in mind and if the way we want to share it is appropriate for the target audience.
- When adding icons/elements, be careful you do not overkill. It should look simple and use only a few illustrations.
- Harmony and balance are key to beautiful and sustainable eco-systems.
Set the record straight!
The visual language for Joomla 4 is still a great "work in progress" and it proves to be a real test. In fact, we have never thought about our campaigns in this structured way, until today.
Our CMS needs a solid and effective communication language.
For this reason, we envision that the illustration system herein illustrated, will evolve together with our releases, whilst following specific guidelines.
As part of the design team, our work is to ensure we can protect the consistency of our message. And believe us, this is the real challenge.
We are still working and testing the illustrations, looking for limits and addressing gaps.
We encourage you to share your thoughts and feedback at this stage. This will enormously help us spot vulnerabilities we haven't considered.