9 Simple DIY Website Rules to Help You Look More Pro
Your business needs a website.
Although some may argue whether that’s true, I can’t tell you how often I’ve walked away from a business who a) didn’t have a website or b) had a poorly designed one. That’s why I want to save you the trouble I went through when I was first starting out and give you a few simple web design rules I wish I had known the first time I DIY’d mine.
When I started this site (back in 2014), I had high hopes and expectations for how I wanted my site to look.
The trouble was, I lacked design skills (and a design budget) which limited my ability to create the kind of online presence I dreamed of.
After some trial and error…tears…and a lot of wine…I learned some basic web design rules that I’m eager to share.
But first, let’s start with why it’s important to have a polished and professional website in the first place:
- Better usability for the end user
- It builds trust and credibility
- Easy to navigate
- It’s more engaging for your readers
- You’ll feel confident and proud to share it (because you’re gonna have to tell people about it)
Think of it this way:
Your website is like entering the front door to your shop (if you had a brick and mortar style business).
It’s the first impression people get and lets potential clients quickly discern whether your products and services are right for them.
And I mean—quick.
It‘s been said that it takes just 1/10th of a second to form a first impression and for people to decide whether they’ll leave or stay on your website.
But wait, there’s good news—it’s not as hard as you might think.
As someone who DIYs everything you see on this site, I follow a few simple web design rules to avoid looking like an amateur and start designing like a pro.
9 Simple Web Design Rules for a Polished and Professional Website
RULE #1: KEEP IT SIMPLE
Simplicity is your friend when it comes to creating your own website. As a matter of fact, the motto “less is more” rings true in the design world.
As a general rule of thumb, I usually cut at least one or two things before my final edit because there’s a pretty good chance I’ve gone overboard somewhere during the design process which is easy to do.
It usually looks something like this:
- too many contrasting colours
- overly processed images
- too wordy
- too cluttered, etc.
By keeping it clean and simple you don’t have to spend much time trying to figure out what works.
I’m also a believer that a simple black font on a clean white background speaks volumes when it comes to having a polished and profesh looking website.
In fact, some of my favourite logos consist of just a simple black font. Like this one for instance.
For more examples, check out my Logo Love board on Pinterest (or scroll to my header and see that my own logo consists of just two fonts).
RULE #2: USE WHITESPACE
Whitespace is the negative space between the various elements on your website (i.e. graphics, lines, paragraphs, and page layout, etc.).
It’s the clean white space that gives your reader’s eyes a break so they’ll want to stick around and keep on reading. I can’t think of a better reason to use this basic design trick, can you?
I believe that as non-designers (and perhaps as humans) we have a natural inclination to fill the whitespace (I know I’m guilty of this, too).
But please don’t because it creates balance, harmony and readability for your visitors. You can also use it to highlight important elements (like a call to action or important text) and guide your readers from one point to another on a page.
Another bonus of using whitespace is that it makes your website & brand look refined and polished without having to do any work.
It’s a simple design trick that packs a huge punch in your design so please don’t ignore it.
Here’s a look at how I’ve used the concept of whitespace in an ebook to make it easier for my readers to digest the introduction.
See? In my intro, I could’ve filled the text across the entire page starting at the top, but instead, I used whitespace to create visual interest and make it much easier to read.
RULE #3: USE AN ATTRACTIVE (MOBILE RESPONSIVE) THEME OR TEMPLATE
My first site was on WordPress, then Squarespace and now back to WordPress. I used Divi Theme to build and fully customize my site. I LOVE it.
It wasn’t an easy decision for me to make the switch back to WordPress but if you want a theme with limitless possibilities (and you don’t mind getting moderately techy), then I recommend Divi over Squarespace.
However, having a beautiful design isn’t the most important aspect of your website.
Choose a platform that allows you to make simple customizations and changes without having to consult a designer every time. You don’t want to waste your valuable time on tech issues when it’d be better spent creating content for your readers & clients.
RULE # 4: CREATE A COHESIVE COLOUR SCHEME
My best advice is to keep it simple and start with a few neutral colours (i.e. white, black, grey) then add 2 – 3 main colours for hyperlinks, headings, and graphics.
But whatever you do, don’t get too crazy here. You can muddle your design up fast with too many distracting colours that don’t make sense.
RULE #5: GOOD TYPOGRAPHY
Don’t underestimate the role of good typography in your design. For starters, it makes your text easier to read. And since your website is going to be text heavy (unless you’re a photographer) then you shouldn’t glaze over this one.
Like your colour palette, you don’t want to go overboard. Choose 2 or 3 fonts (I recommend a sans-serif and serif font combo for headlines & body text) and an accent font used sparingly (for graphics, logos, etc.).
For some beautiful font combinations to help inspire you, check out this pin.
PS. Divi lets you upload your own fonts (without any CSS required). Ah-mazing.
RULE #6: USE HIGH-QUALITY IMAGES
Images can make or break your website.
If you want a polished & professional design, invest in high-quality stock photos that convey your message and reflect the mood or tone of your brand (or hire a photographer to take on brand photos for you—even better!).
My biggest pet peeve is seeing an itsy-bitsy thumbnail for a photo—so small that I can hardly decipher the image. With all the beautiful free & paid stock photo sites on the market, there’s no reason to let this happen.
A few key things to remember:
- Choose images that support your brand message—not just something that looks pretty
- Use a tool like TinyJPG to reduce the size of your images which helps with load times, etc.
- Make sure you size your images correctly (i.e. ensure they’re not too small/large, they’re good quality and not blurry or pixilated).
- Always use a quality headshot of yourself. If you want to look professional that means, no fish lips and no arm in that selfie shot with a big pile of laundry in the background (yea, me circa 2014, I’m talking to you!)
RULE #7: GET A CUSTOM DOMAIN
I’m sorry but nothing says amateur more than seeing yourdomain.wordpress.com typed into that browser.
I hate to sound harsh but if you’re serious about your biz, then you’ve gotta get your own custom URL. Period.
That also means getting a professional email, too…so, please…I implore you…no more email@example.com, okay?
If you decide to start with WordPress, I recommend Siteground for your web hosting provider because they’re cheap with great service.
RULE #8: USE ICONS TO CONVEY YOUR MESSAGE
Okay, this isn’t a rule per se but it’s an important point to make.
Icons support your content making it easier for your reader to grasp your message. They grab the attention of visitors and can quickly summarize what your text is about.
Most people will scan your content and not stop to read it which is why icons are great at getting your readers to stick around a little longer.
Your readers can contextualize what’s on the page quickly, plus they add a lot of visual interest making your website much more engaging.
Lauren Hooker from Elle & Company has a great Ellechat lesson on how to create your own custom icon set for your brand or website. I recommend getting on her newsletter list and checking it out.
If you want to use icons, but don’t want to create them—you can do what I did and buy an icon set from Creative Market then customize them using Adobe Illustrator (but you don’t need to customize them, I just wanted to jazz them up with my brand colours).
Another option is to use a site like FontAwesome to make your content stand out. (I haven’t tried this option but I’ve heard it’s great).
Icons can really elevate your brand making it look professional, so play around and get creative.
RULE # 9: DON’T FORGET TO SPELL CHECK
Yeesh! When I look back to earlier revisions of my website I want to curl up under a rock and hide because there were so many spelling and grammatical mistakes.
Although I’m detailed-oriented and proofread my articles 2 or 3 times before hitting publish, I’ll always go back and find little errors a week or two later.
If you want to look pro, then you’ve gotta get your spelling and grammar in tip-top shape. One or two mistakes are forgivable, but consistent errors are frustrating for your readers and can turn away potential clients.
While they’re not completely fool-proof, I’m always amazed by how many errors they actually catch.
Take a look at the Hemingway Editor App in action for this post:
The image on the left was this post before Hemingway made suggestions on how to make it better. Although I scored higher the first time, according to their website, a higher grade is tedious and confusing to read which is why my grade 8 score is best in this case. Oh! and look! I reduced this post by 300 words…you’re welcome!
Before I go, I want to remind you that following these simple web design rules will help you engage readers and attract potential clients…
…BUT, what’s most important is having an actual website.
Don’t worry about looking SO pro that you don’t create a website at all.
You don’t need to know everything right now (it takes time).
As a beginning or entrepreneur or blogger, the most important thing is to JUST START. Your website will evolve as YOU evolve.
Spend 15 minutes researching the best web platform for you, then get to work and make your website vision a reality.
PS. There’s a saying that if you launch your website and it’s perfect—then you’ve waited too long.
NOW LEAVE A COMMENT BELOW AND TELL ME: Which of these simple web design rules will make the most impact and help you look pro?
Copyright ©2019 Krista Bauer + Co