web designer brand book
TRANSCRIPT
CONTENTS This brand standards document explores the message, visuals, and expression of your brand.
1. Brand Message 2. Design & Visuals 3. Words & Content 4. Live Your Brand
BRAND GUIDELINES TONI’S WEB DESIGN
M OO D B OA R D
The moodboard was curated to express the “mood” of the brand and to inspire the visual decisions. The vibe we are going for is clean black and white (and white space) mixed with high-contrast, fiery pops of color.
POSITION
CO R E I D E A I offer personal website design and support for small businesses.
YO U R G OA L I give clients the website experience that they deserve. I am invested personally in creating a partnership that benefits both of us. I’ll only do right by my clients, even if it takes longer and costs me more.
H O W YO U A R E D I F F E R E N T I offer a no-compromise partnership. When other agencies are outsourcing across the globe, I keep everything in-house. I don’t hide behind an agency or generic brand. You’ll be working directly with me.
W H AT YO U D E L I V E R The outcome of my work with clients results in new websites, SEO strategies, and web support.
BRAND GUIDELINES TONI’S WEB DESIGN
brand message
1
PERSONALITYL O V E R & H E R O P E R S O N A L I T Y A R C H E T Y P E
Your personality is built from extreme contrasts: love and vulnerability on one side, fierce competitiveness and “protector” on the other side. Every element of your brand should reflect these two extremes. There is no wishy-washy middle with you.
When your ideal clients encounter your brand, they FEEL: excited, taken care of, protected, engaged, involved, and secure.
You are: • Direct • No-nonsense • Fiercely caring • Loud • Passionate • Strong-willed • Relationship-driven
BRAND GUIDELINES TONI’S WEB DESIGN
brand message
1
POINT OF VIEW
NO BULLSH IT I’m a big softy for my clients, but I have a clear no bullshit policy. I believe in doing what you’ll say that you’ll do and respecting each other. I only work with clients who believe the same thing.
SERVICE YOU DESERVE It’s a little frightening to know the process that some web ‘professionals’ use to create websites for clients. They outsource all of the work and do the bare minimum to get paid. I think you deserve so much better. I want my clients to not only be happy, but I want to make them happy the RIGHT way.
I ’M AN EXPERT , YOU ’RE AN EXPERT Web design is my passion… it lights my fire. I know that you feel that way about your work, too. When we partner together, I’ll be your expert in design. You can trust me to keep your best interests at heart.
DEFEND THE UNDERDOG Small businesses can get the short end of the stick from big service providers. I feel sorry for the clients in those situations because they have no clue that their sites are being hacked together by a bunch of half-wits. Yeah, I said it. Lucky for you, I know what being a small business is like, (I am one!) so I tailor my service to your needs.
BRAND GUIDELINES TONI’S WEB DESIGN
brand message
1
UNFAIR ADVANTAGE
YOUR ‘UNFAIR ADVANTAGES ’ ARE YOUR :
• Natural passion and conviction for your work. Don’t dull your voice to appeal to more people. Your strong opinions will draw the right people in.
• End-to-end skill set. You are able to guide your clients through the whole process from design to development to maintenance, which will strengthen your relationship with each client.
• Attention to detail. Your clients will feel cared for when you point out the detail in your process, designs, and work.
BRAND GUIDELINES TONI’S WEB DESIGN
brand message
1
LOGOvisual identity
Your main logo communicates the contrast in your brand. The script is feminine and warm (and red hot!) The sans serif below is strong and masculine. The “t” mark is a simple option for watermarking a design or for using as your favicon.
BRAND GUIDELINES TONI’S WEB DESIGN
2
PRIMARY COLORS
visual identity
Your primary brand colors are bold, fiery, and energetic - just like you. They are unapologetic and high contrast. To balance these bold colors, your brand will employ the use of lots of white space in between.
#cc0000
20% 40% 60% 80%
#ff6600 #00a1b0
20% 60% 20% 60%
BRAND GUIDELINES TONI’S WEB DESIGN
2
SECONDARY COLORS
visual identity
The secondary colors offer some neutral balance to your color palette. The dark grey and off-white are great options for text colors and background colors. Again, we’ll use lots of white space.
#464646 #e5e0dc #ffffff
BRAND GUIDELINES TONI’S WEB DESIGN
2
TYPOGRAPHY
HEADLINES: MONTSERRAT BOLD
ABCDEFGHIJKLMNOPQRSTUVWXYZ 1234567890 !@#$%^&*()
visual identity
Body: Montserrat Light
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890 !@#$%^&*()
The fonts used in your designs echo the same contrast that is found in the logo. There is the contrast of bold and light, simple and decorative. The Flamingo Script accent should be used sparingly to keep readability high.
BRAND GUIDELINES TONI’S WEB DESIGN
accent: flamingo abcdefghijklmnopqrstuvwxyz
2
FONTS IN ACTION
HEADLINE LEVEL 1 This is a description paragraph. It explains the purpose of the page and describes the title to the left.
1. Example 2. Example 3. Example 4. Example
“This is a quote from a very impressive person.”
-IMPORTANT PERSON
HEADLINE LEVEL 2
This is a description paragraph. It explains the purpose of the page and describes the title to the left. This is a description paragraph. It explains the purpose of the page and describes the title to the left.
• Example • Example • Example
visual identity
Headline 1 color: #cc0000 Headline 2 color: #ff6600 Main font color: #464646 Links: #00a1b0
BRAND GUIDELINES TONI’S WEB DESIGN
2
IMAGE DO’S
visual identity
BRAND GUIDELINES TONI’S WEB DESIGN
Pictures that help illustrate your process and all of the work that goes into each client.
Close up images of people using computers, phones, etc. These are people
searching for your clients businesses!
Images of you, the expert. (Note: placeholder image until your
photoshoot is complete!)
Images of people with their technology to allude to the idea that it’s an integral part
of our lives. This is a necessary part of business, now.
When choosing images for your brand, pick ones like these. Keep your brand consistent and add balance to the hot color scheme by using black and white images.
2
IMAGE DON’TS
BRAND GUIDELINES TONI’S WEB DESIGN
Color images Vector-based or clip art that is impersonal
Images of people outside of the technology/work context
Stock images that are literal at the expense of making an emotional
connection to the work
When choosing images, avoid ones like these.
visual identity
2
ICONS
BRAND GUIDELINES TONI’S WEB DESIGN
The icons in your brand colors give us a visual way to explain different pieces of your process. They also offer pops of color that we can use on a white background.
visual identity
2
TONE OF VOICE
BRAND GUIDELINES TONI’S WEB DESIGN
Content and communication from your brand should sound like you are talking to a good friend. You are your client’s equal and you don’t hide behind “professionalism” at the expense of being personal. Relationships are built on honest communication and your client relationships are your top priority.
ALWAYS speak in the singular first person. Swear occasionally.
Speak like you talk.
YOU ’LL SOUND: • Direct • Convicted • Honest • Attentive • Personal • Opinionated • Passionate
NOT : • Formal • Generic • Polite • Reserved
brand communication
3
WORD BANK
• No bullshit • Support • Partnership • Partner with me • Get to know me • Let’s do coffee • You deserve • Let’s do this • I don’t do anything half-assed • Half-wits • Freaking • Yeah, I said it.
BRAND GUIDELINES TONI’S WEB DESIGN
brand communication
3
TAGLINED E S I G N Y O U deserve
O T H E R O P T I O N S • NO BULLSHIT WEB DESIGN • YOUR WEB PARTNER • YOUR PERSONAL WEBSITE EXPERT • CUSTOM WEBSITES & SUPPORT
BRAND GUIDELINES TONI’S WEB DESIGN
brand communication
Your tagline is a “catch phrase” that describes your work to others at a glance. It can also be used as your main headline on your website.
3
STORIES
LOW TO H IGH OR IG IN STORY
Paint the picture of how you’ve been a faceless cog in the agency website machine, but you knew that clients deserved better. Now, you offer clients a personal and involved experience.
SHOW OFF YOUR CL IENT RELAT IONSHIPS
When you are working with clients, share your process and celebrate them as often as you can. Show them off on social media and on your blog to show that you care about your clients deeply.
WHY & HOW, NOT JUST WHAT
When you are explaining your services or teaching a subject on the blog, always include the why and how. The what is generic. The why and how are your personal point of view on the topic.
G ET PERSONAL
Tell personal stories on your blog (voice record them to your writer if you need to.) People need to get to know YOU personally.
BRAND GUIDELINES TONI’S WEB DESIGN
brand communication
3
ACTION STEPS
UPDATE YOUR WEBS ITE & EX IST ING DES IGNS
Use the new brand fonts, logo, colors, etc to update all of your brand touch points. This will be our next step!
COMPLETE YOUR PERSONAL BRAND PHOTOSHOOT
Update your website and social media platforms with new photos that show more of your personality/environment.
CREATE YOUR LEAD GENERAT ION PDF
Work with your writer to create a piece of content that you gift to new email subscribers. Focus on what people need to know right before they hire you.
WR ITE AN EMAIL AUTORESPONDER SEQUENCE
Write a series of 3-5 emails that introduces new subscribers to you and your brand. Include a look into your process, what you believe, a bit about your personal background, and how they can partner with you.
BRAND GUIDELINES TONI’S WEB DESIGN
brand communication
4
BRANDEMIES
IDEA ENEMIES • People who don’t respect the “equal partner
relationship” that you build (bad clients, micromanagers, etc.)
• Small businesses who get taken advantage of by big web design agencies.
• Working outside of your zone of genius — you should always be passionate about the work.
NOT TO DO L IST • Post generic educational content that could be
found on any web designer’s blog. Your content should be highly opinionated and strong.
• De-personalize or “tone down” any aspect of your business.
I AM NOT • A contractor or freelancer. I’m an expert, and
your equal. • For everyone. Strong words and opinions may
turn some people off, but I only want to work with people I love.
BRAND GUIDELINES TONI’S WEB DESIGN
brand communication
4