Front-End Development Is Design
Even after the most elaborate conceptualization of a user interface, there will always be hurdles during the front-end development process that will require some form of design consideration.
This is especially the case with large scale projects—the bigger the scope, the increased likelihood that design support is required during a build. Even thoroughly prepared style guides and systems will fail to guarantee solutions to all the unforeseeable issues.
How Design Issues Emerge
If it were easy to anticipate how design issues emerge, all the solutions would be accounted for prior to build, and development would go smoother. However, that is generally not the reality.
Lack Of Clarity
Designers lean on result-driven research and best practices for UX, and fill in the blanks with their best assumptions during the design process. The truth is, it’s not always possible to get a clear picture without being able to test the UI on a physical device with real interaction. Prototypes and living style guides can help provide clarity, but are not always in scope.
Developers don’t always interpret the designer’s original intentions exactly, or the designs have potential development challenges that weren’t discussed in the design process. This is why continuous collaboration is important throughout the design and development phase.
Development can be given the go-ahead after the most optimistic of sign-offs on content, yet for one reason or another, changes can get requested midway through development or post-completion, at no fault to project planning.
While it’s possible to get through a project without any of this occurring, content implications can commonly transpire when portions of real content are segregated from mockups—when compositions are provided with a rough idea of the content for stylistic purposes. Even subtle differences can cause design decisions mid-way through development.
Responsive Translation And Gaps
With responsive websites in particular, gaps in responsive states can lead to awkward scaling or layout issues with components or elements, or issues such as background imagery being cropped in unexpected ways. Although typical best practices cover most scenarios by mocking up about three states—mobile, tablet and desktop, a lot of factors can emerge between and beyond those dimensions.
It varies between teams and projects, but not all pages or templates are mocked up as high-fidelity comps. It’s possible they are left to depend on a system where modules are pulled together to compose a template. In this case, design support is required to organize the placement or integration of those modules.
Static compositions are usually created in pixels and fixed values, whereas best practices advocate the use of relative units in development. The modern UI is no longer built pixel-perfect, per se. This can potentially cause rough translations of dimensions and spacing, particularly with typography and overall layout.
Tackling The Unforeseeable
These issues don’t necessarily amount to huge design changes or additions, but if we accept that they may happen, a team can be better prepared through a different mindset and certain practices.
Front-End Developers Should Know Design Basics
Letting any potential, even subtle, design issues slide can incur design debt and should be prevented. They can be unintentionally left if one is not able to recognize them, so it’s of great benefit for front-end developers to have basic knowledge of design fundamentals so they can either tackle certain issues themselves, or know when they need support from a designer.
With smaller teams or projects, it’s not uncommon for a designer working on the project to also be the front-end developer. However, with big teams full of specialists, that scenario is rare. Depending on how comfortable the design team are with developers addressing solutions on their behalf, it can be beneficial to let them improvise on the no-brainer decisions if they have competent design skills, and reach for design support for bigger issues.
Regardless of whether the developer has the authority or expertise to address design issues without help, the more designers and developers can collaborate throughout the design and build of a project, the better.
Even during the design process, a developer’s expertise should be present so there are no hiccups and broken promises later. It can also improve the team’s morale and enthusiasm when both sides are problem-solving and are on the same page.
Being Prepared To Improvise
When an unexpected design issue arises in the development of a website or app, a team will often have no choice but to react in the moment and improvise a solution there and then—which may or may not require sign-off from stakeholders depending on the size of the issue, but it becomes critical for a team to think on their feet at a moment’s notice.
Developers may have to re-engineer code to accommodate a design preference, and designers may have to adjust the appearance or desired functionality based on coding limitations. This is part of being able to collaborate successfully. By embracing the near-certainty that improvisation is required during development, it can be a natural part of the process.
By having a shared awareness of design principles, being more actively collaborative and having the willingness to improvise, teams can better alleviate the design issues in the development phase. Specialist front-end developers can be more involved in the design process, and by doing so reduce the possibility of design debt and potential hacks.