The Rules of Web Design: Which Ones to Break and Which You Need to Follow

June 19, 2018

The most requested detail my clients ask for their websites is for it to “stand out and be unique”. That is the dream, am I right? You want your site to have design and functionality that gets you noticed for all the right reasons. And with recent developments in tech, coding like HTML and CSS, and platforms offering some amazing features, it is easier than ever for business owners to have a stellar website.

But sometimes, that can be pushed a bit too far. When a visitor lands on your site, you have only a few seconds to keep them there. We’ve heard this quite a few times over the last few years and it’s so true! But your goal should be to inform your audience and help them to achieve the ideal outcome  you want your site to accomplish. Simply having unique design could keep them interested, but frustrated.

Let’s go over some recent trends that break established website expectations and what not to do so you can avoid driving your traffic away.

Break this rule: Use minimal content
But don’t: Overwhelm the reader

On your website, you definitely don’t want so much content that your site visitor is reading a novel. But sometimes, you need more content to get across your value, beliefs, and answer any questions a potential client may have before they reach out to you. It helps you and the client; you aren’t receiving the same email over and over again and helping with the same lack of information and the client feels more confident when they initially inquire that you’re the right person to hire.

The Wedding Pro Coaching site is a fantastic example of how to design a lot of content into a site. The way the site is designed, it keeps you from getting overwhelmed using color-blocking and visual cues. The hierarchy of the text also helps so you can skim as you read and find the information you’re looking for. It keeps the your attention and makes it easier to learn more about her coaching program.

Break this rule: Have a classically laid out header and footer
But don’t: Confuse visitors with quirky page names

How many websites are out there the have the logo then the navigation links in a straight line? While there is definitely nothing wrong with this, if your site is designed in a more expected layout, changing up your header and footer helps frame your main content.

Happily Ever After’s site has a fun header and footer! The header fleshes out a minimal number of page links into easy to decipher link names. They’re also able to share where they are located and who the are and what they do (A mother & daughter planning duo). The footer also has special details to make it beautiful to look at but functional as well.

Speaking of functional, when you’re making a more unique layout for your navigation, make sure you aren’t confusing your reader. Have you ever landed on a site that had a completely hidden navigation or links that were hard to figure out? I know I’ve been on sites that used only icons to navigate to other pages and I was lost to say the least.

Make sure to keep your terminology simple and expected in your industry. That way, someone can quickly figure out where to go.

Break this rule: Don’t add animation to your website
But don’t: Add the effects too much to your site

Websites can feel really flat and stagnant. It’s like a piece of paper with a bunch of elements glued down to it. Parallax is a fad that has been around a few years but it seems to be here to stay. A huge reason it blew up so quickly is that you can create depth on your website. It feels like there are layers to your pages when someone scrolls and it looks like an image, for instance, is moving at a different pace than the other information on the page, it looks like there are multiple components on the site.

Subtle animation can also add some interest to a site. Not only is there movement but presenting information in this way keep the site flowing as someone scrolls.

Marina Tureczek did a fantastic job making her website move as you explore it, but nothing feels over the top. Her work is still the main focus. When content appears on the page, you get all the content related to each other at once. The quickest way to overdo movement on your site is animating each and every element to act on its own. You don’t want someone sitting and waiting to get all the info you’re wanting to share. They may even think the site is taking a really long time to load. Make sure you are intentional with your parallax and animation, folks!

Break this rule: Keep everything lined up and symmetrical on your site
But don’t: Forget call-to-actions and strategy

Breaking the mold (and the typical grid) in your layouts can add a lot of visual interest and keep your visitors eyes moving all over the page. Thinking outside the box can also help you to brainstorm ideas to make your site more immersive, inviting people into your brand.

While all design rules haven’t been abandoned, Beth Kirby’s site uses layers and asymmetry really well. Each area of her business is properly highlighted while still being displayed in unexpected ways. Her brand colors and vibe are also integrated into the design well. You can figure out a lot about Beth’s personality and message simply from the colors, fonts, and shapes.

One thing that is still used, too is proper buttons and call-to-actions. Design over function will leave a visitor clicking away from the site and not knowing what information they needed. Buttons and clear links make the site easy to navigate while simultaneously keeping it easy to navigate. Avoid links that blend in and especially buttons. There’s always a way to make buttons branded and beautiful within the web design.

Break this rule: All the rules
But don’t: Abandon your own guidelines

Saying that the girlboss website is unconventional is an understatement. The bold colors, interesting typography, and kooky setup fit the brand to a tee. The grid of their blog posts keep all the focus on their content which is the bloodline of the business.

While you’ll see a lot seemingly random details, you’ll see the colors and typography all follows some type of rules. The easiest way to see this is in the assigned colors for each blog category. And those same colors correspond with the main page you land on. It subtly instills a system and some order to a seemingly chaotic website.

When pushing the boundaries on your own site (which I truly encourage!), make sure you have a plan. Colors that are consistent. Fonts that follow rules (for example: white text on photos, large headings in a certain font, etc.) should be used to not be too jarring to your audience. And of course, remember to make your site informative and easy to navigate so that the visitor knows what they need to do next.

What’s an idea you want to try on your site? Let me know in the comments!

Are you missing out on potential clients? The fix can be as simple as updating your website.

Get the kit which gives you the exact steps. You can implement them quickly for a better website that books you more clients.

We won't send you spam, guaranteed. Powered by ConvertKit
  1. Osiris

    June 20th, 2018 at 11:36 AM

    Awesome tips! Thank you for sharing!

  2. Stefani

    June 20th, 2018 at 11:56 AM

    Thanks! Glad I could help in any way!

  3. Christine Olmstead

    June 20th, 2018 at 12:47 PM

    This was so great! I loved these rules and what to break, very helpful and fun!

  4. Stefani

    June 20th, 2018 at 12:56 PM

    Thanks so much! I definitely think breaking the rules is a lot more fun than following every single one. Haha! Glad this was helpful to you!

  5. Erica

    August 22nd, 2018 at 11:15 AM

    This is great! I’m all about creatively breaking the rules, so I love your approach to this topic!

  6. Stefani

    August 22nd, 2018 at 11:44 AM

    Thank you so much! I absolutely love breaking the expected on websites especially. They can begin to all look the same and it’s so fun to push the limits.

  7. Laine

    August 22nd, 2018 at 11:25 AM

    Great blog Post Stefani! Great advice on building a website that stands out! Glad to find this post! Xo – Laine

  8. Stefani

    August 22nd, 2018 at 11:44 AM

    Thank you! I’m so glad it was helpful to you.

  9. Karoline Rose

    August 22nd, 2018 at 12:44 PM

    Love your approach! Great tips!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.