If there is one thing that the greatest brands have in common, it is the power of their visual identity. A beautiful visual mechanism that automatically imprints itself in the brains of both Internet users and consumers. Nevertheless, it must be said that behind this beautiful image, most of the time, there is an essential document, and generally, specialists in the field are devoted to it. It is the graphic charter of the website.
In this article, we will see together how to make a graphic charter. That's not all, there are many tips and practical advice to motivate you to make yours. Even if you start from scratch, it is possible to give envy to the biggest of the sector.
Understand everything about the concept of a website's graphic charter
The graphic charter is a working document with several pages. It contains essential elements of your visual identity such as the logo, typography, colors or visuals. The graphic charter also includes the rules of use of these different elements, both on the web and on paper.
Its primary role is to ensure maximum consistency in your visual communication, without forgetting to reinforce your brand image. It is also important to note that the graphic charter is often confused with many distinct elements, which are however complementary.
What is the editorial charter?
The editorial charter is a document that contains the principles of content production for a company. It includes the editorial line, the style rules, the target audience, the rubric, the production process and the SEO strategy. The editorial charter is mainly dedicated to web editors.
Understand what graphic identity is
Still called visual identity, the graphic identity gathers a set of ordered visual parameters. Their role is to identify a single entity among the many media of communication that it emits.
To synthesize, we can say that the elements of the visual identity such as colors, logo or typography are shown and implemented in a global process of use of the graphic charter.
Identify the concept of brand image
Brand image represents the very identity of a brand. In other words, the way it is appreciated by a consumer; this, in particular among the elements that compose it such as the logo, the textual contents or the colors.
What can motivate the creation of a graphic charter for a WordPress site?
The need to create a graphic charter is mainly explained by a question of consistency. Indeed, the graphic charter allows you to harmonize and specialize the visual identity of your website, as well as all your different communication supports.
On closer inspection, this is a logical and important process. When you use a well-designed logo on your homepage, it is the same one you will use on your Contact page.
By keeping consistency in mind as a priority, you make it easier for all visitors to your site to discern your universe. Better yet, you help them identify you easily by following a proven guideline. On the other hand, when you start changing colors and logos very often on your WordPress site, visitors can lose track.
Let's take a musical example to caricature the thing. It's as if Gims appeared at a concert with his glasses, then with an unusual mask the next time, or with his face half uncovered another time. It's a good way to lose track of things, but we all know that Gims never goes out without his sunglasses that carefully hide his face. This exit code represents in fact his graphic charter to him. This is how it should be for your site too. You must offer something neat and consistent. As a result, your WordPress site's graphic design must be eye-catching.
The various steps to design a graphic charter
Let's see now step by step, how to create a graphic charter for your WordPress site. This will increase your brand image as well as your aura and professionalism. This, no matter the size of your company or business.
Defining your brand identity
Well before jumping into the deep end, you must do some preliminary work. It is to devote a part of your time to think about the message you want to convey through your graphic design.
This is a step that will help you refine your project and better understand the following steps. Thus, you must take stock of several elements in order to define them in depth. These are the objectives you have set for yourself through the creation of a graphic charter for your WordPress website.
Secondly, it will be about values, in other words, what guides the activity and growth of your company and therefore your WordPress site. As possible orientations, it can be performance, success, innovation or know-how.
You must also define your personality. At this level, it will be a matter of saying how and why you are recognized. You can list a few adjectives that are as close as possible to your definition. Another thing you need to integrate is your mission.
Apart from these different elements, you must also, in a second step, think about your target audience. This is your audience or, in marketing language, persona, which is a fictitious outline of your ideal customer.
It is not easy to reflect on oneself and one's creations. Indeed, it is not always easy to criticize one's own work or to have the distance required to master all the workings of one's activity. A brainstorming session is never superfluous and can have its impact to help you reach many goals.
Select the typography of your graphic charter
When we talk about typography, we are talking about all the characters used on your WordPress website for your texts. Also, by extension, we often speak of fonts or writing fonts.
In most cases, it is recommended that you use no more than two to three fonts on your WordPress website. For example, you may want to use one for your headlines and another for your body text to maintain consistency. Some font classes are also known to be readable on the web.
So you can choose them over others. We are talking about sans serif fonts, as opposed to serif fonts. It is therefore a parameter that must be taken into account during the development of the graphic design of your WordPress website.
Font size as an important element
Beyond this element, the size of your font also plays an important role. On screen, it is recommended to use at least 14 pixels. A sans serif font, no matter how beautiful it may look to the eye, won't really help if it is displayed in lower case.
The right font is the one that fits your brand image and your graphic universe. Each font has its own personality that may not suit your needs. In order to find the font you need, several sites are available.
You can search on Google Fonts, which offers over 1,000 fonts for free. For its part, MyFonts offers more than 130,000 fonts, which are either free or paid. As for DaFont, it offers hundreds of creative fonts to those who need them.
However, these are only fonts for personal use. Also you have via Font Squirrel, hundreds of royalty free fonts, even for commercial use. As soon as you proceed to a first cleaning it is essential to select fonts that are complementary. This is to avoid destroying everything visually and to keep maximum readability.
In order to match your fonts properly, there are some very useful resources. They are FontPair, Fontjoy, Typewolf, Typespiration and Google Fonts.
The elements present in the typography in your graphic charter
When we talk about the graphic design of your WordPress website, we often present many disinences of your typography like Regular, Bold, Italic as well as their use cases. You should also present the typography of the logo if it has it and the one available on your website. Also, you should show the alignment and spacing of the typography.
Adding typography to WordPress
It is also recommended to add your fonts to your WordPress site. This is not an easy thing to do. In practice, you can have a theme that fits perfectly with the fonts. This will make your life much easier.
By adopting the Astra theme as an example, you have all the fonts from the Google Fonts library. In order to activate them, each theme requires its own settings. You can do this either through the Customization Tool or through a specially designed settings interface.
When the choice is small and you are not satisfied, you can integrate these fonts into the code of your WordPress site. When you are just starting out, it is recommended to use an extension. This is a simpler and less risky option, and may work well for you. When adding fonts to your WordPress site, it is recommended that you limit yourself to no more than two. Using them triggers additional requests that can slow down the loading time of your pages. For a beginner, it is not easy to combine more than two fonts.
The step of creating the logo for the graphic charter of your WordPress website
The logo graphically represents the brand of a company. It is of utmost importance since it is essentially through the logo that the brand is first identified. In addition to the website, keep in mind that the logo can be used on all your communication elements.
Flyers, commercial brochures or business cards to name a few. It is therefore necessary to pay the greatest attention. Some qualities stand out when it comes to a successful logo. Your successful logo must be easily recognizable and memorable.
Thus, opt for a simple, sober and concise logo, able to adapt to any type of support, both on paper and on website. Also the logo must be readable. Without expertise in web design, designing your logo will be a difficult task.
However, some online sites offer their services for free. This is the case with Logogenie, Canva, Logaster or Logomaker. When you want a professional and unique result, use the services of a professional.
The latter may be a specialist in graphic design and/or web design. You will probably find one through an agency or by contacting a freelancer. When your logo is created, it is essential to integrate it into your graphic charter.
In order to add your integrated logo to your graphic design, you will need to upload it to your WordPress site. The customization tool can be used by doing "appearance > customize > site identity.
The stage of the definition of the colors
The stage of the logo buckled, cap on another and not the least, the colors. The choice should not be made on a whim or just because you particularly like the color. Stay consistent in your choice because color means meaning.
The colors must be chosen to best convey your message. Your choice of color must be done with class and seriousness without relying on such or such a pre-established code. For the choice of your colors, choose at most 3 or 4.
The primary one to be seen in your logo, two secondary ones and possibly a complementary color. In order to blend the various colors together, you can use Color Hunt, Paletton, Adobe Color Wheel or Material Palette.
The stage of creating your visuals
It's important to present your visual direction. This allows you to illustrate both the ideas and concepts you want to convey. You can therefore choose examples of images that go with your expectations.
The process is the same for the icons, which must be perfectly embedded in the world of colors that will be yours. As for the photos, it is best to use your own pictures.
The situation and application stage
In order to have a more global idea, it is possible to propose variations of the components of your charter on many supports. These include office documents, business cards, flyers, vertical and horizontal posters, PowerPoint presentations, flyers or information panels.
Press kits, press releases, T-shirts, caps and mugs are also elements that can give you a clear idea. Since you have all the information and elements required on the content side, you will then have to format all this information.
As a software or tool, you can use InDesign and Illustrator, paid essentials of the Adobe suite. You can also adopt Frontify or go for free alternatives. Scribus, Lucidpress and Canva can help you with this. As for the design and layout of your graphic charter, opt for pro sites.
This is the case of Behance and Dribble, which have very successful examples. Concerning the length, nothing is fixed for a graphic charter. Often in PDF format, it can contain between ten and one hundred pages, depending on your needs and what you want to include. Keep in mind that the conciseness and simplicity of your work will give a better result and act accordingly.
How to make a graphic charter : in short
At the end of the day, you now know how to create a graphic charter for a WordPress site. You know the different essential components such as typography, logo and colors. So you can create a trustworthy and high quality graphic design, even if you are a novice in the world of graphic and web design. However, it will take you some time. When you do not have enough time and you aspire to a brilliant work in all respects, you can opt for the services of a specialist graphic or web designer. Available in agency or freelance, the cost he will charge you will probably depend on the work you have asked him.
