Branding Guidelines
The main message is the first impression of the site. It should include high quality imagery, clear messaging and call to action, and present the company as an industry expert/trusted professional.
Brand Guideliness
https://www.treehouseinternetgroup.com/branding.html
Main Message and Header Tips
Overview
Keep designs clean and minimal. Create a cohesive design that is based on the company’s brand assets:
- Logo
- Company colors
- Current website design (if its good 😃)
- Branded vehicles
- Photos
1. Color Scheme
- Use color representative of the company’s brand, 2 primary colors and one accent color used for callouts and phone#
- Avoid overuse of bright, high saturation colors and use as accent colors instead
- Check out some tools to help achieve the ideal color scheme:
2. Images
- Use high quality images that appropriately convey the company and services and compress the final .jpg or .png.
- In Photoshop: always convert large, hi-res images, logos, or assets to ‘smart objects’ to preserve the original quality when revisions need to be made
- In Photoshop: use layer masks to crop your images to preserve image data in case photos need to be cropped differently in the future
- Use discretion when applying filters, effects or editing photos
- Use dealer photos whenever possible
- Finished project shots
- Team photos
- Branded vehicles
- Use images that are representative of the location
- If the company is an Owens Corning contractor - use the approved Pink Panther/Contrator elements according to the branding guidelines located on the graphics drive: /graphics/*Working Files/Web Design/Library/01 Credibility/Owens Corning
3. Messaging
- Keep messaging concise and direct
- Company motto if applicable
- Mention territory
- Are they Family owned/operated
- Mention services offered
- How many years in business?
- Always include a Free Estimate Button in the main message
- “Get a Free Quote:
- “Contact us for a FREE Estimate”
- Example: “Full Service Roofing Expert - Serving Northern Minnesota - Family owned & operated since 1885”
4. Typography
- Use appropriate, modern fonts that represent the style of company’s brand
- Incorporate varying font weights to establish text hierarchy
- Use proper letter spacing and line height
- Avoid excessive letter spacing
- Avoid heavy drop shadows and text effects that create clutter or look outdated
- Maintain a proper message flow
- Keep text and CTA placed closely together or connected in some way
- Proper separation between messaging components
- Helpful typography resources:
5. Combining Text and Images
- Use techniques to ensure legibility
- Avoid clutter and use ample spacing between text and image borders
- Ensure high contrast between text and background, with these techniques:
- Place text over area of image with solid color/uncluttered area
- Place text on solid or transparent color overlay
- Apply softening or subtle blur to image
- Align text left, right, or center to achieve the best composition between image and text
6. Animation
- Animating the elements of the main message can have a positive impact on users:
- Keep animation simple and subtle such as fades & slides
- Animate in logical groups, rather than animating each individual element
- Avoid spins and bounces. Do Not Over Animate and give users headaches
- Some tools:
- https://michalsnik.github.io/aos/ - AOS (Animate On Scroll) is an easy to use JS plugin
- http://us2.campaign-archive1.com/?u=6fbaddc8c1fce7588d1a35cb2&id=096fb65415&e=844cfd8b35 Basic Animation Tutorials