Marko Vuletič is a Slovenian web & mobile UI/UX design professional. His work is centred around creating apps and websites which are visually pleasing, but, most importantly, functional and user-friendly. An app he redesigned, Moments, has been featured by the US App Store as the best new app. Marko also writes a popular blog and newsletter about designing apps in Sketch, called Sketch Tricks. He agreed to speak to Learnetto about it, as well as about what it means to be a UI/UX designer and how to learn design.
Marko Vuletič (MV): I’m great, thank you for having me. How are you?
HM: Yeah, I’m very well, thank you! It’s nice to have you. Thanks for taking the time to speak to me today. Would you like to introduce yourself for the audience?
MV: Sure. So I’m Marko, I’m coming from Slovenia and I’m a UI/UX designer. I’m currently working on a personal project that’s called Sketch Tricks. It’s mainly a blog that I write about different workflows, about Sketch 2 and stuff like that. The other thing that I am doing is teaching people UI and UX fundamentals and stuff like that on my personal site which is markovuletic.com.
HM: Ok, great. That sounds great. And, yeah, that’s actually how I came across you, your site Sketch Tricks, which we’ll come to in a minute. Before we do that, I just wanted you to tell me a bit more about your background. How did you become a designer? How long have you been a designer?
MV: Yeah, so I think I’ve always been on that kind of creative side. Even when I was little, me and my brother, constantly, we were playing outside and tried, you know, or we played with Legos and stuff like that. And then, when I got older, I knew that I want to do some creative stuff. So in high school, I started playing with Photoshop a bit and I was fond of it, and I really thought, “Ok, that’s really something that I really like to do.” I just further explored that and that’s how I got into design. Basically, I’m one of those people that have multiple passions. So in my early days I knew that, ok, I would need to specialise. I like photography, I like video, design, stuff like that, but in my early days I knew that if I would like to be professional, I would need to notch down. So I explored two different things, and then I’ve decided, ok, design is something I am the most passionate about, and that’s what I pursue now.
HM: Ok, that sounds wonderful! So what kind of work do you do now as a professional designer?
MV: I’m currently a lead mobile designer, so I am a lead UI/UX designer at a company. We’re building a financial app for sole traders.
HM: What’s the app called?
MV: It’s not available yet. It’s called One Tap Receipts and we’re planning to launch it in about a week or two so it’s really exciting times, currently! But in spare time, like I mentioned, I work on Sketch Tricks and my personal blog. Prior to this, I was a freelancer for five years, something like that. And I’ve decided to work in a start up just to... You know, I like to learn from other people. As a freelancer, you are connecting but it’s more or less online. So I’d like to get a more personal touch and I’d like to learn from people. That’s basically what I decided - to join the team. And that’s about it.
HM: Sounds good, I know what you mean. You can always learn more from other people, working with them. So tell me about your blog and your site sketchtricks.com.
MV: Sketch Tricks was originally created by my friend Richard and after a couple of months he realised he doesn’t have that much time to work on it and at the same time, I had this idea to start my own blog about Sketch. So it made sense to… I kind of took over Sketch Tricks and I am currently working on it, on writing the articles about Sketch. And my plan for the near future is to create a course about Sketch and to teach people about how they could become more efficient with the tool, and all the tips that will make their workflow faster.
HM: Right, ok. I mean, just to make it clear to people listening, in case they don’t know… Sketch is a design tool similar to Illustrator. Is that... Would that be right?
MV: Yeah, so Sketch is a design tool that was originally created for UI so for mobile apps and web design. It’s similar to Illustrator because it’s vector-based. That means your assets, your images, your designs are scaling up. And now that we’re in an era with a lot of different devices, Android and iOS, it’s so much easier to create pixel-perfect designs that are easy to export in all different sizes without worrying “will it look sharp on a native device?”
HM: Ok, so is Sketch your chosen tool for designing now?
MV: Yes, when I first started designing for web interfaces, I was using Photoshop like most of people. But then I followed Meng To and he was kind of an evangelist for Sketch. One day I tried it and I immediately fell in love with it. It took me quite some time to switch fully over, I think because a couple of years ago the clients and other people didn’t know anything else and they were expecting Photoshop files. But in the last couple of years… Sketch is really established in the interface design wall so people now don’t even expect Photoshop files but just the assets.
HM: So for someone starting from scratch, say, starting learning to design from scratch today, would you recommend they use Sketch instead of Photoshop or Illustrator?
MV: Yeah, definitely. The Illustrator is definitely better if you would like to obviously create illustrations because Illustrator is probably around 20 years old and Sketch is just a couple years old so their vector tools are much better. But as an interface designer… Let’s say you would like to design web pages or mobile apps, stuff like that, I would definitely recommend Sketch because it was designed for that. So all those features and tool sets are designed for people that are designing mobile apps and web interfaces. So all the tool sets are really quick to, let’s say, export different sizes and create different kind of assets. So I would definitely recommend people just starting out in design to go directly with Sketch.
HM: Ok, great. So on your site SketchTricks.com, what kind of things do you typically teach? SketchTricks.com
MV: Currently, I am in the stage of just having different, let’s say, different explanations of what tools to use and different techniques of how to create, let’s say, colour palettes and stuff like that. The blog itself is pretty new so I only have a couple of articles for now. My plans for it are… I would like for it to, like I mentioned, I would like to teach everything from what’s the most important thing to know when you’re designing, let’s say, iOS app or Android app, or which plug-ins to use and what’s the best way to create something. It’s basically all set from the beginner to intermediate and beyond.
HM: Ok, wow, that sounds quite comprehensive. My next question, I wanna go a little bit more into what your thoughts are on learning design, especially designing websites and apps. How should people go about it? What should people learn first and what should the process be?
MV: When you’re starting out, it’s definitely overwhelming. A lot of stuff is out there and even you don’t know which information is relevant. So what I would tell people that are just starting out, is just try to think about design as not just solving problems but providing solutions to a problem. So, how you start with design is start analysing it. Start, let’s say, go to a website you really like or open a mobile app that you really like and try to analyse what is it exactly that you like. Is it the colours, the balance between the text, stuff like that? Try to write them down, and that way you would see, “ok, so these are the elements that are representing something that feels good, that looks good". And when you learn how to see, you can learn to apply this to everything.
So, how you start with design is start analysing it. Start, let’s say, go to a website you really like or open a mobile app that you really like and try to analyse what is it exactly that you like. Is it the colours, the balance between the text, stuff like that? Try to write them down, and that way you would see, “ok, so these are the elements that are representing something that feels good, that looks good". And when you learn how to see, you can learn to apply this to everything.
Then you would probably need a nice background about design principles, what they mean, the colour theory, typography, layout and stuff like that. If you’re just starting out, the best way would be just to look at some examples and try to analyse it, what exactly is that you like because good design is invisible.
HM: Yeah, that’s the problem, right? I mean, I think I know what you’re trying to suggest about analysing. But I feel like, if you really don’t know much about design at all, you wouldn’t know how to analyse or what to analyse. Can you give us like three or four basic things to look out for when trying to analyse a design that you like?
MV: Like I mentioned, what do you like about something? Are the colours things stand out? Let’s say you’re on Airbnb and you see all these cool design navigations, stuff like that, or the images. What exactly do you like? And just lay out the elements, and that way you could start analysing, ok, what are the different elements, and see how they are interacting with each other. And when you have those base elements, you could start, ok, so the colours are really cool, and then you can start with colour theory and because you already have the examples, you can apply it immediately to the things that you learn or read, yeah.
HM: I tweeted the other day, the one thing I realise is a lot of design sites and design apps that I like, they use very nice typography, and it doesn’t always have to be, you know, some beautiful font, it should maybe a lot of times, but it’s also how they just have the size of the text, the size of the heading, and then in relation to that, the size of the body, and things like that. And, you know, when you see a good design, you feel like, “oh yeah, that looks really nice.” It’s just translation into how, like, I use that into my website. That’s where I think a lot of people, especially a lot of developers, struggle with. And that’s the thing I wanted to ask you next, is... Do you have any specific tips for developers to learn to design?
MV: I think what you mention is the visual hierarchy, right, is sometimes a developer’s worst because they don’t know the principles of design. They know what to look for, like you mention, as a beginner, you know what elements need to be there, but you don’t know how to balance them and what exactly needs to be improved for people that will see, that will look more balanced. So maybe what I would suggest is you start with the visual hierarchy so that way you see which elements are the most important and that way you could tell the user or the visitor the story with hierarchy. So we have a couple of elements like a header, paragraphs and just… The first thing people will see… You can tell people a story with how you will lay out the elements. So if there is a big header, you could lead them with an image and that way you could present the paragraph below which tells the story of the header and the image.
HM: Ok, great. I think I’m gonna have to dig into both your blog and your site Sketch Tricks and learn some of these things. Because I try to pick up design things, you know, small tips from here and there. But I am primarily a developer so I have this sort of… Not phobia but just inability, I feel, to make a good design.
MV: I think it’s the same as a designer… I mean, I know frontend, so HTML and CSS, but I try to learn the iOS and it was overwhelming. It’s the same as if somebody that’s a developer is trying to learn design. It’s overwhelming at the beginning, like I mentioned, there is a lot of information, you don’t know when or where to start, but once you get a piece of it somewhere and you get another piece somewhere else, you can start connecting the dots. Once this happens, it’s so much easier to kind of get more in depth into different areas, such as colour theory or visual hierarchy, or typography, or stuff like that. But yeah, when you’re just starting out it’s just so overwhelming so I know how you feel when you’re trying to do something because probably most times you don’t know where to begin, right? It was the same as me when I was starting out in iOS development. But shortly after I just ditched it because I was so like “oh my god, that’s so much to learn!”
It’s overwhelming at the beginning . . . there is a lot of information, you don’t know when or where to start, but once you get a piece of it somewhere and you get another piece somewhere else, you can start connecting the dots.
HM: Yeah, that’s probably it! One thing I want to touch on, so far we’ve been talking mainly about visual design, graphic design. What about user experience design? ‘Cuz on your website you describe yourself as UX/UI design specialist. For our listeners, can you give us a small description of the difference between the two, and what user experience design really means?
MV: Definitely. UI, so user interface design, is usually what you see. So it’s basically visual design, how the elements are laid down on the layout, and how the colours are behaving, and the typography, and stuff like that. User experience is actual feeling of or the behaviour, and the whole experience of one interacting with the product or website and stuff like that. So basically, as user experience designer, what you are doing is designing the experience for the user. So when, let’s say, you come to the website, how do you feel, what are you perceiving and stuff like that. The main difference between the two of them is that the UI designer is basically responsible for laying out the visual style and what’s under the hood so what’s experience designer is actually figuring out: what does the user want? And what is the best way that the user or the visitor will interact with the product or a website.
HM: Ok, so say we’re designing a, let’s say, user sign-up journey. So someone comes to, say, my site Learnetto.com and they look at a course, and they decide, “Ok, I want to enrol in that course,” and then they click through to that course page and then they enrol in this course and sign up. So this flow of going, say, from the homepage to the course’s page to then signing up, where does that fall? Is that both UX and UI design?
MV: When you’re designing a flow, that’s definitely a user experience designer. So when you are laying out where, since you sign up, you should be taken, should you go to the welcome page or the homepage directly, or somewhere else, that’s for user experience designer to test it out, to see what the users actually want, and that’s designing it for them. And when you’re talking about the sign-ups or if we’re going to design the actual form, so the buttons, the colour of the buttons, typography and stuff like that, the layout, that’s the part of the visual designer, so the user interface designer. The nice part of being both is you can have the whole process of figuring out what the user wants, where you would like to take them, design the actual experience so they know once they are going to sign up, they won’t go just to some page and it’s not relevant for them, but it is something that they want.
The nice part of being both [the UX and the UI designer] is you can have the whole process of figuring out what the user wants, where you would like to take them, design the actual experience so they know once they are going to sign up, they won’t go just to some page and it’s not relevant for them, but it is something that they want.
As a user experience designer, the process is, I would say, you start with the research and then you present a strategy, and then continue with interaction design which is basically just laying out the flow, like you mentioned now. After that, you just prototype it and test it if it works. That way you can see, ok, this doesn’t work, why doesn’t it work? And once the flow is perfected, you go and design it visually.
HM: Oh, I see. So it that your typical flow? Are you first to propose how the flow is gonna be and then you sort of design interaction, and then, say, the flow, using some basic design, and then you apply some more enhancements to the UI design?
MV: My process is… Before spending too much time in finalising all the assets, so the UIs and stuff like that, I would like to know that whatever I am designing is resonating with the user, it’s easy to use. The only way to do it is to test it, is to prototype it, and we can just mock it up with, like, wireframes, just to see how it feels, and once we get a nice idea, we can then start applying a little bit of the design on it, just so it’s not playing wireframes, and then present it to the users and just see how they behave. That way we can immediately see what the flaws are, what needs to be improved, how they are behaving and stuff like that. Once we improve that and we design the best possible solution, only then it’s time for actual pixel pushing, or how it’s called nowadays.
HM: Haha, pixel pushing. Ok, so you mentioned earlier that you are thinking of teaching a course online. Tell me what the course is gonna be about, what you gonna cover in it.
MV: So basically, I will have three different stages. The first stage would be beginners stage which is going to teach people to actually get around Sketch, so what Sketch is, their tools, how they interact with each other, how you should use them and stuff like that. The next step would be actually using it for a project. That way, I will teach them to a web page or a mobile app to actually teach them how different things are done and how the workflow should be so how you would need to, say, export or for different assets what you need to focus on, and stuff like that. And the last stage would be improving the workflow for somebody that’s already using Sketch. I would use or teach them with different kind of plugins how to improve their workflow with some additional tools such as Silver, Zeplin and stuff like that.
HM: Ok, great. And what’s the format of the course going to be?
MV: I don’t have the course planned out yet because I am currently focusing on just writing the articles.
HM: But, I mean, are there going to videos and audio, or just text?
MV: Oh, there're definitely going to be videos. I am going to talk and just record my screen so they will know what I am doing because obviously, that’s the best way to learn, to just recreate. There will be workbooks so they will actually have some other examples that I won’t talk about in the course itself, just to train them, to exercise, some templates for them, if they are not sure how some stuff is done, so they could see it in the file itself.
HM: Ok, wow. That sounds great! I think I’m gonna sign up for this course. I think I desperately need to learn some design properly so that's... That sounds perfect.
MV: Nice, thanks!
HM: We’ll definitely link from our site as well, I think our audience will find it very useful. I think it brings us to the end of all questions I have for you today. Just before we go, I wanna ask you to tell our audience where they can find you online and where they can follow your work.
MV: Awesome. So I think the best way to reach me is on twitter, follow me on @markoxvee. Thanks for having me Hrishi, I appreciate you.
HM: Yeah, no, thanks for coming! I really enjoyed this chat and I think I really learnt quite a few things on how to go about learning design. I am definitely going to use them. We’ll link to your site and your twitter account in the show notes.
