From Development

Why a Front-end developer should also be a UI developer

As a Front-end developer, you have to work closely with UI/UX design to create a great digital product.

The main goal is always to deliver the best user experience, however, contrary as you might think, this is not an exclusive responsibility of UX designers. Front-end developers can also shape how the user will interact with the web app or mobile app. When implementing the design, some UI and UX knowledge can certainly be helpful.

What is a UI developer?

UI developer is a concept that is not well defined around the internet. Some say it is the job of a UI designer, implying it is the process of designing the product. Others say it is the job of a front-end developer, which includes the process of coding and bringing the design to life. We say it is a mix of both! UI developer is a front-end developer with knowledge of UI principles and concepts and can make more straightforward projects if needed.

Why having knowledge of UI principles is helpful

The User Interface is the first thing a user sees when interacting with the product. If it's not appealing and easy to use, the user will go away without considering the great product features. It is similar to judging a book by its cover! That's why a front-end developer needs to know UI principles to help develop a better and successful product. It will also improve the relationship between developers and UI/UX designers, as both sides will understand why something was designed in a particular way. Having this understanding of UI principles will help you to:

  • Find a better solution or alternative when facing problems during development;
  • Implement small details that make a difference in your product, that in most cases, are not possible to show on a design sheet.

UI principles applied to development

Usually the UI principles are used purely to design and there are a lot of different lists that can guide us through that process. Today we are going to visit some of them on the developer approach to see what we, as front-end developers, can add to the product and make it better.

1. Consistency

One of the first things you see in every list that guide UI design is consistency. The whole platform has to look similar, so the user can create an accurate mental model of the product and easily understand what he can do with it. This aspect is visible on the design by having similar shapes, color palettes and defined typography. Consistency can be the key to a smooth implementation as it allows you to reuse elements, behaviors and looks. But it can also be a struggle when dealing with different size windows.

Sass/SCSS variables and mixins

If you have the opportunity to use SCSS instead of traditional CSS, I encourage you to do so. With Sass you have variables that will allow you to easily change a value that is used everywhere without having to search and worrying about the possibility of missing it. Just give the intended value to a variable and use it wherever you want. They are perfect for defining the color palette, typography and more complex things like shadows or gradients.

$lightBlue: rgba(77, 213, 255, 0.4);

.bg-lightblue {
 background-color: $lightBlue;
}

To save and reuse more information than a simple value you can use Sass @mixin and @include to have multiple classes include similar styles. Use the @mixin to define the style you want to reuse and then use @include to have the style being applied to the target element.

@mixin input-caret-open() {
     position: absolute;
     top: 8px;
     right: 12px;
     width: 9px;
     height: 9px;
     ...
}
.input-red {
    @include input-caret-open;
    ....
}

Responsive structure and breakpoints

When implementing a design, it’s easy to stick with the exact values given or approximations of those. It will look perfect at first, but if you try to play with the window size, especially width, you’ll quickly realize that it does not work correctly in every case. Things can be cut out of the site or sent to a non-intended place, a real nightmare!

The first thing to have in mind are breakpoints. They will allow you to restyle your components from a specific size of the window, perfect to style two different versions of your page, like desktop and mobile. With that, you can have some changes in the mobile version without having to duplicate HTML to create two different styles.

For in-between sizes, make sure your structure is flexible and responds to width changes. Not everyone will use their browser on the full screen. Instead of using exact width values, try to use relative length units like percentages. If your design has a page with 2000px and an element that occupies 1400px with margins of 300px on each side, use a 70% width and margin of 15% instead.

Bootstrap, a CSS framework, can also help with both of these cases. It has column classes that can be used in various sizes of windows and that adapt to the current available width. Below you have an example of the same layout styled with percentages (at left) and fixed values (at right). Use the resize of each element (a grey area, bottom right corner) to see what happens in each case.

See the Pen responsive vs non responsive element by Patrícia Silva (@patsilva_tese) on CodePen.

2. Efficiency of use

Most times, the efficiency of a system is calculated through the time a user spends completing a task and the number of clicks involved. If the system uses familiar terms and has its layers well defined and organized, the user will be able to achieve his goal quickly. The UI/UX design has a massive impact on this aspect to ensure the user knows where to go. But there are a few things you can do, as a UI Developer, to speed up the user experience and reduce the number of clicks.

Clickable form labels

When filling up a form, users may try to click on the name of the input (label) instead of the input itself. If you don’t connect the label with the input, the user will need to make another click to fill the field. This can be easily fixed by defining an "id" on the input and a "for" on the label, as below.

