Want to design your own website? I don’t blame you. There’s a huge amount of satisfaction in knowing you’ve built your biz with your own two hands, from idea to success. Plus, you save a lot of money. And that’s no small thing.
In fact, it’s the best reason to take the job on yourself. And depending on where you are in your biz, you might have no other choice, because forking out hundreds or thousands of dollars is a big investment. One you need to be ready for.
Since many people are NOT ready to spend that kind of money on a custom website, I decided to put together a mini-series on how to design your own website. Just because you aren’t hiring a designer to do it for you, doesn’t mean you shouldn’t have some designer tricks to get your website looking its best.
Today we’ll walk through some of the most important—and often-overlooked—design elements on your site. You’ll realize there’s an actual science to this web design stuff, and hopefully it’ll help your site come out looking twice as pro!
Design Your Own Website Tips
Color me surprised
If you’re going to design your own website, the very first thing you need to consider is your color choices. Your colors are the very first thing people subconsciously notice when visiting a website. And if you choose combinations that set people’s teeth on edge, they’re going to avoid your site like the plague. That’s obviously bad for business.
So to help you out, I’m going to put some rules in place when choosing colors:
Only use 3–5 colors. MAX.
Simple is better when it comes to website design. Sure, you might see a ton of websites with 7+ colors parading all over the place, but if they look good (and most of them don’t), they probably had a team of expert designers working on their site round the clock for 6 months straight.
Not a lot of people can combine every color in the rainbow and make it look good. So if you’re not a professional designer with years of experience, stick to the simpler palettes. In fact, the fewer colors you use, the better it’s going to look.
Choose at least one dark, one light, and one mid-value color
Contrast is a huge part of good design. Using all dark colors makes your site look too heavy and overwhelming. Likewise, all light colors makes it seem washed out and uninspiring. Having a good mix is key in drawing attention to the important stuff while still letting the eyes rest in between.
Try to find colors that match these general values, so you have a good mix:
Study your color theory
While many people have different tastes in colors and color combinations, they still apply the same general human qualities to them. And those qualities can affect a person’s mood, how they perceive something, and even whether they trust it. It’s that powerful.
For that reason, use the following chart to help guide you in choosing colors that work for your brand + website.
Red is the color of love, desire, and passion, but is also associated with blood, danger, and war. It has strong ties to strength and energy, as well.
Orange is the color of joy, sunshine and the tropics, pulling the energy from red and the happiness from yellow.
Yellow is the color of sunshine, and stands for energy, happiness, joy, and intellect.
Green represents fertility, growth, and harmony. It also stands for health and safety. Dark green is often associated with money.
Blue is the color of truth, trust, wisdom, and loyalty. It suggests depth and stability, and represents confidence, intelligence, and faith.
Purple is the color of royalty. It symbolizes nobility, power, luxury, and ambition. It also represents wisdom, dignity, independence, and creativity.
Pink is the color of unconditional love and nurturing. It also stands for fun, silliness, and youth.
Brown is a masculine color, and stands for stability, protection, and down-to-earth qualities.
White is associated with light, purity, innocence, and virginity. It suggests faith and cleanliness.
Grey is the color of compromise. It’s sometimes viewed as unemotional or detached.
Black is elegant, formal, and powerful. It stands for strength and authority, but can also convey mystery, evil, and death.
Gold is the color of prestige and high value. It signifies wealth, wisdom, and illumination.
Silver is often seen as feminine, and it’s emotional, sensitive, and mysterious. It’s also seen as cold and unfeeling in many people’s minds.
What the font?
Fonts are often overlooked on a website, as if they’re an inconsequential detail. In reality, they are incredibly important.
Fonts convey just as much emotional subtext as colors do. On top of that, if they aren’t legible, people won’t return to your site time after time. It’s up to you to make sure your fonts are both readable, and appropriate for the subject.
The thing that makes fonts so hard to choose is that their subconscious emotional meaning is hard to identify if you’re not experienced in it. While most of the generic fonts are appropriate for anything and easy to read, they’re just that—generic. That’s why so many people have moved away from using them.
In order to have a nice selection of fonts with varied looks, you need to understand how to pair them, and how to use them to their biggest benefit. So just like with the colors above, I’m going to give you some rules about choosing fonts for your website.
Only use 3 different fonts. MAX.
When you use more than three fonts on your website, things start to look cluttered, disorganized, and like you’re talking about many different subjects.
Ideally, you should have a font for body copy (all the main text of your paragraphs), headlines, and decorative needs. Each should be used for its designated purpose, and you should never cross them over.
Pairing your fonts
You want to make sure that you have the right fonts for the job. And that they’re all different enough that they don’t clash. A good basic combination to follow as a rule is one serif font, one sans-serif font, and one decorative font.
Serif fonts are those that have the little marks on the ends of the strokes. They make excellent body copy or headline text. They have been the undisputed champion in ease of readability for hundreds of years.
Sans-serif fonts are the ones that DON’T have the marks on the ends of the strokes. This paragraph is written in sans-serif. While some people argue that it’s harder on the eyes to read sans-serif, it has become the modern style to use for body copy in the last 10 years. Like serif fonts, sans-serifs work great for both body and headline copy.
For the purposes of this post and websites in general, decorative fonts are any that aren’t serif or sans-serif. These can be scripts, chunky block letters, thin handwritten fonts, brush fonts, or any other font that has special strokes or add-ons. When it comes to decoratives, it’s essential that you don’t use more than one when you design your own website. These fonts tend to clash very strongly with other decorative fonts, which will give your website a jarring appearance to anyone sensitive to the emotional subtext of fonts.
Don’t use uppercase too much
A big trend recently is using all-caps in text. I love it. I think it looks great on headlines, especially with sans-serif fonts. But I want to caution you not to use it in big blocks of copy. It’s very hard to read a long paragraph of capitalized text, so don’t do it in cases where the text is more than around two lines.
One other note on this topic: you should never use all-caps with a script font. It’s almost impossible for anyone to read, due to the special strokes usually applied to every capitalized script letter.
I’m seeing a pattern here…
Patterns are a hugely popular trend in the last couple years, and it’s easy to see why. They give your website design a special touch, adding dimension and texture to an otherwise flat palette. It helps give your users a more textile experience, something they can imagine holding in their hands.
Using a pattern can easily be overdone, so it’s important to use them minimally. One per design, or in some cases, two very simple patterns that won’t clash.
The true beauty of patterns is in their ability to relate to a design without being obvious, so don’t think you always need to use a pattern whose design is literal to your subject matter. Always choose something that adds value to your brand and website.
In cases where you can’t envision a pattern, you could consider textures to add to the background of your website sections. Textures have the same benefits as patterns, and are less distracting due to not having defined illustrative qualities.
Either way, textures and patterns can have a beautiful effect when you design your own website.
The first steps
These topics were only the first of this mini-series. In the next installments, I’ll be going over things like choosing images, designing your navigation menus, and creating moodboards to keep you on track! Are you excited? Because I am!