I want to tell you why those visual skills are  important and why they're not really art-related. So, you don't need to be great at illustration,  drawing and anything like that to have better visual skills. And the reason for visual skills and  their importance is that right now the attention span of most humans is shorter than a goldfish,  and the study done on that was done in the year 2000 or around the year 2000; so, it's been 20 years after that, so it's probably even lower right now. We might be on ... the attention span of an ant.

So, it dropped from 12 seconds to just 8 seconds because we are *bombarded constantly*  by stimuli from every direction, and also there is something called *aesthetic usability effect*, which means that if something looks good, it's naturally perceived by people as being more usable – even if it's not. So, if you're doing anything visual, other people are going to look at it, other people are going to see it, and they're going to evaluate it

and pay it enough attention – or not enough attention – depending on how good the visuals are.

So, you might as well go the extra mile and think about the *context of use*. Where's the user using it? What else is going on? What would be helpful to them? You know, and you gain these insights from user observations and research; going to those places and spaces, you know, being in that place – the airport, the hotel, where someone's trying to log in with their phone,

and going through that experience or having them do it and you observe them; maybe talking to them and seeing what their experiences have been with your domain. If you're designing something for a hospital, go to the hospital, go to the waiting room. If you're designing something for a waiting room experience, I talked to a friend who was designing something for a waiting room experience, and they were trying to gamify so that you know where you are and you're not pushed, so it's almost like a leaderboard – you're next up with the doctor. I was thinking: I was like, in a waiting room; what's in a waiting room?

Screaming kids, sick kids; you're sick maybe – maybe your arm's broken; sitting in a chair with other people, there's a social pressure in that situation. So, how could you lighten that up? You know – make it a little less tense. How can you make it a little bit more engaging, and therefore make it more pleasurable or more joyful to sort of wait for the doctor and know how long you have to wait? And that thinking is not impossible, but I had to go there in my mind;

I'll go to where the user is in my mind if I'm brainstorming. But usually I don't do this by brainstorming; I do this by going to places and spaces and observing and bringing that back to my design process, and that is the most important thing.

If you're starting as a designer, you don't  need a lot of colors, just as with fonts. If you're thinking, 'Okay, I have 60 million colors in that little picker, so let's try to use all of them!' that's not really the case. What you really need is a *background color*, a *foreground color* and an *accent color*. And there are some rules that you  can then look up on your own later, like the *60-30-10 rule*, which is pretty useful. But, in general, what you need to really remember from this is that you need a *background color*,  so in my case it's going to be white.

Then you need a *text color*, which is going to be some sort of black or dark gray, and the *accent color for the important actions*. And one thing that you can actually tweak here is to have that darker color instead of being pure black, add a little bit of that accent color. So, in our case, the blue to it, so it's just going to look a little bit more connected to the blue and it's just going to look better together. So, that's just one way. And you need *three colors* really to pull off most designs.

And you can start adding colors once you  feel more comfortable with them. But when you're starting, really just the less colors the better because it's just much harder that way to screw it up. Two of the worst possible color combinations  are mixing red with either very saturated blue or very saturated green. And if you look at it more closely depending on the type of screen that you have, you'll see that on the place where they kind of mix together,

that little line becomes a little bit fuzzy. If you look at it a little bit longer, it starts to hurt your eyes in some cases on some screens because this contrast of those colors works really, really bad together. So, if you want to make a Christmas app, for example, there are better ways to do it, but *generally avoid those color combinations* and *always test your colors if they're clashing that way*. So, you can just place one on top of the other and see if that fuzzy line appears on them.

And that's one way to actually test it – you know – *by eye*, just looking at it. If it looks good, then it looks good.

Do you find the terms "user experience" and "user interface" confusing? "User experience" and "user interface" are related and sound similar, but they mean different things. Don Norman, the inventor of the term "user experience", said, "User experience encompasses all aspects of the end-user's interaction with the company, its services and its products." - They're all about optimizing for the people, try to use and understand what they're given so that they can understand it,

so that they know what to do when something goes wrong, so they know how to actually accomplish their goals, so they feel good about it and the technology does not get in the way. - UX designers have to create an all-around pleasurable experience that meets the needs of the users. This holistic perspective is what makes  it different from user interface or UI. - User experience design, or UX design, is everywhere, from how you interact with your smartphone to how your home is designed. Of course, not all experiences are well designed, and that's why UX design is

such a rewarding and challenging field to be in. - The user interface encompasses all the visual elements the user sees, hears and interacts with, including colors, typography, buttons, icons, screen animations and more. These visual elements are key to support tasks and usability. UI is how a product looks and all its visual  elements, which plays a significant role in UX, which is the overall product experience. - What you need to do to get good is to remember those couple of things:

Always align your buttons well. Always  create hierarchy by larger spacing between groups and reuse the basic forms and just a couple of colors initially because that's going to help you get better understanding of what is really  important in that UI design. And then you can experiment and you can explore outside of those boundaries. Let's look at it this way – observe the car dashboard. What you see, the icons, layout, even the shape and location of the gear shift are all UI.

