garytalmes.com

Design Tips for Non-Designers

I am not a designer by trade, nor do I possess any outstanding innate design abilities. In these respects I am very much like tens of thousands of other developers out there. But I do have a decent design sense: I know what works and what doesn't. Much of this knowledge has come from many years of reading, experimenting, and building.

If you're not a front-end-focused person, you may feel that design doesn't matter at all. But it's always a good idea to be able to produce work that is clean, attractive, and helps to engage the user.

So here are some basic design tips I've tried to follow:

Whitespace is King

Nothing spoils the appearance of a site more than when the elements are bunched up. Liberal use of white space -- especially around important elements -- makes everything easier on the eyes and allows the layout to "breathe". Margin and padding are your friend!

Go Easy on the Fonts

It's ridiculously easy populate with your site with lots of different fonts. But nothing screams "amateur" as much as having too many different fonts. In general, most sites do just fine with one good serif font, and one good sans-serif font. Serif fonts look better at larger sizes, and are best for headlines. Sans-serif fonts render very well at smaller sizes, and are best for body copy.

Adopt a Color Palette

I have a terrible sense of color, so I use online tools to help me come up with a nice color scheme for my site. A few that I've used are: Color Hunt, Paletton, and coolors. Pick a good color scheme, add in a few nice gray-tones, and you should be all set. And don't feel like you need to use all colors equally. Ideally you would have one or two dominant colors, and the others would be used for accents and special needs.

Use a Grid System

A grid system is a great, easy way to enforce some natural structure on your design, by making sure elements line up in an attractive way. Just about every CSS framework has its own grid system, or you can roll your own pretty easily with CSS Grid.

Go Easy on Special Effects

Animation and other special effects are so much fun to implement, but use them sparingly. They should provide gentle accents to specific parts of the page, without distracting the user.

Think About Your User

Most people these days spend a fair amount of their work day in front of a computer or phone, and then even more in the evenings. This takes a toll on the eyes and is just fatiguing in general. So make sure people can find what they need on your site quickly and effectively, and that your content is easy to read and work with.

That's it for now, but keep checking back for more design tips in future articles!

Author: Gary T Almes

I am the developer and owner of this web site. I've been working in the web development space for 35+ years and have experience in just about all phases of any development operation. I've owned my own web dev shop, been a senior level product and team manager, served as a senior developer, and I currently also teach MERN-stack web development in partnership with major universities. I'm available for occasional and regular development, management, or consulting needs.