This video is part 1 of my 12 pro tips to a gorgeous website. In the next 4 videos, I’m going to share with you a total of 12 tips to make your website look like it was designed by a pro even if you have no design skills.
“I don’t have an eye for design.”
“I don’t have a creative bone in my body.”
“I can’t design to save my life.”
If you have said these words to yourself or someone else before, you’re in the right place!
Steve Jobs once said “Design is not just what it looks like and how it feels. Design is how it works.”
So basically design is based on two pillars:
Aesthetics and functionality.
The second one is pretty easy to understand. Let’s say you get an invite to a party. The invite tells you what the party is about, when and where it takes place. You get all the information needed so the invite served its purpose.
Design functionality accomplished: check!
How about the first one: aesthetics?
Let’s stick with the invite example to make a point. Invite A looks aesthetically pleasing and invite B is messy and crowded with information. Which party would you actually want to go to?
Follow simple principles and you (yes, YOU!) can create a visually pleasing design for your own website.
TIP #1 Choose two to three base colors for your design.
There are a lot of ways to choose your colors, including color scheme formulas like monochromatic or complementary.
I’d also like to point out that common sense plays a big role when choosing your colors, depending on where you are in the world and what type of message you are trying to convey.
Stick to two to three colors for your design, one or two as primary colors and one or two as secondary colors, also called accent. You can then use tints and shades to expand your palette and use it where you feel the need, like a background, lines, or other design elements. Tints are a lighter version of your base colors, mixed with white and shades are a darker version of your base colors, meaning they are mixed with black.
If you want a full blown guide on how to choose your colors, you can visit my website where I have an article focused on creating the perfect color palette for your website. I’ll provide a link to it on the video notes.
TIP #2 Font Combinations (2-3 fonts)
I read somewhere that typography on the web is hadicapped compared to the print version. And I couldn’t agree more!
The biggest reason is that we lack complete control over the appearance of type on websites. It renders dynamically and it relies on several variables like web browser, web browser settings, computer settings, etc.
Don’t feel defeated though because there are ways to make it all pretty, no matter what.
And here’s the secret: stick to two to three maximum font combinations. And if you can, use different weights of the same font.
Think about fonts for your headlines, subheadlines, body copy and a possible accent font that conveys your brand’s message. An accent font can be a handwriting or block font.
Insider’s secret: stick with left-align or center-align, avoid justifying your text. Trust me on this, typography on the web is fluid and weird things can happen with a justified text.
Another trick to keep it all pretty and pro-looking is to plan ahead. Once you have your fonts picked out, decide when and where you’ll use them, their size, line-height, letter-spacing, as all of these affect readability. So try them out first, lay them out in Canva or any other similar app where you can upload your chosen fonts. Once you have it all the way you want it, write down the numbers and stick with it.
TIP #3 Cohesive Imagery (visuals – colors, icons and shapes)
That black and white image next to a colorful image? Yeah, that’s a no-no. Even if those images are part of your portfolio (you’re a photographer, artist, etc.), I’d suggest keeping them in separate categories. Different toned images throw the eye off. Consistent tones keep the “look” harmonious and professional.
The same goes for icons. If you use icons throughout your pages, make sure they are from the same family and look cohesive. For example, if you use outline icons, make sure they have the same line weight. It’s ok to use a round or square background for some and not for others, it all depends on the placement and the background. Just make sure they visually look the same.
Take the Quiz!
If you are not yet sure what your visual brand style is, take my free quiz on sibilaribeiro.com/quiz. The result will give you a pretty good idea of where your style stands. There’s also an incredible offer for you to get a value-packed 10-page Brand Style Guide, with color palettes, font combinations, photo, fonts, patterns, and graphics collections, specifically curated for your brand style. So click on over to sibilaribeiro.com/quiz. I can’t wait to see your results!
