Design Today showcases inspiring examples of design, alongside resources and articles that teach you how to succeed in the same way. Feel free to Contact Us

Front-End Development Is Design

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.

“The front-end developer’s challenges are concurrent with the designer’s. Improvised design is done by the front-end developer more often than you think.”

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.

“What makes perfect sense in wireframes and static comps doesn’t always translate perfectly in reality.”

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.


Content Hurdles

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.

“Additional content can get shoehorned in, or new enhancements can suddenly become mandatory.”

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.

“Most UI designers only consider the average breakpoints and dimensions, but it’s important to consider lesser known ones (eg. ultra large-scale displays).”

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.

“It usually starts with a developer. When a design issue or a potential one is discovered, they will either let it slide, attempt to tackle it themselves, or reach for help.”

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.

“Having basic design skills in the back pocket can help a front-end developer catch potential issues more easily and make the right decisions upfront.”

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.

Continuous Collaboration

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.

“Continuous collaboration can provide instant feedback on areas of the build in real time so that issues, current and potential, can be extinguished quicker and easier.”

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.

“Improvising may lead to compromises, and teams should be prepared for this as well.”

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.


Final Note

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.

by Christian Miller

How to Use Colors in UI Design

How to Use Colors in UI Design

Automotive Experience Design

Automotive Experience Design