Let’s practice identifying vibraphones vibes by naming the PRIMARY and SECONDARY vibes of the websites and people who inspired you.

Here’s a list of words you can play with. (Feel free to come up with your own!)

Tip: If you’re struggling to identify a specific vibe, start with describing its temperature. Is it hot, warm, cool, or cold?

Thinking about what kind of energy a vibe has can be clarifying. Traits like passion feel hot; sensitivity feels warm; sophistication feels cool; functionality feels cold.

Look at your three inspiration websites. How would you describe their vibes?

Look at your three inspiring people. How would you describe their vibes?

Trusting that you’re inspired by things that resonate (trust your intuition), come up with three ways to describe your own vibe.

Which of these feels the best for you right now? (Remember that this is a discovery process; you can always play and iterate later.)

How do you create a vibe? In real life… it’s complicated. In websites, a vibe is created largely by the combination of UI (User Interface) elements. UI elements form the “skin” or “texture” of a website.

You don’t need to become a UI designer to start seeing how these elements work together. A little vocabulary and observation will take you far.

Let’s break down what you first see when you open a site—the “hero section.” Practice naming the basic elements that contribute to a vibe so you can think and talk about what you like (and don’t like) with more clarity.

Let’s analyze this website’s vibe by breaking down the elements. Here’s one way to describe them for this example website, https://laurieruettimann.com.

How would you describe the vibe that this combination of elements creates?

Now open up one of your inspiration websites.

How did you describe the vibe of this site?

How do the UI elements contribute to the vibe?

If you’re new to web design, templates are an incredible way to build a beautifully designed site without learning a ton of new skills from scratch.

If you are a designer or developer, templates can help smash through creative blocks by giving your brain a starting point.

Choose Your Website Builder

Of course, to find a template, you’ll need to start with a website builder. Here’s a decision tree to help you find the right one for your situation.

Which website builder will you use?

If you haven’t yet, create an account on your website builder site.

Once you enter the website builder, your mission is to find a template that matches your vibe and site type.

Specific colors, fonts, and graphics (like photos and illustrations) are easy to swap out. The layout is slightly harder to change, so if you’re not confident about your design skills, focus on finding a template that’s laid out the way you like.

Optional: Choose Your Site Type

When you open your website builder, you might be prompted to choose what type of site you want.

If you’re not sure how to navigate the different templates, here’s a quick rundown of common site types that might work for you.

Note: Not all sites fit cleanly into one category. We’ll talk more about the purpose and structure of your site in Craft Your Story. What matters most right now is that you pick a template that sets the tone you want to set.

Practice identifying site types by looking back at your inspiration sites.

Still not sure what kind of site you’d like to have? Here’s another decision tree to make things easier.

Your site type is:

Choose Your Template

Now that you know what you’re looking for (a template that matches your vibe and has the layout you want according to your site type), pick a template in your website builder. You’ve processed lot of information today; trust that your body can make a good decision and let your gut choose for you.

Still not sure which template feels right? Play with a few, make a note of three promising options, and come back later with fresh eyes.

Today’s mission is to recreate your vibe through design.

Your style matters. Not because you need to seem cool or smart to succeed or win a popularity contest. But because when you look and sound like yourself, you gain confidence and trust.

When it comes to building out a style through design, your vibe is your north star.

Your vibe (primary + secondary term) is:

What’s one thing you took away from the process of naming your vibe?

Today’s work involves many steps, but it’s super fun stuff. You might find yourself playing with a dozen alternatives at every step—I don’t blame you! Just be mindful of how long you have allocated for website today and pace yourself.

I trust you’ll find a good rhythm of experimenting (divergent thinking) and deciding (convergent thinking).

By the end of today, you’ll have styled your website in a way that looks and feels like you. Plus a Style Guide to codify these choices, if your left brain likes that kind of thing.

Getting a good headshot can be a can of worms. It can also be a great starting point for building your style.

If you already have a headshot you love, use it! Consider what you like about it (is it your expression? the colors? the setting?). Leverage what’s already working for you. We tend to spend a lot more time thinking about how to present ourselves in photos than about how to present ourselves in websites.

If you don’t have a headshot you like, watch this short video to see a photographer break down how to DIY your headshot with a smartphone: https://www.youtube.com/watch?v=rgj-w_iyTGM

Good Headshot Checklist

*Tip: If you have a good photo with a distracting background, use “Background Remover” in Canva to get rid of it.

A pre-designed graphics collection is the easiest way to create visual consistency and personality on your site. It’s my #1 tip for elevating sites from plain to stunning.

Let’s figure out what kind of graphics you need.

What kind of graphic collection would you like to use for your site?

We recommend you pick one for this iteration.

Tip: Canva contains 40+ collections of 20-60 graphics. You can also use “Magic Recommendations” when searching for graphics to see graphics in the same style of any single graphic you like.

We’re going to create a 5-color palette for your site.

Tip: If your graphics collection came with a set of colors, draw from those to build out your palette.

First, pick a main brand color.

Color is highly individual and personal. But it’s useful to consider color psychology, cultural context, and industry standards when selecting your main color.

What’s your main color?

Do you want a soft, medium, or intense shade of that color?

Once you’ve chosen a color, it’s time to make a color palette! Remember, color palettes and fonts are really easy to change on your website. We’re looking for a starting point, a v1.0.

