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!
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!
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.
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);
box-shadow with the
:hover pseudoselector can create a nice effect as well. Typically, I will simply slightly darken the shadow.
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
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
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.