I’ve Made Over $2,000,000 Designing Websites, Here Are My Top 5 Tips

What's up Product Hunt! Craig Barber here, Senior Product Designer. I’ve generated over $2,000,000 in my career as a website designer. I’ve designed websites for some of the biggest brands in the world including PayPal, Sony, Nestle, Marks & Spencer and Samsung. In this post, I’m going to share my 5 top tips that will help you create amazing website designs. Let’s dive in! 1. Use just 3 colours When picking your colour palette I recommend using just 3 colours. One colour for your background. One colour for your typography. And one colour for your accents. By accents, I mean things like buttons. A grand total of three colours! Check out any popular well-designed websites. Most of them predominantly use just 3 main colours. You can use variations of your 3 colours. For example, when I use black I do use some greys. But rarely do I ever introduce more than 3 completely different colours into the design. There will be times when you can’t pick your own colours. For example when you have brand colours to work with. Great! Just use black, white and a single brand colour for your highlights. 2. Use just one font When choosing fonts for your website design I recommend using just one classic typeface. Your font family must include a number of different weights. For example Heavy, Bold, Medium and Light. To achieve variation and hierarchy in your designs you can change up the size and weight of your font. Super important! You must pick a high-quality font. It must read well in long copy. For example your blog posts. I recommend using classic fonts like Helvetica and Poppins. “But my client uses brand font XYZ and we must use it” If you must use a brand font. Use it just for the main headers. Then use your single chosen font for the rest of your website designs. Done! 3. Make everything modular The average website design is going to be viewed on dozens of different devices. Your design must be able to flex and stack and still look good. This means using a modular design. By modular design, I mean every element you create should be self-contained. Whenever you’re laying out your page elements, always be working with independent, separate modules. How your design is going to flex vertically and horizontally. And how it’s going to stack on top of each other. Don’t use intricate design elements that span across the whole page. They may look fantastic on desktop but often fail completely on mobile. Design using modules for today’s internet. 4. Use high-quality images I like to compare website design to cooking. To create amazing food, you must use amazing ingredients. The same applies to website design. Don’t cheap out on imagery! Make sure you use high-quality photography, illustration or video in your designs. I’ve seen amazing websites let down by crappy stock imagery. You don’t have to spend a fortune either. There are some fantastic free stock photography sites out there. It’s about spending the necessary amount of time and money to find those perfect images. Do it. It’s worth it. 5. Use your main colour in your imagery This is a subtle one. But it works wonders. When choosing photography or illustrations for your designs incorporate one of your main colours into your imagery. For example, if one of your colours is pink, introduce that exact same colour pink into your imagery. You may have to edit your images to incorporate your main colour into them. And ideally, it should be the exact same colour. Or as close as possible. When you do this you’ll find your design has a wonderful consistent feel to it. Wrapping up I know some of these frameworks are restrictive. That’s the beauty of them! Restrictions encourage creativity. To this day I still employ all of these frameworks when I’m designing a website. Give them a shot. Especially if you’re just starting out. Stick to them you’ll be well on your way to creating amazing designs. PS: I’m creating a brand new course for digital product designers. It’s launching soon. Check it out at: https://cursorup.com