You might have already read my previous article on how to create your brand visual identity on a $0 budget. In the article, I briefly mentioned some key points to take into account when you want to come up with a new logo and the overall look of your brand image online.
However, in this article, I’ll give you a step-by-step action plan on what to take into account so that your website design looks pleasing to the eye.
THE 4-STEP ACTION PLAN
STEP 1: CHOOSE COLORS
This is a key thing to take in account. A perfect color combination attracts users while a poor combination can lead to distraction.
How to pick the best colors for your website.
One of the main principles of a good design is simplicity. It’s definitely something to take into account when picking a color scheme for your website. I typically recommend not more than, in total, 6 colors that should be present in your site, although it depends. For example, shades of one color for backgrounds (e.g., lighter and darker grey) could also count as one color, but it’s wise to remember not to complicate things – the less, the better.
Pick colors for these roles:
– 1 dominant color that is mostly present throughout the site – the color you’re brand will be associated with. Typically, it shows in visual images, icons, some buttons, large headings, or some areas that need to be highlighted.
It could be that “signature” brand color of your logo, like IcebergBuilder’s yellow, or Coca-Cola’s red, or Spotify green, or you could swap it for a different main tone and leave the logo color as an accent.
– 1 accent color that will work to specifically highlight only the most important info, like important call to action buttons (buy, order now, book a consultation). I always advise that the buttons that lead to the desired action be a different color from all the other buttons, so to make them more clickable.
Your accent color could also be the one in your logo, if you want it that way, or simply an another beautiful tone that complements well the other colors in your site.
– 1-2 background color as a backdrop for text, images and content. Most importantly, make sure the text becomes readable on the background color.
Usually, it’s a light shade and/or a dark shade. Very often I opt for two colors, so I can create a rhythm of one block being dark, another white, and some have pictures in the background.
– 1-2 color for texts – even better if you use it both for headings and paragraphs.
Again, it’s typically a pretty dark shade (for readability), but sometimes you’ll have a dark background or an image background that will require a white text, then you can freely do so. Don’t do more than 2 colors for your texts so that your design looks polished.
Ok, but how to pick these colors that actually go together? My favorite free online tool Coolors lets you automatically generate 5 colors that actually go well together (it’s based on the color wheel theory of color harmony).
Simply open the online tool – coolors.co , start the online generator, and either press the spacebar to generate different color palettes, or match the colors to the HTML code of your brand dominant color.
How to find which HTML color code is in your logo? Here’s a tool for that, too: imagecolorpicker.com.
Upload your logo, pick the color that you need, and you’ll see the HTML code, marked with #. Now copy that code into one of the slots in Coolors tool, click on the little “lock” icon, and continue pressing spacebar to get colors that match your main brand color! Awesome!
There are other free tools as well that will help you automatically generate harmonious schemes, like Color Supply (https://colorsupplyyy.com/app) and Khroma (http://khroma.co/).
If choosing a color seems too much of a challenge, then better choose less than more. Sometimes, a simple palette of white, grey and black, and just one accent color works way better than a mix & match of too many colors. Also, remember to use enough spaces to avoid your website from visual clutter and mess.
STEP 2: SELECT FONTS
How to pick the best fonts for your website.
Playing with fonts is amazing, as it also defines the whole feel of your page. It’s important to take in mind that you should never use more than 3 fonts on your website. Moreover, each of these fonts should carry different levels of importance.
Pick fonts for these roles:
– 1 primary font that is the most visible one, and should be used on the headers of your website.
A suggestion: it would be wise that it matches the style of your logo if there’s text in it. In general, this is the font type that should be the most identifiable with your brand, even if it’s not the most used on your site.
– 1 secondary font that will be used in most blocks of textual content. This includes paragraphs, descriptions, blog articles, etc.
While the primary font can be catchy and original, your main goal for the secondary font is readability.
– 1 accent font (optional) – the one that you’ll use for a very specific purpose.
When it comes to websites, this is usually dedicated to calls to action (buttons, stand-out headings before the call to action). In order to attract the eyes (and clicks) of your visitors, you can choose a typeface that stands out from the rest of your pages. Or, as I like to do it, simply use the same primary/secondary font, but make it bold, or UPPERCASE, or BOLD AND UPPERCASE, which, in my opinion, works just fine.
STEP 3: USE A LOT OF SPACE
In order to avoid visual clutter, and a chaotic and messy look of your website, use plenty of the “so-called” white spaces using paddings and margins between items and sections. Essentially, you want to: use padding for spacing within an element and use margin for spacing between elements. In the Elementor web design tool, you’ll adjust them in the left section under “Advanced”.
Be sure to experiment and tweak the margin and padding settings to provide plenty of what we call – white space. You need white space so to let the design stand out and “breathe”.
Be sure to experiment and tweak the margin and padding settings to provide plenty of what we call – white space. You need white space so to let the design stand out and “breathe”. It will help set apart items within a block and in the website as a whole. For example, Mark Boulton distinguishes between two different types of white space: micro and macro.
Here you see macro white space being in pink, and micro white space in green.
Micro white space is the space found between smaller elements such as: links, lists, icons, buttons, lines of text. Think about a newspaper, the space found between the lines of copy can be described as the micro white space.
Macro is the opposite and deals with the white space between larger elements (which themselves can comprise micro white space).
So: tweak around with margin and padding settings for every block and element you add, as well as line height of paragraph text and spacing between items, and your webpage will be more pleasant to use.
But how does it look like? Inspire from these awesome examples who perfectly use white space in web design:
STEP 4: CHOOSE THE BEST VISUAL MATERIALS
How to get beautiful photos of your products/service?
I’m sure you understand, that you’re going to need great photos of your product, service, yourself and/or something that represents your business field. The first you’re going to have to provide yourself. And that shouldn’t be that difficult, because most phone cameras nowadays produce insanely beautiful photos. By the way, there are plenty of free guides out there, like this one here, that show you how to take quality product photos yourself – at home, with your phone! Definitely check it out:
https://www.volusion.com/blog/how-to-create-high-quality-product-photos-with-your-smartphone/
As to the service you’re offering, simply ask a friend to take a photo of you in your business environment.
Where to find kick-ass visual materials for free
You don’t need a Shutterstock license to access beautiful stock photos. While Shutterstock, Adobe Stock and others do provide heaps of images of specific stuff (e.g., you need to find a stock of a certain food, a very specific location etc.), I always find awesome materials for free, because I know where to look.
Free stock photos
These free stock sites – Pexels and Unsplash are the goliaths of free stock photos online, and you’ll find millions of really good, high resolution materials there.
Unsplash has been my ultimate buddy for marketing materials for years! Plus, I’ve found that I prefer
https://www.volusion.com/blog/how-to-create-high-quality-product-photos-with-your-smartphone/
As to the service you’re offering, simply ask a friend to take a photo of you in your business environment.
Where to find kick-ass visual materials for free
You don’t need a Shutterstock license to access beautiful stock photos. While Shutterstock, Adobe Stock and others do provide heaps of images of specific stuff (e.g., you need to find a stock of a certain food, a very specific location etc.), I always find awesome materials for free, because I know where to look.
Free stock photos
These free stock sites – Pexels and Unsplash are the goliaths of free stock photos online, and you’ll find millions of really good, high resolution materials there.
