Getting yourself oriented as a new designer

Ok so there's lots to do but where do I start? There are a lot of tools to use and infinite combinations to use them in. A better question might be to ask “What is a good design process?”.

Responsive image

There are a lot of ways to approach design and implimenting a great process. I wish I could say I utilize the same process everytime I design something. I just don't. Maybe that's something to note down. Every project is going to be somewhat different in its requirements. I have a pretty good primer I start with and I adjust course as needed on the fly. You will need to define process and toolset for yourself by what feels right. There are a lot of opinions out there about what to use, when to use it, and why. I think it’s good to understand the entire landscape, read all the opinions, and then decide for yourself which course to plot on your design road map.

Which tools should I use?

Sketch
There's a new app in town and its called is Sketch. All the cool kids are using it. (Read why Jean-Marc Dennis did on Medium or why Geoff Teehan at Teehan & Lax decided to start supporting Sketch in their iconic iOS templates). I switched over to Sketch this year myself. Why should you? Well there are a lot of reasons:

  • Adobe Photoshop & Illustrator weren't made of UI/UX designers... they were usurped because nothing else worked as well. Sketch is literally made for designers (by designers).
  • Scalable vector graphics, linked styles, symbols, multiple artboards, the way it handles bitmaps, pixel perfection is easier, smart guides... I can go on.
  • Sketch really has what you *need* as a designer, not a thousand things you don't which Adobe fits into PS and AI.
  • The barrier to entry is very low, it is intuitive.
  • Sketch 3 is only $99. Sounds a lot better than a Creative Cloud membership which will cost you $600 a year.
  • Bohemian Coding's (they make Sketch) support team is pretty responsive.
  • Sharing Sketch files is infinitely easier than any other program.
  • It exports beautiful images of your work in 1x - 3x sizes.

I would highly suggest diving into Sketch first. It's taking the design community by storm for good reason. I will however cover Adobe, in case you want to learn. I spent 12 great years with Adobe products and made some incredible things. I highly recommend going over to the Sketch download page and getting yourself a copy.

The way Sketch handles graphic bitmap scaling and rendering is sheer bliss. Scale a png up and down and all around as many times as you want and it STILL looks pristine.

Adobe
You probably won’t find a designer when asked about tools who won’t mention the words “Adobe _______”. That’s because Adobe products are the industry standard. (Until Sketch came along and knocked it out of the park).

Fortunately these days, you can get access to all of Adobe’s products for a low monthly fee of about $49. Adobe recently came out with something called “Creative Cloud” which is membership based and gives members access to all updates to their programs. Prior to the membership customers were forced to shell out more than a grand every other year for the latest versions of their favorite tools.

Adobe as of late has been getting a little, well, complex. They’ve decided to start building all kinds of new software and while I think that’s great, I think they have two core pillars. Those are Photoshop & Illustrator. They have unique capabilities and a lot of versatility. I use both constantly and always together. Mastery of both, in my opinion, is crucial.

Photoshop
Photoshop has a vast capability set. This is going to sound a little dumb and perhaps it is. I use photoshop when I want to make things look pretty. It excels at making things really pretty. As with any superpower, one must exercise restraint and control. Never has that statement been more true than with the superpower that is Photoshop. Key primary thing to pay attention to here is that everything in PS is pixel based. I tend to build high fidelity mock ups, retouch photos, build hilarious gifs, and find myself in cluttertown often here. Avoid cluttertown at all costs. Less is more.

Illustrator
Illustrator is my go to for boxes and arrows, flat design comps, highly detailed UX flow writeups and of course building vector graphics and illustrations. When you start to get comfortable using bezier curves and symbols, it becomes a very powerful and quick way to get what’s in your head out into the real world. Symbols let you adjust parts of your design quickly across an entire project with one touch.

After Effects
After Effects is all about motion and animation. It works really well with both PS and AI and it’s a great tool to use if you want to create some motion or do a motion study. I actually use this but won’t be heavily covering this as I view it as a pretty advanced skill and not something you will be asked to do right away. If you want to learn how to make cool UX animation gifs head over to Mt. Mographs youtube page and watch some of his videos. They're pretty great.

Fireworks
What about Fireworks? It’s an interesting program and has many uses particularly for UX templating. Personally, I think you can achieve the same thing in illustrator utilizing symbols, multiple artboards, and really good organization. Adobe has dropped support for this program.

Finally
Adobe has a lot of other products you can check out, and when you have some time, you should. If you're interested in this part of my course the only two you will need are Photoshop and Illustrator. Head on over to adobe.com and sign yourself up for a membership and download both Photoshop and Illustrator.

How do I learn?

I think the most important thing is that you *do* learn. Spend the time. Spend LOTS of time. Dive in. It really doesn't matter what level you are. Get better. I still learn and push myself to master new skills and remain adaptable and scrappy.

We designers are a lucky bunch. Everyone is clamouring to lend you a hand and teach you the latest tricks of the trade. The great part is all you need is an internet connection.

I spent the better part of a decade as a DJ/Producer of house music in my spare time when I wasn't designing. The design industry is day, the music industry is night. No one shared their secrets. You see more nowadays but most of the great producers keep their secrets to themselves. We're really quite lucky.

Where to learn though? I spend a lot of time scouring the internet for new sites but often find myself returning to these:

Lynda
lynda.com is a powerhouse of amazing video tutorials. The content is presented in a very academic format and covers probably the most subject matter out of any website out there. We’re going to rely on this heavily.

Team Tree House
TeamTreeHouse.com is a learning site for people like you who are just starting out. It’s built by designers and coders and it shows. I find the end to end learning experience they provide to be incredible. It tends to be much more up to date and fresh than Lynda.com and a little more toungue and cheek (which is entertaining).