Tip: If you’re using your graphics collection or a photo as a reference, click on “Image Upload” inside colormind.io to automatically pull colors.

Make your palette:

Review your inspiration website style analysis.

What trends did you see in the header fonts?

What trends did you see in the body fonts?

When it comes to fonts, you need to know two main principles:

Let’s find your pairing!

Tip: Keep in mind that not all platforms have the same fonts available. Google Fonts are free, so you can download them from fonts.google.com and upload them to any platform that allows you to upload new fonts (like Canva). If you can’t upload a font you like, choose the most similar available type.

Your Header Font

Your Subheader Font (H2, H3)

Your Body Font

If you don’t have one already, create a simple logo in Canva: https://www.canva.com/search/templates?q=logo

I highly recommend a name logo (just text) in black font on a white background. (See some options here.)

Tip: For the most simplicity and ease, you can even just create a logo using a version of your header font! Save it as a png file and you’re good to go.

You’ll also need a small square version of your logo called a favicon. Favicons are 16x16 or 32x32 pixel icons that show up in your browser window. You can make one on https://favicon.io/

Put everything together for future reference by creating a personal brand-focused Style Guide template on Canva. Click here to create your version.

Here’s a preview of the template:

Time to put it all together!

Before diving in, we’re going to practice mining core messages. Let’s start with your inspiration companies from Inspiration Bingo.

Reflecting on your current understanding of each company (no need to research), summarize their unique value propositions using this template:

Next, we’re going to find a new kind of website to be inspired by: a Mirror Website. Instead of learning the nitty gritty of UX design and copywriting, we’re going to use your mirror website as a template for your copy + user experience.

First, identify a site that does what you want your site to do. An inspiration site or template may be perfect for your mirror site.

If you want to find a new one, below are some examples in each category.

Your mirror website:

Now we’re going to analyze how your mirror site works. How does it tell a story and create an experience?

We’re going to draw the site out on paper, breaking down the following:

Paper, pen, and marker ready? Go ahead and draw out your mirror site.

Tip: You can take a full-page screen capture to get a better sense of what the full site looks like. (If you’re using Chrome, I recommend using the extension Go Full Page.)

Here’s an example from jamesclear.com:

Draw your mirror site pages on paper. Describe the Header, Content, and Offer/CTA for each page. This will help you structure your own site without overthinking.

Bonus: Write the UVP of the person or organization behind your mirror site.

We’re going to name your UVP, your bio, and your offers using the inspiration-driven, freedom-in-constraints approach.

Trying to summarize your identity and your value is a psychological landmine. There are two ways to avoid getting blown up.

When you challenge yourself to describe what you do and who you are in a single sentence, over and over again, you will start to see patterns and get comfortable with the exercise. You’ll get good at avoiding the landmines (and surviving them!).

Our goal is to find a good enough core message, based on whatever level of clarity you currently have about yourself and your customers/audience, to make a website that looks and sounds like you. Let’s get started.

Your mission is to name who you help and how.

A super effective UVP helps someone who’s never met you instantly understand exactly who you serve and how you fit into their life. It requires tons of clarity about your customers, how they think and feel and experience the world.

If you aren’t there already, you will only get that level of clarity through interviews and experimentation. You can’t think our way to a great UVP. But you can practice focusing your language and making good guesses.

Let’s start with a brain dump of all the words you’d use to describe your customers and their goals. To provide an example, I’ll reverse-engineer how James Clear might have answered this question.

*Tip: Forget about marketing avatars or ideal customers. Use a simple self-identifier (ideally one that they would use about themselves in conversation) that accurately describes the people you help.

Write at least three versions of your unique value proposition.

Your mission is to orient someone who’s never heard of you to what you do and how you do it in a few words.

Writing is as much about what you don’t say as what you do. So let’s do a braindump of words that describe you, then play around with pulling them out one by one.

I’ll use James Clear as an example again.

Tip: Feel free to use a social media bio if you have one. You may end up with a longer bio or no bio for your website. This exercise will be useful either way.

Your mission is to outline the ways people can engage with you. How can a potential customer take the next step or keep in touch?

Let’s name all the things you offer, then pick the most important to include in your website. Which of the following ways do you engage with people (professionally)?

If you have multiple offers, what’s your #1 call to action in each category? What’s the ideal way you’d want someone to interact with you?

Now that you have the core message you want to communicate, writing your site copy is just a creative exercise.

Your mission is to create a really bad paper version of your website experience. If your writing is good, you’re doing it wrong. Just get the ideas down as quickly as you can.

Your paper site will look something like this:

That’s it! You’re done for today.

Grab your paper “pages” and let’s go!

Tip: Turn your most important calls to action into buttons with the accent color from your palette. There’s no shame in driving attention to the most important parts of your website. You’re helping users figure out quickly what to do next!

How and why to use 3 tools to check your site's mobile-friendliness (after you've published your site).

Over 55% of all website traffic comes from mobile devices. In other words, when people are on your website, it’s more likely that they’re on a phone or tablet than on a computer.

I’s important to check that your website works well in different mobile views. This can be a huge headache and is definitely a game of “good enough”—do your due diligence but don’t expect your site to look the same on every screen. As long as it’s legible and functional, this iteration is good to go!

Your website builder should offer at least one mobile view. Here are some tools for checking more thoroughly: