Webovanje

Scope of work:

Brand Strategy
Target Group
Logo
Colors

Pattern
Website UX/UI
Typography
Brand Identity

PROCESS

Webovanje is a brand designed by adhering to the principles of the rational model. For each of the segments that needed to be designed, the process included four key factors:

1. Understanding 2. Research

3. Testing 4. Solution

IDEA

The basic idea of this project is to enrich the knowledge of graphic design enthusiasts by providing educational information, inspiring with examples of final project solutions, and teaching the use of various tools.

In this way, I will support and inspire creative individuals who are not engaged in creative industries to explore the world of graphic design, a field that truly interests them.

TARGET GROUP

In order to better understand the target group, with the support of tools such as ChatGPT and Gemini (Bard), I started the process of segmenting it into several smaller groups. For each of these groups, totaling four, I identified key demographic characteristics:

Age
Location
Interests
Motivation
Budget
Challenges they face
Educational level

In the context of the idea’s goal of connecting with the target group, the primary step was to determine the message I want to convey to potential clients.

The analysis of the collected demographic data allowed me to understand their needs and challenges more deeply, as well as to specify the profiles of people covered by the group.

I came to the conclusion that these are individuals who show a tendency towards exploring, learning, and creating. Using this information, the process naturally evolved to the next segment – choosing the brand name.

NAME

Making a parallel with the previously concluded profile of the target group – individuals who like to explore, learn, and create – I found a term that could connect these activities: “Googling”. In the Serbian language, this word is often used when you want to search for something on the internet, as in the phrase, “Google it on the internet”. Given that this word implies a clear action, I realized that the brand name should also carry similar directness. Thus, through a play on words, I transformed “Google” into “Web”, creating a new word with a similar meaning. This is how the name “Webovanje” was born.

Q1 – Why “W” instead of “V”? Because “Web” comes from “World Wide Web”, emphasizing that the action takes place on the internet.

Q2 – What does webovanje mean? The definition of “Webovanje” would be: searching for information about someone or something on the internet.

Although the meaning of “Webovanje” seems intuitive, the name lacked context. Therefore, wanting to send a clear message about the brand’s purpose, I adopted the slogan,

“Explore – Learn – Create”.

RS: “Istraži- Nauči – Stvori”.

Furthermore, I checked the availability of the name by researching social networks, search engines, domain availability, and registration. All indicators pointed to the name being free for use, which encouraged me to proceed with customizing the name.

The brand received three different names, depending on the context of use and the needs for a visual identity:

Full name: Webovanje – Istraži – Nauči – Stvori
Secondary name: Webovanje
Hashtag name, or name for use on social networks: WBVE

LOGO

The development of the logo was closely connected with all the gathered information, taking into account several key aspects:

Recognizability
Meaningfulness
Practicality of application
Resistance to changes in styles
Ability to convey messages and emotions

Logo Goals

The logo should reflect the brand’s identity.
It needs to be recognizable and clearly associated with the brand.
The design must have a deeper meaning, visible through shapes, lines, colors.
It must be applicable in different media, both print and digital.
The design should be timeless, with the aim to avoid the need for a redesign in the upcoming years.
It should evoke friendly associations and a sense of warmth and community.

SOLUTION

1. Three different logos were created in accordance with the names.

2. Recognizability and connection were achieved through the use of the initial letter “W” from “Webovanje”, stylized in the form of a logomark.

3. Meaningfulness was inspired by the word “explore” from the slogan “explore – learn – create”. It is expressed through a vibrant color that is associated with people inclined to explore.

5. To ensure visual consistency, a minimalist aesthetic with retro style elements was chosen.

6. The logomark in the form of the letter “W” was designed with rounded edges and a width that exceeds its height, suggesting the friendly nature of the brand and generosity.

Warmth and community are emphasized by the choice of colors, which was carefully selected during the process. Animated logos further enhance emotions through subtle movement of elements.

Interesting Fact

The logomark has a hidden design element: although it appears to be in another dimension, achieved with solid colors, it is actually created through the extension of lines that diagonally extend at a 45-degree angle, creating the impression of a thickened letter “W”.

TYPOGRAPHY

