UI Toolkit: The Necessary Deliverable for Responsive Design

In today’s web design world, designing responsively has two meanings: (1) designing user-friendly and efficient UI, and (2) building sites with a design that accommodates end-users from any device. An exemplary site should achieve both of these goals.

No matter the size of the site, responsive design can be incredibly complicated –but it doesn’t have to be. By creating what I call a UI Toolkit, you’ll be able to ensure consistent quality throughout your site’s lifespan from mobile to desktop.

Style tiles, brand guides, style prototypes, and pattern libraries were introduced in 2011 to plan the overall look and feel of a website. These consist of design and development deliverables that provide high-level overviews of the site. With these components come various internal checkpoints, reviews, and changes. While each of these have their merits, they also create more deliverables and more work for the project manager to keep tabs on.

By simplifying from these many components into one single deliverable–the UI toolkit–your team can build a solid foundation for an effective UI design and front-end that provides a cohesive user experience for your customers.

What does the UI Toolkit do?

• • Gathers all common components in one place for easy management and review
    • • Reusable elements
      • Navigational components
      • Information constructs
      • Visual containers
  • Encourages simplistic design by organizing site complexities, promoting clear improvements in the design
  • Discourages the use of unnecessary elements, helping the end-user spend more time with the content
  • Demonstrates animations, allowing for easier testing and configuration to keep user distractions at a minimum

How is the UI Toolkit useful?

The UI Toolkit illustrates streamlined processes from design to development:

• • Demonstration and communication are included in one centralized location
    • • Allows for clear collaboration between designers and developers
  • Usability best practices are built within the toolkit
    • • Increases efficiency while reducing time to market
  • Demonstrates how components react to different browser and screen sizes
    • • A working example of the concept is important not only for internal review, but also for the client who may not be familiar with a responsive site
      • Responsiveness is impossible to demonstrate with simple Photoshop files

What Challenges come with the UI Toolkit?

Injecting a new deliverable into the process presents some challenges, but by allowing designers and developers to begin communicating earlier on a project, inefficiencies can be avoided and overall production can increase.

Unfortunately, clients may not be concerned with looking at the UI Toolkit because it appears to be superfluous documentation, and project managers may be wary of the time it takes to create and maintain. To overcome this bias, it’s important to research the tools and processes that work best for your team and project to position the toolkit advantageously.

Our UI Toolkit is a great fit for our team and tasks. UI Toolkits create more streamlined, faster and visually pleasing sites while avoiding internal inefficiencies. A successful UI toolkit, in total, depends on full team adoption.

Have you ever used a UI Toolkit approach? What was your experience?