min read ·
March 22, 2021

How to reduce time spent on UI development with increased quality

Front-END Development

Abhinav Sharma

With over 16-years in front-end development, Abhinav is primarily responsible for UI development, UX analysis, and designing UI architecture.

Front-end development is often the first to be descoped in an effort to meet deadlines and budgets. But without the right tools and structures in place, reducing the ‘effort’ spent on UI development often ironically leads to more time spent coding. As the project continues the front-end inevitably becomes a burden, with disjointed interfaces that lack in user experience and performance that any application should possess.

So how can we reduce the time spent coding UI without negatively impacting quality? By creating a UI style guide

What is a UI style guide?

Put simply, a UI style guide, often referred to as living style guide, is an HTML page that documents the colours, text, buttons, margins, padding and other components that can be used in an application. HTML and CSS can be referenced and copied from the page and pasted into the code of the application, leaving developers with more time to focus on building logic and business rules.

Living Style Guide Structure Example
Living Style Guide Structure Example

A UI style guide can take as little as a few days to code depending on the size and phase of your application. Whether your project is in the inception, development or support phase, it’s never too late to build such tool.

By investing some initial effort to develop components and styles into the UI style guide, anyone in the team can have a personalised bootstrap that anyone can pick up, work with and build upon. 

Example style guide
Example style guide

Benefits of a UI style guide

A UI style guide improves quality and increases delivery speed by enabling the following benefits:

1. Reduces the size of future stories

Easy access to reusable components or styles means that developers no longer have to spend time writing duplicate code for existing components.  

2. Improves performance

Reducing the number of components (and duplication of code) reduces the size of the script, resulting in a faster-performing app.

3. Quickly update components and re-skin applications

Components and elements are able to be updated in a central location and automatically reflected across the entire app. This is particularly important in Agile teams that require an evolving interface with frequent changes.

4. Increased consistency enables a better user experience

A UI style guide is incredibly powerful to have a holistic view of an application's components and pattern library. It helps developers and designers identify inconsistencies so unnecessary behaviours or design patterns can be merged into one consistent standard.

5. Easier to apply existing patterns to new challenges 

Increased visibility of components and patterns makes it easier for designers to understand interface constraints and quickly use existing patterns to solve new problems. 

Keep an eye out for our next post where we take you through how to create a UI style guide.


Is your project in need of a UI style guide?

Our front-end development experts would love to help. Send us a message and we'll be in touch.

Tick (success) icon
Thanks for your message,
we will be in touch soon!
Oops! Something went wrong. Please try again later.