Como aplicar Prototipação (prototype) em design | Bootcampinho UI/UX Design

Do you want to see how I apply all this prototyping stuff I showed you to a real project? From accessibility, and all these stuff about contrast, proximity, repetition, typography, colors? Come with me because we are going to that little project that we were already working on, which is what it would be like if the Amazon were a website.

I'm here with the site open and look how cool it already looks at first sight. Look at this use of animation to attract the user's eye. When I put this use of animation, it's pretty clear that I want the user to look at this area of ​​my page.

Even though there are other info there, I even put an animation here on the leaves on a very subtle way. If you don't look carefully, you won't even notice it, but this is that extra 10%, that added value. Here it has several very nice things that we can talk about, all those elements that we commented on, for example, look here at the proximity of the elements.

You can see that these elements belong to one group, they are all close to each other, these tags also belong to this group of tags here. They are also so close to each other, that this contrast between the top of the website and the other elements is very clear. Here there's proximity again.

The cool thing here is. . .

can you see that this space here is much larger than this space here between one card and another? This helps bringing that sense of closeness. It helps to bring the sense that they belong to a group.

When you have, for example, I have a block here that is just below the other, if it doesn't belong to the same group, then you should increase the space, don't be afraid to increase the space, it helps a lot. Here as well, as it is an even bigger block, I increased the space even more to give it even more prominence. Remember that feeling of contrast we talked about?

See the contrast here? Since in here there's a bunch of the same layout, when I put a different one, I increase the space, I continue to maintain the alignment of my elements here, even when I increase them, they remain aligned, they are all inside a grid. And even down there, when I go down and I go up even more, it remains aligned on the grid.

Even if it's not aligned with this one, which is part of a carousel, it's still aligned on the grid and that helps, look how this image draws attention, how it looks large in contrast to all those other small ones, why? Because for me this image really deserved to be highlighted. So this is contrast.

Also, the matter of repetition of elements, you can see how the cards are all repeated, the tag patterns, the typography patterns, even this little pattern here when you hover the mouse and has this little effect on the card, here the tag patterns are also repeated. Throughout the whole website, there is this element here that repeats itself, it has this element that sort of guides the site. All of this helps to bring about that sense of unity.

When we talk about typography, it's really cool to see this part of the research, which has the blog, because it's very clear that there is a clear hierarchy between what a title is, between what a body of text is, between what is a call link, even if this link does not have an underscore, because it has this little arrow, it helps to bring this feeling that it is a link. Here when I click on it, again, this hierarchy of a larger title, supporting information. .

. Here, the typography itself. .

. since it is a blog, it is not because it is a blog with a lot of text that you have to make it small. No, guys, make the text big, let your user be able to see the text.

Here, even on a blog, look at this example of the contrast, how it works very well when I use this element among a lot of text, just a little detail like this. . .

and the cool thing is that this same green color is used when I come here, for example, on this gallery page it is used to draw attention to texts, that is, it also helps to draw attention to buttons. My primary button has the same green color that helps drawing attention to other places, here's also my primary button that already stands out well, your user is starting to get used to these patterns that you're using in your interface. Also, in addition to the colors, you see that here, I used red.

My interface is all green, but “Oh my God! You used red! ” Why did I use red, guys?

Because it's standard, users are used to that when there's a live, it's red. So, many times. .

. in fact, not in many times, but in some cases it may be worth sacrificing a color on your interface, one element or another for the sake of usability, but for you to do that here, you need to have this feeling, you have to know exactly what you're doing, because if you don't know, you're going to use a green there and ok, will it work? Yes, but not so well, because when the user sees it from here, they already know right away that it's a live, it's much easier to identify that than if the icon were green.

Silly little detail, but that makes all the difference, that is, also respect the standards that the user is already familiar with. Also, another nice detail. .

. see how all the shapes are rounded? As this project was related to the Amazon, I wanted to bring this feeling of more organic shapes, that is, every shape that I could round up, I did.

Here too, look how cool, when we go here, we even have an immersive experience and the animation helps to tell this story. It helps, it tells the user what they can do, that they can use the keyboard or they can drag it. This here is giving options to your user.

In addition, the experience can be immersive, for example, I can listen to the Amazon if I want [birds and forest noise], at any moment, if I want to stop I can minimize my interface or I can, for example, go back there and continue exploring. Here, for example, I can keep exploring, exploring. Here, when I click here, the animation helps bringing my card in a more subtle way, in a more organic way.

The animation itself matches the format of my website, and of my solution which is really cool in design. It's not just about doing things by chance, but about understanding what's being done. Here as well, you can go all the way there.

The animation itself here with the little smileys, when you hover the mouse over it, there is a little animation there that makes you happier and that helps to bring a cool feeling, an organic feeling to the site. Another cool thing, it's not here, but on a separate screen, I also did it to draw more attention. Pay attention to the contrast, guys.

If the person types the wrong URL, for example, they would end up on the error page. Can you see the contrast? Can you see how this red image with all this background contrasts with all that green in the rest of the interface?

This is really cool because in this case I really want to draw attention. I want that if by any chance the user lands here by mistake, I want it to "oops! ", draw their gaze to this this page that has already burned.

That is, it helps to bring awareness to the cause I'm trying to defend. So, in that way we can build interfaces that communicate very well with each other. If you look here, it has all my patterns.

I didn't create those color guides like I usually do because this was a project of mine, but here it has the feedback color patterns, the accent color pattern, the neutral color patterns… In the same way, it has the typography patterns, typography size and I really like to use for my typography standards like these L, XS, M, XXS… This is the standard of North American shirt sizes which is L, large, or M, medium, S, Small and so on, I think it works very well, because I usually start with a title size, a “medium” font size, right? Which is the medium and I can then make a smaller or larger one if I want and that way I can increase this range as I need it. I hope this project has helped to clarify for you a little bit about what is possible to do, how we manage to apply each of these things that we learned, all those things that we studied.

. . Did you see?

Did you manage to see in this interface how most of those researches that we talked about were applied? About how all that biodiversity topic that came up so much in my research, about the matter of learning more about the Amazon, the matter of being able to explore the Amazon as if you were inside of it, about how everything that I have been building I managed to apply in this interface? And this is your objective, it is to try to apply all that research that you did so extensively, to try to bring it in a consistent way, in a cool way, in a well-applied way, which is what will help to bring value to your design, okay?

And before I release you from this lesson, Alfredinho here is screaming in my ear saying: “Maiane, don't forget my challenge! ”. Alfred's challenge for you guys!

Your challenge now is to create all the screens you need for your prototype. Simple, right, guys? Just do it… [LAUGHS and cries lol] No, take everything you created there, all those concepts, the style guide and everything else and create your interface screens.

A tip, always try to think about this concept of components, remember when I explained the tools to you, when we talked about components? Repeat the button, repeat the link, repeat the header, think of elements that are repeated in your interface and when creating them already create them as components, because that way it will be much easier to reuse these elements in the future and it also helps not to run the risk of putting a different color for each button, each button will be different. No!

It starts with a button, folks, primary button. If you need it, you create more and that's precisely what design is about. It's about you starting to scale as needed.

Usually, for your wireframes, if you made them the way I told you, you will already have an idea of ​​the number of buttons, the number of typographies and so on that you will need and that way you can start with a base and increase the base as necessary, ok? And last but not least. .

. Don't forget to keep the accessibility in your layout, be careful with the matter of contrasts, keep the user in mind, the text of the links, don't use a button with “Click here”, for God's sake. Help the user find themself on your page, okay?

And if you want to know how to test your design, let's fireproof your design in the next class! Just click on that card on your screen, okay? Let's go there.