Designing more maintainable user interfaces
I’ve written this article because designers often forget to look at a design from a more structured, or developer point of view. I’m not saying that a designer should be able to build a UI, but understanding the basic principles will often keep your frontend developer happy.
The way we build frontends is constantly evolving, but can this be said about the way we design user interfaces? It looks like the way we design a UI has stayed more or less the same. We design every page of the UI in a particular situation. User interfaces change based on their situation. Some factors which could influence the UI are window width and height, the device it is viewed on and even the quality of the network available to the user.
It comes naturally for a designer to create visually appealing interfaces. This does not mean they are well suited to be converted into code. While it is easy to perfectly align all elements in Sketch or Photoshop, a few pixels here and a bit of trickery over there might drastically decrease the maintainability of the implementation of the UI. Using a slight color variation is no hard work, but maintaining a huge list of colors in code can be a challenge.
Component Based design
There are some very good ideologies going around about how to build UIs. For example Brad Frost’s atomic design, Jonathan Snook’s SMACSS and BEM, While atomic design is mostly a broad overview of how to design, and the others are more about implementing user interfaces, they treat a UI in the same way. A UI is a collection of elements used in a context. For example a button used in a sidebar or an article used on a blog page. Reusability is the key here. The more reusable an element, the smaller the code base, and the easier it is to maintain that code base.
In my opinion, a design should always start with designing the smallest possible elements in a UI: text, buttons, forms, … Later these elements can be combined into bigger blocks, and in the end an entire UI. The advantage is that every page or screen will have the same look and feel, making the UI more consistent.
Color usage
Designers tend to use a lot of variations of colors. This is fine when creating an illustration or some artwork. When designing a user interface however, all these color variations quickly add up to a lot of variables to maintain. I would suggest to only use a few base colors, and if necessary, a light and dark variation thereof.
Adaptability
Before the rise of the smartphone, most UIs were fixed width. Today, there is a multitude of screen sizes. We should be able to display our app on all devices. The ability to display on an array of display sizes should be rooted in the fundamentals of a UI design. If you don’t think about this from from the start of the design process, things are bound to go wrong sooner or later.
Another problem arises with interactive web applications displaying dynamic content . A website used to contain some static and predictable content. When having dynamic content, we have no control over the length of the content. Names and descriptions can be very short, very long and everything in between. This poses a problem when approaching the design of a user interface. I believe we should design pessimistically. A UI should be able to cope with imperfect content. If you get some nice content, that’s cool, if not, no problem either.
Changes
There are a lot of reasons for UI changes during the development. The client can change its mind. More or different content should be shown. User testing can expose some flaws in the user experience. Or some elements just don’t feel right after implementation. This is not a bad thing. The ability to apply changes quickly, without breaking the app, is something we should strive for in every project. By keeping the UI clean and simple, it becomes easier to apply changes in the middle of the development process. Change an element once and see the changes applied throughout the entire project.
Keeping in mind that a user interface should be able to handle all situations, I strongly believe we can create better, more consistent, and more maintainable user interfaces. And of course, us frontend developers, can keep our sanity until we encounter another strange browser quirk.
Read more
I’m Sam Bellen, a frontend software engineer at madewithlove where I build complex user interfaces.
You might find me talking about the web-audio and other “exotic” APIs.