<label for="fname">First Name</label>
<input type="text" id="fname" name="firstname" placeholder="Your name..">

Autofocus

Still related to forms, when entering a page where the main goal is to enter some information, if the first field is already selected, the work is half done. Autofocus your first/most important field to remove one click from the process. This works on both desktop and mobile. On the last one, this will automatically open the keyboard. Of course, some of your users will still click it, but especially on login pages, this can shorten the time spent! It can be done by using the attribute autofocus on the input, which will focus on the input when the page is loaded. Or you can use Javascript and Jquery to do it, by selecting the element by id and using “.focus()”.

<label for="fname">First name:</label>
<input type="text" id="fname" name="fname" autofocus><br><br>

Clickable divs

One of the things that most annoys me as a user is to see a section that seems to be clickable, but then only the text works (frequent on a lot of mobile versions of menus). These things create confusion and frustration and may encourage the user to leave. Make sure everything that is supposed to be clickable, in fact, is! If you have a big button with a small text inside, it is expected that the whole button will do the action and not just space where the text is. Below there's an example of that: at the left side, a menu which lets us "click" on the hole row and at the right, only allows the text to be clicked.

See the Pen Full width mobile nav dropdown by Patrícia Silva (@patsilva_tese) on CodePen.

Hierarchical order of components & white space

Usually, on a User Interface, things that have the same behavior look similar. Items that are related are close to one another and items not related are different and separate from each other. Besides typography, color and shape, white space conveys this feeling of proximity and relation when we look at the UI. It helps the page breathe and reduces the amount of information the user receives at once, making it easier to decide what to do next!

In case you are making the design by yourself, have in mind that white space works as an invisible border. If you feel like you need a limit to separate those two sections, maybe all you need is white space! On the other hand, if you are implementing a design, try to respect the proportions and amounts of white space given. They are there for a reason. Use relative length units, so the proportions are kept on the width and apply exact values on height. A margin of 47px is exactly that, not 45px or 50px. Be especially careful when giving margin/padding to an element. If there is another close that already has these attributes filled, make the math, so you use the right amount of space in the end.

3. Transparency of user actions & Visibility of the system status

It’s as essential to inform the user what he can do to report what he is doing or has done. Give feedback on the system status: if something has been successfully done, if something takes more time than usual, etc, tell the user. Let him know all of those things, so he doesn’t doubt the results of his actions.

Cursor

Cursor images are standards we deal with every day. When we see a specific cursor, we know which type of action it represents. Because of that, when we don’t use the expected type cursor, we confuse the users. If something is clickable, we are expecting a pointer type of cursor. If it is draggable, we expect an open hand followed by a closed hand, etc. Make sure you are using the right cursor on custom elements and take advantage of the HTML elements that already have those and other properties defined.

Animations

Animations aren’t exclusively used to make things look prettier. They can be handy when applied to small elements and give the feeling of continuity, action, and progress. The user is more likely to remember what he has just done if he remembers seeing something change little by little instead of all at once. The perfect example of this is the animation of the on/off buttons: if you see the button change on the click, you’ll probably question yourself if you clicked it or not and start doubting how the button was before. However, if you have an animation, you’ll remember more states of that transition and be aware of what just happened.

See the Pen on/off buttons example by Patrícia Silva (@patsilva_tese) on CodePen.

Animations can also be very helpful when telling what is happening behind the curtain. If the user requests an action that takes more time to execute, give him a waiting animation instead of a blank page (or the same one that later changes). You can use things like a loading circle or a progress bar to let the user know that is not a problem. It’s just taking longer.

Why Front-end developers should also be UI developers

Last but not least, talk with the UI/UX designer. There may be good suggestions that never got into a paper that can be easily implemented and bring value to the product. In case you are struggling with the implementation of something, in particular, check with the design team and give any suggestions you may have so you can find an excellent solution together.

Even if you are designing by yourself, consult with a UI/UX designer to help point out flaws in your work. This way, you will get a better understanding if things are out of place, if the sizes are right and possibly excellent suggestions that you would never think of.

Here at Imaginary Cloud, our front-end developers and UI/UX designers work closely together to design and implement solutions for new projects. Our front-end developers also understand UI principles to be able to speak the design language and make valuable suggestions.

Think you could need a hand? Drop us a line here!

Found this article useful? You might like these ones too!

At Imaginary Cloud, we simplify complex systems, delivering interfaces that users love. If you’ve enjoyed this article, you will certainly enjoy our newsletter, which may be subscribed below. Take this chance to also check our latest work and, if there is any project that you think we can help with, feel free to reach us. We look forward to hearing from you!