Any UX development process has a step during which developers turn mock-ups or prototypes created by designers into code. When design assets are created with an understanding of technical constraints, it’s much easier for these engineers to turn them into digital software. That’s why understanding development aspects and being able to collaborate with developers are important skills for any designer.
The more a designer understands the needs and workflow of developers, in general, the better off they’ll be. This article will discuss development fundamentals for UX designers.
Understanding key technical constraints for UX development
“Should designers learn to code?” That question has been asked many, many times in the design field. When it comes to front-end design development, it’s always great when designers know the capabilities of the development language that developers are using. Knowing what’s under the hood helps them make more informed design decisions and gives designers an ability to evaluate some decisions according to feasibility—whether it’s even possible to develop something, and how much it will take to develop it. But while benefits abound, this doesn’t mean that designers need to learn to write production-ready code.
Minimize design implementation efforts
To minimize design implementation efforts, you’ll need to design with development aspects in mind. Here’s how.
Understand data types and data structures
Even though data types and data structures are part of the back-end logic, they have a direct impact on the front-end. When designers have this information, they can create better data-handling rules. For example, it’s possible to design a better error-validation strategy when you know what data types are supported for each input field in a form (e.g., maximum text lengths or specific formatting). UX designers and front-end developers should work together to identify all such areas.
The text field error state is communicated through an error message below the field. Image credit Material Design.Use reusable components
Buttons, input fields, and links are components that designers use to create pages or screens. Designers strive to create consistent design because consistency helps minimize efforts required to design a solution. But there’s another benefit: Consistency also minimizes the effort required from developers to build the solution.
One of the best ways to achieve consistency in design is using reusable components. For example, when you work on a website, instead of using different visual styles for buttons on different pages, you can use the same styling that is provided as a component to developers.
Evaluate services and libraries available on the market
When it comes to product design, it’s always tempting to create your own unique solution from scratch. But if you stop for a moment and conduct research, you will probably notice that the problem you’re facing in your design has already been solved by other teams who faced the same problem before you. For many projects, it’s possible to integrate existing services or libraries available on the market into your design, rather than spending the time creating your own. It’s up to the designer to conduct an initial assessment of product requirements and try to find the service or library that satisfies the needs of the project.
Design for different screen sizes and devices
If your product will be used on more than one type of device, you need to ensure that the design looks and works well on any screen. Identify the resolutions of target viewports and optimize your design according to those viewports before the engineering team starts front-end development. It’s possible to achieve this goal by creating prototypes and testing them on real devices. If you’re working on a web-based solution, it’s recommended to create responsive prototypes using HTML and CSS. (Before creating a responsive prototype, read responsive design best practices.)
Consider the security aspects of your design
A lot of design decisions should be evaluated from the perspective of security. It’s especially important to embed security rules in the process of authorization, access control, and data transfer operations. Designers should work with UX writers and developers to provide clear instructions for error-handling and minimize the risk of losing personal data.
Focus on performance
When it comes to performance optimization, the first thing you need to understand is the type of product you’re creating (e.g., Is it an online or offline app?), as well as the hardware capabilities of your average user’s devices. If it’s an online app, it’s vital to know what parts of your design might be heavy (such as motion effects and animated transitions). Be ready to reach developers to discuss potentially heavy parts of your web design and find alternative solutions together. This will help you to create a web application that will provide good user experiences even when users have a slower network connection.
It’s also important to consider the steps in a user journey when content takes some time to load. For such cases, use design skeleton screens (i.e., temporary information containers), which are essentially blank versions of a page into which information is gradually loaded. A skeleton screen would appear the moment your app starts loading data, giving users the impression that your app is fast and responsive.
A skeleton screen fills out the UI as content is loaded incrementally. Gif credit Tandem Seven.Design for internationalization
If you’re launching a product for many different markets, there will be a step in the development process where you will need to transform your product from supporting just one language to supporting many languages. UIs are typically designed according to the needs of one core language (e.g., English) and all content containers are measured based on the core language string lengths. However, when translating content into other languages, the translated text could end up longer than the core language. The user interface should be tweaked to support multiple languages. Processes like pseudo-localization allow product teams to continuously test their UI for localizability during the design and development process.
Design for accessibility
The product you design should be accessible for everyone, no matter what abilities the users have. Here are a few essential rules for front-end development that need to be followed rigorously to make a product more accessible:
- Follow Web Content Accessibility Guidelines (WCAG) 2.0 guidelines. Following these guidelines will make content accessible to a wider range of people with disabilities, including blindness and low vision, deafness and hearing loss, learning disabilities, cognitive limitations, limited movement, speech disabilities, photosensitivity, and combinations of these.
- Use Accessible Rich Internet Applications (ARIA) specification. Accessibility of web content requires semantic information about widgets, structures, and behaviors in order to allow assistive technologies to convey appropriate information to persons with disabilities.
Introduce version control
Versioning design will help you avoid a lot of misunderstandings during front-end development (such as situations when team members do not know what the most recent file in a project is). With version control, it’s much easier to communicate changes with the entire team and make sure everyone is on the same page.
Conclusion
Design and development are two sides of the same coin. When it comes to UX development, both designers and developers should strive to minimize the effort required to turn a design into code. Designers should be aware of the common front-end development challenges and try to optimize their design to minimize the risk of issues that happen during design-development handoff and the implementation phase.