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
