Home » Web Dev » Please, Don’t Improvise

About Yegor Bugayenko

Yegor Bugayenko
Yegor Bugayenko is an Oracle certified Java architect, CEO of Zerocracy, author of Elegant Objects book series about object-oriented programing, lead architect and founder of Cactoos, Takes, Rultor and Jcabi, and a big fan of test automation.

Please, Don’t Improvise

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.

1
Big Eyes (2014) by Tim Burton

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.

Published on Web Code Geeks with permission by Yegor Bugayenko, partner at our WCG program. See the original article here: Please, Don’t Improvise

Opinions expressed by Web Code Geeks contributors are their own.

(0 rating, 0 votes)
You need to be a registered member to rate this.
1 Comment Views Tweet it!
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
I agree to the Terms and Privacy Policy

1
Leave a Reply

avatar
1 Comment threads
0 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Gilles Migliori Recent comment authors

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
newest oldest most voted
Notify of
Gilles Migliori
Member
Gilles Migliori

Hello, Thank you for sharing your experience. I would just like to come back to your way of classifying people into categories, namely Left-brained / Creative. If I understood correctly, would the developers be unable to be creative? However, as a developer myself, I have the feeling that I must be imaginative & creative at all times to find the most appropriate solutions to situations of endless diversity. We agree, I’m not a web designer, I don’t have a pencil stroke, and when necessary I use professional designers. On the other hand, I develop my own projects alone, for example… Read more »