Coordinate branding, fonts and colour for your WordPress theme. Here’s how we do it…
A step-by-step approach to planning the aesthetics of your WordPress theme.
Branding, fonts and colour add dimension to your flat outline sketches.
Getting them to complement one another will only enhance the integrity of the website in the eyes of your users. Better user experience = better online business!
The key decorative elements of your WordPress theme will be:
- customised branding touches
- colours which are in keeping with your brand
- consistent use of fonts which blend with the whole mix
Once you have these controls to hand, then they suffice a palette for pulling together the picture and painting on the custom finish to your web presentation.
The following points are helpers in the pursuit of suitably aligning these design factors for best results.
Producing custom brand graphics for WordPress theme
A WordPress theme which allows for easy positioning of custom brand graphics gives great advantage for content publishers building reputation online:
The logo design is the marque by which a business or organisation will be known.
It is therefore the primary vehicle and visual cue for conveying the value proposition of being offered.
Companies build trust through backing up what they say with their service/product delivery. Where this is done successfully, the value in the eyes of it’s customers is attributed to the brand.
It is important when designing WordPress themes to consider consistent positioning and display of the logo.
There are best practices which direct in achieving this – like left-to-right & top-to-bottom script for languages like English.
But essentially researching examples online for ideas is a good way to broaden your development horizons.
Custom brand graphics
In conjunction with the custom logo, there are custom graphics which can be produced and laid throughout the website for reinforcing the integrity of the presentation.
These graphics are valuable touch-points through which to serve reminders to the users of the ownership of the material they are receiving.
Having pre-planned positioning of such brand graphics will assist the eventual website owner in building online brand value with user groups.
Where do we go for our logo & graphic production?
Would you believe that for our small to medium-sized business clients we’ve never had to go further than FREE (or technically inclusive) software packages such as: GNU Image Manipulation Program and Microsoft Powerpoint.
Using brand consistent colour schemes for WordPress theme development
Setting the colour schemes for blocks and elementary areas within your WordPress web theme is a key deliverable.
You will want to make sure that whilst this function is configurable, it is also consistent.
Within the CSS file software instructions you will layout your colour preferences – more on how this is technically achieved in the following part of this series.
Our approach for setting colour in WordPress themes is to manually program the Hexadecimal colour code into the CSS for the theme, or alternatively to use a custom CSS library with colour presets.
Our custom CSS library of choice of late has been W3.CSS…but, again, more on this later.
Note: when building web graphics in Powerpoint, we must convert any untranslated hexadecimal colour numbers from CSS into the corresponding Red, Green Blue colour values for an exact match.
Complementary colour schemes or palettes allow for added dimension and gradient to produce varying levels of content emphasis.
If used well, colour palettes can assist in holding the attention of content users for longer periods. Again, research this area online well for successful working examples of colour use in WordPress theme development.
Integrating custom fonts for WordPress theme development
Fonts can assist greatly in reducing the friction of content assimilation or absorption by users.
Serifs vs. sans serifs is a major industry talking point, with many designers purporting best practices surrounding this issue relating to effective use of fonts for web copy.
Again, more detail on this later in the technical centred posts – but know there are typically 2 methods of affecting font changes in wordpress: pre-existing fonts within operating system (a cascading selection process), or importing an external font family using @font-face in your CSS file (more on this later in the series).
Are you looking for further pointers on custom styling elements for your WordPress theme development?
Feel free to get in touch directly, or join the conversation below.