UI/UX Design: 11 Rules Every Developer Wants You to Follow

August 11, 2021
·
9
min read
Share article:

Becoming a golden UI/UX designer is not something people can achieve overnight; it takes a bit more than learning the basics to have a grasp on things. And there will always be those extra few miles in the experience journey that you can only gain by working on projects, trying, failing, and trying again. The good news is that we are here to minimise the number of those failed experiences. As developers at FlairDev, our priority is to create a flawless software, and so we decided to try and add more value to the designing community, that is by sharing our tips and forgettable rules every designer should remember.

It is exceptionally challenging to master UI/UX Design, especially since the internet is full of opinions from a marketing perspective, and not from other perspectives (especially a developer's). However, remember that it is developers who are in charge of bringing your designs to life. This article is dedicated to all UI/UX designers trying to up their game and work more efficiently with developers, saving thousands of dollars in the process.

Some of these tips might seem simple, but they will in fact save any team lots of effort and time:

1. Predetermine a base pixel size between elements and stick to it.

(For example: 8 px or 10 px)
Design elements laid out to show how crucial a base pixel is to UI/UX designing when developing

Defining spaces between elements as multiples of an even number will make development easier and faster.

Let us give you an example: When developing an app and the developer has a 20 px horizontal padding on all screens (base pixel is obviously 10 px), the space between texts cannot be 3 pixels, only 5 or 0. That will allow him to structure the code in a more efficient and solid way. Furthermore, if app owners decided to adjust all spaces in the app and make them smaller, it will be both easier and faster for the developer to do so by changing only the base size (from 10 to 8). This small tip could save the team a few days’ work and efforts.

2. Create thorough style guides.

A good software is an organized one, and it is never too much when we emphasize on the importance of style guides from all aspects. They organize the project, they maintain consistency, they ensure clarity, and they set apart a normal UI designer from a pro UI designer. Style guides also help developers create an app/site exactly as the designer desired, making all processes, changes, and navigations smoother.

UI/UX style guide containing all necessary elements that help in the software development process

In addition to the basic rules a designer should follow when creating a style guide, here are some tips that we at FlairDev found helpful to create an ideal style guide:

  • Make sure a style guide contains all colors/texts/shadows/rules/spacing layouts SEPARATELY.
  • Try to limit text styles to 8-10 (headline, title, body, label, etc.).
  • Naming all elements, colors, and text styles is a must to avoid confusions and make the navigation process easier.
  • When defining shadows for various types of components, make sure that shadows are the same or at least similar for all types, this is not only prettier for the eye to watch, but simplifies the navigation process.

3. Do NOT use more than 10 colors in your design.

Well, when looking at things from a designer’s perspective, most designers would agree that a palette of colors should not contain more than 3-6 colors. And when consulting with a marketing team, they would probably prefer if users did not have to bring their glasses along. And we as developers confirm that the downsides of using too many colors in a design outweighs the upsides.

Layout with 7 named colors to show how a UI/UX design shouldn’t contain more than 10 in a design

Using too many colors (especially when not sticking to style guides) could become challenging since that at any given moment, the app/site owners might decide to change the theme of the app, changing all colors and its tones with it. That will pose several difficulties on the coding scale and force developers to separately copy each tone used by the designer, that means frittering away time, money, and efforts.

4. Make sure your design is both adaptive and dynamic.

Developers must avoid all mistakes during their work, even the simplest. But sometimes, an impractical design makes the mission two times harder. That is why when UI designers think of an idea, they should check if this idea is practical with all types of content, and whenever possible, use real or close to real content as a sample in the designing process. Furthermore, they should make sure that they design all necessary states and functions to make the content dynamic, whether it is a “see more” button, or a characters limit function, or whatever the software requires regardless of how many characters will be entered.

Same webpage laid out on different screens demonstrating how design sizes differ in UI design

In addition to that, content looks differently on different devices, and designers sometimes forget to account for that. It is not only a matter of difference between a desktop, a tablet, and a phone. It is a matter of difference between two phones… even from the same brand. For examples: When a designer is creating a design for an iPhone 11, it is probable that he doesn't test this design on smaller iPhones like iPhone 7. That in some cases makes the design impractical, and it is hard for the developer to think of a good solution, and in other cases, the design ends up being revised, wasting the time and efforts of the whole team.

It is always the designer’s responsibility to determine how the design will look like in all different scenarios, and on all different devices.

5. Define and design all screen states.

(For example: Loading / Error / Success / Empty)
4 screenshots from Mello app of Loading, Error, Success, and Empty states showing differentials in the design

Designers think of several and various scenarios for screen states, yet they end up forgetting to design basic states like how a screen would look like when things don't go as planned, which was the case with us when we created the Mello App (Check out and download the app here). For example: What a data-less loading screen looks like, should differ from how a screen looks like when encountering an error, which should differ from how a screen looks like in its empty state, which again, should differ from how a screen would look like in its normal errorless state. And no matter what the case is, it is always the designer’s job to design these states for the user to determine how to handle the situation.

It is just as much part of the designer’s job, as it is part of the developer’s job to anticipate all scenarios including problems with data fetching, and plenty of time will be wasted in case one or more of these designs were missing, which makes them just as important as the main page, and without them, users cannot figure out the problem and act accordingly.

To know more about how we created Mello, you can check out the link to our Mello case here. You can also check our other cases here.

6. Add a mechanism to retrieve/get new data after an error state. (Refresh Function)

Visual of a finger sliding on a screen and successfully updating its contents from an error state

Another thing that designers usually forget or think that it is unnecessary to add is a reload function (scroll down to refresh, button, etc.) in their design, whether an error state occurs due to a data fetching problem or any other reason, and very often users find themselves stuck in the error page.

In this situation, developers have their hands tied, and the team might end up wasting days waiting for the re-design, or else, users will have a poor experience. Not to mention the fact that if the design is for a site, forgetting this function negatively affects how search engines handle the page, and eventually they lower the site’s SEO score.

7. When designing an app, design all states of push notifications.

2 phone screen each showing a different state of push notification

The state for push notifications that pop up (or down) while users are not using the app is different from the state for those that pop up while in-app. And as it is natural for a user to miss that, but a top UI designers should always remember it. Otherwise, the design will be faulty, and the team will waste time and money for implementing the design at later stages.

To become a top UI designer, all states of a push notification that a user could receive should be considered and designed.

8. Describe navigation flow.

Both UI and UX designers are responsible for planning and designing an ideal flow of screens in apps/sites, and they sometimes do majestically in their designs. However, there are some other times that designers forget to describe how the flow of screens should be, making the most wonderful of designs impractical.

Navigation flow on several screens illustrating how a design flow show be explained

For a developer, a design without flow description is like a piece of furniture without an assembly guide. He might get it right, but it is much more likely that he will waste a lot of time in the process and eventually mess the design up. Always describe how a design should flow to simplify the navigation process for developers. Maybe create a map or a mockup using a feature graphic editors offer.

9. Consider future additions AND inform the developer about them. (Communicate)

It is the small details that separate the best from the rest, and top tier designers save their teams thousands of dollars with their experience when they communicate their ideas to developers.

A designer should always think ahead by sharing with the developing team thoughts and ideas of features that could be implemented later, because the earlier the developing team is informed of potential ideas and additions, the lower the risk of having to prolong the development process.

Check out our other article: Top 13 Reasons Your Startup Business Failed.

10. Make sure that icons can be easily exported.

2 screens. One with many icons and small size, and one with one icon but larger than all.

Although this is a rare case, but it has happened more than once. Designers sometimes attach relatively large images to the design files, which is impractical from a developer’s perspective.

An ideal solution would be utilizing icon libraries and use icon sets, whether by creating your own set, or as an alternative, using an online one like Font Awesome. Attached icons should not contain large images and should be easily exported to ensure a smoother development process.

11. Show users results of their actions.

(success or error message)

Almost every user has experienced this before:

Update certain data -> Press the save button -> Uncertainty of completing the process!

Screenshots from phones to show users several results of success or failure of their action

It is essential for a UX designer to include the design for a screen or notification that shows users the result of their action, and in this case, there are only two possible variants: Success, or Error. This not only guarantees a better UX, but also adding such notifications would be extremely troublesome for developers in later development stages, not to mention the time wasted in the process.

(BONUS TIP) Design a “No Internet Connection” notification.

Phone screen with a “No internet connection” notification. This should be included in UI/UX design

Much the same as our previous tip, it is always helpful for users when they receive a notification like “Connection Error” or “No Internet Connection” assuming they lose connection to the internet. This significantly enhances the app’s UX and save users some effort if they are typing something. When creating Mello, this was one of the problems we faced as the design for a "No internet connection" was past recall, and this cost us the effort of days to fix, and we would not want someone else to stumble like we did.

Such details are small in theory, but are easily forgettable by designers, and forgetting to add them to the design is disruptive in terms of development. It might take prolonged sessions to implement them later.

Summing up, UI/UX Design is an essential and beautiful process, and preventing errors while designing is easier than fixing them. That is why when you land a UI/UX job, it means you are expected to work closely with developers, and in addition to thinking like a designer (and a user), familiarize yourself with the software developing principles, because it is the developer who will bring your design to life.

In return, when creating a software, a developer should be familiar with UI/UX Design principles. But more on that will be in our upcoming articles.

Let us know what you think, and share it with others if you like what you have read. It would help us a lot in providing more and better content in the future.

Also, if you have an inquiry about a project, considering us means you support startups. Contact us here, we promise to answer in the most helpful and clearest way.

Subscribe to our social media