website
Branding
Style guide
The style guide helps provide a quick snap shot to organize the branding for use of fonts, typography sizes,
colors, HEX codes and elements. Following the style guide keeps the design consistent.
Color palette
This website branding uses a split-complimentary purple, orange and green color scheme. The colors match the existing purple in the company’s logo. The purple and orange reflects the colors in a sunset representing creativity, imagination, excitement and stimulation. The green accent color creates a grounding effect to represent education which this non-for-profit focuses on.
Primary color
RGB: 114, 19, 156
CMYK: 70%, 100%, 0%, 0%
HEX: #72139C
Font Color
RGB: 63, 65, 68
CMYK: 70%, 62%, 57%, 45%
HEX: #3F4144
Accent Color
RGB: 205, 66, 62
CMYK: 14%, 88%, 81%, 3%
HEX: #CD423E
Accent Color
RGB: 63, 65, 68
CMYK: 70%, 62%, 57%, 45%
HEX: #A4CD3B
typography
The typography of this brand uses a lot of italic and caps lock fonts to represent movement and energy in order to motivate the viewer to take action. The main font used is Roboto. The Roboto is a san-serif font, is easily legible, cross-monitor friendly as well as free for commercial use. When selecting fonts, these factors should be put into consideration.
heading 1
To be placed on top of the Hero image.
Font Family: Roboto
Size: 73px
Weight: 300
Style: Uppercase, Italic, Drop-Shadow
This is your call to action
Heading 2
Font Family: Roboto
Size: 46px
Weight: 800
Style: Uppercase, Italic
heading 2
Heading 3
Font Family: Roboto
Size: 29px
Weight: 900
Style: Uppercase, Italic
Heading 3
Paragraph
Font Family: Roboto
Size: 18px
Weight: 300
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 ull. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ull. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ul.
Photography
The photography include pops of the green and orange to bring out the accent colors and further enhance the split-complimentary color effect in this branding. At Supernova Sites, we have access to paid for and free stock photography plans. Most of the imagery here is used from www.iwaria.com, free African photography. We can also work with you to find the right photographer if you choose to do in-house photography.
ICONS
Icons are outlines in hexagonal shapes.
Elements
This brand uses diagonal-cut buttons, polygon icon backgrounds, water color splashes and torn cloth as the background images. The elements help promote an edgy, tribal and energetic brand.
WEBPAGE DESIGNS
To build this website, we started out with the Moodboard which is a collection of inspirations colors, images and fonts. From there, we created a Style Guide to organize our fonts, elements and colors. Then the Wireframes were developed. We built the header/banner of the home page to mimic a Z-pattern using UX Design to bring the viewers attention to the Donate Now button. Next, we designed the pages using Adobe Illustrator. Finally, we built it on WordPress using Elementor and adding CSS code.
Interested in this design?
Get a custom designed website.