Designer’s code story
A year ago, with the hype about designers’ side projects, I finally found a proper Ruby on Rails course, watched it briefly and built my first design–related pet project — uideo.net. A hand-picked collection of talks from the best design conferences. It was a month-long race from starting a course to deploying the final project on a server. After such a rapid start, I was so high on my dreams about building and launching personal projects that I thought I could produce a small, new tool every month. Fortunately, there were enough ideas in my head. I thought I could gain such great experience with such a short learning curve. But no, dreams fail, reality wins again.
Here is a year-long story about my ups and downs and what you shouldn’t do when you are a designer who learns to code or how I built Designbase.us— a visual bookmark tool.
Let’s start with an eternal question: Should a designer know how to code?
There is definitely no direct need for it. This isn’t required to obtain a ui/ux/what/ever/else/new/handy/name job position in most companies. This knowledge probably wouldn’t increase your salary. And overall, if there was a real need for designers to code, then nobody would even discuss this question, do we discuss “Do designers need to read typography books?”, no, because we know that they must. But look, learning something new is always useful. Whatever it could be: a new language, playing badminton, clay crafting. Neurons in your brain establish new connections and I believe it affects your daily life, indirectly, but it does. And then, why not to choose to learn something from a field, you face and deal with in your everyday work life? Okay, no more lyrics, what benefits have I gained from my programming knowledge:
– when you’re coding, something always goes wrong and doesn’t work and then, after solving one problem after another, you have a small dopamine spike as a reward. Really, when you’re just in the beginning phases and everything is new and doesn’t work, but when you overcome it, you feel really good again and again.
– Not all programmers implement your design correctly or you see, that some ideas, which seemed good in your layouts, look and work poorly in real life. Now you can create a design branch in a project’s git and play around with code, until you’re satisfied with the result.
– You more clearly understand how many states are layered behind every simple interaction. And why some small feature could take so much programming time to implement it. Overall, building a design component framework makes more sense now, because modern front-end frameworks go in that direction too. And the best practice in organizing a component based front-end, definitely influences my design decisions now and I like this symbiosis.
– It exercises your brain.
– And of course, you would be able to build your own projects and implement all your insane interface fantasies and only restriction there would be – your imagination and knowledge.
React struggles or why is modern front-end more complex than back-end
React is a Facebook front-end library with a few killer features such as a virtual DOM, but it’s mostly about the mindset and component structure of your project, rather than a tool which does something for you and which is now a kind of industry standard for front-end development. If you’re completely uninterested in technical details just skip this part, in advance, I will put my newbie 5 cents on the JS community and JS front-end. Okay, what happened with Meteor, which I chose to build my next project with, in detail. Meteor announced the newest release at that time would be a front-end agnostic, and suggested to use React as a replacement for their Blaze templates — basic front-end for Meteor at that time. Okay, no problem. Let’s rewrite the whole app to React. But first, you have to learn how React works, right?
Lesson #1. Choose mature technologies, don’t chase the ghost of a “promising” future
Looking back, I’m realizing how lucky I’ve been with Rails, that I started my path to code from it. Rails automates all repeated tasks and handles a lot of stuff for you. Of course, there is one giant disadvantage of this approach — you have no idea how everything works. But it just works and if considering that you don’t want to become a programmer and just want to be able to produce small personal MVP projects, it is a great choice. With the “modern” and young frameworks, you will of course get all the new features and possibilities, but you will face a lot troubles also: less ready to use packages, less answers to how to do this or that (and believe me, when you’re a beginner, you need a lot of these), less information about how to structure and build projects bigger than another to do list.
How to choose the right mature technology? At first check the amount of answers on Stackoverflow, then find someone with certain expertise in this area and ask.
And still, how was Designbase created?
I spent about half a year on rewriting my Meteor code base to the React as a front-end and Meteor with Graphql as a back-end. I went through everything: denial, anger, depression and as a result, acceptance. (An important remark should be made, that of course it wasn’t the whole half a year, I had a freelance job and I treated it as a side project. Sometimes I could spend a few days in a row on it, sometimes I could even not open the project for weeks). And the acceptance happened when I understood that the easiest and the most productive way to handle the problem with rewriting the app was to start a new project from scratch. Originally, I decided to build a small design tool set for myself as a designer and connect all the tools into one service (that’s actually why I called this Designbase). And I sat down to think, which small useful design tool am I missing right now and which could I produce in a short amount of time, because I was so exhausted with the past struggles, that I really wanted to get a fast result and launch something. And the answer came from my desktop. It was clogged with screenshots of websites and other inspiration pics, which I was saving there to feed my inspiration in the future. I used to use Dropmark to upload them there, but it was always unclear to me, why do I pay $1.99 for 100GB on Google Drive and an additional $4 for just saving my pictures to Dropmark? Before Dropmark, I used to use a bunch of offline tools and in the long run it seemed that I always lost my whole inspiration library altogether with each tool I used, whether I decided to switch to a new tool or I just switched to a new computer. Okay, it sounds cool to build my own inspiration storage and I could even save almost $50 a year on Dropmark
But first, here is a list of features, which I decided should be in my app:
1. It should store data in a reliable place. Data should be raw (plain pictures) and easy to pick up and transfer to another service or whatever else you want to do with it. Store the data in Dropbox, isn’t it a good solution? And as a nice addition, we have an implicit feature as an access to the images from your desktop even if it’s offline. Cool.
2. I always liked the use case, when you’re pouring a few hundred photos into your Lightroom and then you’re just holding the right arrow button down and watching how insanely fast pictures change from one to another on your screen and if one image catches your attention, you just roll back and press “B” — to add it to Quick Collection, and then you just work with the selected pictures in your Quick Collection. Isn’t it a good use case for an inspiration library?
3. And, of course, it should have a sharing option, some simple ui-customizations, and everything should be duplicated with hot keys.
And so, the weekend was spent with my head in the code and after this I had a working demo, where you could upload pics by dragging and dropping into your browser and then they were uploaded directly to your Dropbox folder and with a click on any image and holding down the arrow button, you had a super fast preview mode. Cool, what next must you do after you have a working demo? Right, post a fancy GIF with it on Facebook or Twitter to grab likes from your designer friends. Done! And then, you’re looking at your app and realize something.
Afflatus #1. The working demo of your app is just the beginning
It was like this with Uideo and then with Designbase. You create a working demo of an essential idea, and right after that, you are such a happy person because it works! But then you decide to polish it to a production ready version and you realize how much monotony is waiting for you ahead: create a decent account system, set permissions, setup emails, configure a server, set up a deploying process and a test environment, create sharing options, make some drag and drops for a dynamic ordering of stuff inside your app, then create at least some little design (and believe me, when you’re doing all the code and related work on your own, you won’t have any intentions and energy to invest it in the design. Both times, I tried to implement as little design as possible. Just right after the design had crossed the line from a completely ugly programming interface to ‘oh, it seemed like a designer touched it’ — it’s enough, because you always will have more important programming tasks and of course, you would still get comments from designers around you, kind of like, “Hey man, you’re a designer, why does this stuff look so ugly or work so poorly?”, and you’d be “ooohhhhhh, again”). I would say that all these tasks above took about 80% of the total time I had spent on my projects. Such a discovery, right? That your fun side project could have more monotony, rather than fun. But of course, the overall pleasure of the final launching outweighs all the monotonous disadvantages
Why don’t you create something new and unique?
The answer is simple. To create something new, unique and high quality, you have to have proper experience. How can you gain such experience? By building as much simple stuff as possible, of course. That’s what I’m doing. While someone’s drawing another Facebook redesign concept and gaining graphic design experience, I’m coding another simple, real project and gaining experience of launching real projects. (I guess at this point, real start-uppers think, ‘ohhh, man, it doesn’t work like this’).
And in conclusion, a few observations and tips
1. Learn the real basics of what you need to build a project. Don’t start from isolated HTML/CSS courses, you will get bored pretty soon, because it won’t give you any result close to a real project. Chose full-stack courses where as a result, you will have a working app. A lot of my design friends have tried to learn HTML/CSS on Coursera and similar resources, but most of them gave up, because it’s damn boring. Start from full-stack and when you will feel that you have a lack of knowledge in a particular topic, just google a tutorial on that question. In my opinion, you must have a result like a real project as fast as possible. Fast results will give you additional motivation to keep going. That’s why we’re here — to build real stuff, not static pages. And if you dive in a classical academic learning system where everything is placed on shelves and you learn from topic to topic, I bet you will give up. Fast real results is a fundamental for me.
2. I think it’s impossible to learn coding properly in parallel with a full time design job. I tried a few years ago and was much more optimistic about it, but reality put everything in its place. When you get home after 8–9 hours at work plus a 1–2 hour commute, firstly, you don’t have enough energy (or what the hell you’re doing at work if you have energy after that?), secondly — time. Every time when I dove into code learning, I spent 24/7 with my head in code for weeks and this seems impossible to keep with a full-time office job. It is thanks to a freelance schedule that I could take such “vacations” for such a hobby.
Do you need to go through such journey?
Of course, it depends. I’m that type of person who’s damn passionate about producing new things into this world, whether it would be a beautiful photo, video clip, pottery or whatever, I really like that feeling of where there was nothing and then you create something. If you are that type of person too, then coding would be one more very cheap instrument in your arsenal. It doesn’t require any expensive tools, just your computer and spare time.
I still have plenty of ideas in my head and one global idea about mixing machine learning with React Native (I found some machine learning framework which should work on Node.js and even on mobile). But I see, that for a global project I need a damn enormous amount of spare time to learn and get it to work. On the other hand, I feel how I’m missing my “classical” design skills and opportunities while investing the time into coding. It would be ideal to find a balance between design and code. And right now my balance is definitely shifted towards code. I think, it’s time to get fully back on a design path. And if you or your friends are looking for a designer, check out my website and feel free to contact me ;)
I hope this post was inspiring and useful for you. Good luck on your journey, if you will take the code path, it is definitely worth it and it shouldn’t be like mine, I believe you could do it better. Don’t forget to impress that damn world, cheers!
P.S. if you’re looking for a designer, check out my website http://ykshev.com/