UI design from a programmer's perspective

I’ve done some designing in my life, you know? 😉 First some 3D art, modeling, and sculpture, then vector graphics, logo design, etc. I’ve always known what is visually appealing to me and always tried to achieve the same level as other professionals in this brand. I knew I had taste of my own (you can have a glimpse of that from the design of this blog), but I hadn’t got the right skill. I always wanted my designs to be better. My private demands were never satisfied. I just never settled. And then, programming came in…

Learning how to code was a pleasing process. My previous experiences with various designing and other kinds of software were definitely helpful. I learned quickly and finally feel like I’ve found my place. Knowing how to code opened a vast world of possibilities (even if it was just JS as some might say 🤨) to finally create things I’ve always wanted. I wasn’t limited by the provided software and tools. I was able to create anything from scratch. Programming is an art, it’s a state of mind, as some might say. Yet, as a kind-of freelancing web developer, and a guy that wants to make everything on his own, I was deemed to have to design something yet again…

The visual part

As for the visual part of web development - HTML & CSS, I must admit - I didn’t really gave them much attention. I focused on learning JS, leaving HTML and CSS a little behind. Sure I finally studied them as well, but still, I still don’t feel very comfortable using them. I easily operated with their features and syntaxes, but not to the level I’d like. I bet as a programmer of any language for that matter, you definitely have had this “WOW” effect ✨, when finishing your masterpiece code. It’s not important if others shared your feeling or not - the most important thing is that something that you’ve created, made you happy. Because, that’s why people are creating anything in the first place, isn’t it? And, while I had the same feeling at least a couple of times with JS (some immediately dimmed 🤨), I can’t say the same about HTML and CSS. There was always something not ideal - wrong alignment, placement, colors, sizing, etc. I just couldn’t make something that I would be truly pleased with…

Let’s speed up a little bit to the more recent times. Right now, when I’m creating my next, big OSS project. And, guess what - it requires me to design some UI components! Never settled, aren’t I? UI design - something that I know may catch me in a never-ending loop of the constant demand for better and better stuff has come to me. Is there a solution to such a problem? There’s definitely one for sure - let it go. 😅 But, let’s be more creative (sarcasm), and go with the more complex solution - let others show you the way.

Design system

In UI design, the thing we’re looking for is called design system, or, a simpler name - style guides. Just as the name implies, in its basic form it’s a set of rules, specs and other stuff that simply tell you what to do. They serve as a reference point for others to implement and use them. If you’ve ever done some web development with latest frameworks and libraries, or simply like Android, there’s a really, really big chance that you’ve heard of Google’s Material Design (MD) - it’s very hot lately!  And, yup, it’s one of the dozens of design systems out there. It became widely popular from the time of its introduction with Android Lollipop and expanded to other mobile devices and Google products, with its sleek and eye-pleasing visuals, finally coming to concur the web. Now, almost all top component libraries for different UI libraries and frameworks, are based on Material Design, or at least inspired by it in bigger or smaller extent.

But, let’s not dig any further and get back to the point. I needed to create kind-of my own set of UI components. I think it’s only a result of logical thinking 🤔, that I’ve turned to MD. In the past, when making some nice websites, I often used it with different libraries (Vuetify for Vue and Material-UI for React) and built some quite good-looking websites. The catch was that they weren’t really, you know - awesome. Maybe only some. The rest was based on a standard template of mine - toolbar, drawer, landing page and that’s all. Sure they looked great, but they didn’t really satisfy me.

Abstraction

So, I choose MD, go to official Google’s documentation for this awesomeness, and I start reading… or rather jumping all over it. I was looking at some components, general guidelines, and other different things, without much order. From my first-impressions look, I determined that these docs are really complete, well-written and have numeric specs for different components - just the right thing for me. And then I started reading it… like for real. And… I guess you know what happened next. I was reading and reading. About things I should/shouldn’t do, how this abstract environment functions, shadows, metrics, and - finally - components. The number of abstractions, information, and schematics just crushed on me. I realize that there’s much, much more to MD than just strict, numeric specs that I wanted. So, after a few tries and errors, I moved along, to search for a better solution.

Before continuing the story, let’s analyze what the facts above mean about me as a programmer and wannabe-designer. First, I wanted super-clear specs that just guide me like a child through a crowded street named design. I just wanted everything to be like in the programming world - simple and clear. It’s not like I said that programmers are limited to purely logical thinking, like many people outside the industry like to think. In fact, it’s totally opposite! They’re very creative and the art they create - the code - is a masterpiece on its own. Programmers continuously strive to push their creation further, with newer architectures, tools, principles and more! ⚡ - just like visuals in the UI design department, constantly getting better and better (with some drawbacks from time to time). It’s just that this code-art is a little different than most of works-of-art out there. Its main goals are to be clear, readable, and do as much as possible in the best, most compact way. Well-written code should feel like a good, scientific book to read. And me wanting to embrace the same principles in the UI design, was just a big mistake.

The UI design is different from code. It’s created to impress the end-user, not other programmers. It’s meant to be visually pleasing 🤗, outstanding, intuitive and express one’s brand in the best way possible. That’s why I really admire people that create these incredible designs (programmers included) because they are really good at what they’re doing. And, it’s even more impressive when you realize that it’s not that easy task. You need to have taste, knowledge to use the right tools, expressiveness needed to transform your ideas into real things, and so on. Maybe I’m over-saturating a bit, (or only want to make myself feel a little better 😅) but programming is kind-of the same. Sure, almost everyone can learn how to code - only some dose of logical thinking is required. But, it’s when you enter the more complex level, where things start to complicate. Here, you need to understand the real potential of programming, and how it really works. Just like designing - programming is an abstract activity too! The layer above layer, a transition from machine code and assembler, up to high-level languages and different concepts used in software architecture - that’s what makes programming what it truly is. Programming is an abstraction.

So, I wanted clear specs, didn’t find them with MD, so I moved on! I really dreamed of a design system that was really only open source documentation with clear, detailed, numeric specs, ready to be implemented by anyone who would like to do that (in this case - me). Yeah, a pipe dream… First, almost all design systems have their own implementations, usually in React. Surely that’s nothing bad! I totally agree that the design system needs to have its own, official implementation, so I can live with that (even if it means reinventing the wheel 😕). Then, some style guides were kind-of open but also closed at the same time. They provided code samples for use in a real app but didn’t provide the components themselves, effectively making me wonder if I was even legally allowed to copy their design. As I didn’t want to dig in too much, I didn’t really consider any of these options. And finally, all the systems that I’ve found had some different rules and abstract guidelines of their own. As I said, I wasn’t fully ready to comprehend all these concepts, so such systems weren’t the right option for me too. Which, as you may guess already, left me with no further options.

Weird idea

I lost a lot of time and energy searching through all those style guides. But, did I? Along the way, I’ve found some great collections of different design systems, resources and just some really inspiring stuff. In fact, I’ve seen designs so pleasing to the eye, that the inner designer within me got really hyped. Even to the level, where I… decided to make components of my own.

Now, such decision after all I’ve gone through before seems pretty… bad and confusing at its best. But, there’s a difference between me now and then that you might haven’t noticed throughout this story. At this point in time, I have a real picture of what I want to create. 🖼 I make my designing process comparable to programming. I have a clear list of things I want to do. I want to create something that will be easily usable and accessible by both programmers and designers alike. I want this to be extremely simple and nice-looking thing that won’t require any kind of great designing skills or taste to manage. And, hopefully, I’ll be able to squeeze these bits of designer from me to create such a thing. 😅

But, beyond the precise wish-list mentioned above, I also have some new experiences. You didn’t expect that I’d make like everything from scratch, do you? I have awesome resources to base my designs upon. Great Material Design components’ dimensions specs, color ideas from different creations of other great people out there, and interactive features from the rest of the design systems that really impressed me. It’s good to be inspired. It’s good cause it makes you create things that are even better! 🙌

Just a thought

These are just some thoughts of mine - a logical thinker and a programmer, who has some aspirations to also be a great designer. I personally think that constantly wanting to become an even better version of yourself is a good thing. Programming isn’t as far apart from designing as you might think. You just need to… change your point of view a little bit. I think that a little dose of inspiration might help anyone to develop their own design taste and, in result, become at least a little better at design. Maybe I’m not talking about some super-high-level masterpieces or something, but being at least somewhat experienced at design will certainly help you be a better web developer… and vice-versa. Also, design is just fun!

Anyway, only time will tell what the outcome of my logic-driven design attempt will be. Hopefully, this will be something good. For now, I hope you enjoyed the story. Such writings make this and other blogs unique (maybe even inspiring), as a form of author’s personal reflections. 😉 Let me know what do you think of this article below in the comments or with a quick reaction. Follow me on Twitter, my Facebook page and sign up for the newsletter below to stay up-to-date with the latest content. Great thanks for reading this story and I hope you have a great day! ✌