Developers with a good eye for design are rare.
It isn’t hard to spot a site that was designed by a developer. Inconsistent spacing, huge border radiuses, and jarring shadows abound. These UI’s can look like something a kid made for their first HTML/CSS project.
But your designs don’t have to suck, here are 5 quick tips to start creating better designs:
1. Consistency
The human brain perceives inconsistencies in design – even if it is only at a subconscious level. Improve your designs immediately by setting a strict set of rules for your styling. It helps to create variables for things like colors, padding, and margin to keep everything consistent between elements.
2. Replace Your Units
Stick to rem/em for padding and margin (more likely rem). Use px for borders. Use em for media queries instead of px. This will help maintain consistency and ensure that components scale appropriately with font size and screen size.
3. Typography
Stick with one font, then use rules for font sizes to create a clear visual hierarchy. When you want to use a bold weight, skip up a weight from your normal font weight for increased contrast. Mind the spacing of your text so that you aren’t left with a single word on a line of its own.
4. Color
Color is important. There are whole courses on color theory and the deeper meanings behind colors. Use a website like Coolors to help pick a palette, but remember you will need more than a handful of pretty colors to build your interface. You’ll also need a series of greys for backgrounds, text, and form controls.
5. Practice
You didn’t get good at coding after your first project, you aren’t going to be good at design after your first try. Start by learning how to rebuild sites you like. Take inspiration from existing designs found on sites like Dribbble or CodePen. Eventually you will develop a muscle for designing without the need to reference other sources.
These tips won’t instantly turn you into a professional designer, but start apply them and you will see an improvement in your interfaces. It might just be enough to keep someone from running away screaming from another ugly developer UI.