Import Template: Page - Branding Guideline. To be shown to client then deleted.
Site Logo
The Site Logo is the “brand” of the website that captures your business in a single graphic/visual. The Primary Logo always take preference. Where the Primary Logo can’t be used, the Secondary Logo will take its place.
Primary Site Logo
Secondary Site Logo
Site Icon
The Site Icon is the “bookmark” for your website as it appears in the browser tab.
Site Icon
Colour Palette
The Primary Colour is the main “look and feel” of your website and your business. The Secondary Colour(s) act to complement the Primary Colour.
It is recommended that the Primary Colour and Secondary Colour(s) complement the Site Logo and Icons for better design consistency.
Primary Colour
Primary
"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)
Secondary Colour(s)
Secondary
"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)
Tertiary
"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)
Background
"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)
Accent
"[Colloquial Name]"
HEX: #______
RGB: (___, ___, ___)
Typography
Font Size generally conveys relative importance. The bigger the size of the font, the bigger its relative importance.
Font Colour generally highlights the purpose of the text. Primary and Secondary colours are used for Headings and supporting text. Text colour is used for body text, and Accent colour is used for Call-To-Action elements such as buttons.Â
Font Styling generally follows the corresponding match in Font Colours.
Typography
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
Heading p
This is a Link. This is just normal Body Text.
This is another Link with underline.
This is a Link without link text colour.
This is a Link without link text colour but with underline.
Add Your Heading Text Here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Here we have some text with a few tooltips.
hello, link is underline
hello, link is Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo. hello, this is more text.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Font Colours
Primary
Secondary
Text
Accent
Secondary Text on Primary
Secondary Text on Secondary
Secondary Text on Tertiary
Secondary Text on Quaternary
Secondary Text on Accent
Font Styling
Primary
Secondary
Text
Accent
Buttons
In virtually every case, buttons are the element with which your website visitors interact with in order for them to take the desired Call-To-Action.Â
The Primary Call-To-Action is the main “money-making” action you want your visitors to take. The Secondary Call-To-Action is (generally) anything that guides/encourages the visitor towards taking the aforementioned main action.
Primary Call-To-Action
Secondary Call-To-Action
Visual Elements
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Graphics
Images
Illustrations
HTML Containers
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
div
Heading div
span
Heading span
p
Heading p
Heading p
Text p
Text p
Putting It Together
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
H1 Heading
H2 Heading
H3 Heading
H4 Heading
H5 Heading
H6 Heading
This is an example page. It’s different from a blog post because it will stay in one place and will show up in your site navigation (in most themes). Most people start with an About page that introduces them to potential site visitors. It might say something like this:
Hi there! I’m a bike messenger by day, aspiring actor by night, and this is my website. I live in Los Angeles, have a great dog named Jack, and I like piña coladas. (And gettin’ caught in the rain.)
…or something like this:
The XYZ Doohickey Company was founded in 1971, and has been providing quality doohickeys to the public ever since. Located in Gotham City, XYZ employs over 2,000 people and does all kinds of awesome things for the Gotham community.
As a new WordPress user, you should go to your dashboard to delete this page and create new pages for your content. Have fun!
Approval Form
Signing feature for approval instead?
Frequently Asked Questions
What is a Branding Guideline?
A Branding Guideline (link to hiviz) is …
Where are the effects and animations?
The Branding Guideline is intended to give you an overall idea of the fundamental design elements of your website, so you can get the “look and feel” of your website early on. It is not intended to showcase every design element.
Effects and animations, where needed, will be implemented during the Effects and Animations Review (link to hiviz) phase of the development.
How do I request changes?
In the adjacent form, please select “Change Request” and fill in the fields where necessary. Then, submit the form.
How many times can I request a change?
You can put in as many change requests as you need during the 7-day Branding Guideline Review (link to my Our Process on hiviz) period.
How do I approve the Branding Guideline?
In the adjacent form, please select “Approval” and submit the form. No need to fill in any other fields.
After I approve this, can I still make changes to the branding guideline?
You will have the opportunity to make small amendments (such as font styling) during the Final Overview Review (link to my Our Process on hiviz), but not during the development of the website (which begins once the Branding Guideline (link to my Our Process on hiviz) has been approved by you).
It won’t be possible to make major changes (such as changing the Site Logo or Site Icon) after your approval.
I have further questions. How do I get in touch?
Contact Us (link to Contact Us on hiviz)