I made my first website as a school project when I was 14. The task was simple: Build a very basic site including some text, images, and a table. My general attitude towards school projects was to forget about them completely and come up with some solutions later at the last minute. But, this time, I went crazy.
Ever since my first website, I’ve always made it a priority to keep things looking good. Believe it or not, people judge things by looks. If what you make looks good, like you know what you’re doing, people are going to trust it more. It’s just things like that.
Over the years creating side projects, I focused my attention on developing my design skills rather than just perfecting my programming. You see, being an algorithm writing monstrum gets you so far. While chasing the dream of bootstrapping a profitable side project, you’ll need to do many different things. Becoming a designer is one of them. Like Cross-Fit athletes, single-founders need to be well-rounded to perform well.
A great design doesn’t necessarily have to be the one with the most dribble upvotes. This is one you didn’t notice at first. It’s a perfect balance of “your grandma can do that” and “wow, that’s great.” Design can be your competitive advantage or the nail in the coffin.
it’s not about talent
When I was little, I played a lot of Minecraft. I saw all these wonderful buildings made by people. But when I made something it looked like a box. Ugly and without any style. How do you make something cool in Minecraft, right?
So, I found a guy on YouTube and made an exact copy of what he made. A few weeks later, I had developed my own style and could build on my own. Suddenly, my creations didn’t sound like crap. Heck, I even won a building contest.
Design is a skill, and like any other skill, it can be learned.
Choosing the right tool for the job
In programming, you can use Notepad and write an app that is as good as if it were written in a full blown IDE… In the web design world, MS Paint will take over the role of Notepad, and Notepad’s Kind of, some people actually choose to design with… I hope so.
There’s almost no difference in whether you use Sublime or VS Code to write apps. Or you use React or Vue for the frontend. It’s just a matter of preference. The same goes for design tools, as each one has its own advantages and disadvantages.
I use Adobe XD. The main reason for me is that it’s cross-platform, so I’m not held hostage by the Apple ecosystem. It’s also supported by Adobe, so it’ll be here for a while. The best part for newcomers is that, as of May 2018, Adobe XD is free to use with only a few limitations (that you’re unlikely to stumble upon anyway).
adjust your mindset
The biggest challenge I faced in the world of web design was adjusting my mindset. I got used to coming up with the design as soon as I coded the website. Everything was an order. The flow was from left to right and top to bottom. The fact is that this approach makes you a worse designer.
Design tools are chaotic because they force you to design such that every element is absolutely positioned. Embrace this change. This will give you the freedom to change things quickly and make it easier to use. And this is necessary, because design is an ongoing process. It is expected that you will be changing things a lot before getting a good result.
When coding, you use HTML elements such as divs, spans and inputs and let the browser render them in some view. With design tools, you can skip the middleman and use visual elements like shapes and text directly.
I chose the 4 most used design tools so you can spend less time learning and more time designing. That way, you can start practicing as soon as possible. Below, I’ll show you how they work and how to use them.
Rectangles are the most universal shape. You will find yourself using them all the time. Think of it as a div. This is useful for all kinds of stuff from creating text inputs to containers.
Text Tool (Label)
The Text Tool, as the title suggests, allows you to create text. It’s not that simple though, because the text tool has two stages: one for single lines of text and the other for multiple paragraphs. Fortunately, learning to use them correctly is extremely easy.
The first state is a single line text container that adjusts its size based on the text size. This is similar to <span> , with the exception that it will not be wrapped unless you do a line break. The advantage of this state is that it will automatically adjust the size of the text box based on the line height and font size.