Designers Who Code: Kristina Zmaic

If you’re a designer, chances are you’ve heard a lot about how important it can be to learn to code. And with more and more design job listings out there citing HTML & CSS, or even JavaScript & jQuery, as prerequisites, the web designer of the future looks more techy than ever.

This series takes the mystery out of learning to code and gives designers tools and inspiration for getting started. I’m interviewing designers who have already crossed the divide and worked on their coding chops to find out:

  • What they learned about coding and why they did it
  • How they use their new tech skills in their day-to-day
  • What advice they have for other designers out there interested in learning to code

Aside from the fact that a lot of people (like me!) discover a passion for coding only after working in another career, I think that there are PLENTY of reasons designers can (and should!) give coding a chance. For one thing, it makes working on a team SO MUCH EASIER when everyone speaks the same language (heh…see what I did there?).

But don’t listen to me. For the first interview in this series, I’m talking with Kristina Zmaic, our very own beloved designer at Skillcrush. She’s sharing what inspires her, how she got into coding, where she sharpens her skills, and what you can do to get started too.

1. Tell us about yourself.

I’m a freelance web and print designer, art director and illustrator working and living in Brooklyn. I have a lot of different passions in life, and am constantly trying to figure out how everything works and how to make everything work better.

When I’m not trying to take over the world, I’m helping teach classes on design, building larger-than-life furniture in my loft or taking a well-deserved nap (preferably at Rockaway Beach).

2. What kind of work do you do as a designer?

I am a bit of a Jack – or Jill – of all design trades. Being well-versed allows me to maintain full aesthetic control when building brands – touching on everything from Information Architecture, UI/UX and mobile apps, to illustrating icons, graphics and logos. I also do quite a bit of print work, such as business cards, letterheads and the like.

Designing is elegant problem solving and and I try to equip myself with as many tools and skills as possible.

3. How would you describe your design style?

I think my design style is very clean and minimal, with just a touch of novelty. All of my work has this marshmallow-y hint of pop art to it, vaguely reminiscent of Japanese toys.

4. Who/what influences and inspires you?

  • Innovations in Technology – we have phones that are virtual assistants and egg trays that keep you posted on how many are left, how isn’t that inspiring?
  • The Design of Everyday Things by Donald Norman
  • The 1960s
  • Roy Lichtenstein
  • Jean-Michel Basquiat
  • Dieter Rams
  • Tina Fey
  • Gordon Ramsay – I know, I know, but his attention to detail, passion and ability to always push himself to do better makes my heart aflutter.
  • D.I.Y Culture
  • Woodworking
  • Life – seriously, I could be inspired by a funny sign taped to a light post or overhearing a 5-year-old discussing his views on how trains work.
  • Traveling and Down Time – I think it’s CRUCIAL that everyone takes a break from life and re-charges, it makes you so much more creative and energized.
  • I could keep going, but I think I’ll stop here…

5. When did you start learning about coding, and why did you decide to pursue more programming/coding knowledge?

When I first got hired as a web designer, I had absolutely no experience with anything web related (seriously, I had a degree in fashion design). I was brave enough to apply for jobs I wasn’t remotely qualified for, and lucky enough to have a company take a chance on me – not because I was a web guru, but because they could tell I was a quick learner, had a decent design aesthetic and was hungry to learn more. In other words, they could see I had potential. With my foot in the door, I started absorbing as much as I could from as many people as I could. I was so excited about designing the aesthetic of things, that I didn’t take into account that I had no understanding of web functionality.

As I started taking on more projects, I quickly realized that it would be beneficial to pick the brains of the developers. Because designing for web is more constrained than designing for print, most of the developers would roll their eyes at my designs and ask me what the hell my thought process was. Most of the time I didn’t have a good answer: “um, it looks nice…?” wasn’t a great argument. I began to find it really beneficial to ask “why not?” Why couldn’t I do this? Why couldn’t that image be there? What was wrong with wanting this to be side-ways and having each type block be a different font-size? The more I asked why my designs were shIt, the more I learned how to make them better. I had no clue about the constraints or how development worked, which made it really hard to design effectively. That’s like deciding that you’re going to be a contractor and not understand how plumbing or electricity work– it might end up looking alright, but you’re going to end up with a fire hazard and a flooded basement.

