We all know what happens when a programmer decides how a web site or a mobile app should look. It ends up looking ugly. And why is that? I don’t know exactly, but my best bet is on the left-brained nature of programmers, who mostly are rigid and logical mathematicians. UI design, to the contrary, requires creativity and intuition, which reside in the right side of our brain. Some recent studies are skeptical about that, but my personal experience tells me that you should never expect a programmer to make a user interface right. Moreover, I’m one of those programmers: No matter what I draw, it’s either black-and-white, or ugly. But I still have to design my pet projects. Here is a list of the top lessons I learned for myself, which help me survive with my left-sided brain.
Leaders. I look at the things that big and famous companies are doing. I check the websites I’m using every day to see what is “good” in modern web design: stackoverflow, github, apple, amazon, craigslist (no kidding), etc. I actually pay attention to fewer than ten websites. They make buttons flat? I make them flat. They make fonts larger? I make fonts larger. They make the background white, I make it white too. I just copy them. They know better anyway.
Frameworks. There are many of them for the web. I tend to pick the simplest one and use it. Well, I even created my own one a few years ago: Tacit, a CSS Framework Without Classes. I always try to “design” as little as possible and follow the conventions forced by the framework’s authors. If they want me to have my buttons blue, they will be blue. I don’t try to be creative but just follow the rules of the frameworks I use.
Defaults. There is always a big temptation to align the content “nicely,” centering it or placing it in some multi-column grids. I try not to do that, despite the temptation. I just don’t know how to do it right, which is why the content “flows” from the top to the bottom, element by element, aligned left. Well, unless it’s a set of tabular data. Sometimes there is also a temptation to add or remove spacing between elements, either via an extra <br/> or a margin. I don’t do this. The elements will be placed the way my framework places them by default.
Colors. Choosing the right colors is a huge problem for me—I don’t know how to do that right. I don’t know which red matches which green. That’s why I use Coolors. I just click “space” multiple times and they offer me a combination of five colors, which match each other. I find the most attractive combination and call it a day. Five colors are always enough for any web app.
Bold, Italic, Underscore, and All Caps. It’s simple—don’t use them. Never. Well, as little as possible. You definitely shouldn’t use them in order to make a visual element more visible. You’ve got fonts for that. If you want your caption to catch the eye, make the font larger. But don’t use italic, bold, or, God forbid, all caps. I use them sometimes, very rarely, but only in order to emphasize a word in a sentence.
Fonts. I try to stick to defaults, which are Serif, Sans-serif, and Monospace. If I can’t, I use Google Fonts, but very carefully. Of course, I use one font per system. Do I know which two fonts are compatible? I don’t. Do you? Don’t even try to make that decision right. Just one font and that’s it. And I always try to make them as large as possible. This seems to be a trend now, most probably because screens are getting bigger.
Images. I do everything I can to avoid them, to be honest. I always attempt to replace them with text or Unicode symbols, if necessary. When it’s absolutely necessary, I use SVG vector graphics. PNG/JPEG raster-graphics is my last resort.
Artists. I pay absolutely no attention to what modern web artists are doing. They create beautiful things, but I don’t even need to know about them. They only annoy me, because I can’t create anything similar. When someone shows me a website with new CSS tricks, I close it immediately. This is not for me. My CSS has to be as short and primitive as possible.
Compliance. W3C has a number of validators for HTML and CSS, which can tell what’s wrong with a website, statically analyzing it. This is similar to what Checkstyle does for our Java code. I rely on their recommendations, always. Sometimes they sound too strict, but they tell me what the expectations are of those who know web design way better than I do. In HTML5, for example, we are supposed to have <thead> in our <table>, or the alt attribute in all <img> elements. I always try to follow these and other rules.
Responsive. The design has to be mobile friendly. Always.
To summarize, I would suggest: don’t improvise, don’t try to be creative, don’t think that you understand what is beautiful and what’s not. You don’t. Me neither. Just be as minimalistic and traditional as possible and you will do yourself and your users a big favor.
How to make a UI look yummy? #graphicdesigning
— Yegor Bugayenko (@yegor256) May 26, 2019
