Web Designer Brand Book

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.

brand message

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 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 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 message

1

S E R V I C E Y O U D E S E R V E

manifesto

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 message

1

design + visuals

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.


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%


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


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.


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


2

image style

IMAGE DO’S

visual identity


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


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


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

words + content

TONE OF VOICE


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 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 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 communication

3

live your brand

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 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 communication

4

Q U E S T I O N S [email protected]

mailto:[email protected]

Small Business & Entrepreneurship

Web Designer Brand Book