5 Design Tips for Front-End Developers
During my work, I have seen developers delve into the complicated world of UI/UX design. The reasons are many and diverse: the client has not wanted to hire the service of a designer, the company has had to cut back on design to be able to sell the project, the number of developers is much higher and there is only one designer available. Whatever may be the case, many times, a group of developers is in the position of having to design the navigation flow and the elements of an application or web themselves. So, if you are a programmer and you are in this situation, I present to you five design tips for developers to help you have a good base from which to start.
There is nothing that makes an application or web more aesthetically pleasing and easy to read than good use of spacing. Spacing works by creating free sections of content that the user interacts within a way that creates visual separations in their head that we as designers have control over. For example, you can guide the user to be able to differentiate several sections of the same page or element.
Not only does it make the interface look good, but it offers better navigation, greater readability, more meaningful content ordering, and makes it easier to highlight the sections that interest us the most. Remember, it is better to be too spaced than to fall short.
Colors are one of the most significant resources in an application or web. They convey emotions, identify a service or company, help us to attract the attention of the user. Although you also have to be careful, the misuse of colors can lead to confusion.
The choice of colors is almost always linked to the client’s company for which a project is being developed, many times they are given by style guides and you are allowed very little to play with those colors, but there is almost always room to work on it. The best way possible. The best advice I could give you is to learn how to use colors and how they interact with each other.
The typography is perhaps, together with the colors, the element with which the user first comes into contact, and therefore they must be selected very well. There are two types of fonts, serif (with serif) and sans serif (without serif). The serif is the small serifs and ornaments that some fonts have, such as Times New Roman. Arguably, serif typefaces tend to look more classic, vintage, or formal, while sans serif type is more modern and close.
Today a large number of applications and websites use sans serif fonts, to give that more modern look and closer to the user, although it may be the case of the intentional use of serif fonts to convey something deeper and more sophisticated. Normally a pair of “pairing” of fonts are used, one for the titles and headings (h1, h2), and a different one for the texts in paragraph and other text areas. There’s another free tool that can help us in this task, Google Fonts. Upon entering we find a huge list of totally free and ready-to-use font families. We can search and filter by types, we can do tests with the text we want to see how it would be written, it gives us directly the necessary links to use the fonts in HTML and CSS, lets us download them to install them on our computer, and has an option very interesting in which when we choose one, it proposes popular pairings with other fonts.
Icons could be considered practically an extension of fonts. Having a good family of icons in your project helps to create visual cohesion and gives you elements with which to support important information. The important thing here is to understand that the icons are to visually support certain information, they should not become the protagonists. You have to watch that the size is not too large so that they do not overshadow the information itself. Even so, we have the option of using outlined icons instead of solid ones, for those cases in which they must be used with a larger size, since being outlined they do not generate much visual load.
Here we have countless families of icons, but I am going to recommend two pages that are quite complete and free. The first is Font Awesome. It makes available more than 1500 free icons that we can download or use through links if we install its library in our project. The second is Ionicons, a family that comes with the Ionic framework but that we can also use freely and for free as it is Open Source.
5. Visual hierarchy
All the points explained above help to build a visual hierarchy, an order in which we can control that we want it to be the first thing users see, or, at least, the first thing we want them to notice and then go into details, more secondary information and content. The hierarchy is built with everything: spacing between sections and headlines, background colors with respect to font colors, font sizes, and weights.
For example, in the previous image we see how simply by subtly changing the color of the description text, and the weight of the headline, we get that the first thing that stands out is the latter over the description, which the user is expected to read later. Likewise, with correct spacing, we can visually separate each item into two sections, one with the title and description, and another with the relevant information when deciding to buy it, such as the price, the reviews.
I hope that with these simple tricks, the task of developers who are beginning to put their foot in the pool of UI/UX design becomes easier.