Design de interface: tipografia, cores e mais! | Bootcampinho UI/UX Design

Cool, Mai, I already know how to compose my images, how to make my layout usable, but I have no idea what typography I should use. What font do I use? What color can I use?

What elements do I use, in what way? That's what we're going to talk a little bit about in this class. This class could be an entire course.

So, I'm going to try to summarize some concepts and I'm going to leave a lot of links and a lot of material on the site for you to look at later, okay? Our interfaces are composed of several design elements, for example, point, line, space, component, colors, typography, even animations can be design elements, after all, they can help. .

. in fact, animations MUST help with the communication of your layout. For example, when the user makes a movement like this, he expects the animation to follow their movement, especially when he's on his cell phone and so on.

So, animation, is also a design element, must also be thought of. And I want to take the opportunity to indicate one more little book. This one, “Graphic Design: The New Basics”.

This is a book that I've had for many years, like, since I was studying graphic design in college. Like, one of the first books I bought in the area and it's by Ellen Lupton and Jennifer Cole Philips and it's very good because it brings, I don't know if you can see it, there are many, many examples, for the people who like visuals, there are many, many, many little images for you. And more important than the images, they bring several of these elements that form the design, from dots, straight lines, colors.

. . and they help you to understand these elements, how they are related, they bring several examples, something I really like is that if you look for examples here, they are diverse, they bring examples from magazines, product examples, photography.

. . So, they show that these design elements are not just interface design.

"There are no rules, there are no laws in the entire design, but NOW in interface design there are, because everything is different! ". .

. No, guys, it's not all different. Those principles that I brought in the previous class, such as alignment, proximity, repetition, and contrast, as well as these concepts that I'm bringing about typography, colors, lines, shapes.

. . they are used in basically any type of design.

And we can and should take advantage of them. And the question that remains is, how do I choose these elements? How do I know what type of typography I'm going to use, what color I'm going to use, what element and so on?

Usually, you learn this with time. With time, you will start to get very good at it, you know? But this is a lot of experience.

So look for several references, preferably, references from people who are already established, from brands that have already established themselves, because then you are guaranteeing that you are seeing good references, references that have already been filtered. Furthermore, these elements can often be derived from the brand itself. I'm going to show you an example here that is derived from the brand itself so you can understand a little bit how this can work.

This example is a real project I did for a client of mine, ShipSmart, and what's cool about it is that the brand already had several elements. If you notice on the company's website, they already used several rounded edges, this yellow button pattern, there was already a typography pattern, the use of colors was already established. What I did was, in this case.

. . I took advantage of all these established patterns that they had and I put together the message that they asked of me.

My client told me, "Mai, we need this site to be extremely simple because it's for a general audience". So, with that, I was able to build an interface. I always tried to focus on having as few elements as possible on the screen, I had worked on some cases that had many elements, but the deed of leaving, for example, enough space around the elements, using images that transmit a feeling of agility.

. . Since they are a client (brand) focused on shipping, the feeling of agility is something very important to them.

All of this has been thought out very carefully. The use of very large texts helps to guide the user. For example, here you have everything, all the texts are in large size.

I even did this little details with animations, for example, to show what is width, what is height, what is depth, because they said, “Mai, there are a lot of our customers who don’t know that, and they end up getting this wrong”. So, these details that I used in order to create the interface. Or, for example, to add more boxes here.

When I click on “Make a quote”, you can see that this style is kept. This style of using typographies that are always very large to guide the user. So all these details were being taken from the client's brand, from the directions the client gave me, from good design practices.

For example, I could have just taken the style exactly as it was on the client's site. But I also wanted to bring a little of my expertise as a professional, for example, when I use these large texts, I recommend to the client: “Look, it makes sense for us to use the large text here”, “It makes sense for us to use an alert message". All these little details help to compose the interface, besides that, you can see very well that the color pattern is always the same.

Look, for example, how carefully done. . .

there is a little yellow loading bar, the button is also yellow, which is our highlight color, and here we have gray, which is a color that helps to give. . .

to highlight some elements, for example, here, for example here. All this helps to compose the interface and the cool thing about this project is that you look at these little screens and you think "how cool, how simple", but in fact, it is a much bigger project. Even when I made it, I originally made it for mobile because we already knew that their users used mobile much more than computers, so all these details you can ask and you can learn.

And here I, there's a detail. Since they use a lot of rounding, I added at least some rounding on all the edges, in all places. All of this will help to compose your interface.

The width, and thickness of borders is always the same across my interface. These are all details that I can leave to the client later on. For example, when I deliver a project of mine, I deliver it well-detailed and specified.

I have well defined, for example, the typography standards, for example, you see that here, there is this Title L with size 48, this Title M, with size 24, S with size 20, XS with size 14. I also have here the body font sizes 20, 16, 14, all of these will help to compose the interface. And the cool thing is that to create these interface sizes, I used something we call Typographic Scale.

