I’m a firm believer that every 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 either didn’t have a website or had a poorly designed one.
When I DIY’ed my first website, I had high 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 had conceived in my mind.
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 visually-appealing 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.
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 on this site, I follow a few basic rules to help me create a pro and visually-appealing website without being a designer.
01. Keep it simple
Simplicity is your friend when it comes to creating your own website. Less is more rings true in the design world.
As a general rule, 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 pro 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.
02. 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 you’ll want to refrain from doing that because it creates balance, harmony and readability for your visitors. You can also use it to highlight important elements (like call to actions 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 don’t ignore it.
Here’s a look at how I’ve used the concept of whitespace for a client’s opt-in design to make it easier for her readers to digest her content and create a sense of calm and balance to support the content, too.
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 easier for her audience to read.
03. Use an attractive (mobile responsive) theme or template
Here’s where I gush about why I Love Squarespace and made the switch from WordPress.
It wasn’t an easy decision for me, but I was tired of spending most of my time updating themes, learning code, and researching plugins to get my site to do what I wanted it to do.
I spent more time dealing with tech issues than writing new content and that’s, no bueno, my friend.
But here’s another reason I love Squarespace and why I think it’s the best choice for you as someone who is just getting started:
It’s an all-in-one platform with an intuitive drag-and-drop system making the process so simple and easy to use—need I say more?
Every template is mobile responsive which means it adjusts to the size of the screen you’re using.
Seriously, you can have a gorgeous website in a matter of minutes by using one of their out-of-the-box templates.
Before I move on to my next point, I want to mention that, yes, you can have a beautifully customized theme for WP—and your options are endless. My WP theme was Simple Pro from Bloom Blog Shop and I got a lot of compliments.
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.
04. 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.
05. Understand the importance of 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. Squarespace templates are already designed with beautiful and complementary typography. They do the work for you which is another great reason to start with a Squarespace website. #squarespaceforthewin
06. 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.
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 to your website.
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).
- Use a quality headshot of yourself.
07. 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 choose to design your website with Squarespace, they throw in a free domain with their plans—see their pricing here.
If you decide to start with WordPress, I recommend Siteground for your web hosting provider which also includes 1 free domain with their plans.
08. 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 uber professional, so play around and get creative.
09. Spell check
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 stupid 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. A few 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.
I really believe that your website should reflect the quality and professionalism of your products and services.
Before I go, I want to remind you that following these 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 professional that you don’t create a website at all.
You don’t need to know everything right now (it takes time).
As a beginning 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. There’s a saying that if you launch your website and it’s perfect, then you’ve waited too long.
Leave a comment and tell me…
- What’s the biggest struggle you face when trying to create your website?
- Do you have a website you’d like to share? Submit it below for feedback or a little love
- Do you have any other design tips that could help your fellow creatives launch their website like a pro? If so, leave ’em below.