UI Design Tips for Non-Designers
Introduction
You are a JavaScript wizard who knows the ins and outs of Progressive websites, you can build applications that perform amazingly well. For some reason you have to handle the UI of your application/website yourself. Maybe you are working on a small project all by yourself.
You are set out with good technical knowledge about HTML and CSS, with which you can spit out the coding for screen after screen, effortlessly as your UI designer hands it out to you. But when you tried to design a page yourself, it didn’t stand out as much as you expected. What is wrong, you may wonder.
I was in a similar position few years ago, when I started to explore the very basics of UI design. No, I am not an expert when it comes to UI Design, but I don’t think you need to be a pro to pull of something decent looking.
Here are top mistakes that I have observed people in my space make and some tips to take your websites/apps from looking mediocre to something more than decent, for developers trying to do UI.
1. Consistency is key
This is the most common problem in my observations. We want to have our UI look dynamic. But that doesn’t mean we are supposed to have an entirely different font, different color, different padding and margin for each and every element. Things of the same level of importance, must look similar.
One suggestion from me is to use something similar to helper classes found in Bootstrap framework. For example, you have margins from m-0 (no margin), m-1, all through m-5. This way you have only a discrete set of values to work with, which in turn will help you create consistent UIs.
Consistency should also be applied at a macro level i.e., across multiple pages in a website, or multiple screens within a same app.
2. Maintain an hierarchy
The first tips leads seamlessly into this one. Your placement of text and the size of them should indicate what is known as an “hierarchy”. It is nothing but how a document is organized.
Take a card for example, it has a title, which is the most important, some descriptive text and some action buttons. These are the ways in which you can signify something is more important or less:
- Changing the font weight
- Lighter shade of black for less importance
- Font size
When it comes to buttons, not all buttons are equally important. Use a background for the primary action button, just an outline or sometimes no outline for secondary action.
3. Negative spacing
Space between elements that is not used is called as negative space. Most often, you need more space between elements than you initially think. Be generous with paddings and margins. Lack of sufficient space may make your website look dense and something from a telephone directory rather than a modern website. Give your elements some space to breath. Neat and consistent negative space is what makes a website look amazing.
4. Text
When it comes to text, there are certain thumb rules I follow:
- For bulk texts, go for a line height of more than just one. 1.6 line height looks amazing for long paragraphs.
- When a piece of text is in all caps, add some letter spacing (space between each letter).
- Don’t use centered text unless absolutely necessary. Don’t justify text.
- Pure black text on a pure white background looks too harsh, reduce opacity of the text a tiny bit to make it comfortable.
- For vertical alignment, try aligning to baseline than center.
5. Box Shadows
Nailing the perfect box shadow is an art in itself, but it’s not very difficult.
- Don’t forget to add some offset. We wan’t to have the impression of a light source, but the light source doesn’t fall directly on top of the object. Add an offset of 2–4 px along y axis, and 1–2 px along x axis.
- Increase the blur sufficiently.
- Reduce the opacity to around 15–25%. We wan’t the box shadow to be present, but not visible.
- For elements that are colorful, it helps to add a box shadow that is a shade of the same color, not simply gray.
- Change the blur according to how significant/how elevated the object is. More blur => high elevation
- Don’t nest cards inside each other.
6. Colors
Restrict the number of colors you use. Most websites need a maximum of 3 colors:
- A brand color or the primary color
- An accent color for buttons, and other interactive elements
- Text color
Don’t overdo colors. Decide on a palette before starting to take up a design. Use helper classes (a.k.a atomic CSS) to restrict the number of colors in your design.
Also it helps to know a tiny bit of color theory, as to what are primary and secondary colors, and what are complementary colors. Using a color palette tool such as coolors.co helps a lot.
Some colors have a standard meaning, for example red for error/danger, green for success, orange for warning. Don’t replace them with anything else.
Gradients are cool, but only if they are done right. Again, don’t overuse gradients. Use once in a navigation bar or a background.
7. Fonts
Restrict the number of fonts you use. You probably don’t need more than 2 fonts. Use one for headings and the other one for the rest of the text. fonts.google.com is an awesome resource with lot of awesome open and free to use fonts.
Use font’s based on context. Choose a font based on the overall vibe of the page/application, whether it is funky, professional, playful, classic, etc.
8. Use known layouts
There is no need to reinvent the wheel. Of course, every website is unique, but there are some proven and common patterns that every user will look for in the UI. Things like a top level navigation, side drawer, bottom navigation, a dashboard type layout etc, are popular and will make the user feel at home and helps them get along easily. Experiment in this regard too much and the user will immediately be thrown away.
Take a look at common UI patterns. Find out when and why they are used, and implement them accordingly based on your requirement. For example, all e-commerce platforms have a not-to-different approach when it comes to listing search results. You have a list/grid as the main element, a sidebar where you can filter things and sort options. Users expect to see a similar layout in whatever e-commerce platform they use.
9. Use subtle animation
You have no need to use comprehensive animation libraries to create movie-grade transitions between pages, but having very subtle animations created effortlessly too will help a lot. Something as simple as setting some transition-delay value to change the box shadow when the user clicks on a button will be a great addition to make the page look more lively.
As with everything, don’t overuse animations. Non user initiated, always moving text and animations are things of the past, and also a bad blow to accessibility.
10. Check contrast
Good contrast is very important, both for aesthetics and accessiblity point of view. It boils down to color theory, but in general, don’t use a dark text in an already dark background or vice versa.
On a similar note, always design and develop with accessibility in mind. Developing apps that are accessible is not just a good thing, but a mandatory one.
11. Images
Plain rectangular images are boring. Make them intersting using any of the following techniques:
- Try to implement it as a hero image, occupying the full width of the page
- Add rounded corners and/or box shadow
- Make them into a card
- Use transparent images
12. Icons
Icons should be consistent. If you are using icon packs, make sure all the icons you choose for a section belong to the same family. For example, mixing filled icons with outlined icons won’t look good. Same applies for icons that have a different stroke width.
Don’t use icons that are too complicated. Keep them simple. Icons are supposed to go in a really small place, so make sure that all the icon’s details are clearly visible.
Lables are not always required with icons. Some icons have a standard meaning and the user probably expects a particular action on clicking a particular icon.
13. Use accents
One trick I use often is to use a one sided thick border, which will greatly enhance the element and make it look interesting. It helps to provide accent to the particular element.
14. Reduce number of borders
Don’t use borders after each and every element in a list. Sufficient spacing would be much better than a solid line. However, you can use borders to group list items into categories, which would otherwise not be possible.
15. Get Inspired!
Head over to dribbble.com or any similar website. Look for something similar to what you have in your mind. Observe, look closely. Take notes. Don’t worry, it is nothing different than us going through StackOverflow for code inspirations. Just don’t rip something off. Get inspired, and implement your solution.
Conclusion
The general theme of this article would be “less is more,” and it is very true when it comes to UI design. Hope you found this mini guide useful. Thanks for hanging out!
