Hello and welcome back to the Frontend House channel. My name is Pawel. I'm Head of Design here at Frontend House, and today I have prepared for you a video about what should devs know about design. Check our Product Discovery Workshop with our Frontend House experts to improve your project.
Transcription
What exactly should developers know about design? About UX design or UI design? First of all, maybe you should first clarify what is UI and what is UX design.
UI vs UX
So UI is basically the overall look of an application, of how it looks like and how it navigates, sort of like a visual hierarchy on the website, all the buttons, how they look like, what color they are. And all of that is basically UI design overall user experience design is basically how the application behaves. What happens when you press this, what happens when you press that, or what should the overall experience of the user look like? So those are the major differences and basically like a very general description of what UI is and what UX design is. So when we have this already behind us, why should developers know the difference? And why should they learn at least a little bit about maybe both, maybe UI design or maybe user's experience services?
So one of those things is something that is actually sometimes a problem in many organizations, just communication. Designers communicate with frontend fellow developers and frontend developers communicate with designers. When we have a better knowledge of what the other side is doing, we can better communicate, better understand the problems, and better clarify what our problem is and what maybe they should change. This works both ways as well as if designers knew, for example, what API is, and how certain things appear on a web page, or basically how the developers are working CSS, HTML, and a little bit of JavaScript. It also helps designers communicate with frontend - mostly frontend - developers.
So communicating and knowing what alignments are, what are white spaces and how do you design certain things is definitely something that might help communicate those two departments in one organization, not even in one organization, but basically help front end developers or maybe any developer that is working on any visual aspect of the application, to work and communicate with the designers. That is why it's very important, in my opinion, that we know actually a little bit of what the other side is actually doing. One of the first things that I think personally that developers should get a little grasp of, is the tools. So what are the tools that the designers are using? So at least this time at the moment when I'm recording this video, maybe not most, but certainly, a lot of designers are using tools like Figma, Sketch, or Adobe Experience Design.
Those are, I think, the three biggest tools right now. And I think the biggest one of them for this moment is Figma.
Figma
So getting us to know what is the software, and how it works will prove definitely very beneficial to you as a frontend developer. The Figma has its own set of rules. How it behaves. It allows multiple people to work on the same project while seeing what the other person is basically doing. You can inspect certain files and you can go to the design phase. If you are allowed to do that, you can install certain plugins. So for example you could look at that in Figma. There's a plugin that allows you to inspect a code but not in like CSS or HTML manner, but it shows you the code for React or maybe for Angular or whatever framework or library you are working on. Those kinds of plugins might allow you to do so to make your job basically easier. And why is it important that you know that not the designers? Well, designers might know the difference between React and Angular for example, or they might not know that a certain plugin could be beneficial to you because they do not have the knowledge that you possess. So you have this knowledge and then you use it to find those plugins, like for example here I have React plugin that allows me to inspect a code in React way of writing a code. So you can inspect this and copy it and paste it as a class or anything to React whatever actually you are using as a component for example in React and then you have it ready and you don't have to write separate like other lines of code which makes your job easier, or anything other. That's why it is important for you to get a little bit of knowledge about the tools that developers that the designers are using. And then thanks to this knowledge you can find plugins and maybe even some from time to time. If you need to change something, that is a reminder thing like maybe, perhaps the designer made some mistake or maybe the designer is on their days off and you need to change something and they are not here.
So if you know how to do it because you need for example change only the size of text on a certain page. Because if you do it only on the web, only on your application, and you won't do it in design, then somebody after that like QA Engineer might come to you and tell you that this text doesn't match the text size that is on the designs and you might forget why it's that you have to remember and stuff like that. For example, if you think that somebody will tell you: the size of the text is too big to make it smaller and there is no designer available, you can go there and just change it by yourself. That is why it would be good for you to get knowledge of Figma. But another thing that you might find interesting and profitable for you because sometimes you might not work with a designer because somebody will tell you: oh, this is an application that will be used only for the administration of us, just like five people or six or maybe even two or three that will be using it. So we won't need a very beautiful UI design or something like that. And they will not want to pay for designers, but you have to work on that. So there are some things that are really minor and maybe not minor, but really important, but easy to learn. Like for example, white spaces.
White spaces
So white spaces are basically the space that, let's say, doesn't have anything on them. It's just an empty space that you have on your application. So when you, for example, use it correctly, you might make the text more visible, more readable, or if you make the text tighten up in three paragraphs very close to each other, which means that the white space will be very little and a lot of white space around it, you may make the text less readable and everything around the text that will be white or black or whatever will be empty. It would just kind of a drag, and make you feel uncomfortable. So this is why spaces are really important to just use and keep in mind of the spaces that are empty, that they are like empty for a reason, sort of that you, for example, make a lot of content on the left side. It takes the pass to the right.
So then this right side for a moment might be a bit empty. So you might think, okay, we have a very empty space on this right side. What can we do? Maybe you can set up a little bit of a mini-tutorial there, like say press this on the left or something, or any kind of illustrations that will make the UI more pleasant for the user, something like that. But the white spaces are certainly something that as a developer you could know. Basically, you could know and have some fun with it and be more proud of the UI you make within the application.
Alignment
As a developer, another thing that's really important and quite easy to just grasp is alignment. So alignment is basically like certain things appear in a certain order on a platform, for example, below each other to make it look like visual hierarchy and information architecture. Information hierarchy is set up in the right correct way. For example, if you have a list on the left that is very beloved to each other, they are very aligned on the left side. And then if something would appear below but a little bit to the right, this might think that this thing is nested to this item above it. So because of that, as a user, you will think that's okay, so if you have an item that appears below and to the right of the item above it, you will see it as a nested one, which implies that it's quite within this category of the item above. So alignment. This is why it's very important to just keep on track, and keep a mind off on it, as well. For example, when you have a web page and this is something developers do, designers do it - it's containers. Containers have certain margins on the left, and on the right. Let's keep it aligned into this container. So everything then is connected in the right way.
So alignment would be another thing that you could probably learn a thing or two about to just make it more readable. And alignment certainly is very important when it comes to the visual information architecture of your web page. That's why alignment is one thing that you might want to learn about a thing or two.
Colors and Consistency
So when designers set up, like designing a certain page, they use a set of colors. Yeah, we use like five colors. Those are five different colors from time to time. Maybe a little bit brighter or darker. But basically, we use those five colors and those colors most of the time will have a meaning. So for example, if you have red color, this red color will most likely be aligned to errors or something like this.
I don't know. For example, cancel, like you have a cancel and add a button or even cancel and proceed. So proceed will be green and cancel will be red. And if you use, for example, the red color on a proceed button and the green color on the cancel button, this will be extremely confusing for everyone. This is why those colors are very important to set up what they mean.
And most of the designers, actually, all of them should write down a little bit of documentation. What kind of colors mean certain things like winning for proceeding and anything that, for example, makes a change or anything like that. Blue ones are quite neutral. Gray ones are something that makes it disabled. A Red one is for canceling a certain action, stuff like that. That's why you should know that. You should know those colors. Set them up before you proceed to make any changes, actually. And thanks to that, you will have all the colors written down and you know when to use them, and other people will know when to use them.
Also, when it comes to colors, it's just the consistency of using them. You cannot use the red color for canceling and proceeding. This is like the consistency that we use a certain color for a Sentinel action. And thanks to that, we basically have this kind of consistency within the entire application that makes the user feel more comfortable and doesn't exceed any kind of committed overload on him. That's why colors and consistency are very important.
And this is something that you should actually really know something about. So yeah, colors and consistency will be the next thing for you.
Base components
Also like base components that you use on the application as a web developer, front end developer, or developer community that works on the UI/UX aspects after UX research of the web page of the application. You know, all of them, buttons, inputs, cards, any kind of like any of those things that might appear headers, football, and stuff like that. So when it comes to the design phase, it's also really important to create interface design in a certain way and keep them consistent.
Like, all inputs kind of look almost the same. You don't use two or three different designs for inputs or for buttons. If you, for example, decide that your bottom should have a little bit of corner radius, then all of them should have a corner radius. It's not like some buttons have a corner radius and some of them don't have it. The same goes for inputs. If some inputs are in a rectangle, then all of them should be in a rectangle instead of some being in a rectangle and some should be just aligned. That's why this is also a matter of consistency within that. So those basic components that designers use should be easy for you to understand.
I think that you should actually know as many components as you can. Because when you design a web page, you must sort of like use certain components that will fit the action that users want to do or will fit, as the visuals of what you want to accomplish within an app.
Like, for example, we use cars, for example, products like we want to show a product. So those products are pure on cards, but we don't use cards, for example on the menu because they are too big. So knowing those components, knowing what they are responsible for and what should you use them for is very beneficial. So there's like a lot more components you should look at. Like Google Material or BMI has its own design system, Microsoft. You should check out the design systems and just see what they kind of have on them, what kind of components they are using and what they are using them for, and what kind of purpose they are created for. So these components are basically like components. This is very important. I'm sure a lot of you know this, but if you don't, because you like kind of leave it for the design industry experts, then you should definitely learn that those are just a few things that I find that in my opinion are crucial for the developers to know. But you may know a lot of them.
Summary
Maybe you think that there's something different. Maybe you think that I didn't mention something that you think is different. So please write it down in the comments so the other people might know about it too. Just a shortlist of some things that I think are crucial. But as I said, a lot of more things maybe you should know?
Or maybe some of those things that I mention you shouldn't know? Thank you very much for the video we upload new content every Friday, so keep tuned and keep waiting for those, for now, thank you very much, and have a pleasant day. Bye.
