Skip to main content

Brand & Design: The Basics

Alwin Thomas
Updated

A charity's visual brand is more than just colours, fonts, and logos. It’s a system designed to build trust, recognition, and connectedness. So as you begin, let’s show you how to connect your campaign with your visual brand. 

Skip Ahead To

Visual Brand: Where to start

Many charities have a visual brand – a visual guide/system that enables them to be recognised and trusted. This is usually found in what is called a style guide, a document that defines colours, fonts, logos, and images. It provides rules or guidelines to follow, resulting in brand consistency. The style guide therefore becomes the foundation for you to work from.  
 
💡  Many companies make their brand style guides accessible to the public. Here are a few to checkout… Australian Museum, Zendesk, Mailchimp
 
Many campaigns will use unique elements alongside their visual brand, whether it be certain images, colours, or fonts that work with the grain of their style guide. This gives campaigns some flexibility, whilst still keeping it recognisable for your audience.
 
Here is a checklist/guide for design assets you can prepare before jumping into settings, making your campaign building that much easier. 
 
Design Checklist
Asset Requirements Notes
Logo Minimum 500 by 500px, ideally transparent PNG format, or SVG. Have plain white version, as well as full colour version if applicable. Transparent logos work cleanly with background images and colours
Colours HEX values for Primary Colour and Secondary Colour From the Prim and Sec colours, Raisely generates shades to create a wider palette to use
Fonts Font-family name, font weight Use Google Fonts or Adobe Fonts to find font-family and other details
Images Size images at 1920 x 1280px or larger Select a main image and 4-5 complementary images to use within site.
Social Media Icons Min. icon size at 128 x 128px, ideally transparent PNG or SVG. Save plain white version and inverse version. Find free editable icons at Icon Finder
Icons Size icons at 512 x 512px, ideally transparent PNG or SVG. Save plain white version, primary colour version, secondary colour version.  

Setting up your visual brand - logo, colours, fonts

Setting up your visual brand is simple in Raisely. From your sidebar, simply select Design to view your settings:

LOGO

1

From the sidebar select Design > Logo. 

2

Remove the default logo and simply drag or search to upload your logo. By default, your logo will appear on the header and footer of your site.

COLOURS

1

From the sidebar select Design > Brand/Secondary Colour. 

2

Use the colour picker or type in the hex colour code to set your colours. From this selection, Raisely then creates a wider (tonal) colour palette you can use throughout your pages.

FONTS

1
From the sidebar select Design > Fonts. 
2
You have six Heading styles you can create, Paragraph style used for normal/body copy, and Link styles. Simply open each to edit and save.

Raisely supports the use of Google Fonts, containing a vast collection of free web fonts. Simply enter the Font Family you wish to use for it to appear in the search. We suggest starting with Lato if you are unsure. To integrate Adobe Fonts with Raisely, follow this guide.

You can adjust the size, line-height, letter-spacing, margins, colour, and weight for each if required, otherwise leave the defaults. Don’t forget to Save Changes each time you make an edit.

If you are looking to customise your logo, colours, or fonts further, check out these helpful guides: Understanding Logos, Understanding Colours, Understanding Fonts 

Using Images & your Media Library

Images are a significant part of your viewers experience. Good quality images invoke trust whilst poor quality images can undo much of your hard work. Getting these right doesn’t need to be difficult though. Here’s where you can start:
  • Find a primary campaign image - you can use this as your hero image on the Home page
  • Create a collection of 4-5 complementary images - you don’t need many but these will come in handy as you build your pages. Check out Unsplash or Burst for free stock imagery.
  • Size them up and compress them before adding to your library - this helps have them for different use cases and also load speed when your site goes live. Check out Adobe Spark Resizer & Squoosh to help.

For a full list of our recommended free tools and asset libraries, head to our Cheat Sheet: Tools, Apps, and More.

Media Library

Images and assets are stored and found in your Media Library. You can search for and filter your assets in the library also. To access the Media Library and upload new assets simply:

1

From your sidebar, go to Design > Media Library

2

Select Upload FIle in the top-right corner

Going Custom - Exploring CSS

You can do just about anything in Raisely, as we’ve made sure our platform provides you easy access to custom development. Within your Design options, you can access your CSS Stylesheet and even add new ones. If you are working with a developer or handy with writing code, you can make edits here to do just about anything you want. 
For more information regarding custom CSS, journey into our Advanced Development Guides.  

Where to next

Now you have a handle on your Brand Design, it’s time to explore the page editor and get you building your Campaign. Head to our next Guide – Page Builder: The Basics

Cannot find the support guide you are after? Head on over to our YouTube channel 📺 for more creative content to help you go further. You can even leave us comments, suggesting new content ideas 🤯

Comments

0 comments

Please sign in to leave a comment.

Powered by Zendesk