I'm going to open a website here for you, just so you can have an idea of ​​what it is. This is a site that he helps to generate these typographic scales. The cool thing about using a typographic scale is that you can differentiate the size very well, for example, what is a larger title, what is a smaller title, what is a more important, less important title.

In this example that I showed you, it is very clear that this one is the most important title on my page. However, when we come here to other places, here is the most important title, here is also a title model, here is also a title model, but as I used a typographic scale, these titles are always well defined and differentiated. Here we have a title model, here a title.

And the title of my input, for example, is already much smaller. And this use of a typographic scale helps to make all of this much more consistent, for example, look at this. .

. It has several typographic scale sizes. This one is a more standard size.

You can use, for example, a larger one, for example, when you use a larger typographic scale, for example, I'm making a website that belongs to a magazine, so I need to be creative with the elements. Then I can give more highlight to a single page or when a page deserves a lot of attention, normally you can use a larger typographical scale, that is, this bigger differentiation between one title and another. You don't need to, for example.

. . because I took this title size.

. . Here it shows the typography size.

Usually, I like to take this size here, it's 109. 66. I don't really like these broken sizes.

Normally, I round to multiples of 8 or multiples of 4. It's the pattern that I end up using in my interfaces and that works very well because I can later pass this on to my clients, including these patterns of space size between one element and another, of element sizes. .

. and that makes it much easier later on when coding. For creating a relationship between the elements as well as the fact that later they can use it as variables in the code and that will help them to make the whole layout more consistent and more real to what you created, ok?

So usually, for example, if this is 67, I'd round it up to 64, here's 41, I'd round it up to 40. And you don't have to, for example, 40 can be a Medium Title. This one could be a Large Title.

This one I might not even use, I can sometimes even skip one or another font sizes. What can also help you, look, here you can choose as well. Of course, I'll share this link with you later on.

You can choose the font, for example, in that project there, I used Montserrat. I can select them here, look for Montserrat and it already adds for me the typography that I selected. I can even choose its weight, the text that will appear.

I can change the typographic scale. Usually, when I'm working with products, for example, I have to make a dashboard, it's a complex product, a Desktop App, as I've worked with it many times, usually, it's not nice to have such a big difference between typography sizes, because the typography ends up taking up a lot of space and is a system that already has more information. So, in this case, I prefer to opt, for sizes, for smaller typographic scales and that helps me to create consistency.

So this is just one way you can start working on typography. Plus, of course, you can choose from a variety of typographies. I'll show you something.

. . I'm going to enter Google Fonts here.

. . For example, this one here is Google Fonts.

I even recommend it when choosing typography, especially for those who are starting out, who don't know very well what to do. Choose typography from Google Fonts, because this will guarantee that at least your developer will have access to the typography, unless it is a brand, and the brand already sends you their own typography, that you know that you have the right to use that typography, then you can follow the typography of the brand, okay? But if you have to choose the typography, my suggestion is: choose typographies from Google Fonts.

Also, opt for typographies that are already more established, you know? Here we have, for example, "trending", you can sort by most popular, here Roboto, Open Sans, Montserrat, Lato, Poppins. The cool thing about these typographies that are more popular.

. . I know that, "Ah, but everyone is using them" But if you don't know how to choose typography, you might get one that doesn't work on every type of font, or that sometimes has a rather strange design that doesn't match so well, or that doesn't have many weights, weights for example.

. . typography can be bold, it can be italic, it can be semi-bold, semi-italic, I don't even know if there is "seminegrito".

. . I only know the English term now.

. . such a stage in one's life.

. . So what I recommend for you, especially until you start to get really familiar with the use of typography, is to use typographies that are already being used a lot.

Look for combinations of fonts that are already established. There's another cool site that I'm going to show you, which is FontJoy. This site helps you choose typography combinations.

It's really cool, because it already shows here how it will look, for example, body text, a subtitle and a title and here, it shows the typographies, you can generate other combinations and it goes on. You can block one typography type or another. And this is really cool, because it helps you to start choosing and understanding some of these font combinations.

I'm not going to go into too much depth about how to do these combinations and things like that, because that would involve very advanced typography concepts. There are two books I recommend for you: One of them is this "Thinking With Type" also by Ellen Lupton. If you're starting typography and, I honestly think this is one of the best books to read on the topic, because there are also lots of examples and it explains a lot of these basic concepts of typography, which is very important for you to know as a designer.

So, I highly recommend this book as well and again, it's super easy to read. And the second book, if you want to go even deeper, this one is much more technical, it's called "The Elements of Typographic Style" by Robert Bringhurst, this guy is really famous in this area of ​​typography and from here it is already a much more advanced book, but I also recommend it if you like typography and want to go deeper. But if you don't know anything, go with this "Thinking With Type" and it will help you.

