There are 2 main parts to the branding on the New CMS. The first deals with branding the New CMS itself and the second deals with how a user adds their own brand. Let's look at the new CMS brand first.
CMS brand
The CMS itself needs a name, logo, colours, etc so it can be recognised. Since we at Huyton Web Services create brands and we are building the CMS, we didn't have to go far for the brand.
You may think the best place to start would be the name, but the best way is actually words that make the are linked to what we are looking for. In our case we went with:
- Friendly
- Secure
- Local
- Loyal
Notice we did not choose any technical words? The closest is 'secure', that is because a Content Management System is not about the technical, it is about removing the technical so the user can simply add content. If we wanted technical, we could just give access to the database tables like a spreadsheet (sometimes that is all the user wants, so we do have an import/export for that).
The Name
Looking at the words, we automatically went the "Dogs" as they are loyal and friendly, while offering security. To emphasise more on the security we wanted the dogs looking in both directions, so we had "Two Dogs", but that could be a vet or pet food so we added "CMS" and had the name:
Two Dogs CMS
Before we could take the name 100%, we needed the domain. Since this is an online CMS, without the domain, the name was no good. The moment we agreed on the name, we tried to purchase the domain. If we had searched and not purchased, we would have lost the domain to a 3rd party that would charge a "ransom" on the domain (we see this often). The domain https://twodogscms.com/ was available, so we purchased it there and then.
Colours
We wanted to have colours that are editorial too, so we went for Rich Burgundy & Burnished Copper with the core message protecting "precious content," this palette treats content like a valuable archive or high-end publishing house. The colours we went with are:
Logo
We tried a few different logos, but the two dogs facing out worked well. We also wanted to convey editorial (this would be the 5th word) while keeping it friendly. To do this we found a mix of 2 font types, serif and sans-serif worked in this case (usually we wouldn't do this).
After much trial and error we landed on:
Fonts
For the fonts, we wanted to use fonts we could use in all spaces without paying for extremely expensive and prohibitive licences, so we used the open-sauce Google Fonts. We started with a main body font, which must be friendly and easy to read. We went for Poppins for this. We also wanted to get a little "editorial" for the secondary font, to be used for titles and maybe even the first letter on pages. For that we went for Libre Bodoni.
CMS Brand Summary
We had all the parts to our new brand. We tested this and created a few colours to the logos and even added a few extra logo parts. Once this was all agreed, we created a branding guidelines doc:
User Brand
We had our brand for Two Dogs CMS, now we needed to add the ability for the user to add their brand to the system and the system to use that brand.
Since file storage was in, we could give the ability to upload the logo, small logo and favicon. The system supports dark and light modes, so we had to give the ability for the user to upload all the files for both modes which is 5 files. We also know the brand would not change for the different themes, so could not be added to the theme. The brand would also need colours and fonts, so there is a lot to the brand.
Brand or Settings
We had 2 options here, add brand to the settings and make the settings much larger or create a new section for the brand. We created a new group to the menu called 'Look & Feel' and added Theme and Brand to this. The menu was then correct and we had pages with titles.
We now had to fill in our new Brand section.
Colours & Name
We started with the site/app name as that is linked to the brand more than the settings or theme. Next we have the colours:
- Primary
- Background
- Accent
- Text
We added these for Dark and Light modes.
Fonts
Next we added fonts. We added 8 basic fonts to choose from for:
- Main - Used in the body, menus and the default
- Logo - If no logo is uploaded, this font can be used with the name to create a logo
- Subheading - Used for any titles on page
- First letter - This will change the first letter on any content page to this font, make it double size and align top
We gave the ability to upload fonts as some users will want to upload their own font. These are then added to the 8 default to be used, but in their own group.
Lastly, we give the ability to search for a font, but if it is not found we have a click to install from Google Fonts.
Files
The last section is the files section, this is where we allow a user to upload:
- Logo - Used on the dashboard, the top left of the admin and the main logo on the presentation side.
- Small logo - Will override the logo on the top left if added.
- Favicon - Used for the favicon for the Admin and Presentation sides.
We added tabs for Light and Dark modes for the two logos. This rounded off the Brand section.
Adding the brand
We wanted the user to be able to see the changes in real time, so if they add a logo, it should appear in place. However, we also wanted the user to be able to backout. We could have added 'versions' and 'rollback', but that means waiting for the save. We decided to use real-time update so if the user changes the background colour, they will see the change in real time, same for all colours, fonts and logos, but if they want the changes to 'stick' they need to save.
And that was it for the branding.
If you'd like us to have a look at your branding and create branding guidelines, please let us know on the contact page. If you're intested in the CMS or having any webapps created for you, please let us know.