The holistic experience of what you  *feel* – "Is it easy to drive? Is it comfortable and intuitive to use? Is it easy to understand the information displayed?" – is the overall UX, and both are essential to design brilliant and successful solutions and experiences.

A lot of the users have now become very tech-savvy. A lot of the people using apps and using websites have been using them for 15 or 20 years now. And they are pretty skilled, so they understand the typical patterns. They know that a checkout icon should be in the top-right corner. They know how a good login and registration works; so, all things like that

are kind of predetermined and there's pretty  little innovation here. So, you can do research to test the viability of the product. But in a couple of really, really like pattern cases there isn't really much way to innovate and user  interface – the *visuals can be the differentiator*, and of course, we can use a design system like  Material Design, but that would be a horrible world to live in because those apps would be all  looking boring and soulless.

And people want that design – that's why people buy Apple products among other things, because they look good and they are different than everything else, at least sometimes. So, *people buy with their eyes* and we really need to remember that. And also, there is something called *aesthetic usability effect*, which means that if something looks good, it's naturally perceived by people as being more usable even if it's not. So, those visuals are important  and we really, really need to keep that in mind.

Okay, so let's get to the actual  UI after that lengthy intro. Let's start with *visualizing* because we need to  visualize what we're going to make and of course, if we don't have a lot of experience, we need to kind of use what we have. So, the *less experience we have, the harder it is to visualize* the things that we want to design. And I have a very good example of how it often ends up and how it actually discourages people that comes from 'The Simpsons'.

So, you see an image in your head and you try to recreate it and you end up with something like this and you say to yourself, 'Why doesn't mine look like that?' And this is because we often think that it's really easy to just recreate something that we have in our head without the foundational elements that are making up a good design, and we think that those Dribbble shots – you know – with like semi-transparent buttons are what is good design, so we kind of skip the whole grid, skip the typography,

just add a nice gradient and we  think that's going to be fine. Well, it's not the case. So, what is UI design? In general, what you really, really need to learn first, because everything else comes with practice, is *grid typography*, *hierarchy*, *readability* and *some basic aesthetics*, but you don't really need to be an artist, and design is definitely not art. It's not art because you have a very limited kind of scope of what you can do,

and you can't be "too creative" because that's going to make it unusable. So, a lot of those Dribbble shots are basically artworks and they're just not able to become a real product because  they are done in a way to just kind of have like a flashy visual. So, we need to understand that, but what I think is the most important thing is *the grid and the layout*. But I often tell the junior designers what I think a UI design really is because this whole design thing is  really like created to feel difficult to people.

Like, you know, we have those super genius UX designers talking about lengthy processes, and as a junior we get discouraged – we  get like, 'Oh, I'm not going to learn that ever because I'm not a super genius like they  are.' But in reality, a lot of the design is basically moving rectangles around. So, you take a rectangle and based on some research and some knowledge you move it to a different position, change the color, change the size and that's it.

And it's all rectangles, even if you're moving ovals because the bounding boxes are rectangular as well. So, if you learn *how and why and where to  move those rectangles to*, you're set to go.

In this five-step process to designing for mobile, I want to point out some of the aspects or steps that are so critical and tell you why they're so critical and explain a little bit about how they work. The first step, *assess*, is requirements, your internal priorities,

your business objectives. And so – that's for step one – the last step, step five, should be familiar as well, it's *sketch*. So, we'll also add sketch, review, refine and have that sort of iteration. But it's what happens in steps two, three and four that are really, really critical and make the difference in a mobile UX design that outperforms and differentiates and creates a very, very deep bond with users and in a way that what we call *user adoption*.

So, step two, *understand* user needs, and that means understand their context of use, problems they're trying to solve, their tasks, their goals, all the things that make up personas, and then make up journey maps. Once you do that very crucial user research step, it's step three where you *define* your value proposition and your emotional value. So, emotional value is what users get from the app so that you essentially support their tasks,

you support their goals, you support a social aspect of their experience. You help them by giving them features and functionality that they find useful. Maybe you surprise them pleasantly, delight them. Understand their cultural needs. Understand their safety needs. Whatever it might be, you define that value proposition,

but also emotional value, that chance to connect with a user in such a way that they feel at home with your app or mobile content. So, that's step three. Step four is where you take what you've learned from user needs and from defining your value proposition and your emotional value, and you then *create a UX strategy* that's like a blueprint for when you get to sketching in the next step.

So, a differentiated UX strategy is something that makes your app special and connects with your users in a special way. You can't just generate this internally. A lot of product folks have pressure in their jobs, product managers, to differentiate, and they typically rely on market research, focus groups, surveys, that kind of thing. That's market research. And so, what we're talking about is if you get into the behavior of your users,

if you really dig into their contextual experience and what surrounds it and what they do as they go through their day and their lives and how they live it – if you get into that, then you can understand their needs, define their value proposition and their emotional value in a way that helps you differentiate. So, it might be how you approach the design, what features you drop

or that you add. In other words, the priorities and the good decision-making is what all of UX is about. It's about good design decision-making, And this five-step process is based on a very powerful and proven approach that I've taken in my work over the years, and this is basically the way to do it.