Creating a Website Brandkit
The Problem
When designing & building a website, quite often there’s no supplied Brandkit or styleguide, there is just the clients logo. This is especially true when working with a startup company. Much of the task of developing the rest of the brand is left to you, the Web Designer.
This can lead to bland looking websites or a ‘brand’ that may not be inline with the clients vision.
The Solution
To ensure your understanding of the brand is aligned to the clients vision. Develop the Brand Kit as a separate project prior to launching into the design of the website,
What UI elements do you need for a website brandkit?
The below is a list of UI (user interface) elements required for a website Brandkit.
Color Palette
- Primary brand
- Secondary brand
- Tertiary brand
- Neutral
- Supporting colors
More info for creating color palettes
Heading & Subheadings
- Font size
- Font family
- Color combinations
Body Copy
- Font size
- Font family
- Color combinations
- Links within body copy
- Lists within body copy
Images Treatments
- Tints and tones
- Texture overlays
- image style
Textures and Graphical Elements
- Shapes
- Linework
- Patterns
Iconography
- Slideshow arrows and pages
- Phone icons
- Email icons
- List icons
Buttons
- Font size
- Font family
- Color combinations
- Primary, secondary and tertiary
You might say that this is apart of the job as the Web Designer to create all this stuff as part of the website. Which is fine as long it’s factored into the cost. Keep in mind that a lot of the UI elements and graphics created as part of the website can be reused for other digital assets such as YouTube video covers, Linkedin banners & banner ads. And for continuity, any print assets will also take into account the Brandkit established by the Web Designer.