The choice of typography was driven by the desire to highlight a modern and youthful style, while also retaining an element of seriousness. The font needed to reflect creativity and artistic expression. It was also important for the font to support Cyrillic script. An additional, but not mandatory, requirement was that the font be suitable for web use.

The search began on Google Fonts, where I was fortunate to find a font that met all the specified criteria.

Font Syne “Syne” is a geometric sans-serif font that stands out for its unusual combinations of weights and styles. Designed for the Art Center “Synesthésie” in France, this font is characterized by its adaptability – it expands as it becomes bolder. Syne is free and open-source, making it ideal for a wide range of creative and
practical applications in design.

Šafran
Orange

Hex: FF6200
CMYK: 0, 76, 100, 0
RGB: 255, 98, 0

Deep
Blue

Hex: 1A45DF
CMYK: 86, 74, 0, 0
RGB: 26, 69, 223

Pale
Sky

Hex: DFE4EF
CMYK: 11, 7, 2, 0
RGB: 223, 228, 239

Deep
Mahogany

Hex: 0F0702
CMYK: 69, 67, 68, 85
RGB: 15, 7, 2

COLORS

“Explore – Learn – Create” were the key words that served as the basis for exploring emotions related to these actions.

The sense of adventure and excitement is present throughout the exploration. Creativity and enthusiasm are tied to learning. Innovation and creating something new are part of the creation process.

This was the starting point for selecting colors that match the emotions the brand wants to evoke.

Each color was given its own name to make its use more understandable.

Saffron Orange (#FF6200): Explore: This vibrant, energetic shade of orange symbolizes adventure and excitement associated with exploration. Orange color is often associated with enthusiasm and bravery, reflecting the spirit of exploration.

Deep Blue (#1A45DF): Learn: Dark blue can reflect depth and seriousness, in line with the learning process. This color is often tied to stability, reliability, and wisdom, which are key elements in acquiring knowledge.

Pale Sky (#DFE4EF): Create: This light blue, almost sky-like shade, symbolizes the endless possibilities and openness, essential for innovation and creating something new. This color is often associated with inspiration and calmness, creating an ideal environment for the creative process.

Deep Mahogany (#0F0702): In the context of exploration, learning, and creating, this color can represent thoroughness and solidity, providing stability and focus in the process.

When selecting colors, special attention was paid to their contrasting harmony, which had to meet standard norms. For this reason, combining colors such as Saffron Orange with Deep Mahogany, and Deep Blue with Pale Sky was approved. In certain situations, combining Saffron Orange and Deep Blue is also acceptable, especially in the context of background elements and similar applications.

PETTERN

The brand’s visual communication does not end with the choice of colors and designing a logo. Just as a picture gains its full expression and meaning when properly framed, so does a brand acquire its complete visual identity through details like patterns.

The goal was to enrich the brand’s visual elements with emotions and to clearly communicate positive intentions.

Accordingly, I approached the creation of patterns, guided by the chosen style. I found inspiration in different lines and shapes derived from the logo, using them as a basis for creating new forms. From these newly created shapes, unique patterns emerged, which became key to the brand’s visual identity.

WEBSITE UX/UI

The user interface of the website plays a crucial role in brand development. The approach to creating the user experience should be closely linked to understanding the needs and desires of the target group.

The main goal of the homepage of webovanje.com is to respond to user needs, which were previously identified as the desire to explore, learn, and create.

The visual design of the site uses two dominant colors – Saffron Orange and Deep Blue – in combination with text and other elements in colors Pale Sky and Deep Mahogany. The design also includes rounded edges that follow the visual concept of the brand.

For the site creation, I used the WordPress CMS system with the free Astra theme, which offers high performance, and Elementor Pro as a page-building tool, allowing for easy editing of elements and effective animations, making the site more dynamic and attractive.

After a brief introduction to the brand, the three main categories – explore, learn, and create – are clearly highlighted in the visible part of the page (“above the fold”) on all devices upon loading.

The goal is to provide users with options, but also to limit their need for excessive site browsing. Any visitor who wants to explore can find content specifically created for that purpose. The same logic was applied to the other two categories, in line with the brand’s core purpose of assisting users.

BRAND STANDARDS MANUAL

This document is not just a summary of previous work but a thoroughly structured guide that brings together key elements of the brand’s identity, ensuring its consistency and recognizability at all levels of communication.