February 1st, 2022

Simple and Quick Design Tricks for Developers to Improve Your Websites


Unlike development, design is much more subjective about what “works” and what doesn’t. I’ve found that in my years of client and project work, design is the area that receives the vast majority of feedback. Very few clients have ever given a damn what architecture or framework I decide to use, but everyone has opinions on whitespace.

Most people eat with their eyes, and the quality of how a product looks (unfortunately) directly influences how an onlooker will judge your product. It doesn’t matter if you have the slickest deployment methods, the most polished components, or an insanely efficient database interface, if your product looks ugly, people have a tendency to assume it goes bone deep.

Let’s also not forget that good design makes it easier for your users to use your product. In this guide, allow me to provide some very simple, but effective, web design tricks to help quickly improve almost any web page. These are simple, rudimentary principles that I use with most of the websites I design and build. Individually they’re small, but together they add up to a product who’s usability and appearance is much easier to use and more appealing.


Typography

Fonts

Typography is probably one of the most impactful design choices you can make. Choosing the right font (or font pairings) it a little outside the scope of this post. However, a good site to help with discovering and picking fonts is TypeWolf. Plus you can’t go wrong with Google Fonts. A few of my favorites are Open Sans, Quicksand, Crimson Pro, and Lato.

One suggestion I’ll offer when picking a font is choose one with multiple font weights. Some fonts I’ve worked with just have a single weight, and it can make designing certain elements and font sizes tricky.

Font Rendering

Once you’ve picked a font or two you like, there are a few nice CSS rules you can implement to help improve how they render, especially on higher pixel-dense screens, such as Apple’s Retina displays.

This is a great little addition I add to every site I make. It smooths out how the font is rendered, making them appear crisper and improves the font weight’s visual accuracy. It’s most noticeable for thinner fonts.

style.css
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Click here to disable font-smoothing. This works best on Safari and Chrome browsers, as Firefox only will re-render this paragraph. Opening your Inspect window and disabling/enabling the CSS to see the difference will ensure the whole page is affected.

Golden Ratio

Another very helpful trick with typography is to ensure spacing follows the Golden Ratio. In short, the Golden Ratio is a method to ensure your content, specifically copy, is spaced properly. I find it’s a useful guide to ensure your line-heights and spacing between paragraphs are at a visually-pleasing place (i.e. easy to read).

The general rule I follow for line-height is to take the font size and multiply by 1.618 (the Golden Ratio), rounding up to the next whole number. This isn’t a hard and fast rule, but gets me in the general ballpark and then I use my own discretion to tweak as I feel needed.

Sometimes I find that if the font size and line-height are both even or both odd, I’ll bump up the line-height by 1. It’s truly just personal preference (hey, that’s design!)

golden_ratio.js
const GOLDEN_RATIO = 1.618;
const FONT_SIZE = 16;

let lineHeight = Math.ceil(FONT_SIZE * GOLDEN_RATIO); // lineHeight result: 26

// Optional step I sometimes take
if (FONT_SIZE % 2 == lineHeight % 2) lineHeight += 1; // lineHeight result: 27

Here is a helpful calculator for figuring out the Golden Ratio of not just line-heights, but a number of other useful typography items (size, widths, etc.)

Sizing

One final thought on typography is don’t let your copy stretch too wide. My general rule is keep the characters per line at or under 90 characters. There are a number of resources online if you want to read more.

Surprisingly, I find that the US Government’s Web Design System is actually a very helpful resource, not just with sizing, but with many other typography recommendations. It’s worth a read, especially if you’re a US taxpayer.


Buttons

Links work great, but very often on website I find I’d like a nice big button for your visitors to click on. These are some simple tricks I use to style buttons.

To start, let’s begin with a simple, default button:

Feel free to click it, but don’t be surprised when nothing happens. It’s truly just a button, without any additional functionality:

button.html
<button>Click me</button>

Now from a functional perspective, that button is great. But perhaps you want to sprinkle some magic pixels over it to help it better conform with the rest of your site’s design or draw more attention to it. Here are a few little tricks to use at your discretion.

Background

First, let’s style the button to remove the default background and add some padding. Nothing too crazy, but some simple CSS rules:

button.css
button {
    background-color: #1c7bff; // New color
    color: #fff; // Make sure the button label has better contrast
    border: none; // Remove the default <button> border
    padding: 12px 21px; // Add some padding (hey, the Golden Ratio again!)
}