Since I can’t half-ass anything I do, I quickly realized the importance of understanding development and I tried hard to teach myself how to code. I grabbed books, found some tutorials online and took notes. I would work on putting parts of sites together and then ask the developers I worked with to help me when I got stuck. Even after all that, things were still confusing to me because I couldn’t figure out how to put it all together. It wasn’t until I actually sat down and took a weekend workshop on front-end development that all the pieces fell into place. Everything just clicked. I was one step closer to being a Unicorn.

Over the years, my front-end development skills have sharpened and I’ve even dipped my toe into a few back-end programming languages. Although I’m not a full-time developer, the fact that I have a better understanding of how things are put together has greatly affected my process and made me a much stronger designer. The web is constantly changing and I’m constantly learning new things everyday – how exciting is that?

6. Talk us through your workflow. How do you use coding and/or programming skills throughout your design process?

Coding, programming and design go hand-in-hand (in hand) when your medium is the web.

When I first start on a project, I always take into account which functionalities or features are going to be needed. I always assess with my developers which programming language is going to be the most effective as well as potentially deciding on the best Content Management System (CMS) for the client.

I use my front-end skills to determine grids for new sites, setting up the pixel width to set my columns, gutters and margins.

I use my HTML & CSS skills to help me choose the typefaces for each project, since some render better on web than others. Nothing is worse than wracking your brain making (sometimes expensive) typeface decisions, designing a beautiful site and then seeing it in development and realizing it’s a bit janky and aliased on screen. I always take the time to try out my type choices by creating a simple HTML and CSS doc with my font choices and some dummy copy to make my final decision.

When I first start to design a site, I’ll usually code up the first page that’s finished just to double-check how it looks on screen. I make sure that full-width images aren’t being cropped strangely and adjust them in Photoshop if necessary. I adjust my grid depending on how wide it seems to display on screen, as well as how large my headlines are. That way, when handing my Photoshop files over to a developer, there’s less room for error, my concepts are reflected more accurately and less time is spent fine-tuning after development has finished.

I deal with a lot of mobile and responsive sites, so my understanding retina display and media-queries helps me to visualize and plan how my designs will render on various devices.

7. What advice do you have for designers who are on the fence about getting some coding knowledge?

1. Go out and learn HTML and CSS NOW… seriously.
2. Don’t be afraid to ask questions.
3. Don’t get discouraged.

You don’t have to be a an expert, but having an understanding of at least HTML and CSS is essential to the future of your career. Do you think that car designers just show up and pick colors? Of course not. They obviously have an understanding of engines, combustion, aerodynamics, safety and user interaction. So why would designing for web be any different?

8. What resources do you recommend for designers interested in code?

I learned a lot of my basic structure and tags from Codecademy and found it to be a good base to move forward with more in-depth courses. Although, now, I’d almost say that GA Dash would be a excellent alternative to that. I’m a hands-on learner, so online courses like Skillcrush with an active community and instructors would have been really beneficial when I was first starting.

If you’re like me and you need something more hands-on and in-person, I’d recommend finding programming meet-ups or taking a course at a place like General Assembly or The Starter League.

If you’re more of a “do-it-yourselfer,” Jon Duckett’s HTML & CSS and JavaScript & JQuery books are the best in the world. And CSS-Tricks will always be a great resource with really thorough explanations and tutorials on all things front-end web related.

And for the total design nerds who can’t get enough: I am a huge advocate of anything A Book Apart puts out, which, as you may know, is the brain-child of the popular blog, A List Apart. Their articles and books cover everything from Responsive Design to Designing for Emotion and are written by some of the best in the business.

The main goal is to find out which language interests you. I’m a visual person, so front-end development really resonated with me and has made it much easier for me to learn than some back-end programming languages I’ve tried. There are a lot of resources and options out there, you just need to find the right ones that work for you.