The Path To Integration

After months of careful planning, experimentation, designing, and testing, G2 Components is at a stage where all of the various systems and parts are coming together. The next phase is to integrate with Gutenberg (hopefully!). Integration planning is one of those hyper important things that is often left to the very end. It’s a crucial aspect that ultimately determines the success of a project like G2 Components.

UI Integration, and all of its nuances, constraints, and pitfalls, is something that I was well aware of before even starting down this G2 Components path. Many of the core mechanics and systems of G2 have been shaped around these considerations.

Advertisement

Designing UI Interactions

In this zoom session, we explore some techniques in planning and designing UI interactions.

The design challenge for today was to simulate a typical workflow that happens with a design to development hand-off. We pretended that we were submitting designs for Google’s search interface.

Inconsistencies and degraded experiences often stem from miscommunication or misinterpretation (either from the design side, or the development side). Our goal is to clarify our designs by complementing static mockups with interaction and state diagrams and thoughtful naming of assets (e.g. Figma layers).

This involved being drilling into the details and being thoughtful on every interaction as it relates to user expectations, accessibility, and encouraged interaction behaviours. It also involved being mindful of the next people receiving our design work, and providing them with the context and information they need to be successful.