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.

Advertisement

Designing UI Interactions (Zoom Session Announcements)

Hi all! I’m planning on hosting another design Zoom session. For the session, I’m going to be sharing some techniques in planning and designing UI interactions.

UI interactions can be extremely complex. There can be so many different actions a user can perform. A great example would Mac OS Spotlight or Google’s search bar.

Considering and supporting certain flows are fundamental to making experiences feel intuitive and delightful. Funny enough, it’s common for these details tend to be forgotten about during the creation of these interfaces. It’s almost impossible to effectively communicate these nuances in traditional static design to development hand-offs. Even sophisticated Figma prototypes fall victim to this.

In this Zoom session, we hope to demonstrate how we can improve this workflow, using nothing more than a pen, some paper, and a bit of imagination.

---

I’m planning on starting the call on Tuesday, October 20th at 1:00PM EDT. The call may last 60-75 mins or so.

---

These Zoom hangouts sessions are very free-form! Everyone is welcome to join, engage, ask questions, and play! For those who can’t make it, no worries. I’ll be recording the call and uploading it to YouTube

I’ll share the Zoom link in this post (and on Slack) before the time of the call.

See you then!

Experimenting with Theme.json Creator

In this zoom session, we explore some interesting enhancements for the recently created experimental Gutenberg Theme.json creator.

For context, this tool was inspired by the new theme.json support for Gutenberg. The idea was to provide a UI to tinker, customize, and share Gutenberg configurations.

This was an incredibly informal design/code session. I went into it with a couple of goals:

• Adding a simple Live Preview
• Theme switching? (e.g. TwentyTwenty, TwentyNineteen)
• Explore color tooling!
• Explore typography scaling

We were able to hack our way to accomplish most of those features. The most interesting and visually impressive feature was adding the ability to drag and drop an image to automatically generate a color palette. Because of the new Preview, we were able to see the color swap live in the browser! Neat.

GIF demonstrating the drag/drop of a photo of strawberries into the Theme.json creator. This generated a series of colours which can be seen in the live preview.

P.S. If you’re curious about the updates from today’s session, you can find the source code here.

Exploring Theme.json Creator (Zoom Session Announcement)

Hi all! I’m planning on hosting another create/code-along Zoom session. For the session, I’m hoping to explore some fun and funky ideas for the recently created Theme.json creator.

The Theme.json creator was an experimental something I put together one afternoon because I felt like it may be helpful with the new theme.json based configurations with Gutenberg. I’m not sure what the long term plan for this particular project would be. So far, it’s been wonderfully helpful from a Design Tools and G2 Components exploratory perspective (the UI was created with G2!).

---

I’m planning on starting the call on Friday, October 9th at 2:00PM EDT. The call may last 60-75 mins or so.

---

These Zoom hangouts sessions are very free-form! Everyone is welcome to join, engage, ask questions, and play! For those who can’t make it, no worries. I’ll be recording the call and uploading it to YouTube

I’ll share the Zoom link in this post (and on Slack) before the time of the call.

See you then!

The Tiny Yet Mighty “as” Prop

Component libraries, frameworks, and toolkits share a common goal. That goal is to provide users with the ability to do cool things with less work. G2 Components is no different in that regard!

They can provide power by focusing and abstracting away complexity (like MATH!). They can provide UI cohesion by building upon and encouraging specific usage patterns. They can also provide safety nets by understanding multiple use cases and supporting those use cases with sensible defaults.

One of the biggest challenges (if not the biggest) is to do all of this while being as flexible as possible. As far as React UI is concerned, I can’t think of another pattern that does this better than the humble “as” prop.

HStack and VStack in CSS: Exploring UI Layout Patterns

YouTube video of today’s Zoom session

In this zoom session, we explore horizontal and vertical alignment patterns and create highly composable and reusable CSS components – Flex, HStack, and VStack.

We showcase how HStack and VStack can be used to (basically) layout anything within the context of UI. These ideas extend beyond CSS and can be applied in visual design as well as JavaScript powered component libraries.

HStack and VStack have become a core foundation within the G2 Components project.

Source code from this session can be found here: https://github.com/itsjonq/hstack-vstack-css

Exploring Layout Stacks (Zoom Session Announcement)

Hi all! I’m planning on hosting another create/code-along Zoom session. For the session, I’m hoping to explore layout “stacks”, specifically the concept of “HStack” and “VStack”.

Layout stacks are everywhere in UI! It’s a simple, foundational and powerful pattern that can be applied to any form of layout design/development.

The stack components were added to G2 Components at the beginning of August. Since then, they’ve found their way throughout the entire library.

---

I’m planning on starting the call on October 1st at 2:00PM EDT. The call may last 60-75 mins or so.

---

These Zoom hangouts sessions are very free-form! Everyone is welcome to join, engage, ask questions, and play! For those who can’t make it, no worries. I’ll be recording the call and uploading it to YouTube

I’ll share the Zoom link in this post (and on Slack) before the time of the call.

See you then!

Inline Documentation and Performance Updates

Hi friends!

It’s been a little quiet on this blog. Rest assured, a lot of interesting and important work is being done within G2! The two major updates include adding support for inline documentation (for supported editors) as well as a bunch of performance optimizations. Both of which are in service of making G2 Components easier to use.

Creating a Context System

One of the more “abstract” but important and powerful systems within G2 Components is it’s “Context” system. Given the name, those familiar with libraries like React may immediately think of React.Context. It’s kinda close, but it’s much much more than that.

The goal of G2’s Context system is to provide “awareness” to the components. Components that are “connected” to this system can become “aware” of each other, and can modify their behaviours depending on how they’re composed together. A simple example would be how a MenuItem may automatically render a right chevron icon when it is used within a link, because it knows that it should render as link.

Creating a Style System

One of the biggest and most important challenges for the G2 Components project was defining and creating the Style system. The Style system is one of the core system that’s responsible for managing and powering the entire UI layer for the library. G2’s styles had a handful of truly unique requirements – Features that are often only subtly addressed or even omitted from existing solutions. For this post, I hope to touch upon some of the important mechanics and considerations for the G2 Style system (without drilling down into the possibly boring nitty gritty details).