The Commandments of Web Design

By Teylor Schiefelbein
February 8, 2022

Our records don’t go back far enough to identify just how many websites we’ve launched in the 10+ years of our agency’s existence, but let’s just say we know a thing or two about web design best practices! 

While trends come and go (think sidebars and slideshows), we’ve found a number of web design best practices that the Alter Endeavors team would even go so far as to call commandments. And while someone, somewhere is bound to disagree (this is the internet, after all!), we’ve actually considered having our clients sign some sort of document acknowledging that they proceed at their own risk should they request we violate even one of the below commandments…

Our reasoning for this tough-love attitude is simple: When engaging with a client, our goal is to produce a website that is beautiful AND achieves a very specific purpose—conversions! We’ve found that removing key elements or getting unnecessarily fancy can both cause you to lose out on potential business. 

Regarding User-Flow Best Practices

Thou shalt prioritize responsive design.

While our process involves first reviewing mock-ups sized for a 1440x screen, our team is always thinking through how a specific section or element should best be approached on mobile and tablet. And while there can be certain touches ideally experienced on laptop over mobile and vice versa, the goal isn’t for the user to feel they need to reacquaint themselves with your website when visiting on a new device. So, we ask clients to trust us when we re-spin an idea “that could be cool” into something we know will serve us well across all devices.

Thou shalt include a call to action in your hero.

Anything “above the fold” (that is, what your user sees after they land on your site and before they start scrolling) is considered prime real estate. The hero section of your site makes up the majority of this space and should convey the need-to-know information about your business, then include an opportunity for the user to follow that train of thought. 

While the call-to-action doesn’t need to skip dating and go straight to marriage (by asking the entirely new user to buy what you’re selling before learning more), it should be a step that provides some sort of value to the user. Think of an assessment, free demo, or opportunity to read success stories all as hero CTA contenders. Leaving this space void of a call-to-action is kind of like a “For Sale” sign staked in a yard with no number to call for more information. 

Thou shalt be intentional with your header space and menu.

The header and menu are parts of the prime real estate mentioned above—and even if your website has a high page count, it’s highly unlikely that each page has equal weight. Rather than try to include every parent page in your top menu, circle back to your brand’s core audiences (contact us if you don’t know these!) and approach the menu as if you’re one of those audience members visiting your site for the first time. And then the second, and then lastly as a loyal customer who likely knows what they’re looking for. 

Does the menu address each of these audiences at each part of their journey? Are there pages you can nest or call out once the user is on a related page? Edit down and then edit again. 

Bonus: Thou shalt include social icons and open them in a new tab.

This is a personal pet peeve. If I’m visiting a site and want to check out your social accounts to follow or quickly vet, I expect it to open in a new tab so that I can continue my multi-tab research. Not to mention that your site is likely where the desired conversion is to take place, and you just made it harder than it should be for me to get back to it! 

Regarding Design Best Practices

Thou shalt not use your website as an opportunity to explore and define branding.

Your website should reflect your branding, not be your branding. In some rare cases, a brand may need a website quickly in order to meet consumer demand or capitalize on a market trend. However, that’s the time to opt for simplicity, flesh out your branding at a future date, and then update the website to reflect said branding. 

What we want to avoid is camping out in the mock-up phase of web design to overhaul a hastily created logo, switch up your color palette, or select a new font. Not only will the project likely take twice as long as expected, but it undermines the research and intention that should inform all of your design choices on the site.

Thou shalt prioritize accessibility over flash.

Creative web designers have to walk a rather fine line. On one side lies a website that is considered fresh, new, and innovative—and on the other side lies “I don’t even know where to click?” 

Fortunately, there are core best practices that guide and sometimes reel in web design choices, and one very big one is accessibility. In practice, this means that chosen fonts should be legible and color contrast should take those with vision impairments into consideration. So before you proceed with color blocking two neon shades for shock value or try to implement animation at every click (this isn’t a 2000’s PowerPoint presentation!), assess whether the design changes are improving or hindering accessibility. 

Thou shalt use your brand color palette wisely. 

While it’s certainly fun to play with color options in the mock-up phase of web design, there are best practices to follow here. This is why one of our first orders of business when working on a website is to create “stylescapes,” which take existing brand elements and incorporate them into a digital environment. 

We identify our header and body copy fonts and layout the colors to be used across the site. These colors won’t be used at random. Rather, we’ll identify which colors are best utilized in larger blocks (such as potential section backgrounds or banners) versus those that need to be used with a light touch. Lastly, we’ll identify which color(s) work best behind a button or call-to-action. 

Related post: Why You Need a Brand Style Guide for Your Business

Get in touch with us to learn more about web design best practices!

While the above isn’t an exhaustive list of what we consider to be the commandments of web design, I hope that it does provide a glimpse into the level of thought we put into our clients’ web projects. Our intention is to guide our clients through the process (whether it be branding, website design, website development, or content & SEO) and educate them along the way. Digital markers are often viewed as wizards behind the curtain, but consider us to be a team that invites you to pull it back as much as you would like! 

Still have questions about web design best practices? Feel free to reach out to our team!

a person designing a website

The Commandments of Web Design

February 8, 2022
Our records don’t go back far enough to identify just how many websites we’ve launched in the 10+ years of our agency’s existence, but let’s just say we know [...]
a woman in a spacesuit points at a screen

What Is Brand Strategy?

August 31, 2021
Building a defined brand and reaching your audience with it is a difficult process. In some ways, this is made harder by the confusion surrounding the many terms that, [...]