Code Academy
CodeAcademy.com is a code focused learning site (free) which will help you dive into HTML & CSS more as well as a great starting place to jump into full development languages like Ruby, Python, and Javascript.

Coding

Empower yourself. Really. Templated websites these days are looking pretty good but at the end of the day you're not in control. Learn how to do some front end code and I promise it will pay in dividends down the road. If you have your eyes set on the tech industry (and you should), the more you know how to do the more appealing you are to companies. They need multi-talented team members.

What programs should I use? Where should I start?

Sublime Text 3
Sublime Text 3 is a free to use program (although you should purchase it to support) which I find to be the best way to write code. There are a lot of options out there. You may even ask me why not something like DreamWeaver? Well, at the end of the day you want two things. You’ll want to focus on seeing the code and you’ll want to focus on writing good code. Programs like DreamWeaver have you spending more time memorizing how to manipulate the program to achieve piss poor code results than on actually just writing out a semantic piece of code. Sublime Text 3 will create a clean easy to use environment that lets you not only focus on code, but quickly find code you need to fix. I could go on about this forever and just count yourself lucky I’m teaching you this and not my best friend Kyle (a brilliant database engineer) who would corrupt you into using something like the command line terminal and VIM.

If Kyle had his way your screen would quickly turn into this:

Responsive image

Download Sublime Text 3 here: http://www.sublimetext.com/3

Transmit
I use Transmit to upload and sync my files onto my server. I will explain what this means in a lot more detail in another series. You can download it here: http://panic.com/transmit/ This is an exclusively Mac application. I can make a Windows suggestion but I don’t use Windows for design.

Media Temple
I use Media Temple to host all my websites. I’ve used them for years and I find the interface to be really easy to get oriented to. Most importantly, they have 24/7 customer service and the reps live in Los Angeles. Yea. For real. Get it here: http://mediatemple.net/

Chrome & Chrome Dev Tools
So I use Chrome exclusively and especially for building sites in browser. The dev tools they provide are bar none the best out there. Get it here: https://www.google.com/intl/en-US/chrome/browser/

Additional Tools

These aren't required for, but they will make life as a designer a little bit easier. Consider these as light tricks of the trade. Try them out or ignore them. Your choice.

ColorSnapper
If this were the land of Harry Potter, ColorSnapper would be your Accio spell to make colors come to you. Color Snapper is a brilliant little Mac plugin that lets you pretty much pull color from anything you see on your screen and at any time. You set a hot key combo and everytime you activate it you get a magnifying glass on your screen which is zoomed in to the pixel level. You can select color with precision. Then it stores the color and allows you to paste that color in any way you like (Hex code, rgb, rgba, etc…) This is a must have! http://colorsnapper.com/

Alfred App
Alfred App is a really great way to find whatever you’re looking for in an instant. It’s like Google but for your desktop. You select a hotkey combo and you get a search box on your screen and you can search anything and everything in an instant. I don’t know how I worked without it before. http://www.alfredapp.com/

Spotify
As a designer you should be prepared to want to subject you to those late night design binges and copious amounts of caffeine. Typically not in that order. You’ll need a sound track. Actually, you’ll need many soundtracks to keep you going. I’ve been a premium Spotify member since its US launch. It’s my favorite music app and they recently did an outstanding job at their new “browse” section which is full of incredible channels of music to explore for every mood and genre. https://www.spotify.com/us/

Notebook (dot grid)
Notebooks are an essential step in design. It’s free form and you can form almost any type of idea in your head rapidly. It’s also nice to have a single place to reference and get inspiration from. I prefer the dot grid notebooks because its minimal while remaining completely functional. The function being able to utilize reference points for scale and drawing straight lines. I find the full grid notebooks to be really noisy and distracting from what you’re actually trying to put to paper. You can get the one I use on Amazon. Buy it on Amazon

Pencil & Eraser
You might utilize pens, but I change my mind constantly and so I usually need to erase. If you have a desire to become a designer, I imagine you have some obsessive creative compulsions. If that’s the case, and seeing as we all need “practice” I think a pencil and eraser is your best bet. Any will do. You can be as high or low brow as you like. I use a regular #2 and a fancy $30 mechanical interchangeably. They both have their merits.

My choice of fancy pencil is the GraphGear 1000 #5 - On sale by Amazon for $12. You can get it here: Buy it on Amazon

I like a standalone eraser as well. My preference is the Staedtler Mars Plastic eraser. You can get those here: Buy it on Amazon

Asana Task Management
Staying somewhat organized with your projects will be important. I’ve tried a lot of different project management software. Trust me. The best option I’ve come across and used is Asana. You can organize it however you like. Check it out here: https://asana.com/

Additional Tools

A quick word about roadblocks. There is always a solution out there, it just depends on how much time you want to spend looking for it. If there is anything I want you to take away from this series it would be this: Cultivate a strong drive to figure everything out. Take the initiative when you stuck to find the answer. If it takes you 3 hours to solve a problem, I imagine you’ll never forget the solution. Sometimes doing it the hard way pays off in dividends. You’re going to fumble your way through a lot of stuff. I sure did. You’ve got a leg up on me. I came to most of what I am teaching you through trial and error. If it is hard, do it anyway. Especially if its hard.

Google is your very best friend. If you’re still stuck try asking peers on Twitter. If you don’t have any peers on Twitter, make some. Don’t be afraid to go on http://www.dribbble.com and find a designer that inspires you and reach out to them on Twitter. We almost all have twitter accounts listed on our Dribbble pages.

This is pretty much it for me. It’s not a super fancy list but quite frankly, it probably shouldn’t be. You can do amazing things with the stuff I listed above. Do big things with less.

If all else fails, email me. I will always respond to the best of my ability. zca.tyler@gmail.com

Read this next: What my process looks like