When I started learning web design, I kept making the same mistakes — too many fonts, too many colours, too much going on. Over time I found a set of simple rules that consistently produce clean, professional-looking websites. Here they are.
Pick Two Fonts. Maximum.
One font for headings, one for body text. That's it. Mixing three or four fonts is the fastest way to make a website look amateur. If you want variety, use weight and size — bold vs regular, large vs small — within the same font family.
My Go-To Combo
A display/slab font for headlines + a clean sans-serif for body. Bebas Neue + DM Sans is what I use on this very portfolio. Both are free on Google Fonts.
Whitespace Is Not Wasted Space
Beginners always want to fill every gap. Resist this. Whitespace is what makes content breathe. Generous padding around sections, generous line-height in paragraphs, and space between elements makes everything feel premium.
A rule I follow: whatever padding feels right, double it. Especially on mobile.
Stick to a 3-Colour Palette
Pick a background colour, a text colour, and one accent colour. That's your palette. Use the accent sparingly — only on the most important elements like CTAs, links, and highlights. When everything is highlighted, nothing is.
Dark Backgrounds Done Right
If you go dark (like this site), don't use pure black (#000000). It's too harsh. Use a very dark grey — something like #0a0a0a or #111111. And don't use pure white for body text. Use an off-white like #e8e8e8. The contrast is easier on the eyes over long reading sessions.
Mobile First, Always
More than 60% of web traffic is on mobile. Design for the small screen first, then scale up. This forces you to be intentional — only the most important things make the cut when space is limited. Then you add complexity for larger screens.
Quick Check
After building any section, open Chrome DevTools, switch to mobile view, and ask: does this still make sense? Is the text readable? Are buttons big enough to tap? If not, fix it before moving on.
Hierarchy Makes or Breaks a Layout
Every page needs a clear visual hierarchy — the eye needs to know where to look first, second, and third. Achieve this with size, weight, and colour contrast. Your H1 should be obviously the biggest thing. Your CTA button should be the most visually distinct element on the page.
Speed Is a Design Feature
A beautiful website that loads in 6 seconds is a bad website. Compress your images (use WebP format), avoid loading fonts you don't use, and keep external scripts minimal. A fast site feels good — slowness destroys trust before the user even sees your design.
Web design is a balance of aesthetics and function. Keep it simple, keep it fast, and always ask: what does the user need to do here, and am I making that as easy as possible?