How to Design Your Homepage Superfast Using These Simple Tricks

First of all, I don’t want to take credit for something that is totally the work of some one else. Consider this article almost like a tribute to this awesome guy that really makes it easy to code on the web, and making it beautiful while we’re at it — his name is Kevin Powell.

I don’t know about you, but although I work as a frontend developer, I have never been educated in design and what rules to follow to make a design look good. Sure, I can implement beautiful sketches that I receive from the designer on my team, but I don’t know the guidelines they follow. I was totally in the dark on how to make a homepage, when I really wanted one — Kevin Powell to the rescue.

I wanted some simple rules to adhere to, so I could start the implementation process, the thing that I really enjoy, but without ending up with a useless product, just because I didn’t have a clue on how to design stuff. Here are the tips and videos from Kevin that really helped my productivity and got my home page up and running.

First, let’s talk colors, then fonts.

Colors

Here is the video from Kevin explaining how to choose colors.

‎1.‏‏‎ ‎Choose one color that “pops”
First of all, your page should work in black and white regardless, so you can design your site using this color scheme and postpone the decision on what colors to use until you have a solution up and running.

Then, you choose an additional color that stands out. This can either be one that you find in the pictures on your site, or one that you just really like. If you need inspirations on what colors to bring in, you can use Coolors.co to generate color schemes, just hit the button Space until you see a color that you like. Put that color on the details of your page, like on borders, titles, background, buttons, etc.

‎2.‏‏‎ If you need variation — use the shades
It is not really necessary to bring in more colors, you already have a perfectly fine color palette going right now. Remember — you already have black and white in you color palette, making it three in total. Including additional colors will only increase the complexity of your design.

However, if you want to play around with your site, you can try to bring different shades of the same color into your design. With shades, I mean variations of the same color. These are the easiest additional colors to include without taking the wrong steps. You can use mycolor.space to generate palettes from the color you decided on in the first step, among them the “Shades” palette.

This is the “Shades” palette you get when entering the color #845EC2 into mycolor.space.

You can for example put the lightest color of the shades on things you want to get even more attention and the darkest variation on elements that are already black. This requires some experimentation — try adding the different colors on different elements and find something you like. And remember — always check that the color contrast is still intact, for accessibility reasons.

Two examples on how to use the shades given by Kevin Powell in this video: He put the darker shade on the labels shown to the left (to make the design more interesting), and the lighter shade on the background of the “Sign up”-button (to give it more attention).

‎3.‏‏‎ If you need to make it even more interesting — bring in the complimentary color
Again, this is not necessary, but if you want to take your design to the next level, try take the complementary color to the one you are already using into your design. You can find it by using Adobe’s color wheel, then choose “complementary” as your color harmony rule to find it. You will find that some of the generated palettes on mycolor.space already have it included.

Same applies here as for the shades — experiment with what works and not. You might even have to experiment with different shades of the complementary color as well to find something that works. Put the color on elements you want to give a litte bit of interest, or use it to separate things on your site, etc. Test, then evaluate.

Fonts

Here is the video from Kevin explaining the two simple tricks to pick fonts.

‎1.‏‏‎ ‎Pick a font with lots of styles
Go to font.google.com, and just choose one of the most popular ones. It is a reason why they are one of the most popular — it is because they work. These fonts very often include a lot of styles, meaning they have a subset of the font weights 100- 900 included, combined with being italic or bold, included.

Give all the text on your site this font, then experiment with it. Give some of the text elements the bold version of the font, others the italic, to achieve the effect that you want. This effect could be that you want something to get attention (use the bold), or to create hierarchy or separation between elements by mixing things up.

Choose a font with many styles, this property is displayed when searching for a font in fonts.google.com.
You can even specify the number of styles you want on fonts.google.com when searching for a font.

‎2.‏‏‎ Find a second font that “pops”
You should not start mixing fonts if you really struggle with design, you should only add another if you start feeling really comfortable working with the one you already have on your page.

What you really want to avoid, is bringing in a font that is too similar to the one you already have on your page. This will leave the user confused without really knowing the cause — there is just something “off” about your site, and that is because there is a slight difference between the elements, but it is too small to point out.

For this reason, we are looking for a font that stands out and is much different from the one you already have on your page. If you are already using a sans serif font on the body text on your site, you should avoid using another sans serif font. The most classic combination is using a serif font together with a sans serif font. If you want even easier fonts to mix, you can choose a “display” or “handwriting” font instead..

Some examples of display or handwriting fonts and how to search for them using Google Fonts.

Display and handwriting fonts usually stand out a lot and come with a lot of personality (if you really want to delve into how fonts can influence the reader with their different “personalities”, the book “Why Fonts Matter” is a great read).

It is ok for these type of fonts to not include many styles, and they often have just one. This is because we do not have the need to mix it up even further as it is so distinct in the first place. Put this type of font on headings and other elements you want to accentuate, and by that — I hope your page is soon good to go :)

The order of this was arbitrary, whether you would do your colors first or your fonts, I don’t know. I know of developers who likes to do their typography first, meaning I guess the colors would come second. Either way, both colors and fonts are a tool of creating structure and separation on your site. If you have some input on this matter — I would love to get to know them.

P.S. If you want to enhance your design game even further, design your site in advance using a design tool like Figma (or some other free software you can find). It will save you some time, investigating what combinations work and not, instead of implementing it in code, ending up coding things you regardless will get rid of in the end.

I am a software developer who also likes to write. This plattform is mostly used to document my process of learning. spinnvild.web.app