Branding
Branding is a key element of setting up an identity. Whatever device is used, and in what ever responsive state an identity or presence should be easily recognisable.
A brand is an overall experience of a consumer that distinguishes an organization, product, or service from its rivals in the eyes of the consumer. Brands are used in business, marketing, and advertising. Name brands are sometimes distinguished from generic or store brands.
Branding gets its name from the practice of branding cattle to identify the owner. Today it is a set of marketing and communication methods that help to distinguish a company or products from competitors, aiming to create a lasting impression in the minds of customers. The key components that form a brand's toolbox include a brand's identity, brand communication (such as by logos and trademarks), brand awareness, brand loyalty, and various branding (brand management) strategies. Many companies believe that there is often little to differentiate between several types of products in the 21st century, and therefore branding is one of a few remaining forms of product differentiation.
The toolkit used (but not limited to) to define a brand includes, logos, iconography and fonts, colours, and even imagery and content tone and style. This page outlines the branding guidelines used to create the Surfer Dude Studios brand.
Logo
Surfer Dude Studios logo has it's origins, like all good branding does, in a simple, easily repeatable, logo (think branding cattle). Initially starting as a joke, I would sometimes sign cards and presents with a little surfing stick man logo rather than using my name. This quickly gained noteriety, and I began to receive replies that used the logo rather than my name, and even a gift of a hand painted mug that used the surfer dude logo on a mix of blue and off white.
You can read more about the development of the Surfer Dude Studios logo here.
Font
The quick brown fox jumps over the lazy dog
Above is a pangram. This is a sentence that uses every letter of the alphabet. In presenting fonts they are used to demonstrate what each character looks like in usually short witty sentences.
In the example above we can demonstrate the font family used by Surfer Dude Studios - "Century Gothic", "Muli", AppleGothic, "Helvetica Neue", Helvetica, Arial, and sans-serif. Good branding will have a family of fonts that allow the website to "drop down" through the fonts to choose one it can use. While most websites can now package up a font for use with the website, it remains a good idea to have commonly available options, and to always finish with an appropriate basic, serif or sans-serif font.
Font is also important with regards to branded iconography. Surfer Dude Studios uses Font Awesome iconography. This is the icons used across the website. Like Bootstrap this is an easy to default to option, and many organisations will opt instead to use a custom library of font icons instead. Much like everything else these will have strict branding guidelines also.
Colour
Bootstrap 4 ships with a palatte of pre-defined colours. Since color is vital to any brand identity, it is very unusual to use these pre-selected colours, and more often than not these will be simply fallback colours.
Most brands will choose a single colour to be the main identifying colour of their brand. Think the red of Ferrari, the green of Jaguar, the black of Ford. Surfer Dude Studios uses Deep Koamaru, a deep ocean blue as its primary brand colour. It is best to choose one, and stick with only it.
#333366
Deep Koamaru
Greys
The grey colurs are very important. These combined with the primary colour will make up the majority of a brands colour palette. Four is the usual number (very dark grey, mid grey, light grey and white). Some websites omit the mid-grey, or light grey as part of their defined palette but three or four will do the job, it is important to stick to the defined shades of grey to maintain a brand, so if you use an off-white colour, make sure you use it. And it's also a good idea to not use pure black, if some one wishes to print a page - which we shouldn't as we should be trying not to use paper or plastic these days - pure black will use more ink than a very dark grey.
You can see the Surfer Dude Studios palette of greys below.
#333333
Night rider
#666666
Dim grey
#cccccc
Very Light Grey
#ffffff
White
Auxilary colours
It is inevitable that other colurs are required in order for a website (or any other presentational medium) to achieve a comfortable aesthetic. These must be chosen carefully and again must be clearly defined. Most brands will choose somewhere between six to ten. Where this matters with regards to web development though, is to not use colour to provide meaning - colour must only be used for styling - this would break accesibility guidelines. Even so, it is usefull to take into account colour blind users when building a brand identity.
#e6ac00
Orange
#0054b3
Cobalt
#8080ff
Light slate blue
#847b16
Trendy green
#40e0d0
Turquoise
#d9edf7
Link water
#ed0027
Torch red
Some useful resources relating to colour selection can be found in the links below;