CareerFoundry webinars cover the latest trends in tech, with a focus on UX design, UI design, web development, and app development. Each webinar is presented by an industry expert, and followed by an exciting Q&A discussion.
Is this webinar, Visual Design Lead at Zalando, Ray Ho shares the ultimate UI design tools that he and his team use on a daily basis, and provides valuable insights for anyone looking to start a career in UI design.
Missed the webinar? Not to worry - you can still check out the complete webinar recording and read the Q&A transcript!
Watch the video: ‘UI Design Tools Every Designer Should Know About’
The webinar ‘UI Design Tools Every Designer Should Know About’ took place on Wednesday, October 5th at 18:00 GMT and was presented by Ray Ho, Visual Design Lead at Zalando SE. Ray leads a team of forty-five UX designers, fifteen of who specialize in visual design.
Creating a beautiful user interface requires the correct tools. With such a wealth of resources on offer, we asked Ray to help us choose which tool is best for each purpose. How do we showcase our designs creatively?
Focusing on four main areas: layout, UI, prototyping and presentation, Ray introduces us to his UI design evergreens, all the way through to the newest tools on the block!
RYAN: Adam asks, “I’d like to know more about ways to translate design pages into CSS. Do you know any tools that do that, Ray?”
RAY: So for translating pages into CSS… Zeppelin has a nice thing where if you you upload the design, you can click on the individual elements and it will give you the CSS values.
There isn’t a direct translation tool that I know of or that I’ve used personally. However, that might be one way of kind of getting around it, you can see “how would that button be coded on CSS?”, and then you can copy and paste that code from Zeppelin and add it to your CSS library.
RYAN: Rachel asks “Do you think Adobe XD will become more popular than Sketch for UI designers?”
RAY: I tried Adobe XD and I found that as an app it’s really, it’s really great, it was very lean for what it does, but it’s definitely at its early stages. It felt very similar to Sketch in that it had two kind of side panels on the left and the right, it felt like Adobe was kind of… they definitely know it’s very clear where they benchmarked from.
And it had some functionality that was very different from Sketch, for example, you could create a little click through where you can click on certain things and then you would be able to record that flow as well so you could present afterwards. So it’s a really nice way of sharing, rather something that’s interactive, it’s something that you can just watch through to learn, when you want to present it, to learn how an app should act. What I found though, was that I would call the “UI asset” side of things within XD was not as powerful.
So, support in terms of importing images and effecting images, I know I mentioned that Sketch isn’t the best at that, but you can still do some things, you can crop images, you can change, you can put an image within a box, mask it, you can fill in space, fill a box at a certain ratio with an image, and if you change the size of the image it will just automatically re-crop the image as well. It’s a little bit hard to explain in person, but I think if you just try it out in Sketch and just rather than making a pattern, filling a box with a pattern, fill it with an image and just try and see how that reacts. There’s some nice things that Sketch does which is related to how developers tend to treat images, imagery, within front end coding.
At the moment I would say XD is the early stages, I believe that they still label it as a Beta, but I ultimately believe that Adobe is a huge company and they’re going to be pouring a lot of money and a lot of effort into XD. Although I’m not sure whether XD is - at the moment - a competitor for Sketch, I feel like it’s more a competitor for a wireframing tool like Axure, those kinds of tools.
RYAN: Bob asks, “What’s a day in the life like for a UI designer at a major company?”
RAY: That’s a very good question, I mean, I guess Zalando can be considered a major company, we have 11,000 people that work for Zalando. As I mentioned, it has 45 UX designers and 15 of them right now are specializing in UI design. A day in the life tends to be, you work hand-in-hand with an interaction designer. We tend to hire designers that specialize in something, it’s not to say that they only do UI design, we want rounded designers that are a little bit, T-shaped we call them, so they have an understanding of interaction design, they have an understanding of user research, but they really want to focus on video design.
And what that means is that we can pair them up together with a UX designer and it means that they can work together, they can bounce ideas off each other. And this is typically what happens in a day, they’ll be pairing up, they’ll be working on a brief, they’ll be designing some screens and stuff, but one of the things I would say is that what differentiates a UI designer from a great UI designer is actually options.
When you’re designing something it’s always great to tell a story basically, as a UI designer you’ll be sitting there, you’ll be creating something, you’ll be like I was thinking about this, and so therefore I kind of made it square and actually, then I was kind of thinking do you know what, maybe users might like this a little bit more, and so therefore I made it circular and then, I was thinking let’s just go out there and go a little bit wild and I made it a little bit like a pentagon or something like that.
So I know those are very simplistic examples, but a day in the life kind of revolves around that, a lot of collaboration with your fellow designers, even sitting together with them. A lot of, sometimes even workshopping as well, so kind of sketching things out by hand, but you don’t have to be an amazing illustrator, there are a lot of designers out there that I know that can’t draw and they just do stick men, for example, and that’s absolutely fine.
But the other one is sitting down in front of a programme like Sketch, as I said, it’s important that you pick a programme that you feel comfortable pretty much spending the majority of the day in front of, and it is not going to frustrate you. At this current time a lot of the designers are happy with Sketch, so they would be working on Sketch, producing lots of different options and then would be asking people for feedback as well, and then continuing working on stuff.
There’ll sometimes be presentations where you’ll be expected to talk about your work in front of key stakeholders as well. That’s kind of like a day in the life, I would say, or ingredients that could be in a day in the life.
RYAN: Julie asks, “Have you ever worked in a small company like a start up, and if so, is it different there being a UI designer in a start up versus a bigger company?”
RAY: I have to confess the smallest company I worked in had four people, but that wasn’t a start up it was a very, very small design agency. It felt a little bit start uppy in the sense that even though it was my first design job, very local to where I grew up, and at a very small company, even though I was a designer, you had a responsibility to actually talk to clients as well. Previous to this, I worked for a year at place that called themselves a start up, but they already had about 80 people working there.
The difference I would say between a large and a small company is just speed, and also the kind of tasks that you’ll be doing as well. At Zalando we’re very lucky that we can hire quite a lot of people and quite a lot of people are specialized in things. At a smaller company it’s very interesting for the individuals because you’ll have a lot of opportunity to try a lot of things out. If you were brought as a UI designer, you might need to do some kind of print work as well. You might need to do some logo design, you might need to do kind of like some graphical layout like flyers and things.
And that’s certainly what I found in my last company, leading a small team of designers there, we only had four designers, and of course now the scale is much larger where we’d be like, hey, we need to do something like a flyer, and so we’ll just bring in another, more specialized graphic designer to do something like that, rather than trying to pigeonhole people that aren’t specialists at that into doing something. But ultimately, both are very, very exciting places to work in.
At a big company like Zalando you have lots of big problems that you have to face, and you get a lot of time to fix them and actually work on them, whereas at a start up it’s very much around a lean approach, so therefore you’re encouraged to think about what’s the quickest way, not just to execute it, but to prove that this is the right idea to be working towards.
And so there’s a lot of energy, a lot of kind of, a lot of great kind of can do attitudes, whereas at a big company of course, I mean, I think you speak to anyone and they’ll say that it’s just a little bit slower, but it doesn’t have to be slower, it really depends on how the team motivates themselves and what the brief is as well.
RYAN: We had two questions about animations come in. ** Irenia asks, “How do you visualize micro animations and present to clients?”**
RAY: I will do the first question first, so how do we present micro animation and micro interactions. As I mentioned, we use a tool called Principle and what’s great about Principle is that you can export your animations as a video. You can even export them as a gif, and so we, for example, if we’ve done an amazing animation around how when you hover over a dropdown menu and then it kind of expands down and the list kind of pops up one after another, you can do that in Principle and of course it’s hard to do that basically through an interactive prototype, you might want to do that as a gif.
And so we’d export that as a gif and then we’d put it basically in a device, then the person can look at it there and then. But then we’ll then show the screens to show that this is contextually where it kind of sits like that as well. Another one we’ll do is do a bit of a kind of prototype walk-through, so you can, with Principle of course because everything is interactive, you can create a click dummy and then have a user just click through everything, but record it, and then from the recorder you can export it as a movie.
And so therefore you can present basically that as something that rather than someone clicks through it and has to interact with it, they might miss some of the buttons because of course not everything you want to make interactive, because you don’t have the time to do it.
But they can just sit through a movie and kind of get an example of, or a feeling, basically of how certain things would react. So there are different ways of presenting these kinds of interactions and there’s definitely not just one way, but we’ve solved it with lots of different things, from basically producing a video from beginning to end, from a flow that kind of highlights some of these micro interactions, and to a very, very granular kind of gifs etc, that we can export out and just share out very quickly to developers.
RYAN: Lars asks,** “Do your visual UX designers all handle animation and transitions etc, or do you have folks specialized in this?”**
RAY: So we at Zalando believe that transitions and animations is a key skillset within UI design. The reason why we believe that is because, as I said, it’s… what we want to build up is team that understands different things, and at the moment we want designers that look at the look-and-feel, but we believe that the look-and-feel is so connected to how people interact with things. We talk about ourselves as product designers at the end of it. There’s so much tactility involved that the feedback and the kind, the flows and the actual how things reacts when you touch it, when you tap on it, when you hold down on it, when you actually swipe it, that’s so important to the actual general kind of aesthetic of the experience that we believe it’s within the remit of a visual UI designer to do.
However, that’s not to say that that’s the rule of thumb for everyone, we also have a lot of flexibility, it’s ultimately about the person that we meet, the person that comes through the door, because we understand that a lot of people just specialize in different things and so when we’re trying to grow the team it’s about bringing the people on board.
And I’m pretty sure in the future we are going to be bringing people that are specialized in animation so that we can produce a lot more of it, experiment a lot more within that. And maybe they cannot compose things on a layout point of view, so they won’t be using a lot of Sketch, but they’ll be tending to do a lot of micro interactions within Principle or Flinto or something like that as well.
So the short answer to that is, in our world, yes, however, generally out there you’ll find a lot of roles where you can be a UI designer but there’s no need to be a real kind of like, to be heavy basically in terms of interaction, in terms of animation and transition executing.
RYAN: Perfect. I think we’ve got time for two more questions, so we got a question here from Ronnie. Are there workshops or meet-up groups you’d recommend for budding and experienced designers (UI designers of course)?
RAY: Oh that’s a really good question. I mean it depends on where you are, right. If you’re in Berlin for example, I mean, okay I’m making the assumption that you’re in Berlin, if you’re in Berlin, and I’m sure a lot of this kind of, it’s kind of shared as well throughout, there’s a great meet-up basically that’s called Service Design Drinks, I mean, number one, what’s great about it is that drinks are involved, but the second thing is they talk a lot of interesting design kind of aspects and some of the topics they do talk about and cover because it’s so important, it’s such an integral part of the service line, how it looks, the aesthetic of it is also UI and visual design, I’ve been to a couple of them.
Another thing that’s interesting as well that I know is run internationally is Creative Mornings, and so therefore you might find also some opening in terms of some topics that are relevant for you as a visual designer. They tend to have quite left-field topics they’re talking about, talking about left-field topics, but somewhat more kind of straight down the line in terms of kind of design topics as well . Yes it’s a little bit hard to answer if I don’t know where you’re from…
RYAN: He just answered - he’s from London, if you know anything?
RAY: Oh from London, oh, that’s a very good question then because I’m from London, but I can’t off the top of my head think of anything because I’ve been working in Berlin for the past five years. I would just scour your social networks, I mean Meetup.com is a great place to just find ones, sorry about that, I don’t know enough about the London end of this, I‘ve forgotten so much about it.
Oh actually one thing I would recommend is, there are a lot of agencies in London, maybe follow those guys, like IDEO, Futurice, Fjord, they all have offices in London, you have a lot of big agencies like AKQA and LBi as well, I mention this because I used to work there.
But if you follow companies they tend to maybe post up as well interesting meet-ups and interesting kind of events that’s happening in their space. I know LBi for example has a huge space where they do a lot of kind of events, so that might be an avenue that you might want to look into as well.
RYAN: Just to wrap up real quick with a pretty complicated question, Hella here asks, I am a graduate with a Bachelors degree, is there any chance to get a job in this field? What can I do to stand out without much experience or many examples of my work?
RAY: So I’m guessing your question is down to the fact that you don’t have faith in your portfolio. Is that correct?
It’s difficult, I mean at the end of the day when you’re trying to present yourself as a designer, your work is your kind of “face” ultimately. As a person that hires people, I spend a lot of time looking through the work. However I’ve also decided, you know what, it’s worth talking to this person because they’ve managed to relate themselves to the company.
So hypothetically if you were to apply to a company like Zalando, in your cover letter, and the cover letter is something that a lot of people just skip, a lot of people are one sentence, one liner, and I tend to be disappointed in that. And a cover letter can do so much, so if you don’t have a portfolio be very honest, send what you can, but talk about yourself in your cover letter. Talk about what is it that relates you to the company, tell us, do a little bit of research about the company. Tell us what you’re interested in about Zalando, tell us what, you know, what you’ve heard in the news recently that made you kind of go like, “oh yes I really want to work there, that sounds like a really cool place. I’d love the opportunity just to have a chat , I know you’re very busy,” so on and so on, and so I think it’s ultimately trying, if you don’t have the portfolio that you believe in, then try with other avenues. However, what I would say to you is, there’s never, you know, in your spare time maybe you blog about stuff, maybe you do some illustrations and things, maybe you do something else, you know, some creative work, photography - all facets of your personality. What I would do is definitely encourage you to also introduce yourself through those, so include some, if you do do photography, include some of that in your portfolio.
I’ve even had candidates applying and putting an Instagram link on there because they had some great photography there. All-in-all it’s just, you know, it’s a rounded package, yes the portfolio is important, but if you can make your cover letter and the general kind of story around you really kick-ass, to be honest with you, there’s no reason why a company wouldn’t take a second look at that, and want to talk to you either. I hope that helps.
RYAN: I hope it does, yes. Hey, I think we’re about out of time right now, so thank you very much, Ray, for all those awesome answers, thanks for sticking around and answering those questions and plus the awesome presentation you gave about all those great tools, thank you very much.
RAY: Well thank you very much, it was a pleasure being here!