Which now makes the button look like this:

Hover states

So the button is looking better, but when you mouse over it, there’s no feedback. Sure, right now it says “Click me”, but if it said something let obvious to what the user should do, there’s a chance one could mouse over and not even realize it’s a button. so let’s add some simple feedback to show that this element is reactive.

button_2.css
button {
    /* Previous CSS snipped for readability */

    cursor: pointer; // Change the cursor when we hover over the button
}

button:hover, button:focus {
    background-color: #0e3d7f ;
}

Okay looking pretty basic. Better, but basic. Let’s really spice things up.

Try UPPERCASE and letter-spacing

Two quick methods to help improve a button’s label is through making it uppercase and space some of the letters apart. I use this trick a lot to quickly make a button look a little more polished.

button_3.css
button {
    /* Previous CSS snipped for readability */

    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700; // Set font weight to something heavier
    font-size: 0.85rem; // Shrink the font a little
}

Final flourish

And finally, some other minor tweaks to improve the button style. Namely, shrink the font a little, adjust the padding (the line-height required some accommodating), and add some rounded corners. I also added a transition for the hover and active (clicked) states.

button_4.css
button {
    /* Previous CSS snipped for readability */

    border-radius: 6px;
    transition: all 0.12s ease; // Enable animations and specify speed
}

button:hover {
    /* Previous CSS snipped for readability */

    transform: translateY(-1px); // Add some minor animation
    box-shadow: 0 4px 11px rgba(0, 60, 132, 0.35);
}

/* Feedback when clicked */
button:active {
    background-color: #00357f;
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 60, 132, 0.35);
}

And we’re done! For contrast, this is the default button styling we started with:

Here is the final CSS:

button_final.css
button {
    background-color: #1c7bff;
    color: #fff;
    border: none;
    padding: 12px 21px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: bold;
    border-radius: 6px;
    transition: all 0.12s ease;
    font-size: 0.85rem;
}

button:hover {
    background-color: #0e3d7f;
    transform: translateY(-1px);
    box-shadow: 0 4px 11px rgba(0, 60, 132, 0.35);
}

button:active {
    background-color: #00357f;
    transform: translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 60, 132, 0.35);
}

Of course, feel free to play with any of the above tricks depending on what you believe your style calls for.

One last thing I didn’t mention in the above code but is important to style is the :focus button state. That’s an important thing to accommodate in the button lifecycle, particularly for those who navigate via their keyboards. Most of the time they’re just variations on the :hover styling.

Screen Readers

A well designed product is ultimately easy for the user to use. A big part of that is ensuring web elements contain certain accommodations for screen readers. Although outside the scope of what I want this blog post to cover, they're important to remember as well. Here is a good resource to learn more.


Images and Icons

Beyond just copy and buttons, there’s a good chance you’ll include images or icons in your site. Here are a few tricks to keep them looking their best.

Vectors where possible

When you can, try to use vector formats, such as SVGs. Vector formats don’t work for complex images (like ones you would take with a camera), but for simple logos and icons, they will ensure they look crisp at any size on any resolution screen. The alternative term for non-vector images is called raster images. Formats such as PNG and JPG are raster images.

PNGs vs JPGs

On the surface, PNGs and JPGs seemingly produce the same product (the exception being PNGs support transparency). However, under the hood is a different story.

PNGs are best for simple images, like shapes with consistent colors. Once you start getting more complex the file size starts to balloon. That’s where JPGs excel.

Also don’t forget to compress your images!

WebP as well

If you do need transparency for complex images, explore the WebP format. It’s capable of producing complex images (including transparency) with file sizes comparable to JPGs. You can even enable fallback options for browsers who don’t support WebP yet. Although it’s pretty well supported at this point.

webp_example.html
<picture>
    <source srcset="./image.webp" type="image/webp">
    <img src="./image.png" alt="">
</picture>

Conclusion

Above I’ve explained a few simple tricks to help your web designs. Of course, design is very subjective, every design requires it’s own specific details, and everyone has different opinions. But my hope is that by providing some basic tenants of good design, you’ll have more confidence in your own design skills. Don’t be afraid to experiment and try something out. Try stuff out. Dissect other websites you enjoy to see what tricks they used. And overall be confident in your choices.

I’ll leave you with a message from Ira Glass that helped me a lot re-frame how I think about my own skills and tastes within design (and arguably any discipline I try my hand at):

Happy design! 🎨