Learning Design from Aaron Draplin
Front end developers aren’t known to be designers. They are the cogs that make the designers’ art come to life. I wanted to be more than just a cog, at least for a while. So I typed in design on YouTube and who came up but Aaron Draplin. I watch a lot of The Futur videos and I had heard them talking about Aaron Draplin. Little did I know how much of an impact he could have on me, and many aspiring designers. After watching “Tall Tales from a Big Man” I instantly knew this guy was the real deal. His honest opinions and commanding presence showed me his love for design, and his love for inspiring others. You can tell he stands for the average guy or gal. He is like the Bruce Springsteen of the Design world.
I went down the oh-so-common YouTube rabbit hole and watched a bunch more of his videos and podcasts. The minions of my mind began jittering with excitement and ideas, farfetched as they may seem. I thought this would be a nice break from being a Developer.
I understood Draplins’ disdain for Web Developers, I remember early on being one of those “turds” who thinks it’s easy until it needs to get done. It isn’t cool when you tell designers their designs are not feasible, and you begin to spout off some jargon nonsense about why it can’t be done, like “this design is out of scope for the current sprint as we did a one day spike and found it will take at least 2 more sprints to get the design looking perfect, so a team decision was made to hold off on it, we will touch base with you once we come back to this story … sorry”. The looks on their faces was too much to bare.
From then on I began understanding just what it takes to step out of the hallway of mediocrity. I always enjoyed designing things, even though I was never that good, for the first time I decided to walk out of the hallway.
Fast forward to two months of messing around with Illustrator, I made some mediocre designs, they weren’t anything to shout or scream about, however I realised I was having fun making them, that was important enough for me. So, I wanted to deep dive into design, I wanted to make sweet logos, logos that make you feel a little something. Just like Draplin.
I got myself a Skillshare subscription and went straight to Aaron Draplins page (it’s fair to say i’m a fan boy now). I watched the trailers for all his tutorials, and the one that stuck with me was “Situation Iteration, Iterating with Shape, Style and Color”. This had glimpses of the kinds of designs I wanted to make.
I decided the theme of my designs should be around my hometown Wellington. I love this city and it would be great to do a few designs for it. I learnt a lot from his tutorial series. Just like a classic Sitcom, I couldn’t help but binge all of his series. Each tutorial provides nuggets of wisdom, that I have certainly taken on board. I hope to share a few of these nuggets in this blog post. This is for anyone who is new to design or interested in the subject. I am no expert, but I do wish to get better in the art of design, even if it is to empathise with my fellow designers. I promise next time I will do what it takes to make your designs come to life.
Set up your workstation
For the few months I was working aimlessly on illustrator, I never knew where anything was. My illustrator window was bare bones, it was like looking at a skeleton, dry and empty. I would have to use the toolbar to bring up tools like Pathfinder and Align. Before watching Aaron Draplin work I assumed this was normal. Usually when I code I just have a Visual Studio Code window open, and the files I need to work with. Designing is a whole different animal.You need to have the tools ready to go. This will speed your whole process. Making the Micro as efficient as possible significantly effects the Macro. Here is a before and after look at my Illustrator workspace.
Before:
After:
I make sure all the essential tools are expanded out and ready to use. I find my self using Ellipses and Squares often, and instead of holding down and selecting the shape I want, it is right there. The same goes for Pathfinder and Align. My process is much better now.
Use Abstraction
Abstraction is a common Object Oriented Programming principle, and never has it been more useful than in design. There were always a few shapes I used to create over and over again. Draplin taught me how to create the shape once and use it many times. I have a file called Basic_Shapes.ai which has new shapes that I experiment with and add to my symbols palette.
If you have shapes you find yourself creating over and over again, I suggest you follow the steps to abstract it out.
Creating a Symbol:
- Create a shape
- Drag the shape into the Symbols Palette
- Give a name for the symbol
- Check the Static Symbol option (if you don’t plan on making changes to it when you use it)
- Now the shape will appear in your symbols palette.
- Click the “Symbol Libraries Menu” icon on the far left of the Symbols Palette
- Click Save Symbols
- Save it out to an .ai file
Use the .ai file from above to create more shapes based on that particular category. For example you can have a file called MUSIC_SYMBOLS.ai to create new shapes that relate to music such as Notes or Instruments. This can be loaded into your symbols palette and used in any project. It’s mighty handy.
You should do the same with your Colours Palette too. I usually work with the default colours for now, but my next task is to come up with some sweet colour palettes. Pinterest has some beautiful inspirations.
Research your Ideas
My theme was on Wellington New Zealand. A quiet town of about 400k people. Wellington has a diverse culture, it is known for its windy days and beautiful coffee. These were the things that popped out right away. Aaron Draplin has a great habit of doing research before starting on designs. So I did just that, our friend and companion Google can help us with this process. I looked up Wellington New Zealand on Google Images, and immediately I saw Mt. Victoria which overlooks the city. Of course I saw the Cable Car which travels across the city too. I saw the beautiful beach Oriental Bay on a hot summers day. I dragged these pictures into Illustrator and there you have it, some inspiration to start with.
You can go even further with it by looking into books, magazines and all the rest of it, either way make sure you have a photo linked into illustrator, so you constantly have something to base your designs on or play with.
Vectors are Free
Now that we’ve got the BEFORE out of the way, we can look at what to think about DURING the design process. I really enjoyed watching Draplin work and think out the process, it gave you a sense of optimism, like anyone can do what he is doing, it isn’t that hard, you just need to learn to think about it. As he was working through a logo, he will continue to duplicate it when he wants to make a change. Vectors are Free.
Whenever you want to make a slight change to a design, just hit ALT/OPTION on the logo and drag it out to duplicate. It relieves you of the stress of losing a good design or letting go of a change that works with one that doesn’t work.
Below are a couple of examples of the concept.
Draplins’ vectors are a lot more extensive and have subtle changes between each, the important lesson here is I got to understand the power of Vectors, and how free they really are. They take up a little space in a vast expanse of white. So remember to take advantage of vectors, keep on duplicating them until you are satisfied with the final form.
Use appropriate naming conventions
For any developers reading this, we know the pitfalls of a poorly named file. Naming a file stuff.js or test.js or test_2.py really fu*ks with other developers trying the read the code, it’s like getting pushed into a cave without a torchlight. We’ve all been there, and it ain’t pretty.
It works the same way with design. You should (at least for your own sake) name the file appropriately and place it inside a folder that is easy to navigate to. This will come in handy especially when you have hundreds of designs, and the last thing you want to do is to search for it somewhere in the scattered mess of your computer. Save some time, keep your files in line.
Be ready to ship your Design
At some point your scattered mess of logos needs to be printed or sent out to someone. You wouldn’t want to just copy your logo and export it out. This is what I used to do if I wanted to make a t-shirt or sticker. Draplin taught me the art of perfection. You have to make every bit of your logo perfect. You wouldn’t send your kid out into the world scared and hungry. Just the same (far less dire) way your logo needs to be confident and ready to go.
Copy the final logo into a seperate file, and using your newly acquired naming skills, name it something appropriate, DESIGN_final.ai for example.
Once the final logo is in that file, use this trick. Select the logo (CTRL/CMD + A), and convert everything to outlines (SHIFT + CMD/CTRL + O). This ensures the logo is flattened. For example if you were using fonts that you sourced from some site, and you wanted to send the .ai file to an external vendor to get it printed, it is highly unlikely they will have the same font on their machine. This is where outlines comes in, converting your logo to an outline turns everything into a shape. Once it is a shape, the whole logo just becomes a bunch of vectors grouped together. This can be opened on any machine (with illustrator) and used right away.
Another thing you could add in the final design is a colour palette, to ensure the vendor has the correct values to print out. This can be done by drawing a small square for each colour in your logo and using the eye dropper tool select each colour.
Once your final design is ready to ship, export it to a PDF. PDFs’ can be opened on most computers and they can also be opened by illustrator if there is an issue with the .ai file.
Conclusion
Although I learnt so much more about design with Draplin I thought I would share the main points I learnt to improve the process. I had a lot of fun going through these courses and I will continue to improve my skills in design. At this moment my designs are heavily influenced by Aaron Draplin, my aim is to keep going and find my voice through design.
After watching the series I immediately went out and bought a copy of Pretty Much Everything by Aaron Draplin. It is the best book money can buy, it goes through Draplins’ journey all the while giving us a chance to understand his process and peek into the inner workings of his beautiful design-centric mind. I can’t wait to try out new shapes and logos, and see how I improve over time. Development is going to be put on hold for a little bit longer I suppose.
Here are a few of my attempts of design after taking this course. I know I shouldn’t quit my day job right, but I really enjoyed the process of making them, and nothing beats doing something because it is down right fun.
I hope you enjoy, and I hope you get inspired create something new and beautiful.
