Can a graphic designer become a UI designer?


Ah, the famous answer of interaction design: It depends.

I started off as a graphic designer doing artistic murals, custom branded documents, and fancy schmancy hand lettered, hand drawn illustrations, screen printing, etc.

But working digitally was always a draw, and now I do it full time across multiple mediums and platforms. It does not come without a learning curve though, no matter how clever I thought I was.

You can use some skills as mentioned by Kayode Samuel below, but some things to do not translate.

Things that you can borrow from Graphic Design:

The web design color wheel

Color theory: Instead of using printed materials, worrying about Pantones, you must now worry about light coming through color. This opens up a whole new spectrum to choose from, but presents new challenges. There is also the problem of visibility, ADA standards, and readability. For instance, all websites must be accessible to everyone. That means, cool, fun stuff isn’t always usable. Test it.

Typography: Good type never goes out of style. However, you must consider that your typeface will need to be web ready, various browser readable, and able to scale well. Gone are the days where I kerned everything. Google fonts are your new best friend, and remember that everything rests on a line, in a box, in another box, and these boxes cannot screw each other up at different sizes because they must resize to fit mobile. Type must be readable at every device size, and you must follow a HIG or OS system.

via unsplash

Photography / Video: I find that my branding background came in handy when pulling together stock libraries for websites as well as adding custom photo filters, templates etc. In a world where so much of our images rely on stock and Unsplash, a healthy dose of creativity goes a long way. Beware though, simulating thousands of items in a shop is tedious without Craft or Sketch Plugins.

Digital design trends: Just like in print, you’ll need to keep up with what’s hot. Find a whole new set of pages to pay attention to. Check out, dribble, etc.

Eagle eye precision: More than likely you will need to review your collegues and developers work. Having fine tuned pixel-off quality assurance is a godsend.

Okay, so now that you know what you can take, here are some things that you need to learn and you probably wouldn’t use unless you were a UI designer.

Sketch or Adobe UXD: I prefer Sketch, but XD isn’t terrible either. You’ll be doing the majority of your design in here. Learn all the hotkeys, make your life better, and forget about doing elaborate vector drawings.

Plugins: These will save your life, because the creators of these newer programs forgot important things like spell check, exporting to anything other than an image, you know, the USEFUL STUFF.

Figma: This is like a web version of Sketch. Multiple people can collaborate on a single design. Everything is saved forever. No Ram needed. However, there are limitations to this beauty.

Zeplin or InVision: In order to make your designs developer ready, you must export them to Zeplin so that devs can get the right dimensions, colors, slices of SVG’s. Yes you get three projects, but like, who has just three projects? Learn it, take notes in it.

InVision, Marvel, Craft: Glitch city, but a widely used application for prototyping. Learn to use it, and use it well. You can also use the inspect feature in here, but your main goal will be to demonstrate pieces of software / web that you are designing for and prototyping.

Flow or Animation software like Adobe After Effects: This software allows you to design interactions and demonstrate animations. Also glitchy, sometimes the devs complain about it, but overall useful.

iOS HIG: Designing for the Apple store? Well they have Human Interaction Guidelines that you better not break. They are updated frequently, and keep a nice seamless guide between your vision and what will work well natively.

Material HIG: Same deal for Google and all other OS systems. They have standards for good reason. Use them. Fun fact, most of the world uses Material, and at any given time there are nearly 80 versions in use because not all carriers update simultaneously- that’s 80x the amount of things to go wrong. Yikes!

UI kits: Need to see all your native states with your new screens? Don’t build an iOS kit and make keyboards- just download one and reuse it.

UX design: Being a UI designer doesn’t exclude you from knowing about UX. Learn it alongside and you will be much happier / things will make more sense.

There are Three Beasts of Digital Design that I did not know how to reckon with for the first few years. These are concepts that are ever present and always changing. Tame them.

The Beast of Dynamic Sizing.

Got all your specs lined up? Registered? You know how your print will be cut, fit etc.? You like inches? Throw that out. You now are designing with pixels, percentages, for a variety of screens. For instance, you might choose to develop a web size where your H1 is only 80% of screen size, and you must demonstrate that by outlining breakpoints for your development team. I.E. at a certain width, the design changes to accommodate so that many browser sizes show the correct view. Your images must control to be cropped in a variety of ways- but also be light enough not to fail Google speed tests. (see the rise of illustration here). Every design you make should be visible at the very least in web + mobile. You must design everything at least twice, and be sure to test it in Safari, Google, Firefox. However, should you pull this off you will be doing 50% better than the rest of the web, congratulations.

The Beast of Interaction.

Likely, when you design for graphics you know your piece will be stable, unmoving, and reasonably assumed to be readable under light. People will read, appreciate, absorb. In digital, everything can be tapped through glass, that means that you must design for various states of design, as well as sizes. Each button must be accounted for in hover, press, clicked state, submitted. What about errors? What about dark states? When it is clicked, how does the screen change? Does it slide right? Left? This is fun, like telling a story visually through every animation, but it can be tedious and confusing as well. Make a checklist to thoroughly examine all states of interaction in each element.

Remember InVision, this is where that glitchy sumbitch comes in. To test your design with users, make sure you have all your bases covered, and account for edge cases, error states etc. you upload all your designs to InVision or a similar app (they all have their pros and cons), and draw out the interactions between screens with every state accounted for to create a clickable prototype.

So here’s the sequence: Design, connect with a plugin, export to InVision, hookup screens, test, revise, design, upload again, test and so forth. Do some homework to find javascript, react or other languages animations / interaction to give your development team a headstart.

The Beast of Development.

Know a little CSS? HTML? GOOD. Know how to communicate to people who have totally different skills, may or may not speak the same language, perhaps work on the other side of the world? Know how to breakdown your visual design into a map of how to build something? Well, you will.

Do yourself a favor, study development, coding, and agile project structure as well. You will be expected to know it, it’s best to start now. Being able to explain your ideas to a development team isn’t just a quick meeting, diagrams and handoffs in Zeplin, it’s a process.

How it works: PM, Creative team, Development team get together, make a roadmap of how the project will work. A creative team (you) submits designs to a business analyst, or whomever is in charge. They then take your documentation after it is cleared and begin to write Epics (thematic structures or events in the project like : Notifications) which are then fleshed out by stories (descriptions of events that can be further broken down like: As a user, I want to receive native push notifications on my device) and are further described by requirements (notifications should be dismissable) and tasks (determine what subject lines are possible.)

This all builds up to cover all the nuances of the design and development over the project or product lifecycle. If you work as a contractor, you should certainly be using agile.

Confused yet? It’s not that hard when after you have been doing it for awhile, and embracing agile in other aspects of my life has been a big boon for me.

These beasts are what make UI interesting however, and entirely different from graphic design.

In short, yes, you can transition. I expected it to be easy, but realized the depth of the knowledge needed to be a professional about 3 years in, and I’m still always learning. UI is extremely rewarding, and I cannot emphasize enough how satisfying it is to make products that people use to make their lives better.