Front-end design connects two worlds—the world of UI design tools with pixel-polished interfaces and the world of application-level development with business logic. Front-end developers turn designs into reality. In the context of web development, front-end development is the practice of producing HTML, CSS, and presentational JavaScript code for a website or web app so that a user can see and interact with a product directly. To create a product with a good user experience, front-end developers should understand the impact front-end coding has on website performance. This article provides an overview of front-end UX design with steps and tips for improving website performance.
Front-end design checklist
Many design and development practitioners believe that performance is how fast a website loads. This view is narrow because performance is not just a technical concern; performance affects everything from usability to search engine optimization. It’s better to think about performance in the context of how fast the user can reach their goal on your website. According to psychological research, if you want users to feel that your product works faster than your competitors, you need to be at least 20% faster. Below are just a few essential elements that every web developer or UX designer should consider when working on a design.
Basic performance metrics
Time to Interactive (TTI) and response time are two basic metrics for front-end UX development. TTI is the time required for the UI to be fully loaded so a user can interact with it, meaning that it’s the key performance metric for understanding how much wait time a user experiences on the site. The second metric, the response time, is how fast the UI responds to a user’s input. For an interaction to feel smooth, the interface has a 100-millisecond time frame to respond to the user’s input. Anything longer than that and the user perceives the app as lagging.
User interface frameworks
UI frameworks are extremely valuable tools for front-end developers because they allow them to implement layouts faster. However, front-end developers need to carefully introduce frameworks and libraries in the projects they work on. Sometimes projects can benefit not from adding, but from removing an existing framework. For example, Netflix proved that “removing React, several libraries, and the corresponding app code from the client-side reduced the total amount of JavaScript by over 200KB, causing an over-50% reduction in Netflix’s Time-to-Interactivity for the logged-out homepage.” Thus, always measure how much libraries affect the performance of your product.
Layout and content
In this section, we will review the building blocks that UX development uses to create a visual appearance of the website.
Grid system
Front-end developers must match the UI design as closely as possible, which can be difficult when design misses important elements such as the grid. The grid defines a layout of a page. When the grid isn’t specified explicitly, developers tend to recreate it manually by finding proper padding or margin. This approach rarely ends up in a pixel-perfect design; it’s much easier to create a layout when you have a grid system that provides information about the number of columns, width, and gutters.
The layout grid in Adobe XD helps turn a mock-up into a real design. Image credit Adobe.Colors
Colors are functional elements, just like text and images. Here are a few things to remember when working with colors in your project:
- Conduct an interface inventory for colors. An interface inventory categorizes the components making up your app or website. Interface inventories show how many colors you use in your product. If you’re working on a website, use a tool like CSS Stats to see how many unique colors you have in your style sheets.
- Ensure that all colors have proper names and that the names are selected according to how the colors are used. Try to avoid using a gradation of adjectives (such as light blue or dark blue) because such naming won’t tell anyone how these colors can be used. Instead, use functional names—one that describes the color by its place in the UI.
Color names in the Carbon design system are named according to their functions. Image credit Carbon.- The colors should work equally well on both light and dark backgrounds.
Select colors that work equally well against dark and light backgrounds.- The colors should be accessible. Visually impaired users should not have problems interacting with your design. Use special tools like the WCAG contrast checker to ensure that your color combinations are accessible.
Fonts
Text is a large part of modern web design. The vast majority of information is provided in written words, with text readability having a direct connection with website performance. If you’re working with a UI design, don’t blindly follow the designer’s typography choices. Follow these tips instead:
- Minimize the font loading time by using default fonts. Fonts like Roboto (for Android) and San Francisco (for iOS) are being pre-installed with OS, so the browser doesn’t need to download anything and can display the font immediately.
- Test your custom fonts selection. In some cases, modifying existing fonts won’t create any problems; in others, you might break the entire UI. That’s why font pairs that you want to use should be carefully tested. While it’s possible to use visual regression tools like BackstopJS for that purpose, you can achieve much better results by doing a manual inspection.
Content containers
Ensure the layouts that you’ve received from UI designers are filled with real content, not Lorem ipsum. If the layout is filled with placeholder text, ensure that the layout works outside the boundaries and fill it with content and see whether some content goes out of the boundaries of existing containers.
Using real text in design will help ensure that when your layout goes out in the real world, items won’t jump out of containers due to varying lengths. Image by Tarun Kohli.Multiple states for links and interactive elements
Front-end design is about making user journeys predictable. It’s possible to achieve this goal when you provide a few states for weblinks and interactive elements like buttons (default, on-hover, visited). The states should be defined clearly in the style guide provided by the design team.
Different states for the call-to-action button have different visual appearances.Images
All assets that a team uses should be optimized for the web. Ideally, without losing image quality along the way. Here are a few rules of thumb that you need to remember:
- Whenever possible, try to use vector assets instead of raster. They don’t add much weight and scale extremely well.
- Compress raster images. Use tools like Squoosh to compress and resize the images at the optimal compression levels.
- Use responsive images with srcset, sizes, and the <picture> element. Responsive images will allow you to use the WebP format, which you can serve with the <picture> element.
Lazy loading images are also recommended: Display a placeholder first, and when the image is within the viewport, trigger an event to download the full image in the background. José M. Pérez created a fascinating concept of lazy loading—he creates a lightweight SVG placeholder, loads it first, and then transitions from the placeholder vector image to the loaded image.
The loading technique generates SVGs from images that can be used for placeholders. Image credit José M. Pérez.GIF and videos
Many websites incorporate animated GIFs in their design; however, GIF formats hurt rendering performance and bandwidth. It’s a good idea to switch from a GIF to either an animated WebP or looping HTML5 videos. The latter is preferable because HTML5 videos tend to be lighter and smaller than GIFs. By replacing animated GIFs with looping inline videos, it’s possible to reduce the file size by up to 80%.
Progressive loading and skeletons
Nobody likes waiting for the content to be displayed. But no matter how hard we try to optimize the loading time, there might be situations when the website will load longer than expected. Front-end developers should consider these moments and provide solutions for them.
Consider what the visual experience users will get while the page is being loaded. You need to prioritize which parts are more critical and define the order in which they should appear on a screen. For content that requires time-to-load, it’s possible to use skeletons (aka temporary content containers). Skeletons helps you to switch the user’s focus from waiting for content to load, to exploring the layout instead. The beauty of skeletons is their simplicity; skeletons can be designed during the wireframing phase of the design process, and their visual appearance doesn’t change much in the final design.
LinkedIn uses simple shapes along with blinking animation to create a sense of fast loading. Image by LinkedIn.Pages and screens
A front-end developer should ensure that the UI design contains both regular pages and screens (i.e., landing pages, product pages, and contact us pages) as well as error pages (i.e., 404 error page that becomes visible when the user types invalid URL). Users often evaluate the quality of the product by the quality of error pages. Poorly designed error pages are one of the things that annoy users. A good error page in UX design, on the other hand, can increase the speed of use and users’ subjective satisfaction.
Components
Ideally, the user interface design should be created with the component-based approach. Brad Frost created a very sustainable model called Atomic Design. In this model, atoms are the basic building blocks of UI, such as a form label, an input, or a button. Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound. Organisms are groups of molecules joined together to form a relatively complex, distinct section of an interface. An example of an organism can be a “product grid” on an e-commerce website. Finally, templates consist of groups of organisms stitched together to form pages.
This model displays the structure of atomic design. Image by Brad Frost.Devices
Since users can use a large variety of devices with varying screen sizes and resolutions when working with your site, front-end developers need to take into consideration these aspects when designing the site. It’s vital to ensure that the design works correctly in different browsers (cross-browser), different operating systems (cross-platform), and different devices (cross-device).
Usually, front-end developers start with the mobile version of the design. So, it’s expected that mobile design is provided before or, at least, simultaneously with the desktop version. If the team doesn’t follow mobile-first thinking, there tends to be an inconsistency between desktop and mobile versions.
Conclusion
A modern front-end design process requires effective collaboration between designers and front-end developers.
Good user experience is the result of savvy execution of both visual design and code. GIF by Brad FrostProduct teams should treat front-end development as a core part of the design process. Front-end developers should be ready to build products in accordance with UX guidelines and willing to interact with other team members to achieve a goal of excellent user experience.