Andrew Xanthos

Design Is Hard

posted 3 months ago

My experience with design can be summed up in one word: frustration.

Design is important for web developers, though. Your product is little more than an interface in the eyes of the average consumer. The reality is that users don't care about how clean your code is, or how complex the React component you wrote is. They want appealing, functional user interfaces.

You don't have to figure design principles out by yourself though. The internet is full of helpful tools and advices. Below I'll list some helpful resources, and a few specific tips. Perhaps they will be of use to you!

Resources

Adobe Color makes picking color schemes easy. Simply pick a base color (a prominent color in a company's logo, for example.) and it will generate a variety of color schemes. In general, I think it's best to keep it simple!

FontPair helps you find good Google Fonts pairings. In my opinion, few things can upgrade the look of a site more than proper font pairings -- particularly in the case of content-heavy sites.

Dribbble (yes, with 3 'b's) is a good resource for inspiration. The primary goal of the site is to be a place where designers can share their work. Some of the designs showcased on Dribbble are really impressive.

...and when all else fails, use a framework. CSS Frameworks like Tailwind CSS (less opinionated) and Bootstrap (more opinionated). These frameworks come with a variety of pre-built components and are an easy way to avoid design altogether.

If you're using React, Material-UI is really popular. It's extremely easy to integrate and use. In my opinion, Material-UI sites can look somewhat generic, but that is not always a bad thing.

Specific Tips

One of my favorite tips is to use box-shadow to create some depth. A subtle box shadow can go a long way! I will typically do something like this:

box-shadow: 0px 3px 15px rgba(0,0,0,0.2);

Using box-shadow with the :hover pseudoselector can create a nice effect as well. Typically, I will simply slightly darken the shadow.

button:hover {

box-shadow: 0px 3px 15px rgba(0,0,0,0.5);

}

Note that I'm adjusting the alpha level here, not the actual color.

It's important to style your input elements, too. Not only will this make them look nicer, but it can also lead to much better user experience.

First, be sure to add the required attribute to your input and textarea elements. This will notify users if they've forgotten to fill out a certain part of the form with no extra work on your part.

Second, remember to configure the :focus pseudoselector. This changes the appearance of the input element when a user clicks into it. I will typically add a border or a box-shadow around the focused input element.

Third, don't neglect those textarea elements. By default, they are resizable. I think this is a bad look, and allowing users to resize them can break your site's design. You can disable this by adding resize: none; to those elements. Instead, choose a reasonable size for them.

Also, keep in mind that you'll need to change the font-family of your textarea elements to better align with your site's existing design. The default font is different for every browser, but is typically an ugly, mono-spaced font.

Finally, don't forget about border-radius. Softening those default jagged edges on div, input, button, and textarea elements will make your site look significantly more modern. There's no need to overdo it, though. I will typically go with border-radius: 5px; which provides a subtle rounding of the corners.