9 Simple Style Principles that Make for Badass Websites

 With these 9 principles, you’ll be rocking your personal style in your wardrobe and your web design, and both you and your website will look totally badass. Click through to read the post (and grab your free workbook)!

Everything I know about style, I learned from Hilary Rushford. She’s been an inspiration to me in more ways than one. But who would have thought that her personal styling course would spark an entire blog post about web design?

Admittedly, I was inspired to make this analogy while listening to Tiffany Han’s new podcast, How to Be Remarkable. Initially, the title of the podcast reminded me of Hilary’s first style principle, “one to be remarkable”. And then, in the episode, Tiffany and Erin were talking about website faux pas and mentioned something about “accessorizing” your site.

That was all my brain needed to concoct connections between nine of Hilary’s style principles and effective website design:

One to be remarkable

The idea behind this principle is that you choose one focal piece that’s “worthy of remarking upon”. In style terms, that could be a leather jacket or even a bold lip.

But the idea, when it comes to your website, is that you choose one focus that you want to be known for. You become worthy of remark because you become the go-to expert in one specific niche.

You can also think of this as speaking to your one ideal person about your one area of expertise. For example, Anne Samoilov talks launching for creative entrepreneurs over and over again because that’s her “one to be remarkable” area.

Your two-part fashion cocktail

The two-part fashion cocktail is definitely my favorite style principle. The idea here is that some items in your closet make you feel cranberry (read: immature or prudish) while other pieces make you feel more vodka (read: like a rockstar). And you want to strike a good blend between those two when putting together an outfit. A little too much of either and your cocktail just doesn’t taste right.

Now, when it comes to your website, I like to call it your two-part copy conversation. By this, I mean that your web copy is the conversation that you’re having with your site visitors. And it isn’t a one-sided conversation. It isn’t a monologue.

The second part comes in the form of any link or button that you have on your website. These are the moments when your site visitor participates in the conversation by saying, “Yes I want this” or “Tell me more” or “Send me the checklist!”.

The two-part fashion cocktail blend has another application in web strategy terms, as well. And in this alternate application, it serves as the metaphor for blending your business objectives with your dream client’s desires. This blending of goals is at the heart of any sustainably successful business and the foundation of every well-designed site.

I’ve made you a workbook, and here’s what one reader had to say about it:

"This is the BEST branding worksheet I have seen. The setup and wording make it so easy to understand, reflect and complete. I usually see those worksheets and feel completely dumb for not knowing the answers to the prompts, but this was just so concise."

And you can download it for free!


Three is the key

This third style principle means that it is often the “third piece” that makes your outfit feel more put together and polished. It could be a bag, a statement necklace, a scarf, or a jacket. But by adding that little something extra, you uplevel your style above the average.

Three really is the key with your website, too. Because we humans have an affinity for groupings of three. Three is neither too many options nor too few.

This is why I recommend putting your three primary content jump-in options on the homepage, having three service packages, and keeping your website navigation links to no more than six (two groupings of three). Three is the magic number.

 Example of how I designed the 3 content jump-in boxes on Tess's homepage.

Four the ladies

In this style principle, Hilary talks about highlighting your best assets, which, for women, are often the waistline and the bosom. With a website, this principle becomes “four the color”.

When it comes to your website, four colors are all you need (and you can get my recommended color palette in this post). All too often, people get hung up on choosing the perfect color palette and this stops them from moving forward.

We always want to emphasize progress over perfection. And, more than that, by keeping to a simple color palette, we allow our site to feel more polished and put together than if it were overwhelmed with a chaos of color.

 Example 4-color palette and brand board.

Five-star proportions

When it comes to style, proportion can make or break an outfit. Proportion doesn’t just mean the way an item fits, it can also refer to the balance between top and bottom. If you’re wearing a looser top, you could balance that with a tighter bottom and vice versa.

When it comes to a website, proportion is just as important. You’ve heard me talk about the importance of website layout before (remember this post?) and finding balance between elements.

First, consider the white space — this is the breathing room of your site, that allows your visitors time to process the copy and the space to move forward. So, regardless of the words or visuals on a page, we want to have plenty of space around and between elements.

Next, consider the balance between those elements. If you’re using a large, eye-catching image, perhaps you balance that by having only a brief sentence or two overlapping it (rather than a dense paragraph).

 Example of how we emphasized balance and whitespace on Wendy's site.

Sixth-sense feelings

This style principle is not one you can see when you look at an outfit, but you feel it. Like when you put on that blouse that fits you perfectly and makes you feel like you might secretly be an actress – that’s what I’m talking about with the sixth-sense feelings.

Planning the perfect outfit means considering how it makes you feel when you’re wearing it in the context of your environment.

And when it comes to your website, the principle absolutely applies. You want to think about how the visuals will make your site visitors feel and what impression they’ll take away about your brand.

How do you want your brand to make you feel? How do you want it to make your website visitors feel? These become the tone words that will inform every design strategy decision you make moving forward.

Take my site, for example. My tone words are “creative”, “rebellious”, “fresh”, “feminine”, and “empowering”. Once I had those words chosen, I used them to create a mood board that would form the basis of my brand image. But it all started with feelings.

 Example of using a moodboard to establish brand tone and the experience you want site visitors to have.

Figure-eight pattern pairing

When it comes to style, a chic black and white look is classic, but sometimes, you want to add in some patterned fabric for a little extra oomph. In this style lesson, Hilary teaches that you can mix patterns together by balancing busy with bold.

The same principle holds for web design as well. You don’t need background patterns or textures but, if you do choose to add them, make sure you’re balancing busy patterns with bolder (more spacious) elements.

For example, in this web design, I used large geometric shapes behind this text (balancing the busy-ness of the text with the boldness of the pattern).

 Example - balancing a text-heavy section with a bold background pattern.

Nine or ninety-nine

It’s not about how much a piece of clothing costs, it’s about how well it fits and the quality of the fabric. And with your web design, you don’t need to shy away from using free fonts or photos as long as the quality is high and you keep everything consistent and on-brand.

 In this example from one of my recent client's sites, we used stock photos in a way that was unique to the brand and looked professional without spending loads of money on a photo shoot.

Perfect-10 finishing touches

Lastly, you want to finish an outfit with that little something extra – a delicate set of stackable rings, perhaps, something to just polish up the look. And on your website, consider how you might use extra graphic elements to accessorize your page and add that bit of extra je ne sais quoi.

For example, on this website, I created these graphic callouts to place throughout pages to add more “zest” to the brand.

 Example of a finishing touch on your website by creating a graphic to add visual interest.

Whether or not you’re a fashionista, a personal brand is powerful and it’s one that we can cultivate with our style choice and on our website by following these nine timeless principles.

In the comments below, tell me, which of these style principles are you most excited to apply to your website?


*Note: These style principles are directly from Hilary Rushford's Style and Styleability course and are not my own. I am not a stylist nor do I pretend to be one on the interwebs. But, if you are looking for a wardrobe pick-me-up, I highly recommend Hil's course!