Elise Hein’s personal site

Edges and intersections

I love building for the web.

Visual design work examples from Elise

Hello, Plain 👋🏻 Here's a collection of past projects that showcase the more visual side of my work.

Griffin UI design

At Griffin, I led the design and build of a multi-theme design system powering two complex banking apps and several websites. As a generalist designer/developer, my design work spanned from higher-level product design (working on features such as billing, Open Banking, and API security), low-level UI polish, producing public-facing marketing material, and writing interactive design guidelines. 1…

Fighting inter-component HTML bloat

When we decide what qualifies as a component in a component library or design system, we aim for a separation of concerns: we decouple something that creates whitespace from something that creates frames from something that styles type so that each can be reused in different contexts. But when each UI characteristic is represented by its own DOM tree, this decoupling can — by design — result in…

The wasted potential of CSS attribute selectors

I'm a long-time BEM user. The double underscore creeps into my code even when selector collision isn't an issue. I don't think it's BEM, specifically, that I'm drawn to (it just happened to be the methodology I first learned about and grew used to). It's the fact that a methodology, any methodology, adds structure and semantics to HTML class naming where inherently there isn't one.

Fora Health UI design

In 2020, about halfway through my tenure at Ctrl Group, I transitioned from a purely software engineering role into a developer/designer hybrid position. One of my first design tasks was to give the iOS and Android apps a visual refresh and establish a design system that worked across mobile and Web. Starting from a deep-dive into colours and typography, I designed a new component library for the…

Where's the fun in accessibility?

Consider this question posted on the UX community on Stack Exchange:

Using the platform

I recently came across a series of articles by Daniel Kehoe where he introduces The Stackless Way, an optimistic take on web development that proposes we “use the platform” (modern features built into the language) instead of frameworks and build tools that keep getting replaced every few years.

Schematics: A Love Story

Why should type be fluid, anyway?

We call type “fluid” when the text on a web page scales smoothly in relation to screen size without any breakpoints. If, like me, you've just had a marathon catch-up with all things web typography in 2021, the most thrilling part about this concept would seem to be the immense gains in code maintainability.