Going from Graphic Design to UI? There is one very important rule you should know.

Maybe you're here because you think it's the future of Graphic Design. Maybe what motivates you is money. Maybe you woke up one day and your company asked you to make an app. Or maybe the cool people in the neighborhood were doing it and you wanted to be popular too.

The thing is that you jumped on the UI Design train, and in order not to look like a newbie you signed up for some online classes and followed a couple of referents on Instagram.

And I think that's great. But as a former graphic designer (and, now, a UI Designer passionate about his new career) I must warn you that it's not enough: the most important learnings have little to do with Figma techniques or Sketch trends. In fact, I feel that my work as a UI started to take off as soon as I started to understand some more in-depth concepts.

And the most important one of all is:

Your design is going to become code.

I can almost hear you saying "But Nico, it's OBVIOUS that apps are made with code". Right, but my intention is for you to go beyond that. It's not just about "knowing it", it's about integrating this concept into the way you think about your work. And that you put it at the center of your whole process.

An old practice

Think back to the last time you designed for print. Even before you put the first layer in Photoshop you had already applied some settings:

1. You set the color mode to CMYK.
2. You set the density to 300 dpi
3. You set the measurements to be in inches and not in pixels

And so on and so forth. But let's stay with the concept of preparation. Beyond the specific acts, what you are doing with all these adjustments is preparing the design for what comes next: printing.

In the case of UI, that next step is the code. Your design is going to become a bunch of logical rules with lots of {}'s and ;'s so that it can be interpreted by a browser or an operating system. Therefore, when making UI we must also give it some 'preparation' time, and think about this next phase.

Does that mean I have to learn to code?

Look, if you have the time and are interested, yes, do it: it will help you a lot. But if you don't, you just need to know two fundamental aspects of interface development: Divide and Conquer, and Don't Repeat Yourself (DRY).

Divide and conquer refers to the "deconstruction" process that the developer must perform after receiving a UI file. What it does is to cut the UI into small pieces, which will then be coded separately, which is much more efficient than building the whole page from start to finish.

The purpose of "deconstruction" is also to find out how much these pieces are repeated in all the screens, so that they can be coded only once, and then reused when needed. This is what "DRY" refers to, not repeating work that has already been done.

Where do I start?

As a way to get started, I recommend you to

1. Visit the Material Design page (or any other Design System like Lightning or Carbon). Understanding the concept of "component" can give you an idea of what are the fundamentals for our work.

2. Before designing, ask yourself: how is this going to be passed to code? How long is it going to take? And if you don't know the answers, then....

3. Ask for feedback and advice from your development team. And do it often: The best ideas and solutions in my UI career have come from girls and guys who code.


Nobody uses Dribble mockups or inVision prototypes in their day-to-day. We all use apps or websites that have been programmed. So if you want to dedicate yourself to this, keep in mind that a simple but 'codeable' design will always outperform a stunning design that is impossible to translate into a programming language.

If it is not codeable, your design may be an interesting graphic piece, but unfortunately, it is not UI.



-----

For more UI tips and advice, follow me on Instagram.