And there are several other links about typography on the site as well, okay? And another point that I think is very important for us to talk about here is in relation to colors. Let's go back to that example I gave you.

In this example, see what I have here, basically three color patterns. They are the colors of Highlights and alert, in this case, yellow is also used for alert, as it is the main color and yellow is already known as an alert color overall. I ended up using the same color for alert, but I usually prefer leaving the yellow color separately here in Feedback as a warning, but since in this case it was also a highlight color, I didn't have much of a choice, okay?

Usually I use three color patterns, one is the accent colors which are those colors that I use to highlight an element on the page, for a little detail, and so on. And this color can have gradients, for example, here I have some gradients of this color, both darker and lighter. Usually I use it darker when.

. . for example, here is yellow, if I need to use this in a link or in a text with a white background, this yellow here will not fulfill the accessibility standards.

So in that case I end up creating a darker version as well. In addition, I also have neutral color patterns, these are the colors that go up to white, they are used for text, for a box, for a border and so on and I also use the feedback color patterns, why? Usually we have to predict in our interface that something might go wrong, or that something might go very well and you need to give a message of success.

So it's important for us to think about what the user feedback colors will be, how are we going to help the user to interact with our interface? Mainly in these cases here. .

. For example, this is a system where the person has to fill out so they can send it away. There's a lot that can go right, there's a lot that can go wrong.

So, it is important for me to be able to help the user, for example, on this initial screen, when the user tries to click here to make a quote, which is a button disabled by default, I give him a message saying that he has to fill in the data first in order to continue. So this is to help the user. It may be that the user tries to click on a disabled button.

My suggestion is: try to use, especially if you're starting out, avoid using too many accent colors, usually I prefer to use only one or two at most. If you don't even know what you're doing and if you can choose, choose only one. Once you're comfortable working with an accent color, try adding one more so you understand how it relates.

Always add more elements little by little, that is, start with one typography style, play around with its sizes, until you understand, "hey, this typography is working well". Start with a color, then add more colors when you feel comfortable, because if you want to add a lot at once, the chance of you being comfortable with it is very low, unless the client of course already asks, they already have some standards and so on, then you can follow what the customer asks. But my recommendation is: start as simple as possible, don't try to start with what's complicated, because you'll probably struggle much more, okay?

In addition, there are other elements that can help tell your story. Here we have already talked about some of them, but for example, the spaces, they talk a lot about the interface, usually fancier sites have a lot more space and sites with more information have less space on the edges so it all depends on the message you want to pass. Here, for example, I chose to use a lot of spaces to bring simplicity, to bring the user's gaze exactly where I want him to look, in addition to the rounded patterns that we already mentioned, the edge patterns that we already also commented, so all the elements of your interface deserve to be thought out, even the image patterns, the illustration patterns.

All this must be followed throughout your interface. Here, this interface, it doesn't have many images. Even when I use video, for example, I've always used a little yellow filter on top and so on and all of this helps to tell that story that needs to be told when you solve a problem.

A good reference for you to take a look at, mainly to learn about patterns, about what big companies are using, are the so-called Design Systems. Big companies have these Design Systems, I'll leave a link to a video where I explain better what a Design System is, what a Design System is not, but it's really cool because they establish these standards, for example, here there's Google's, there's also Carbon, which is from IBM, I love IBM's Carbon, guys, whenever I have a question and I want to see how a brand is using it, anyway I come here. There's also Google's here, even indicating Material 3, which is the new design system, they're migrating from one to the other.

You can check the typography patterns, elements and components and see how these big brands are using it, because this can be an excellent reference for you, okay? And besides, you already know that we won't finish this class without Alfredinho's Challenge, right, guys? Your challenge today is the following: you know this style guide that I showed you, that I made for my client, where I define typography standards, typography sizes, body text sizes.

. . The default versions, here we have desktop and mobile.

If you are going to do both, you can define them now, otherwise you can define them later. I also already define the link patterns, for example, and the color patterns. Your challenge is to create something very similar to that.

It's about creating a style guide. I'll even leave some images of style guides on the screen so you can see what a style guide is. Basically, the style guide will define how your layout will be, but without creating the layout, that is, it will already define these standards of which typography will be used, which colors will be used, image types, the style of the shapes, will it be more rounded?

Will it be more straight? Will it have a line? Won't it have a line?

All this can be transmitted through a style guide. And to create your style guide, don't forget to use these tips from this lesson. Avoid using too many typographies, avoid using too many colors beyond what you need and that way you will be able to build a much nicer interface, with greater scalability and while you are developing it, if you need it, you can add more things later on.

You can add more typography styles. But it's nice that you start with a foundation. You already create this size base, look around, look for a typographic scale, try to create your own, because that will help you in the future, okay?

And if you want to know how to do all this and still apply accessibility to your design, you can click on this card on your screen, because Alfredinho and I will be waiting for you there.