Designing User Interfaces as a Developer

Once upon a time, in the digital faraway land of the Internets, there was a clan of mighty web builders. Some folk called them the “Web Developers”. They were building awesome sites and exploring the Whole Wide World. As the complexity of their work kept growing, a great schism tragically happened. It was all about religion. One half decided to continue worshipping the old gods of logic and structure PHP & .NET whereas the other half with their new user-centred religion dedicated themselves to the beauty of the CSS aesthetics and the fun interactions of the JS. The schism was relatively peaceful but was it the beginning of the end?

Developer’s Perspective

In a world with an ever-growing need for specialisation, where the universities are unable to catch efficiently the digital market pulse many developers and designers find themselves changing job titles and responsibilities when they move to new roles. This evolutionary change brought me to switch from Front-end Development to a space closer to Web Design. My current role is User Interface/User Experience Developer. Might be too long to pronounce but it is practically a Front-end Developer role with the ability, the responsibility to make design decisions regarding the interfaces within the product development process. It is more probable to encounter this in medium or big size companies where there is product development instead of website/e-shop building agencies.

Enter the Design

It is time to get deeper down this rabbit hole and talk about the details of the role. Many of us “Developers” have already at some point designed user interfaces for our real or pet projects, in university, at work or for a hobby. Those designs were mostly produced out of instinct because developers are already spending a lot of time browsing the web. To reach the decision to follow this career path their eyes have absorbed a great amount of web design detail. But is instinct, intuition, and preference enough?

The answer is probably not. At least for the majority of us who are not that maverick polymath of the renaissance literature. The good news about the situation is that one can move from the abstract, stored in the brain, knowledge to something structured and curated by practising and observing. There are already great pioneers and good examples of professionals to lead the way and the mind of the “hybrid” is possible. To bring the designer out of the developer.

Fusion Time

Design and development have different logic and perception of things. But this link, this sweet space between design and development where the user interface design resides requires the best of two worlds. A developer is trained to detect functionality and imagine layout. To follow the rules. Designer’s eye captures the details of colour schemes and spatial arrangement. The fabled proper use of white space and superior typography. By mixing those skills into one you get somebody that can design first a user interface with the right set of steps and then have them build it as well, eliminating the usual back and forth and the misunderstandings between designer and developer. But there is still something missing…

Where art thou UX?

User experience design naturally occurs in the design of products, not only the digital space, everywhere. A great interface can distinguish the better product among many. In the discussed case you just cannot have a developer design user interfaces without considering what the users really want. We already convinced that person to use two different points of view in harmony. Enhancing that view with a third, some UX magic, is necessary for the work to be complete. This falls in the validation and verification areas of product development. To be able to design, to be able to develop the design but to do all of it with a purpose and the user in mind.

Practical Insights

Enough with the theory, let’s get some technical details. When I started working in this role, the first step I had to take was to sculpt that “David” out of the white marble. It was to take my broad abstract knowledge and put it down to work. Wireframes were the first thing I was called to prepare (we use Balsamiq) and then I had to iterate a few times the original design with the kind advice of my colleagues to create a “good enough” result. Perfection is a utopian ideal and there is no absolute when we are speaking about design. Proper wireframes followed in a few situations when a feature was entirely new. For redesigns, a new wireframe was enough because we had already an example of how it feels and looks.

Next step is always high-quality HTML, CSS/SASS work with a finishing touch of JavaScript functionality and of course tests. To improve the UX of existing components and views is a great challenge. Which means in many cases something simple as a great UI pattern use in the newest iteration. There are rare occasions one can get involved in the process from the very beginning which allows interviews, eye tracking, surveys etc. Good theoretical knowledge about usability, searchability, and learnability can be utilized in all situations. Even the wording of buttons, tabs, labels and other elements can be bound to great UX.

Example:

In the Continuum platform we needed a way to manage the increasing number of navigation items and, if possible, to search and categorise them. The developer-self would go straight away, without much thinking, to start working on the first familiar solution that comes in mind.

In our case, the starting point was different. After visiting about 100+ well-known websites to get inspired by great UX examples, we compiled a list of different possibilities.

The list was discussed thoroughly, in a comparative way, until a few good options were shortlisted. Some examples used a lot of space, others weren’t mobile friendly or required unusual animations. Many variables to consider when planning for good user experience. After a decision was made, development started and tests were written to produce a graceful “hiding and tidying” of excess navigation items.

The solution was consistent with existing work and didn’t introduce any radically new components, but just enhanced the functionality covering users’ needs. This is what we call everyday UX. User experience isn’t always about innovation. Instead, thoughtfulness and sophistication is the path of keeping things functional and simple.

Summary

UX is the devil in the details. The role of the UI/UX Developer is the clear combination of three complementary sectors. Design meets Development meets Psychology. Either one of them can be a good starting point. In the ever-changing ecosystem of the Digital marketplace, more jobs linking the old dots will appear to occupy the space in between.