Aetherpoint

The Manifold of Viable Interfaces

Andrew Johnson — Tue, 02 Jun 2026 20:00:00 -0400

How many visual interfaces can be made?

Designers spend a significant portion of their time deliberating over what set of UI patterns are most appropriate – navigating requirements, taste, and usability. It seems, though, that within a given medium, there is a finite set of physical representations that bring about a usable graphical interface.

$I = \{\mathit{leftmenu}, \mathit{rightmenu}, \mathit{topmenu}, \ldots\}$

When we start considering context – environment, information architecture, and product goals – this space grows, and the set of all things that can be communicated is incalculably larger still ( $I \subset C$ ). But all things that are generally usable (a subset of human factors) on a screen might be completely enumerable.

There are some strong, historically consistent constraints that bound what is useful.

Perceptual Constraints

Fundamentally, humans have relied on flat images and representations to efficiently convey information since prehistory ⁽¹⁾. Our visual systems are efficient for the vast majority of information input and we’ll rely on this modality for quite some time. Our perceptual systems, which have not fundamentally changed, frame what’s practical ⁽²⁾. We can only perceive so much (distance, field of view, attention, color spectrum, spatial frequency, and detail/difference and so forth). While GUIs pack a multitude of detail, they are ultimately limited by the medium’s resolution and what we can make out – eventually hitting diminishing returns around just-noticeable difference.

Display technologies (matrix, segment, plasma, CRT, and LED specifications shown here) have shifted over the years, generally in service of clarity.

Naturally, read/writable displays that confine representation to a flat plane have dominated (cave paintings, scrolls, the codex, signage, phones, and so on), followed by a longer tail of other media and modalities. Even volumetric displays (airplane control panels, VR/AR and holographic approaches) confine the majority of their dense information to flat planes.

The Flood Tablet, part of the “Epic of Gilgamesh” (7th century BCE, Neo-Assyrian), Codex Sinaiticus (4th century CE), First Capacitive Touch Screen, E.A. Johnson at the Royal Radar Establishment, Malvern, UK (c. 1965), and a mixed reality panel display (2026).

Representation

For an interface ⁽³⁾ – different types of tasks and information are best visually suited to specific formats and media (Information Design / Information Architecture). This often involves distilling down a complex set of narratives or use cases (often with subtle tradeoffs) to articulate ideas and content well.

For icons and UX patterns in digital displays, skeuomorphism borrows visual properties of physical objects to aid people’s mental model of how things work (part of the set of all useful things that can be communicated ( $M \subset C$ )).

Folder icons borrow familiar physical affordances for organizing digital files.

Given this, there is a limited amount of visual treatments and styles that facilitate clarity and usability. While we can generate any interface through AI, ideal UI legibility and placement still exist (e.g. color contrast and swipe zones for capacitive screens, respectively).

Interfaces are intentional abstractions of how the world works. Neumorphism and Liquid Glass embody design systems reaching the limit of their functional set of options and overflowing into the stylistic/ornamental.

Liquid glass borrows from physical caustics as part of the design language

Interaction

Interaction and motion allow us to communicate additional behavior. Things like weight, attractive forces, and depth can be afforded as people manipulate UI. Google’s Material Design famously modeled shadows after the depth of stacked paper (appearance and interaction). Liquid glass is another permutation of this through real-time caustics simulation and through IMUs.

There is also a limited set of human interaction metaphors and models to draw from. A small subset of natural forces happen on the experiential side of human scale (magnetism, surface tension, aspects of gravity, friction) ⁽⁴⁾. AI-based generative UIs allow for seamless interpolation through the latent spaces of these styles and configurations.

While wholly speculative magic/sci-fi interfaces remain the upper imaginative bound of what can be done with interfaces, everything is still beholden to human factors – cognitive and motor aspects largely influence what interfaces are practical.

Input Constraints

For visible interfaces, comprehensibility, input resolution, reliability, and latency (critical characteristics of throughput) govern the space of what can be meaningfully selected on a GUI. These get more stringent as they move from abstractions to the real world. Mouse/trackpad input, which has not drastically shifted since the 1960s, accomplishes all three of these well and provides an expansive canvas for GUIs.

Hardware from the Mother of All Demos (1968) – mouse, chord keyboard, and display establishing a long-lived input vocabulary for GUIs.

Other forms of input impose different restrictions. Phone-based touch controls require a smaller space with larger hit targets but are suited to swipe gestures. Voice has many degrees of freedom but lacks continuous, fine-grained input. Hand/motor tracking may offer a wide range of continuous freedom at the expense of input noise and latency.

Conversely, input systems limited to cardinal directions, like TV browsing UI with a remote, are reliable but necessitate coarse, focus-based navigation patterns.

Your browser doesn't support HTML5 video tag.

Apple TV’s home screen navigation, 2025

The same directional input characteristics exist for EMG gestures (albeit with other tradeoffs), so there exists an ideal shared pattern between both approaches.

Early UI patterns for Meta Ray Ban Display

The same, principled grid pattern designed for remotes/hand gestures would feel cumbersome for voice or cursor-based approaches. If we know the characteristics and constraints of the input we can rule out a swath of UI patterns that aren’t optimal.

Environmental Constraints

Interfaces and their representation have a strong relationship with the environmental context (shifting and composite input modalities, form factor, ambient conditions, etc.) they exist in. Changing your route mid-run on a smartwatch is very different from adjusting a weekly schedule on your phone.

Modern interfaces increasingly aim to predict user intent and outcome through signals – usage history, mental state, and world cause and effect.

Admittedly, real-time/generative responses to the environment introduce the most possible variation to a UI’s appearance ⁽⁵⁾. Regardless of how an interface evolves, though, it’s still tethered to the enduring heuristics of human factors ⁽⁶⁾. Probabilistic interfaces yield better and worse patterns for the situation, assuming the interface has a salient mapping and response to user/world state.

Everything should pass through the “hourglass” of our control and cognition.

Bringing it together

Extrapolating from here, it’s not hard to imagine formulas and generative approaches for whole classes of screen-based interfaces. Perhaps this is solvable.

To phrase this as a hypothesis:

“There are only so many practical arrangements for an interface given how we can interact with it, the environment, and its objective.”

Or propositionally:

“For every interface, there exists a set of viable options (equilibrium) between available human input, environment, and required output.”

\forall I,\ \exists E : E = I \cap H \cap O

The space of this expands as new types of input/output become available, and the complexity explodes moving from individual UI elements to whole patterns, experiences, environments, and culture. These are the spaces where taste, human intuition and scientific exploration flourish 🌱🪲.

Footnotes

1. Lots of remarkable exceptions here exist – i.e. Drums, Braille, ASL, etc. ↥

2. Advances in VR/AR and alternative displays will continue to raise the ceiling of realism until we pass the visual and perceptual (for each sense/modality) Turing tests. ↥

3. Full sets of images (all of art!) are more complex since they move further from being measured strictly by usability. The space of meaning seems many orders of magnitude larger than the data current LLMs/VLMs are trained on. ↥

4. A larger but still limited set of more abstracted metaphors may be intuited by people (e.g. static electricity, phase changes, general relativity, cell division, crystal formation, molecular mechanics, elementary particles, mechanical design, metamaterials, etc.). ↥

5. It will be interesting to see where personalized and diegetic interfaces through AI will allow us to eschew consistency and design systems. ↥

6. We can speculate that instantaneous, predictive interface adaptation would be subject to the same pre-existing animation, control, and perceptual human factor constraints. Cases where an interface expressedly influences us to a greater extent may advance set goals (required output) but not change the postulation that there is an ideal visual representation towards those goals. ↥

Depth Camera Memory Generator

Andrew Johnson — Sun, 28 Dec 2025 19:00:00 -0500

Experimentation running depth-sensing camera (OakD) signals through to Touch Designer.

Your browser doesn't support HTML5 video tag.

The Touch Designer set up used replicators to place textures of memories at blob points from a smoothed texture from the depth map.

Recent Favorite Album Art

Andrew Johnson — Sat, 18 Oct 2025 20:00:00 -0400

Some album art favorites circa mid 2020's, before the metaphorical generative AI nuclear bomb pulse.

Pleasures - ADOY (2023)

Dreamily soft gradients and characters with a selectively vibrant palette.

Remember That You Will Die - Polyphia (2022)

High complexity emerging from the form brings this over the edge.

FRUTO - OWALLOIL (2025)

OWALLOIL has many beautiful album art in this theme, but FRUTO stands apart because of how the mobile shapes match the vernacular of the box markings (present across multiple albums). This composition also benefits from the negative space given by the sparse lines in constrast to busy reflections in other album art.

The surface lines on the glass economically communicate depth. The warm wooden tone is a delightful departure from other more stark styles for its time.

smells like earth - aruka (2023)

Cleverly guides you in with the foliage starting on the CD case spine leading towards the greenery and offset typography. The canvas texture is seems less overdone at this point in time.

The distorted disc logo and ultra compact textural type is also of note.

WonderStruck - Shiroi-Ice & Ceru_Lean (2025)

A fusion of Metalheart revival and Botanica (just enough, through powerline/sky references) WonderStruck pulls together some of the most interesting aspects from each, motion and texture respectively.

gutter angel - sunnbrella (2025)

Flattened compositional and illustrative chrome leads to striking piece.

Misery - jeebanoff (2025)

With just enough to not feel like a default Spotify generated album of its time. The tracked out characters provide crucial texture.

Les Chants de l'Aurore - Alcest (2024)

An evocative illustration by Yoann Lossel holds rich color and movement running between the sky, cranes, and grass.

未確認・惑星・幻天國 - 失業魔法少女 (2023)

Discerning use of color and texture tie the collage style into something emergent.

andromeda (Single) - nuphory (2024)

Does just enough through line work to let the powerful gradient shine.

86400+ - KBSNK, ISLTR (2025)

Released in September 2025, channels both pixel sorted characteristics and airbrushed 1960's sci-fi illustrations showing up (similarities to work 30 years before) through its dome shape and typesetting.

Project Caelus - Ochre (2018)

While technically in the 2010’s, Project Caelus by Nathaniel Reeves is worth a callout - I haven’t seen anything quite like it before. Especially intriguing is Nathaniel’s use of the Bleeding Cowboy-style (CheapProFonts) display font within various album art, something used in 2000’s rock bands. Surprisingly it doesn’t completely clash with the vibrational yellow shockwaves in this art.

Emotions Over Time

Andrew Johnson — Sun, 28 Sep 2025 20:00:00 -0400

As an excercise and reflection on emotions, I recordeded emotions felt throughout the day, a la Feltron Reports. The How We Feel App app made collecting structured data easy, with daily logging akin to bullet journaling and the ability to export data.

Using data from 200 days I designed an animated readout with Touch Designer.

Your browser doesn't support HTML5 video tag.

The most interesting questions it raised were around how we recall our recent past from an emotional vantage point, given how widely feelings can range over the course of a day or week. What makes up a good day?

I went through several stages of balancing clarity with visual interest.

There were also some serendipitous glitches along the way.

Your browser doesn't support HTML5 video tag.

Eventually, I landed on something emphasising more clarity with effects influenced by density and colors of emotions. It lead to a format similar to Sanger Sequencing for high information density.

Prototyping Environments

Andrew Johnson — Sat, 27 Sep 2025 20:00:00 -0400

Prototyping - as a tool to bring disparate ideas/contexts together - works best in certain organizational environments. Prototypes can shine light on problems, corporealize complexity, kill bad ideas, and cast vision.

Here are a brief set of observations (in my experience) around what conditions allow prototypers to operate well:

Prototyping inherently brings together individuals with widely ranging unorthodox skillsets / domain knowledge. These people don't fit neatly into mature industry roles, especially when involving new technologies.
Prototyping needs space and sponsorship to operate. Without this it will fall back into traditional silos. Within those troughs, there is less transmission of ideas and role specific incentives that can pull away from what’s most critical to the prototype.
Success of prototyping teams is best measured in demos over other deliverables. The demo has primacy, other artifacts are supportive at best and a distraction at their worst.
A highly respected Director once said: “Prototyping teams work best when they operate like a band where each member plays their part.” This has been my prevailing experience - while there is redundancy in skillset, each member brings their own set of core competencies.

Site Update - Live Weather

Andrew Johnson — Tue, 17 Jun 2025 20:00:00 -0400

This site now displays local ambient stats – temperature, humidity and light driven from an SBC monitoring for weather changes with live sensors.

Even if these can be spoofed, it’s neat to have some feedback from the physical world.

Inspiring Game Music

Andrew Johnson — Wed, 15 Jan 2025 19:00:00 -0500

A running list of games with personally notable, inspiring OSTs.

1990s:

Fire Emblem (1990) – Yuka Tsujiyoko
Pokemon Red/Blue (1996) – Junichi Masuda
Pokemon Silver (1999) – Junichi Masuda, Go Ichinose

2000s:

RuneScape (2001) – Ian Taylor, Andrew Gower
Mega Man Battle Network EXE (2001) – Akari Kaida
Animal Crossing (2001) – Kazumi Totaka
Pikmin (2001) – Hajime Wakai
Super Mario Sunshine (2002) – Koji Kondo, Shinobu Tanaka
Shantae (2002) – Jake Kaufman
Fire Emblem: The Sacred Stones (2003) – Yoshihiko Kitamura, Saki Haruyama, others
Tales of Symphonia (2003) – Motoi Sakuraba, Shinji Tamura
Katamari Damacy (2004) – Yuu Miyake, Asuka Sakai, others
Mega Man Battle Network Red Sun/Colonel/Gregar (2004–2006) – Akari Kaida
Fire Emblem: Path of Radiance (2005) – Yuka Tsujiyoko
Metroid Prime Hunters (2006) – Lawrence Schwedler, James Phillipsen
Wii Themes (2006) – Kazumi Totaka, others
Mega Man ZX (2006) - Ippo Yamada, Masaki Suzuki, Luna Umegaki
ACE Online (Air Rivals) (2006) – unknown
Pokemon Diamond/Pearl (2006) – Junichi Masuda, Hitomi Sato
Fire Emblem: Radiant Dawn (2007) – Yuka Tsujiyoko, Saki Kasuga
Professor Layton and the Curious Village (2007) – Tomohito Nishiura
Super Mario Galaxy (2007) – Mahito Yokota, Koji Kondo
Valkyria Chronicles (2008) – Hitoshi Sakimoto
Advance Wars: Days of Ruin (2008) - Yoshito Hirano
Pokemon HeartGold/SoulSilver (2009) – Junichi Masuda, Go Ichinose

2010s:

Ni no Kuni: Wrath of the White Witch (2010) – Joe Hisaishi
Xenoblade Chronicles (2010) – Yoko Shimomura, ACE+
Dark Souls (2011) – Motoi Sakuraba
Fire Emblem: Awakening (2012) – Hiroki Morishita, Rei Kondoh
Gravity Rush (2012) – Kohei Tanaka
Journey (2012) – Austin Wintory
Kingdom Hearts 358/2 Days (2009) – Yoko Shimomura
Kingdom Hearts Chain of Memories (2004) – Yoko Shimomura
Mirror's Edge (2012) – Solar Fields
Transistor (2014) – Darren Korb
Undertale (2015) – Toby Fox
Hyper Light Drifter (2016) – Disasterpeace
No Man's Sky (2016) – 65daysofstatic
Dark Souls III (2016) – Motoi Sakuraba, Yuka Kitamura
Persona 5 (2016) – Shoji Meguro
Nier: Automata (2017) – Keiichi Okabe, Keigo Hoashi, Kuniyuki Takahashi
Hollow Knight (2017) – Christopher Larkin
Night in the Woods (2017) – Alec Holowka
Super Mario Odyssey (2017) – Naoto Kubo, Shiho Fujii, Koji Kondo
Gravity Rush 2 (2017) - Ippo Yamada, Masaki Suzuki, Luna Umegaki
Super Smash Bros. Ultimate (2018) – Various composers
Control (2019) – Petri Alanko, Martin Stig Andersen
Death Stranding (2019) – Ludvig Forssell
Cuphead (2019) – Kristofer Maddigan

2020s:

Genshin Impact (2020) – Yu-Peng Chen
Gris (2020) – Berlinist
Octopath Traveler (2020) – Yasunori Nishiki
Bravely Default II (2020) – Revo
Elden Ring (2022) – Tsukasa Saitoh, Shoi Miyazawa, Yuka Kitamura
Elden Ring: Nightreign (2024) – Yuka Kitamura
Octopath Traveler 2 (2023) – Yasunori Nishiki
Neva (2024) – Berlinist
Death Stranding 2: On the Beach (2025) – Ludvig Forssell
Clair Obscur: Expedition 33 (2025) – Lorien Testard ft. Alice Duport-Percier
The Midnight Walk (2025) – Joel Bille, performed by Bortre Rymden

Human Input and AI

Andrew Johnson — Thu, 21 Mar 2024 20:00:00 -0400

As humans, we need coherent things to build mental models around when we interact with interfaces and input. These “boxes” of interaction need to work and react predictably for us.

All interactions sit along a spectrum ⁽¹⁾. On one end, there is conscious intention – when we reach out to move something or tap a button. On the other end, we have cases where AI and signal processing predict our intent in ways we don’t consciously understand.

The latter models are excellent at taking noisy aspects of ourselves and our world and synthesizing them into natural interaction. They can make inferences based on a wider gamut of signals than we normally have available to us.

The crux is how to package and compose these into localized, conscious interactions that further human agency.

Footnotes

1. There’s a spectrum here, albiet a bit of a diffuse one. Humans are adaptable. Also, what happens as systems make more choices for us and impact how we engage with it in subsequent interactions? ↥

Responsive Design Ecosystems

Andrew Johnson — Tue, 01 Nov 2022 20:00:00 -0400

The proliferation of flexible design systems is correlated to the lifecycle of the present device ecosystem. Adaptive UI approaches have the most potential when the landscape is nascent.

We can attempt to break up this lifecycle into three phases:

1. Advent

During the introduction of new devices and input – where there is ambiguity of the medium’s boundaries and rules – people and teams often respond with flexible systems to cope with the multitude of contexts. There are no established rules or winners, just many device capabilities and expectations.

This is when a technology becomes a new consumer product. The explosion of a wide range of mobile devices and introduction of competing VR headsets are the two most recent events on the hardware level.

2. Experimentation

From there, adopters begin to pick up the new medium and experiment with it, often making breakthroughs and identifying locally useful patterns. Corporations may start to find business value, and often have to make tradeoffs:

When there is a chance to choose between discrete or continuous design systems ⁽¹⁾ (will use this term very loosely), there are two factors in tension here:

Simplicity

Organizations are incentivized to keep things discrete and simple due to economics, as target devices will inevitably be the ones with the most relevant market share.

Scalability

Organizations are incentivized to apply continuous adaptive design systems as an economic measure to cover as many cases as possible.

Poorly balancing these comes at the expense of people. Overly discrete designs can exclude whole contingents of people and large system solutions can water down a product experience to a point where there is no clear hierarchy or flow.

3. Condensation

Eventually after enough experimentation the ecosystem stabilizes enough for companies to place bets and invest in established platforms, form factors and patterns.

Teams may decide they will spend extra time optimizing for mobile or desktop compared to tablet because it makes up a smaller market segment. Companies may even push people towards specific platforms which have more robust monetization and retention as evidenced by mobile web “View In App” banners.

At a higher level, this convergence is driven by dominant platforms. iOS/Android or Windows/OSX establish sets of patterns and expectations. The OS defines standards for the marketplace, data/device access and interaction vocabulary for app products. The same is true to a lesser extent with browser vendors and web apps ⁽²⁾.

Some standout products are able to span many platforms well, but tend to be outliers ⁽³⁾.

Currently

AR/VR seem to be at the early stage of this lifecycle with a range of available modalities (different controllers and tracking) to interact with objects and UI over a spectrum of distances.

Footnotes

1. Compare the old .mobi for websites specifically designed for mobile devices to media queries (and later viewport units) allowing the site to scale across viewport sizes. Responsive design (coined in 2010 by Ethan Marcotte) allowed websites to scale economically across many of the possible devices and contexts they could exist in. Because of the wide range of devices, designers sought to build flexible systems that spanned device capabilities and viewports. ↥

2. An example of browser vendor/OS defining boundaries for the app is Safari’s native edge swipe to navigate web page history. ↥

3. Some more information based products (bookmarking, search, browser extensions, file sharing, .etc) may be inherently successful with a cross platform, light interaction approach. ↥

In Defense of Form

Andrew Johnson — Sun, 18 Oct 2020 20:00:00 -0400

What’s the value of creating something if it cannot be distinguished by people as something new? This is an especially existential question for disciplines like graphic design which hold “new” aesthetics in such high regard.

Perhaps we should shift away from myopically chasing visual complexity. In this world, the ability to create meaning by cultivating communities and tools is a better use of our time.

Algorithms, capable of aesthetic categorization, generation and style transfer bypass the need for craft on many fronts. While most examples today apply this to historic art styles, it’s a reasonable speculation that people will be able to apply a style – however nascent – to their own sets of information.

Some of our Twitter favorites like album art, posters, merchandise, and illustration are first in line to go because of their availability.

Style transfer examples from the Intuitive Guide to Neural Style Transfer.

Given this speculation, the time an image can exist as a novel, new aesthetic before it is copied is reduced to minutes:

Imagine your friend posts a new design. It features a unique mix of novel ideas – shaders, analog processes, hard earned familiarity with the medium, lots of time, and so on. After it’s shared, someone else detects it is gaining traction so they – enabled by friends or a botnet – instantly tweet copies. These have their own set of information, are indistinguishable from the original and are more widely shared.

Nice. Historically, this has never been a good tradeoff for the designer as a craftsperson. This happens today within the span of hours in the form of replies, blatant copies and remixes. At this point we should check what investments in visual design, if any are wise.

Communication Decay

If we measure the “value” of a design by how long it uniquely communicates a given message, its value decays quickly ⁽¹⁾. On social networks today, the moment a flat image is posted online, it’s subject to being copied.

Figure A: Value of a design shared on a network. As time passes it becomes less unique (due to copies and remixes) and its message gradually becomes diluted.

Figure B: Value of a design shared on a network with ML reproduction. The moment a new design has been introduced it’s immediately lifted, causing its value to drop off.

Charts comparing the decay of an image’s uniqueness once it’s been posted, with standard tools (A) and ML driven style transfer (B).

When there’s style lifting, there is a collapse in the time it takes to create derivative works. Any message can be instantly diluted, the original time and effort invested to create don’t matter. Tellingly, Walter Benjamin’s The Work of Art in the Age of Mechanical Reproduction explains the “mechanical” element in photography’s ability to capture representations faster than they can be drawn.

"For the first time in the process of pictorial reproduction, photography freed the hand of the most important artistic functions which henceforth devolved only upon the eye looking into a lens. Since the eye perceives more swiftly than the hand can draw, the process of pictorial reproduction was accelerated so enormously that it could keep pace with speech. "

These mechanical advancements foreshadowed the ML tools of today. They can move faster than our hands. Currently our hands take the form of design tools/plugins, fonts, photography, 3D renders, illustration and filters – all of which are ways to create digital objects. Historically, these objects of style became widely available to lower classes through industrialism:

“The “democratization” of elite images of wealth exploded with the rise of industrialism and mass production by the beginning of the nineteenth century. Imitations of aristocratic style became affordable for the burgeoning middle class. Extravagant fake ornamentation came to replace quality and craftsmanship in conveying the value of material goods.”
— Stuart Ewen, All Consuming Images: The Politics of Style in Contemporary Culture

When reproduction speed drastically changes, the definition of value shifts, along with the role of designer in the industry. The digital revolution of the early 2000s lowered the barrier to entry for design through pirated design tools and widely available tutorial videos. ML tools go beyond this in a couple of ways:

They can generate derivative works using completely new sets of information.
They can be deployed on a wide network scale (bots and automation).

Not only is a design’s original aesthetic novelty compromised, but its style is no longer tied to the original message.

Product defensibility

From an economic standpoint, this resurfaces a question:

Does the time cost for a given design meet the value of the message that will be communicated to the audience, with the assumption that other parties will be able to instantly reproduce it?

Designing anything involves a balance of time, cost management and effectiveness towards a goal. Deadlines and budget constraints prevent designers from having the resources to make masterpieces of each and every design (as lovely as this would be).

Looking at the production of graphic design from a product design perspective can help us come to terms with its place in an economic system ⁽²⁾. Digital products aim to construct defensible moats in a market through combinations of hard to reproduce business positions (network effect momentum, actionable data, consumer loyalty, cost advantages through supply chains, proprietary intellectual property and manufacturing processes, etc). Single features may be reproducible, but strong products generally have many advantages that work together in concert.

In an ML reproduction dominated world, there are several visual design approaches that may be better suited towards giving the designer more agency.

1. Unique, extensible and rapid production tools

There are advantages to be gained through rapid tool-based design exploration.

Many designers develop a unique set of tools, cultural experiences or processes for bespoke form making. These take the form of things like refined ideas, code, materials and knowledge of the medium. They are often catalyzed through collaborations with other artists. Generally, these are kept close to the chest, as they provide a designer with exclusive ways of creating forms ⁽³⁾.

It’s worth noting that the ability to efficiently create new aesthetics doesn’t ensure it will be effective at communicating. The human designer is largely responsible for this piece.

A successful tool within a style transfer pervasive world would give designers options for communicating in an extensible manner ⁽⁴⁾, at a rate that creates “value” more efficiently than the sunk cost incurred from designs being copied. This would be through exceedingly high potential for variation and craft at a low time cost to the designer.

Some more limited but existing examples today are things like custom photoshop brushes or chrome type techniques. These are methods that can be easily applied to a variety of different forms through a designer’s free intent. Future techniques could provide more dimensions of expression. Sometimes, these complex tools enable products and experiences that are not easily reproducible.

2. Rich interaction

Designs with interaction and functionality have additional layers that make them increasingly harder to copy. The simplest format to reproduce is a 2D image – it can be easily copied and saved. Animation requires additional work to save the whole file instead of just an individual frame. Further up the ladder are websites and apps ⁽⁵⁾. These can be reverse engineered without source code, but the level of effort to reproduce them is much higher. Server-side code, databases and real-time player to player interaction demand progressively more effort to recreate.

This is inline with the move from the audience as observers towards the audience as active participants in media:

...we are moving away from a reality in the modernity framework, where the audience is just an observer...As designers, we should find ways to engage the audience in our work so that they see themselves as the main characters, so that they have an opportunity to relive their own dreams and get inspired by them.
– David Rudnick: The Ultra-reality of Graphic Design by Sasha Dorfman

In a world saturated with flat images, increasing fidelity and interaction opens up additional avenues for expression. Emphasizing real time signals and feedback can help the audience engage on personal and temporal levels that cannot be lifted. While snapshots of an interactive design can be shared, the primary piece of communicative value resides in the moment and psychological state it’s experienced in.

3. Format ownership

Proprietary formats sometimes provide advantages through superior fidelity (for example, things like richer interaction, color gamuts and losslessness), performance (file size) and support. These require tight market control beyond the resources of an individual designer’s influence.

Limiting access through community or cryptographic methods can be used to slow down how quickly something is copied at the expense of reach. Patrons on Patreon or group members in a Discord may have exclusive access to designs until they are leaked. Some token based approaches like Zora and Super Rare provide mechanisms for capturing and proving ownership through ledgers of authenticity. A low resolution version of the design may be shared with a wider group, while the owner keeps the original.

Designs can also be tuned to be less prone to reproduction through GANS. Counterintuitively, the appearance of these may not be what designers deem tasteful at first, as they are targeting an algorithm feature space.

Admittedly, none of these feel naturally defensible. Custom tools, complex experiences and access limiting formats each require a significant investment of time in their own right. Where should we invest design time if newness is elusive and tools / formats alone are stop-gaps?

Manufacturing Meaning

Designers need to shift their design value judgement from one that venerates visual craft to one that emphasizes message encoding and transmission. When it can be instantly reproduced, the primary value of a design is its context and timeliness, one of the key points in The Work of Art in the Age of Mechanical Reproduction:

"Even the most perfect reproduction of a work of art is lacking in one element: its presence in time and space, its unique existence at the place where it happens to be. This unique existence of the work of art determined the history to which it was subject throughout the time of its existence."

A design can still be deployed within a uniquely personal context. While designs on a network can be unevenly distributed or be immediately distilled by copies, the initial experience can act as the portal to a message.

New tools, experiences and formats must support the designer’s bid for creating, delivering and exerting influence over a design’s message. Correspondingly, the design process requires a translation of the client’s communication goals through a designer’s intuition and taste. There’s an opportunity here to evade reproduction. Synthesis of complex information and meaning structures may not be easily liftable through algorithms.

Particularly, designs can be positioned to contain coded references, memes or ideas understood only by the audience and designer:

“...ragtag squads of shitposters have the power to define new forms of value based on their own esoteric social frameworks. Memeing produces "assets" that cannot be traditionally valued, but are capable of commanding cultural and economic movements."
– Squad Wealth by Other Inter”

Organized groups of people can work together to generate their own frameworks of meaning by building camaraderie with their audience. A group on Discord can create inside jokes, visual references, memes and new tastes – disseminating them to various corners of a network. While universal visual language and craft is susceptible to being diluted through reproduction, vernacular messages within community native designs are out of the way of aesthetic algorithmic approaches.

Depending on the aesthetic and audience, this type of encoded referential design can provide a more efficient path to deliver ideas then exclusive investment in messaging through visual craft.

The primary value of graphic design in modern times has been its ability to rapidly convey information to a given audience with a low barrier to entry. A flat, impactful – yet transient image. If a discipline that deals primarily with visual communication is to persist, it must focus all the more on the networked cultivation and co-authorship of meaning, enabled by tools that propel craft into wider and richer forms of communication. That is how we give things form.

Huge thank you to those who provided critical review: Weiwei Hsu, Wolf Böse, Adarsh Rao, Tomo Kihara and Toby Shorin.

Thoughts? Let me know @Aetherpoint

Footnotes

1. Examples of this are pretty common on Twitter — it’s not uncommon or non attributed derivative posts to be more widely shared than the original post. Meme aesthetics and remixes are an interesting counter case here, where sometimes virality and thus reproducibility, is the goal behind the design, sacrificing control for reach. In practice this is not always a zero-sum game between control and reach. ↥
2. Translating designs that are inherently cultural to a product market environment has its limits, but I think it’s a helpful lens to highlight the time and cost trade offs most designers must work within our capitalistic society. ↥
3. Some designers keep their processes secret, while others widely share their methods and tools. This often generates other types of value by benefiting the whole community and furthering the practice. ↥
4. Bret Victor’s talk Stop Drawing Dead Fish provides excellent examples for how design tools can support expression and creativity. ↥
5. While user interfaces have additional dimensions that make them require more effort to copy, information architecture and UI are not immune to reproduction. ↥

Installing the USDZ Converter

Andrew Johnson — Thu, 20 Feb 2020 19:00:00 -0500

While looking to install the USDZ converter on OSX (a Python library) I ran into some hurdles. Alternatively you can just use Reality Converter.

Normally on XCode 10, you could enable command line tools through Xcode → Preferences → Locations.

It seems as of XCode 11, you need in install a .pkg file to use the library which you can download from Apple’s site.

From there you’ll need to set your path variables. If you’re on OSX Catalina you can use a .zshrc file. For some reason my USDPython was installed in my applications directory instead of my user directory so I moved it there.

	
export PYTHONPATH="/Users/MYUSERNAME/usdpython/USD/lib/python:$PYTHONPATH"
export PATH="/Users/MYUSERNAME/usdpython/USD:$PATH"
export PATH="/Users/MYUSERNAME/usdpython/usdzconvert:$PATH"

From there I got the error:

	
Traceback (most recent call last):
  File "/Users/myusername/usdpython/usdzconvert/usdzconvert", line 17, in 
    usdUtils.printError("failed to import pxr module. Please add path to USD Python bindings to your PYTHONPATH.")
NameError: name 'usdUtils' is not defined

I found some solutions on this thread which requires you to use the previous version of usdpython, usdpython_0.62.

Hopefully this helps. Happy making!

Thoughts? Let me know @Aetherpoint

Typographic Emotions

Andrew Johnson — Thu, 14 Nov 2019 19:00:00 -0500

Typography has a complex relationship with emotion. Emotion from any typographic experience is a complex system of the person’s prior cultural context, their environment, formal design principles and psychology. Designers navigate this through visual communication.

Generalizations: A disclaimer

There are no shortage of generalizations for how to use fonts. A common one is “san serifs for historical things and san serifs for technical uses”. Other stereotypes exist for typeface categories like the style of serifs and stroke contrast. Some examples of recognizable trends might be modern serifs for upscale fashion applications (circa 2010’s in the US) or wide Eurostyle related type for band albums and touring posters (circa late 2010’s in the US).

Additionally, the traditional classifications we use to refer to fonts themselves often don’t accurately encompass the range of fonts styles that can exist.

Naturally, both usage patterns and classifications are constantly in flux. Many designers choose to intentionally bend, subvert, and challenge typographic conventions.

Prior research

While visual communication is widely beholden to culture, some universal communication patterns exist. Phenomenon like the Bouba/kiki effect show that the majority of people associate particular shapes with sounds.

Application of these patterns has been demonstrated in work like Philippa Mothersill’s Emotive Modeler which provides designers with a tool to create informed 3D forms communicating specific emotions.

Charting a course

With that in mind, I wanted to try and measure how two primary components of a graphic composition – type and image ⁽¹⁾ – might interact with each other and affect a viewer’s emotions.

Because of the inherent non quantitative nature of emotion, it took a significant amount of trial, error and intuition to maximize what could be tested. Multiple approaches and feedback led to a more diverse spread of colors and emotions across the designs. At first, the typographic compositions had different text (reading things like “waiting”, “gift”, “loss”, etc.), but this added an additional variable that could prime people on emotion. I settled on the relatively neutral text string of “ABCD” (ABC may evoke ideas of early learning or the Latin alphabet).

To measure the effect of type and image, I aimed to design a set of three variations: type only, another with just the background image, and the original with both. This felt more manageable than trying to break down and isolate every visual property – things like color, scale, shape, etc. – individually.

The upper limit of the test was the number of total questions respondents could answer at one time. Because of this I settled for 6 different compositions, each with the 3 variations. The compositions were by no means “good” graphic design, but they served as way to start exploring the space.

Data collection

In order to collect data on feelings, I built a custom survey interface based off the Circumplex emotional model. Respondents could drag the marker to the set of emotions that most closely matched what they were feeling at the time.

The survey consisted of 19 questions. The initial question asked what people’s current emotion was. The remaining 18 questions presented people with a randomized set of the 18 test images.

I used Amazon Mechanical Turk to recruit participants, of which 125 provided valid responses. After respondents submitted their answers, the site would post data to a Google Docs spreadsheet. From there, I used Python and JupyterLab to explore and manipulate the data.

Being incentivized to complete tasks quickly, turk respondents were less likely to respond with honest answers. Most images had a high standard deviation of 2 - 3.

After learning this, I reran the experiment with friends (15 total respondents) from Twitter (which could have introduced a different type of bias through a pool of more design oriented people) and got more consistent results (standard deviations generally within 1 - 2).

Most people reported that the images made them feel either positive and activated, positive and deactivated or negative and activated. Few responses landed in the negative and deactivated region.

Part of this could have been due to acquiescent bias, or the tendency to want to answer amicably. Images that evoked sad emotions may have also been less natural to design.

Image sets 1, 2 and 3

Image sets 4, 5 and 6

It was apparent that the combination of typography and image imparted a wide range of effects on elicited emotions. After calculating the mean of each image response, the relationships could be visualized as a series of vectors:

■ Background only design ✚ Text only design ⬤ Text and background image

Contrast of the bright orange text against the dark blue background may have contributed to the more activated response in the combined image set.

Fascinatingly, this combination resulted in a significant positive and activated jump.

The size differential in the type and verticality of the composition could have contributed to its “unpleasant” and “activated” effect. It could have also be due to how much the image vibrates visually.

In a linear, non complex world, we would expect the combined images to be a simple sum (or perhaps averaging) of the text and background images, but we can see this was not the case.

Instead, compositions often exhibit bidirectional interaction between the text and background, where both elements end up influencing each other. Oftentimes combined images are reported as more positive/activated than either the source text / background image alone. Barring the first set, all the combined images resulted in higher reported activation. This was likely because the inclusion of text generally adds visual contrast and complexity. It becomes particularly visible in cases like the combined second and third image sets which end up having a high color contrast.

Generally, the addition of both type and image can have varying levels of impact on reported emotion. The study doesn’t reveal a cipher for evoking emotion, but it does point to how beautifully complex things are.

Further exploration

We could consider how starting emotions affect people’s responses.
It would be interesting to see how much effect words have on reported emotion.
More complete data would include a report for every background matched with every other typography combination.
The images here were abstract and avoided cultural references, which likely elicit the strongest emotional responses, it would be interesting to try relevant, applied graphic design in the same test.
Another approach would be to isolate the variable of color and rerun the same experiment.

Thanks to Judith Amores for the direction and guidance.

I’m always up for collaborating! DM me on Twitter or email me for collaborations or contract work.

Footnotes

1. It’s worth noting these often aren’t so separate from each other in design, but for the sake of testing things I separated them. ↥

Approaching Spatially Adaptive Type

Andrew Johnson — Mon, 23 Sep 2019 20:00:00 -0400

Typography and interaction are tied together. How should dynamically adapting type behave? How can we use new interaction patterns to provide more comprehensible reading conditions in responsible ways?

Typography only needs to exist in 3D space for it to become a perceived affordance. Like other objects around us, text gives us clues about where we are positioned in relation to our environment. We understand proximity and perspective through optics ⁽¹⁾ and our learned understanding of the world. We experience the world in a stream of information, but perceive it at one point in time from a single perspective. Fortunately memory and intuition help us construct a model of how things normally work. The overlap or disconnect between this and an interface is what makes it intuitive or counter intuitive.

Illusions of Grandeur

While fonts themselves don’t have an overtly intrinsic behavior, they come packaged with a general set of characteristics. Readers develop an understanding of what their language’s letterforms communicate. The approach in the construction of the Latin ‘I’ can mean the difference between an ‘I’ and an ‘l’ or ‘1’, depending on the style (note the header of this section which doesn’t distinguish between I and l). In kanji, the top stroke direction and type differentiates the ‘千’ character (thousand) from ‘干’ (dry).

千干

While conventions should be challenged, letterforms generally hold some degree of intentional consistency within a type style so they can easily be read. At the same time, diverging from these conventions is often what brings about engaging types of communication ⁽²⁾.

Typography is language. As a persistent – but not consistent – carrier of information across media, having it show up in spatial computing is not surprising.

Our physical human experiences form the basis of our intuition for how physical things work and behave. Things like gravity and air offer resistance, momentum affects how objects change speed, etc. Mixed Reality exists in a liminal space between our physical / spatial understanding of the world and the navigational / interaction conventions that form as we use digital interfaces.

Here is where we can look at the behavior of typography.

A Different Perspective

Within an XR interface, there are two primary reasons typography might change relative to the view, each with different applications:

1. The person moves around the typography anchored in worldspace

Signage and wayfinding benefit from this, since they facilitate people moving throughout a space.

Applications that encourage or facilitate exploration like Google map’s live view, walk-through / support apps, and tabletop games may use static worldspace anchored type.

2. The typography moves around the person, manipulated or by itself

Objects that are manipulated directly in worldspace can take advantage of diegetic labels.

Products like Apple’s Measure App and IKEA Place use labels on objects that are rotated and moved around in worldspace.

In these cases, text is often visible from different perspectives. For example, a taller font on a pathway can be more legible than a short one.

US road signage guidelines designed for being viewed on the ground from a distance

Animation becomes the vehicle for adapting variable fonts seamlessly to their reading environment. We can map a set of common environmental inputs to a particular set of axes. Spatially relevant approaches include, but are not limited to:

Distance → Optical size axis

Designs like Louvette AR

As a font moves through its designspace letterforms shift and reconfigure themselves within their bounding box.

Unless duplexed (intentionally designed so the size of the letter’s bounding boxes don’t change with the font style), each glyph can influence the space around it as the font’s style and axis change shape. This requires us to account for changes within our layout in new ways.

Your browser doesn't support HTML5 video tag.

An optical type driven UI concept, where the container flexes to match the optical and layout space needs of the font inside.

When we compensate for perspective distortion, we alter how text naturally behaves in favor of readability. These axes can be used to make type more legible by pulling the letterforms closer to how they’re read head-on, or in 2D.

Each approach collapses a different aspect of dimensionality.

Width and height axes can open up the compression of letterforms that normally happens when you move to a more extreme viewing angle. The squashed height of text set on a flat surface in front of you can be offset by increasing the height axis value. Likewise, the compressed width of text set on a vertical surface to the left or right of you can be offset by increasing the width axis value.

Left: Width adjustments account for horizontal perspective skewing.
Right: Height adjustments account for vertical perspective skewing.

Slant axes re-adjust the orientation of the letterforms (the top parts of the glyphs to a greater degree).

Optical size axes can be used to accentuate or diminish certain aspects of a typeface to account for how far away it is.

Left: Slant adjustments account for certain horizontal perspective skewing.
Right: Optical adjustments account for changes in distance.

It’s just as important to note what axes and elements these techniques don’t change:

Each 1:1 mapping of an axis to an input retains a different element of expected behavior for the font.

For example, if we set only the width axis to change, based exclusively on the viewer’s horizontal angle, the adapting axis has one degree of freedom. This means if you were to change your vertical altitude or distance while facing the font, you would still perceive the font normally with an expected sense of depth.

Your browser doesn't support HTML5 video tag.

Note how only lateral motion to the set font changes the width axis.

Similarly, a font using a slant axis exclusively mapped to a horizontal viewing angle would give you a true sense of depth, but mask its rotation and the direction of depth ⁽³⁾. These mappings make sense if UI or objects will travel on constrained paths, but in our real environments things rarely move in straight lines.

Context-based axes

Variable font axes and inputs can be mixed together to make type responsive with additional degrees of freedom. Multiple inputs can affect the same axis in different ways. One example involves combining a slant axis with a height axis to make things easier to read from both a horizontal angle and from overhead.

Another approach uses different axes depending on the orientation of the text. The slant axis adjusts when text is set flat on a surface while the width axis changes when set vertically like a sign:

Your browser doesn't support HTML5 video tag.

Slant and width axes adjusting based off typography’s orientation

We can see how the axis values change based on the typography’s orientation:

Your browser doesn't support HTML5 video tag.

In this example, slant and width axis maximums are based on the angle of the text in relation to the reader. Entirely upright text doesn’t benefit from adjustments to slant. In the same way, text set on a flat plane benefits little from an increase in width ⁽⁴⁾.

From the original angle

These sets of approaches should only be applied to specific cases. As we increase the number of mappings that compensate for distortion, adaptive text becomes more like static typography set to always face the reader. Too many axis mappings give us diminishing returns. At a certain point it becomes more practical to just set a flat label in screen space.

Optically adapting type is beneficial when text needs to be directly on an object to act as a label, or within a UI element that may change perspective from interaction. The advantage is tied to retaining key aspects of perspective with readability.

Applications

As a concrete example we can look at how these techniques might improve interfaces like Apple’s measure app or Tilt Brush. We can keep in mind the two main cases for optically responsive type outlined earlier:

The person moves around the typography anchored in worldspace
Typography moves around the person, manipulated or by itself

Measure App

Spanning both of these categories, Apple’s Measure app is a candidate for slant based optical adjustments. As you set points for the ruler, the text displaying the measurement can move and rotate freely. After they’re set, they sit statically in worldspace. The text here remains in 2D, so there’s no perspective involved.

Your browser doesn't support HTML5 video tag.

Measure app. Note how the text of the measurement values are set at differing angles.

In Measure people may not be looking orthographically, or directly from one side, at an object. Because of this, typography may be set vertically or at an angle. Slant adjustments could be used to keep the text letterforms pointing upright keep things more scannable across a variety of positions and objects.

At at some point it may make sense for the font to just flip to something that reads horizontally with a perspective breakpoint ⁽⁵⁾. This is use-case dependent – these decisions are linked to how things are used.

Tilt Brush

Tilt Brush’s painting tool rotates around the artist’s hand, which provides a case for perspective adaptive typography. Both rotation of the controls for switching modes and the hand motions of the tracked controller contribute to perspective distortion of the present typography.

Your browser doesn't support HTML5 video tag.

Tilt brush UI. Video by Frib. Note a significant amount of the typography in tilt brush is set in a condensed typeface. This lets it fit in small spaces horizontally without sacrificing too much legibility.

People naturally move their arm while creating things. Because the text is linked to the hand’s motion the perspective of the text frequently changes. An adaptive width axis on the font could be used to keep the text readable at sharper angles. Doing this would also provide people with visual feedback as the controller rotates.

The left hand UI could use optical perspective adjustments in a similar way with its large set of text labels.

Your browser doesn't support HTML5 video tag.

Tilt brush UI. Video by Frib. Note how the info text quickly becomes hard to read when the controller rotates.

Widening the “Info” text based on how much the controller is rotated would increase the rotational range at which the controller could be moved while the text remains readable.

If you extrapolate ⁽⁶⁾ the above case in a complex product like Tilt Brush it’s apparent how conflated reading and interaction become. Because of this, it’s important to weigh expected vs. learned behavior while making optical adjustments.

Both of these examples cover a very small subset of spatial scenarios with typography. While it’s easy to fixate on “scientific readability” or logic trees of edge cases, it’s more important to remember that in general, XR typography often finds itself at odd angles and in new places. The width, height, slant and optical adjustment approaches outlined here provide another tool for more robust reading experiences.

2D screen design puts forth its fair share of rigor – design systems, accessibility, attention to typographic detail, and responsive grid systems. Spatial typography, in its n-th wave nascency can aim for a similar bar as it evolves.

I’m always up for collaborating! DM me on Twitter or email me for collabs or contract work.

Footnotes

1. Optics, or how light interacts with the world around us is a crucial element of how we experience space. For the sake of focusing on typography and perspective it’s not covered it here. ↥

2. The Font Review Journal by Bethany Heck has one of the best (if not the best) current collection of examples explaining how idiosyncrasies in a type family imbue character and affect how it can be used. ↥

3. The slant axis is of note because it also changes the general ‘rotation’ of text as well as its height, albeit at an angle within the font’s bounding box. ↥

4. There are exceptions at the extremes of where something is viewed from. Vertically set text, if viewed from a high angle underneath or above it (imagine looking up directly at a billboard in NYC from the street) would benefit from a height axis. In the same way width may come into play if the reader reads the text from an extreme angle to the side. It’s very context dependent. ↥

5. Just like Responsive Web Design breakpoints (viewport max-width, etc.), spatial UI can adapt in predefined ways when it meets certain conditions. Note how the LEGO instructional example uses a rotational breakpoint to flip the text to the opposite side once someone’s view reaches an extreme enough point. ↥

6. There’s a long list of natural considerations tied to the scenario of adaptive type on the rotating controller. For example: human factors related to holding and rotating the controller, how far it should be rotated for other interactions, the relative importance of the “Info” text being persistent within the product, etc. ↥

Breaking Boxes – Typography and Augmented Reality

Andrew Johnson — Thu, 29 Nov 2018 19:00:00 -0500

The medium of Mixed/Augmented Reality gives us a unique opportunity to reexamine typography’s relation to both us and our space. Historically, boxes and grids have dictated how we design type and employ typography, but how does this hold up when type has environmental awareness?

Adapted from a talk given by Andrew Johnson at Dynamic Font Day 2018 in Munich, Germany.

Hello!

A little while ago I decided to take a Chinese painting class with some friends.

After the instructor showed us some of the beautiful things he had painted, he told us that we were going to be painting birds.

First, he gave us small drops of concentrated ink we mixed with water. It took some time to try and get the ratios of ink to water right.

After that, the instructor gives us some rice paper.

We’re finally ready to paint, so we put our brush down, and this happens:

We get something that looks nothing like a bird.

With enough practice, we eventually got closer to something that resembled a bird, although it was far from good.

We’re all familiar with the feeling of trying a new medium. Maybe that’s physical properties of a material like paper or wood:

But it’s also the tools and code we use create things:

The methods and processes around typography have adapted to different technological constraints throughout history.

In his article What Is Code, Writer and Technologist Paul Ford has this quote:

“The turn-of-last-century British artist William Morris once said you can’t have art without resistance in the materials. The computer and its multifarious peripherals are the materials…”

In AR, all these sensors, inputs and cameras are computer peripherals. They’re part of the medium.

There’s been more experiments than I have time to mention, but some recent ones have been Vishnu Ganti’s 3D type, Variable Fonts like Frida Medrano’s Jabin variable font, Andy Clymer’s Arduino sensor experiments, and Erik Van Blokland’s responsive lettering project and work by students like Eun You Noh.

Realtime 3D is another medium that affects our typography and design. What implications are there for typography? Does this change how we need to design?

Similar to the process of learning how to paint the bird, I did a bunch of AR typography experiments to better get a better understanding of things.

A few years ago, I wrote a sister article to Nick Sherman’s article on variable fonts.

The article showed a proof of concept of a variable font on the web.

Sometime after writing it though, I still wanted to find other use cases for variable fonts. Were there other problems they could solve?

While working with Erik Van Blokland, I realized in AR we have easy access to the readers position relative to the text.

At first, I thought we could manipulate 3D points just like standard fonts:

However, it’s more complicated than that. For real time 3D rendering, meshes need to be converted to triangles at some stage.

After realizing this I came back to Erik with some unrealistic constraints. To keep the mesh more manageable for interpolation we needed the letters to be made only of individual four sided polygons.

We were able put everything together and generate typography that changed based on distance.

This is interesting because it means visual hierarchy can shift based on distance.

This led to more collaborations, including an AR type specimen with CJ Dunn for his unreleased typeface Louvette.

We wanted to showcase Louvette’s optical axis (it’s serifs) based on a person’s distance to it.

Within Unity we tried both standard text components and signed distance fields.

In order to simulate variable fonts, we loaded a set of discreet font files and revealed/hid them based on distance.

Unfortunately, at certain optical sizes the hairlines would disappear on SDF versions of Louvette. Because of this, we decided to go back to normal text components.

We still broke things a lot! This is what happens when you change the font but forget to change the font material – you can see the font atlas showing through:

We were still able to make a type specimen with a built in optical axis. The hairlines got thinner as you approached and thicker as you moved backwards in order to stay visible.

What’s interesting here is that we can make subtle optical adjustments based on distance. A font’s representation can be tied the user’s place in space.

Placing letters and numbers in 3D space isn’t something new. Emmanuelle Moureaux’s Forest of Numbers used randomly positioned layers of numbers that expressed the year 2017.

I started collaborating with David Jonathan Ross and experimenting with ideas inspired by Forest of Numbers.

One of the first outputs was a 3D array with numbers color gradients based off of their distance to the user.

Trial and error led us to simplify things.

Your browser doesn't support HTML5 video tag.

David suggested making the numbers bigger instead as you got closer.

This gave us a more engaging effect in AR by giving people a single thing to focus on.

From there, we were able to place the number panel in world space.

It turned out to have a pretty neat cascading effect.

But the key thing here is that content itself can change based on a person’s proximity to an object, not just its style.

In 2011, Ethan Marcotte wrote the book Responsive Web Design. It outlined ways our media should adapt to different conditions.

One of Ethan’s references was responsive architecture. Generalizing, Responsive Architecture falls into two main categories:

A building’s ability to meet the changing needs of its inhabitants
A building’s ability to adapt to outside climate conditions

The Aegis hyposurface built in 2001 by dECOi responded to both user and environment. It was a mechanical facade that would deform in response to nearby people’s movement, sound and light.

Similar to the hyposurface, I was able to distort type by moving mesh vertices.

This caused a pretty interesting ripple effect.

This means we can push and pull typography in the Z axis, so text can be volumetric.

To better understand 3D space in AR, it’s important to look at the hardware that enables it:

Mobile devices provide a window to see things and require you to move your arm. They use a combination of the device camera, infrared sensors and accelerometers for AR input.

Headgear is more experimental and comes with a different set of human factors with the wider field of view. The human eye can look comfortably about 60° in any direction and the neck can naturally swivel about 120°.

Headsets also estimate optical focal points through eye-tracking, simulating how our vision blurs as we focus on objects at different distances.

Because they rely on light projection, objects and text in headset experiences are not completely opaque. White makes images more bright, where 100% black shows as transparent. Some headset displays are darkened by default to make up for this.

Above: Magic leap UI

Knowing this, we can think about how our type reacts to light.

I made light reactive typography that pushed the text color in the opposite direction of the ambient light.

AR typography can appear on any background, so enabling typography to adapt to lighting makes a lot of sense.

This is especially true for environments with constantly shifting lighting conditions like the outdoors.

Bikepaths are a common urban sight, depending on the city.

As common as they are, there’s something fascinating about these!

They’re designed with a user’s distance in mind – they’re skewed in order to be more readable from a certain perspective.

Close up, the same bike path icon’s skew is even more apparent but not as important to convey information from there.

Lane signage allows us to ‘label’ a specific surface instead of relying on a separate sign.

There are many similar examples in art and design.

Perspective chalk drawings by Tracy Lee Stum use perspective to create an illusion of depth.

Anamorphic Typography, a project by Joseph Egan and Hunter Thomson is only readable from a certain angle.

Pentagram’s Fit Nation cleverly encourages you to move throughout the space, supporting the fitness concept.

I decided to test some ideas for making type more readable from different angles.

There were a few different approaches to doing this:

I tested different approaches in Unity (and thanks to Bianca Berning was able to use the Variable Font Venn which features an extreme width axis).

Here, you can see how these hold up differently to distance and viewing angle.

Out of these four cases, interpolating width was the most interesting because it allowed the text to stay on the same plane, similar to road signage.

I built adaptive typography adjusts that adjusts to be more readable at wide angles as you walk around it.

For vertical signs the range of motion might look something like this.

I also wanted to try flat items lying on a surface.

Flat surfaces like a table are different from vertically standing ones because you can walk around them. Doing this adds another axis, so I needed both a width and height axes.

At first I tried to use a combination of width and font size, but this got hard to make equal, proportional changes in each direction.

To remedy that, I designed a font with a proportional width and height. This made it predictable/manageable with how much space it would take up within the interface.

With the font I made a clock that that aimed to be more readable from a number of angles.

Through experimentation, I realized that people would never view something from a complete 90° angle. Setting the max angle to something like 60° felt like a good balance.

The actual surface area of the text changes. This has some of the most interesting implications for AR type.

Optical AR typography can take up a different amount of space based on your viewing angle!

But, we’ve been really focused on making sure type fits in boxes.

From a long time ago since movable type…

…to the text columns and grids we use to set our type…

…to the medium of the web. This is the whole box model in CSS.

We know this so well we have jokes about breaking it.

We make flexible containers and grids…

Study of Flexibility: Die Neue Typographie. Jen Simmons

…and things inside them adapt…

Pia Flower. Eun You Noh

…and type that can stretch to fill different amounts space in AR.

And this is really awesome! It’s exciting because of the flexibility it gives us with our design and layouts.

But…

We also have to realize how it constrains how we think…

…and how it influences the types of reading experiences we design.

Maybe, like this dog, fonts have outgrown their containers.

Historically we’ve forced type in boxes and grids, but all these experiments we’ve walked through are cases where type is not restricted by its container.

This means the entire space around adaptive type should be open to change.

In this LEGO instruction proof of concept, the bottom panel adapts to fit the optical needs of the typography, instead of the other way around.

So what does our medium look like?

We’re still learning, but in AR, the medium is no longer flat or confined to a box.

Instead, typography can interactively maintain the best possible reading relationship with the viewer.

This means we need to think about our environment, how we exist in our environment and typography’s relation to both of these.

The space that typography exists in has to adapt too.

“Instead of being constrained to boxes, AR and sensor-based adaptive typography should be able to influence layout as much as layout influences type.”

And this way, we can create typography that’s more accessible, exciting and thoughtful in AR.

Thank you.

Update: March 12, 2020: There are some considerable parallels with content driven layout in Intrinsic Sizing in CSS.

A writeup of more developments and pragmatic examples can be found in another one of my posts, Approaching Spatially Adaptive Type.

Additional thanks to reviewers who provided critical feedback: Caitlyn Crites, Erik Van Blokland, Jordan Santell and Scott Kellum.

A collection of the videos can be found here.

Unity Threshold Shader

Andrew Johnson — Thu, 17 May 2018 20:00:00 -0400

I coded a tiny Shaderlab threshold shader for Unity. It just takes greyscale values from pixels and makes them black or white based on if they meet the threshold level.

You can download it here.

Augmented Reality Design – Crossing the Screen Space Divide

Andrew Johnson — Tue, 17 Apr 2018 20:00:00 -0400

Currently, we have plenty of great digital flat screen interfaces and fun Augmented Reality experiments, but there are few examples of user interfaces that traverse 2D and 3D spaces when efficient for a user. Typically, flat UI is constrained to flat planes and most AR objects float independently within a scene. Interfaces that can switch between 2D and 3D give us the opportunity to take advantage of both spaces.

Tied to Space

Our design mediums are grounded and tied to the world around us. Video games have been using a variety of representations to communicate within a world and it’s space. These range from diegetic heads up displays and in game UI that both the player and character can see, to non-diegetic UI that only the player can see.

This is a Diegetic heads up display from the GameCube game Metroid Prime released in 2002. Both the character and player experience the same set of information through a first person view. It would be confusing for any of the HUD information to move independently because it’s fixed to the character’s helmet view and by extension the player’s perspective.

While games bend and break the laws of nature for game mechanics and storytelling, general concepts like depth, perspective and volume are still rooted in our real world. In the same way, film carries us through 3D space with consideration to composition and perspective. ‘Graphical space’ has been explored in design with things like El Lissitzky’s Proun Room, designed in the 1920’s. Graphic, User Interface and Interaction Design often employ space and depth (along with more representational types of skeuomorphism) to communicate emotion and behavior. Even if interfaces try to avoid skeuomorphism, UI interactions and transitions are still based on behaviors grounded in physical realism.

Medium-Sized Spaces

Each medium shapes how things behave in it’s ‘world’ which in turn gives people expectations of how it should behave. William Morris, a contributor to the Arts and Crafts movement is attributed to the quote:

“You can’t have art without resistance in the material.”

Sidestepping the question of what art is, it’s clear that our mediums invoke strong forces on how we create things. Marshall McLuhan’s coining of the phrase “The medium is the message” is the classical line of thinking applied here. Mediums shape our content/form/function based both on how things fit into people’s lives ⁽¹⁾ – as well as technical and physical contraints around how the information itself is delivered ⁽²⁾. As each one of these mediums (applied, we can think of them as disciplines) develop on their own they create new things and methods (sometimes radically different, beautiful things) and push against their medium.

Knocking Down Walls

As mediums develop and overlap however, distinctions between disciplines get more fuzzy ⁽³⁾. Augmented / Mixed Reality blur the lines, allowing objects and information to be ‘placed’ in a personal or multi user space.

AR benefits from borrowing techniques (similar to video games combining interaction, audio and visuals to tell stories) from film, UI design and game development. Naturally, design conventions and patterns ⁽⁴⁾ develop as a combination of the previous mediums in a new unique space. These disciplines increasingly overlap with AR and other spacial, context aware approaches. Here, we can continue to look at what current approaches have to offer while learning from some of the amazing work done before us.

AR: 3D Visualization

The idea of using three dimensions to provide spacial context while visualizing information is a topic that’s already been explored. Muriel Cooper ⁽⁵⁾ and her students pioneered a wide range of this work at the Visible Language Workshop in 1975 (and after it merged into the MIT Media Lab in 1985). Information Landscapes was far ahead of its time, employing new modes of interaction in 3 dimensions with data visualization and typography.

Information Landscapes. Muriel Cooper, David Small, Suguru Ishizaki, Earl Rennison, Lisa Strausfeld. (c) MIT Media Lab. July 1994.

This set of work found new ways to use space and time to show relationships between different pieces of information. Lisa Strausfeld’s Financial Viewpoints project used these strategies for visualizing large sets of data in a 3D space.

Lisa Strausfeld’s Financial Viewpoints visualizing 7 mutual funds.

This project allowed people to explore an information space in a way that was both reminiscent with how they explore the real world but also without physical restraints, like the effort involved with walking. Lisa writes:

“3D virtual information spaces, because they are abstract worlds of suspended text and images rather than simulations of the physical world, have a somewhat paradoxical relation to the body. As explorers of these spaces we become (at some level of consciousness) both embodied and disembodied. We rely on bodily intuition to navigate through and understand the structure and contents of the space, but we also have the ability to do what our bodies do not allow us to do in the physical world: we can fly (even through time), change our size (e.g. zoom through multiple scales of information) and see through objects (via transparency).”

Financial Viewpoints opened additional layers of information for viewing and gave people the ability to traverse that space. In an analogous way, AR allows people move in unrestricted ways through space while remaining grounded in the surroundings around them.

AR: Mapped to the Real World

Many AR apps and experiments place and create objects within a space based on their world’s representation. At the same time, being in a real space imposes boundaries. People must still avoid running into physical objects and walls, and obscuring too many of these reference points with digital elements can be disorienting. Users sometimes need to walk over to something they dropped within an AR space to manipulate or remove it (contrast this with a video game world, where movement is only as limited as the developers make it). While this encourages exploration of space and direct manipulation of things, AR objects can still be isolated without any efficient means of controlling them.

AR: Sensors

In addition to being transparent about surroundings, AR (or context based sensors in general ⁽⁶⁾) can make use of additional signals and inputs. This opens up a range of creative applications that can utilize things like computer vision, geolocation, ambient light, user position and tangible interfaces. A number of artists, designers and programmers have explored these ⁽⁷⁾.

A collection of AR Experiments featured by Google.

These experiments combine features that open up new interfaces. Approaches like these align information and controls with how we might expect them to behave in the real world – depth / perspective, collision, and movement in space. Paper Cubes by Anna Fusté and Judith Amores allow the placement of real world cubes to create and redirect virtual objects.

These block markers (using image recognition) allow for more overlap between AR space and real space. People can adjust the blocks intuitively like they would any other physical block and see how it effects the stick figures in digital space.

Closing the Gap

Instead of separating the AR world and flatscreen UI, we can create things that move fluidly between both spaces and take advantage of both places. This may mean doing more then enabling tap/touch/point events using ray casting on 3D objects in space. Generally, objects in world space hope to be controlled / labeled. Local flat UI (which people are already familiar with) often wishes it could better reach out into worldspace to do the controlling. This creates questions around how UI layers should interact with simulated depth (on screens the representation is still ironically flat ⁽⁸⁾). Andrew Hart’s retail and locational concepts demonstrate a combination of knowing when and where to position 2D and 3D UI. 2D isn’t inherently better or worse than 3D, there’s a time and place for both.

Interactions like throwing a Poké Ball in Pokemon Go shift from the mode of the local flat screen to the AR world space fluidly. These sorts of patterns allow us to stay grounded in the utility of existing UI conventions while also taking advantage of what AR has to offer.

To illustrate this in a different way, I designed a ‘push to world’ UI that switches between 2D and 3D modes of showing live seismic earthquake data from the United States Geological Survey. The ‘zooming out’ of the panel aims to communicate that the UI window has shifted over to a new space and behaves differently. Joni Korpi’s modeless zoomable UI concepts and patterns function in a similar way here – space and transitions are used give people more context. Joni writes about this in his Zoomable UI for the Web article:

“Every article feels like it has a spatial location on the site. The zooming animation helps me understand where elements come from and where they’re going. I’m trying to aim for a system that makes me think ‘the article with yellow bars somewhere in the bottom left” instead of “the article named Golden Grid System’.”

Animation (and having 3D space in general) can help people with mental organization. A X/Y/Z space offers the opportunity to use real ‘depth’ in our 3D UI.

Your browser doesn't support HTML5 video tag.

Testing a the 2D > 3D interface

In the same spirit as Muriel Cooper’s Information Landscapes, this depth gives us a convenient option to look at information from another angle. In this case, showing data in 3D can give us a better sense of scale and proportion (seismic waves are measured on a logarithmic scale).

Your browser doesn't support HTML5 video tag.

A proof of concept for a UI pattern that presents real time seismic earthquake data in both 2-dimensional and 3-dimensional modes. Note how the interface transitions from 2D local space to 3D world space in order to show seismic information from a new angle.

Being able to see depth and perspective helps us gain an appreciation for differences in magnitude relative to other earthquake sites. While the same set of information could be visualized in other ways, a 3D representation lets us see details that might otherwise be lost or take up too much space in 2D. Conversely, flat graphics are a more efficient way to communicate and traverse simple sets of information. The game Subnautica allows the player to manipulate and hold onto (or fire not so gently) objects in space, partially bypassing problems of distance.

The Propulsion Cannon in the video game Subnautica

Maybe we can apply similar techniques like these to manipulating UI windows ⁽⁹⁾, allowing them to be quickly tethered and retrieved to local flat UI. There are benefits to both ⁽¹⁰⁾ 3D and flat space, and methods for fluidly transitioning in and outside of those modes.

Staying Rooted

Digital mediums will continue to become more in sync with our world, giving us the opportunity to help define when and where information shows up. As we do this we can explore how interfaces shift and adapt to people and their space’s needs, virtual or otherwise (the medium). There’s a lot to learn from the progression of both 2D and 3D disciplines. As we string together flat rectangles with spacial boxes we should make sure we’re anchored to the right places along the way.

Questions or comments? DM me on Twitter or email me!

Footnotes

Vernacular architecture is based on solving for local needs and draws from nearby materials and traditions (thanks to John Ratajczak for noting this topic). ↥
Paul Ford’s interview on Scratching the Surface goes into detail about how the medium of the web shapes its content. ↥
An article on the effects of Hyperreality – or “inability of consciousness to distinguish reality from a simulation of reality” dives into this. While the article itself delves into the topic on a much wider social and economic scale, we can note the points on how the medium can be bypassed in the creation of a message. Jean Baudrillard’s Simulacra and Simulation is referenced in the article author stating:

“Baudrillard means the ‘zero degree’ of meaning, the triumph of form over substance, a ‘simplified operational mode’, a seductive and pseudo-consensual presentation. Things are presented in such a way that the surface effaces and covers up any possible depth.”

Current examples might be something like high quality renders of locations that appear to be photographs or recorded video, or objects placed in AR spaces that take on similar attributes (material properties like reflectiveness or luminosity) to real world objects. ↥

There are a number of guidelines around designing for AR, including this Prototypr Post by Alexandra Olarnyk and Google’s AR design guidelines. ↥
More on Muriel Cooper (1925–1994) and her work can be found here and in a book celebrating her career by David Reinfurt and Robert Wiesenberger. ↥
Potential sensors and signals go far beyond cameras and computer vision (see Ubiquitous computing / Internet of things). This also opens up a range of serious questions about privacy). Interactive and installation art have long used sensors to gain some element of responsiveness. A non invasive example would be Maurizio Bolognini’s Collective Intelligence Machines series which allowed people to send additional inputs through their phones. Peder Norrby’s more recent experiment Parallax View uses the iPhone X’s face tracking technology simulate depth on the phone. ↥
Some artists/designers/programmers that have explored exciting things in AR include (but are far from limited too): Andrew Hart, Anna Fusté, Judith Amores, Keiichi Matsuda, Vishnu Ganti and Zach Lieberman. The topic as a whole also has plenty of accompanying research since VPL. ↥
Escaping the screen, Joanie Lemercier’s 3D projection experiments demonstrate volumetric imagery and UI using projections through a water mist medium. ↥
It’s important to note our interfaces are tied to hardware. Interface conventions will adapt as vehicles (be it headgear, or a volumetric medium) for AR become established or rejected. ↥
Local and virtual worldspace aren’t always completely distinct. Concepts like Lee Vermeulen’s work use real world screens to show an AR camera’s view lined up in world space. Approaches like these allow for further mixing of real and virtual world space. ↥

No Notifications

Andrew Johnson — Mon, 16 Apr 2018 20:00:00 -0400

Twitter notifications can be fun, distracting or addictive. I built a tiny Chrome extension that hides the Twitter notification badge using a few lines of CSS.

You can download it here.

You can manage your extensions in Chrome by typing chrome://extensions/ into your browser bar.

Recording Video in Unity

Andrew Johnson — Sun, 11 Mar 2018 20:00:00 -0400

Update: August 2020, use the latest unity recorder instead (thank you Ryan).

Recording video in Unity to capture a specific scene or animation isn’t hard with the right plugin.

There are a number of available plugins on the asset store for doing this, but if you just need to record basic mp4’s the free Recorder package works great. On OSX:

1 – Go to the asset store and load Recorder into your scene. You can either allow your browser to open it in Unity or find it under the Asset Store tab in Unity.

2 – From the menu, select Tools > Recorder > Video

3 – That will open a recorder window where you’ll get a number of settings. Here you can set things like the resolution, file format, location and framerate:

It may be helpful to dock it to another one of the side panels so you can see your scene / game window.

4 – Pressing Start Recording causes the plugin to start capturing frames. Things can run slowly here depending on the complexity of your scene, but the tool will export a video file in the output path.

And that’s it! If you have any questions or comments let me know – follow me on Twitter at @Aetherpoint

Is This Better?

Andrew Johnson — Tue, 09 Jan 2018 19:00:00 -0500

Christopher Alexander’s forward for Patterns of Software written by Richard P. Gabriel in 1996 poses a question which is still just as relevant in design today.

Over 22 years later, with standardized components in front-end code, UI and pattern libraries, Information Architecture and UX best practices / toolkits, design systems, and ways to translate / prototype ideas across fidelities we can still ask the same things about our design systems:

“In architecture, the question I have been asking is very simple: Can we do better? Does all this talk help to make better buildings…Do the people who write these programs, using alexandrian patterns, or any other methods, do they do better work? Are the programs better? Do they get better results, more efficiently, more speedily, more profoundly? Do people actually feel more alive when using them? Is what is accomplished by these programs, and by the people who run these programs and by the people who are affected by them, better, more elevated, more insightful, better by ordinary spiritual standards?”

Forward from Patterns of Software, noted in Architectural Intelligence by Molly Wright Steenson

Editing the Unity Tilemap Collider 2D Box

Andrew Johnson — Tue, 06 Jun 2017 20:00:00 -0400

Unity 2017.20.0 Beta shipped with a new tile map editor built in. This is great for quickly creating maps that would otherwise take too long to position manually or are simple enough they don't require a programmatic solution.

Normally tiles are square or rectangular and adding a Tilemap Collider box fits them naturally.

Tile Maps are a new component in Unity and can be added via the dropdown menu. Here i'm using for a 2D platformer scene.

Unfortunately for sprites that are uneven, the box collider can try too hard to fit the boundaries and break platforms / hit detection for characters.

To fix this, just go the sprite editor in the sprite you’re trying to use and select Edit Physics Shape from the to left dropdown. You can delete points by pressing CMD + Delete on OSX.

Make sure to hit reset on your Tile Map Collider component.

And that's it – the box collider should update to reflect the edited physics shape!

Designing Between Points

Andrew Johnson — Sun, 19 Jun 2016 20:00:00 -0400

As we design, we mark well traveled paths so we can quickly and efficiently find our way back. The points we set can create design spaces that are constraining or freeing, depending on where they're placed.

Responsive typography on the web today has a large impact on a site’s or app’s look and feel. At the same time, it functions as the primary vehicle for consuming content. Type imparts layout structure by necessitating readable columns set at certain widths while also reflowing independently of breakpoints. These sort of relationships leave a wide open space for responsive typography to grow through our design tools and our medium.

Design tools present a limited viewport of typographic possibilities

Design tool interfaces often provide a subset of functionality upfront to avoid becoming distracting from the main subject matter – the design itself. This is a natural pattern for more complex interfaces. The best design tools often present designers with a spectrum of options when the options themselves are continuous and relevant. Color pickers illustrate this well:

Color selection in Sketch.

Being able to move fluidly throughout a color space is much more efficient then picking colors one by one. If a user had to manually enter and assess each color the tool would be inefficient at best. Even worse – they could settle for something that’s good enough while overlooking better options. While this seems intuitive for color selection, we can apply a similar pattern to typography.

Unfortunately, interactions in current design tools prevent designers from traversing typographic options and relationships intuitively. Font selection is often isolated and hard to explore. Users can only select one weight at a time through unwieldy dropdown menus.

An implementation of font selection in Sketch.

While designers often see a font as a single design entity, this mental model doesn’t scale with font selection UI. Every single font variation (whether italic, extended, with small caps, optical, or just a separate weight) is either added to the already overloaded dropdown list or relegated to hidden OpenType controls.

There's no clear organization of fonts / font variations (one of the things Indra Kupferschmid conveyed well in her Typographics talk), let alone ways to interpolate between the provided options. Users can only look at a small range of non related fonts at a time. Alphabetical order is intuitive for seeking out specific font families but not for comparing and contrasting styles. If they’re not happy with how the font gets applied to their design, users have to back out completely and try selecting something new.

Being able to make everything in a design tool is different from being able to see everything. This is a balancing act. Variable fonts would allow designers to quickly explore and assess their range of options to make better responsive type decisions. Without line-of-sight to these features, designers can’t take advantage of them or license them for use. The Multiple Master and GX fonts that attempted to do this were before their time. Today, our tools are just as dependent on the medium, and the web landscape itself necessitates responsiveness.

Design tools place static points

Current web/UI design tools are great at making efficient, precise design strokes. This sort of fine grained control is what allows designers to freely define and adjust visuals. We’re accustomed to positioning fixed design elements at fixed sizes on fixed canvases and artboards. As we design, we often pick the best set of sizes based off a mix of data, content strategy, business goals and vested interests. Most tools today provide a set of default sizes to design for.

Sketch’s default device sizes

Illustrator CC’s default device sizes. What’s the distinction between Web Common, Large, and just Web?

While this is convenient, it only gets us so far. If you’re designing for any more than one platform or device, it leaves the in-betweens to guesswork and afterthought. Browsers have completely variable viewports and constraint that aren't reflected in static design tools. Rendering, relative / percentage units and font loading also behave differently in a design tool than the final environment.

Because of how ingrained typography is with its medium, it’s important to consider how our tools can help us design responsively and natively from the start. A number of tools explore fluid / constraint based layouts:

Fluid for Sketch – Constraints and artboard recalculation for Sketch
Framer – A prototyping tool focusing on high fidelity interactions.
Macaw – Design tool featuring breakpoints
Straight HTML/CSS/JS – Flexbox, Calc() and viewport units especially.

Making our points dynamic

Fonts are software. Wrapped up in a font are the type designer’s/developer’s design considerations (aesthetic choices, OpenType features, metrics, hinting, axes, etc). Despite this, glyphs are relatively static and can’t talk to their environment.

Beyond the context of our tools, variable fonts aim to remedy this by allowing us to deliver text customized to our reader’s context. This can be based on any number of factors like container width and height to environmental inputs like ambient light and viewing distance/zoom settings. While there are a number of ways to access and manipulate font data in Javascript, a designated font format is the most robust way to accomplish this. Proposals have been made to add GX font variations to OpenType through existing font tables.

Enabling our tools and our medium

No web technology is immune to death by 1000 compromises.

When separated from designers’ craft and rigor (both type designers’ and web designers’), variable fonts are a shortcut to create mediocre type and interfaces. In a similar vein, overly parameterized fonts lack a rich designspace and are devoid of a type designer’s expertise. Another sad alternate font-universe would have variable fonts seeing action only as another compression algorithm. Conversely, variable fonts provide diminishing returns if the designer isn’t present to incorporate them seamlessly into her/his design.

At their best however, variable fonts can give designers a new vantage point to see the inbetweens, spaces and relationships that aren’t normally visible. This in turn enables them to provide people with the best possible responsive reading experience that scales across contexts. It also opens up new avenues of expression through interaction and animation.

We need tools that increase designers’ awareness of variable fonts and allow them to easily take advantage of the structured flexibility they provide. There are a few interfaces exploring this concept, including the preview pages for David Jonathan Ross’ Input and Adobe’s Acumin by Nick Sherman and Bram Stein.

This is also something i’m experimenting with in Typeshift, a responsive typography design tool i’m building. The user interface below shows how variable fonts can allow for a more natural method of font selection. Here, we’re setting Gimlet Text (also designed by DJR) and fully taking advantage of its wide range of widths and weights.

Typeshift simulating variable font selection of the typeface Gimlet designed by DJR. Progressive disclosure is used to show a 'font width' axis as it becomes available.

Web native tools like these take steps toward providing ways to easily traverse fonts and their responsive relationships. A number of other experiments – some of which that were inspired by Typographic’s Typelab – have also explored how variable fonts might perform:

Mathshapes – Javascript library to flexibly fit and interpolate SVGs to a container’s width and height.
Live font interpolation with svg – Interactive SVG headline interpolation
Live optical logotype sizing – SVG logo interpolation of optical sizes
Four master design space – Basic four master SVG glyph interpolation.

We can support and design better tools while we redefine our medium. As we continue to move screen typography forward, lets make sure variable fonts open new design spaces for us to explore instead of constraining us to a select few ways of thinking. We don’t have all the answers, but lets start by putting down some points.

Helpful Articles on React.js

Andrew Johnson — Mon, 15 Feb 2016 19:00:00 -0500

A small list of helpful articles on React.js. Changes to React.js itself, tooling, and new javascript ES6 features have led to scattered documentation.

These will in turn be out of date themselves, but here’s what i’ve found helpful – specifically around components and state – so posting this partly for myself!

###On react components and communicating between them:

###General best practices

Let me know what you think @Aetherpoint

On Prototyping Tools

Andrew Johnson — Mon, 28 Sep 2015 20:00:00 -0400

A quick look at what prototyping tools are for.

Tools

At the time of writing there are over 10 prototyping tools – some recent ones include Principle App, Flinto, UX Pin, Invision, Proto.io, Paper Prototypes, Axure, Marvel, Pixate, Just In Mind, Framer.js, Keynote and Origami. As always with tools, I think it's important to take a step back every once and a while and understand why we may be using them.

The Spectrum: What are prototypes for?

Design tends to not have absolutes. Picking the right tool for the job doesn't deviate far from this. It's a spectrum – designers should weigh a good prototyping tool's benefits and detriments based off context, like your team and various other constraints.

Line of sight to solutions

Prototypes (and the process of building them) helps us identify and solve problems – they give us visibility around how things might look and feel. They can illuminate gaps in complex flows, development/system requirements, live data and interactivity.

Communication of intention

Prototypes help us communicate our vision to teammates, stakeholders, clients, and executives and get them on board. High fidelity prototypes can let people glimpse at what the product gestalt might feel like, while low fidelity prototypes can help communicate complex information architecture and relationships.

Assessment of assumptions

Prototypes allow us to test/validate our hypothesises with real users (actual humans, people!) and refocus our energy on what's important. They let us evaluate our design against and keep us true to the problems we're trying to solve.

We're at a point in time where we're fortunate enough to be able to pick and choose our tools. Lets just remember how to pick them.

Typographics NYC, Typelab & Interpolation

Andrew Johnson — Sun, 14 Jun 2015 20:00:00 -0400

I had the opportunity to attend the Typographics Conference and Typelab in NYC.

Typographics NYC and Typelab

There were some really awesome speakers all around. People were really approachable (even the giants) and came from a range of backgrounds, including type designers, graphic/web designers, type programmers and everything in between. I spent a lot of time around the Typelab where smaller talks, tutorials and demonstrations were held and learned a lot in a short period of time.

Design Space

For the lab I built an example of four-master interpolation using glyphs from Jean-Baptiste Levée’s Minotaur (With two additional custom glyphs drawn). Recommended by CJ Dunn, it was a natural fit since my code couldn't parse SVG control points.

Math does not come naturally to me, so I had no idea where to start in order to get interpolation working between four masters (was fortunate enough to have the help from a lot of people). Breaking things down though, it's actually fairly straightforward.

Process

For now SVG is an easy way to illustrate these concepts, but ideally we'll eventually have a more native and accessible solution. Nick Sherman sums things up really well on this topic.

Getting Points

First, we need a series of points. In SVG we have two main ways to express a form: basic shapes, and paths which are more complex. The example only handles polygons under basic shapes, and there are libraries like Snap.svg that make accessing and manipulating points on the web easier.

Points in a polygon will look something like this:

points="607,730 830,730 830,693 801,693 765,685 747,659 747,70 765,45 801,37 830,37 830,0 607,0 607,37 636,37 672,45 690,70 690,330 141,330 141,70 159,45 194,37 224,37 224,0 0,0 0,37 29,37 65,45 83,70 83,659 65,685 29,693 0,693 0,730 224,730 224,693 194,693 159,685 141,659 141,369 690,369 690,659 672,685 636,693 607,693 "

This is just a list of coordinate points. In (607,730), the first number (607) stands for the X value and the second number – (730) holds the Y value, both for the first point. (830,730) is the location of the second point, etc.

SVG points can be pulled from a UFO file by dropping them into illustrator from something like Glyphs or Robofont and saving them as SVGs.

This can be done for each master, which should be solving design problems in and of themselves:

points="283,730 482,730… /* SVG Master 1 */
points="607,730 830,730… /* SVG Master 2 */
points="323,730 617,730… /* SVG Master 3 */
points="609,730 944,730… /* SVG Master 4 */

Trying to Serve Two Masters

We need to first be able to compare points between two glyphs in order to interpolate between four glyphs. In order to interpolate between two masters’ points, we need to do some math (Oh no!).

Take the high value and subtract the low value from it. Then multiply that by our percentage and add the low value to get our new interpolated number. The percentage here stands for how much of one thing we want – ‘0’ gets us 100% of the lower value and 0% of the high value. ‘75’ gets us 75% of the way from our lower value and 25% from our higher value and so on. You can't have 100% or 0% of both.

The equation looks something like this, with p being the percentage and (x₃, y₃) being the resulting interpolated coordinates:

((x₁, y₁) - (x₂, y₂)) × p + (x₂, y₂) = (x₃, y₃)

If we do that calculation for every point (assuming our glyphs are point compatible, or have the same number of points), we can construct a new ‘glyph’ from the resulting points which would give us something like this if we inputed 75:

In Javascript that function might look like this:


// Return an interpolated array from two sets of coordinate points
// Parameters: pointArray (coordinate points like [88,42]), 
// amount (how much we want of one verses the other 0 - 100)
function point(pointArray, amount) {
    var interpolation = ((Math.max(pointArray[0], pointArray[1]) - Math.min(pointArray[0], pointArray[1])) * amount + Math.min(pointArray[0], pointArrays[1]);
    return interpolation;
}

Four Masters

Now lets arrange our four masters in a 2x2 grid so that like masters are adjacent to each other:

Because we're working with a square (the example is a responsive rectangle, but it functions as a square) instead of a line now, we can interpolate in two directions – X and Y (in this example the X and Y position of the cursor). First, we interpolate in our Y direction between two sets of masters. This gets us a new pair of masters, each interpolated from two original masters.

From there we interpolate in our X direction between the two resulting masters to get our final interpolation:

Update this whenever the mouse position is changed, and you can make a space to interpolate between four masters.

And that's it! Keep in mind live font interpolation is just one method for enabling type to respond to its environment, and it has limitations. Not everything should be interpolated for the sake of being interpolated. It does however, allow us to set ranges that give us a lot of flexibility. Credit to Erik Van Blokland and Nick Sherman for all their work in this area. You can try the interpolator here and fork the code on github.

Live Font Interpolation on the Web

Andrew Johnson — Sun, 03 May 2015 20:00:00 -0400

An A List Apart article on the opportunities of responsive typography.

The article covers some of the challenges inherent in responsive design (essentially designing for a lot of contexts in general) and how type should scale and be treated as a first class design element. It explains the benefits of being able to interpolate type on the fly in order to adapt to users and shows some examples in how people can get started.

Read it here! Nick Sherman's sister post can also be read on ALA.

The articles proof of concept lives here.

Aetherpoint Redesign

Andrew Johnson — Tue, 13 Jan 2015 19:00:00 -0500

Aetherpoint.com redesign.

This site is currently undergoing a redesign with new content – please check back soon!

The first version of the site can be found here.

Update 2015-05-04: Done!

Web Scraping with Casper.js

Andrew Johnson — Sun, 18 May 2014 20:00:00 -0400

A code snippet for scraping with Casper.js.

Web scraping with casper.js (built on Phantom.js, a headless webkit browser) is pretty simple. Casper provides a nice API allowing us to easily time and target tests. We just collect information from the DOM and save it to analyze later.

After installing Phantom.js, you can install Casper.js globally on your computer through npm. Just type npm install -g casperjs in your terminal.

Once Casper.js is installed, you can run a file through the command line with casperjs filename.js.

Let's say we want to scrape Twitter and list out who someone follows. Maybe we want to this to collect data in order to graph the levels of influence a certain person has. Below is some rough code illustrating for how we might approach this:


// Scrapes twitter users' follows. With great power comes great responsibility Runs on Casper.js (Phantom JS).

// Define a twitter ID to look up.
var twitterId = 'ChaptrApp';

// Define your own e-mail and password to get access to Twitter
var email = 'YourEmail';
var auth = 'YourPassword'

// Define a selector to look for before doing an action.
var findSelector = '.GridTimeline-items';

var urls = [];

var links = [];
var casper = require('casper').create();

function getLinks() {
    var links = document.querySelectorAll('div.ProfileCard a.ProfileCard-screennameLink');

    return Array.prototype.map.call(links, function(e) {

        // Return all of these links
        return e.getAttribute('href');
    });
}

// Start at twitter.com with the defined twitter id
casper.start('http://twitter.com/' + twitterId + '/following', function() {

      // Log the site title
      this.echo(this.getTitle());

      // Log the starting URL
      console.log('Starting location is ' + this.getCurrentUrl());
});

casper.then(function() {

      // Sign In To Twitter. Be careful not to abuse this or we run into the captcha.
      // TODO figure out how to run this overtime without getting caught.
      this.fillSelectors('form.signin', {
          'input[name="session[username_or_email]"]':    email,
          'input[name="session[password]"]':             auth
      }, true);
});

casper.then(function() {

    // Log the new URL
    console.log('Authentication ok, new location is ' + this.getCurrentUrl());

    // Log Error if we hit the captcha
    if (/captcha/.test(this.getCurrentUrl())) {
        console.log('Please login and confirm your captcha.');
    }
});

casper.waitForSelector('.GridTimeline-items', function() {

      // Log that we found the right selector to capture. This is looking for the follower grid on the mid 2014 Twitter Redesign.
      console.log('.GridTimeline-items' + ' is loaded.');
      
      // Screenshot
      this.captureSelector('timeline.png', 'div.GridTimeline-items');

      // Grab First Links
      this.emit('results.log');
});

function tryAndScroll(casper) {
    casper.waitFor(function() {
        this.page.scrollPosition = { top: this.page.scrollPosition["top"] + 3333, left: 0 };
        return true;
    }, function() {
        var info = this.getElementInfo('div.GridTimeline-footerIcon span.Icon--logo');

        // Recursively scroll until the bottom nav is visible.
        if (info["visible"] !== true) {
            this.waitWhileVisible('div.GridTimeline-footerIcon span.Icon--logo', function () {
                this.emit('results.loaded');
                this.emit('results.log');

            // We're still missing the last few rows of people.
            }, function () {
                this.echo('Next results not loaded');
            }, 5000);
        }
    }, function() {
        this.echo("Scrolling failed. Sorry.").exit();
    }, 500);
}

casper.on('results.loaded', function () {

    this.echo('Scrollin');

    // Call Scroll Function 
    tryAndScroll(this);
});

casper.on('results.log', function () {
    // Grab Additional Links
    links = this.evaluate(getLinks);
});

casper.then(function() {
    tryAndScroll(this);
});

// Snippet from: https://www.andykelk.net/tech/web-scraping-with-casperjs
casper.run(function() {

    // Run through our array to format the JSON for D3
    for (i in links) {
      links[i] = "{'name':" + "'" + links[i] + "'" + ", 'group': 2}";
    }

    nodeLinks = [];

    var min;

    for (i in links) {
      // A crude buffer
      min = Math.min((parseInt(i) * 10), 450);

      nodeLinks.push("{'source':" + (parseInt(i) + 1) + "," + "'target':0,'value':" + min + "}");
    }

    // Format it
    var re = /\//g;
    var name = links.join(' ');
 
    // Change to a string
    var jsonString = JSON.stringify(links);

    // Do some gross replaces just for D3
    var finalJson = ("\"nodes\" :[ " + "{'name': '" + twitterId + "', " + "'group':1}\", " + jsonString.replace(re," ") + " ]");

    finalJson = finalJson.replace(/"\{/g,"{");
    finalJson = finalJson.replace(/\}"/g,"}");

    finalJson = finalJson.replace(/\[\{/g,"{");
    finalJson = finalJson.replace(/\}\]/g,"}");

    finalJson = "{ " + finalJson + ", " + "\n \n'links':[" + nodeLinks.toString() + "]" + " }"; 

    finalJson = finalJson.replace(/'/g,"\"");

    console.log(finalJson);

    // Export as JSON
    require('fs').write("finalJson.json", finalJson, 'w');

    // Close Casper
    this.exit();
});

From here you could use the JSON to visualize something like small designer communities on Twitter – based on the assumption that people follow who they look up to and occasionally prune their follower list. You could recursively go through each of the followers from the original user of interest and then map out overlap based off who they follow.

Here, a super simple example just shows who the target user has followed. The more recent ones are are closer to the center of the circle (They're not proportional – the code above doesn't have access to any sort of time through an API).

Natural OSX Glitches

Andrew Johnson — Sun, 18 May 2014 20:00:00 -0400

A collection of OSX glitches

Even with their randomness, glitch aesthetics can be predictable. Different plugins and methods lead to certain styles. OSX has its own flavor of glitches.

Below is a shot of some collected glitches:

A List of Music Inspirations

Andrew Johnson — Tue, 25 Mar 2014 20:00:00 -0400

A list of music artists that keep me inspired.

I think when balancing visual design, code and research it's easy to loose out on staying inspired. It's just as easy to get caught up in trends, buzzwords, and even your own industry. For me, music is a way to escape from the design world and stay inspired. Below is just a list of recent inspirations in no particular order. Maybe you'll find something new.

Recent Music Artists

Porter Robinson
Olivier Deriviere
Deafheaven
Spor / Feed Me / Seventh Stitch
The Aristocrats
Sub Focus
Feint
El-P & Killer Mike
Crystal Castles
BLVCK CEILING
Ronald Jenkees
Jon Hopkins
Kavinsky
Keeno
Mat Zo
M83
Cults
Ozric Tentacles
Claro Intelecto
Burial
Reso
Pendulum
Seven Lions
Aphex Twin
The Upbeats
Eskmo
Noisia
Amon Tobin
Sannhet
Stendeck
Koan Sound and Asa
Caravan Palace
Skillet
Tycho
Xilent
Fall Out Boy
Glitch Mob
Delerium
Susanne Sundafor
XXYYXX
Massive Attack
Mount Kimbie
D.L.I.d
Stratovarius
Daft Punk
Hans Zimmer
Falling Up
Hammock
Skotein
Trent Reznor & Atticus Ross
Lemaitre
Smooth
The Dillinger Escape Plan
Celldweller
Four Tet
Flying Lotus
Stan SB
Ludovico Einaudi
Hidden Orchestra
VNV Nation

What keeps you inspired? Let me know @Aetherpoint

GLSL-Resources

Andrew Johnson — Thu, 06 Mar 2014 19:00:00 -0500

A collection of GLSL resources that have been helpful to me.

Thoughts? Let me know @Aetherpoint

7th Gear Animation

Andrew Johnson — Thu, 06 Mar 2014 19:00:00 -0500

A quick little animation piece of a car.

I whipped up a quick little motion piece of an 80's synth pop car inspired by music artists like Kavinsky and Justice using a (undermastered) track I had.

I couldn't resist using the classic ITC Avant Garde typeface and its ligatures.

View the whole animation on Vimeo here!

Thoughts? Let me know @Aetherpoint

Input Output

Andrew Johnson — Sun, 23 Feb 2014 19:00:00 -0500

A reminder to step away from the computer sometimes.

“Computers are to design as microwaves are to cooking.”

― Milton Glaser

I think this quote can be easily misinterpreted. It's not saying that code makes designs bad – in fact in breathes life into and empowers them. I do think that whatever gets computerized inevitably trades some fidelity for audience reach.

Uncompressed, binaural audio will never be able to match a live performance.. High pixel density screens will never reach the atmospheric perspective of looking out of your window. No amount of mathematically calculated animations, physics and 'random' numbers will quite match the leaves dropping from the tree outside and swirling in the wind.

If you think in bits (which reduced is just electricity in our analog world) all the time, what does that do to your creativity?

“Electronic equipment replaces neither Eyes, Hands, nor Heart.”

― Wolfgang Weingart

Thoughts? Let me know @Aetherpoint

An Independent Study on User Modeling

Andrew Johnson — Sun, 26 Jan 2014 19:00:00 -0500

Stoked to learn from my independent study on user modeling.

I've just started my independent study on User Modeling. In this case, User Modeling is comprised of different methods of data collection, synthesis and modeling through machine learning techniques. These models can drive the behavior of an interface and help determine what data it displays and when. After reading an overview of User Modeling in HCI I worked with my Professor to identify areas of interest and set goals.

I will be exploring the intersection of User Modeling, UX Design and flexible visual systems for my thesis.

Thoughts? Let me know @Aetherpoint

Speaking with a girl who was blind

Andrew Johnson — Wed, 15 Jan 2014 19:00:00 -0500

As a visual designer, speaking to a girl with blindness and her guardian was pretty sobering.

On my way commuting back from work, I was working on designing a side project – agonizing over the details of a subtle visual system that would remain compositionally balanced as the user inputted information. It was a delicate balance of usability with visual style and was only for a very specific component.

Later in my commute, met a girl who was blind. I took a break from my project (it felt odd at that point) and asked about how she navigated the web. I listened as she talked a bit about JAWS and how annoying unlabeled images were. She ended up referring me to her guardian saying that he would know more. In passing, she said something that struck me:

"I don't browse the web very often..."

I discussed web accessibility with her guardian, listened and took notes. He gave the frustrating example of trying to find the form to input flight information when it wasn't labeled. He mentioned common hurdles and the fact that web accessibility has improved over the past years:

"It's gotten a lot better..."

Things they mentioned weren't complicated or new for web developers, but often get pushed aside:

Photos should be labeled
The ability to skip navigation to go straight to the content is helpful
Navigation based on headings is much appreciated
Pages that "refresh too quickly" mess up screen readers (Guessing this may be additional, server pushed content after the initial view loads)

After chatting I thanked them answering my questions. It was definitely an interesting experience for someone who spends days working on user interfaces and visual communication.

Thoughts? Let me know @Aetherpoint

On Learning

Andrew Johnson — Fri, 10 Jan 2014 19:00:00 -0500

Learning is hard work and passion required to overcome biases towards unfamiliar things.

It's really easy to dismiss something as being so scary or complex that there's no use to try and understand it.

When I was in high school I had a really bad experience with math for a variety of reasons. I barely passed my high school math classes and stopped at Algebra II, only slightly enjoying Geometry. As a practical learner, there was no reason to go out and learn it.

As a designer / developer now, i've seen small peaks of it in a new light, as part of typography & grids, in code and in Machine Learning, and in electronics. All these examples have been a great reminder to keep an open mind and not get discouraged when learning design related fields or subsets. Stepping back from preconceptions and stereotypes (whether towards visual style, programming language, music genre or research methodology) and taking the time and effort to learn/master something can be really fun.

When you think about it, we really don't know much at all anyway – even more so when we hold ourselves back.

Thoughts? Reply at @aetherpoint.

Do What You Love

Andrew Johnson — Fri, 27 Dec 2013 19:00:00 -0500

Just a note to self to do what's important.

I found Trent Walton's article on work and life really relatable (work + life isn't anything new). The very medium of the web and social media lets us craft "ideal" versions of ourselves for all to see. We get pretty darn good at it too. It's too easy to spit out the latest career jargon and trendy job requirements. Your skill level may allow you execute something, but a lot of the time it's passion that drives it. Below is my list of personal requirements to remember:

Do work you love (for whatever reason that may be).
Do great work but not at the expense of burning out.
Work for/with people who you're invested in and are invested in you.
Don't derrive 100% of your personal identity from work.
Don't work solely for recognition, status, or money.
Don't fall into stereotypes other people impose on you.

Will I get all of them? Probably not, putting this high expectation out there is actually pretty scary. Have to start somewhere though – at the very least it will serve as a reminder.

Thoughts? Let me know @Aetherpoint

Web Responsibility and User Experience Design

Andrew Johnson — Fri, 06 Dec 2013 19:00:00 -0500

We exert a huge amount of time and resources to tailor experiences towards users. We try to understand and empathize with them, but fail to simply make things work for entire groups of people.

Card sorting, usability testing, and ethnographic research are all ways to collect information in order to tailor a design to the user. They can be used to understand people and the way they perceive and interact with a product, physical or digital. A huge amount of importance has been placed on humans. This is awesome (in both a philanthropic and business sense), but on the web, we aren't always responsible.

Accessibility, or functionality for entire groups of people, is at the base of the pyramid of needs. Delight created through visuals or interactions, usable navigation, and good content all fail if the interface breaks, is unnavigable, or doesn't load. When something simply does not work due to the lack of Progressive Enhancement, we undermine the entire pyramid.

If something doesn't work right, we get irked, complain about what a bad service it is and then move on, potentially not returning to it later. If someone in a less fortunate part of the globe is trying to visit an inaccessible site, he or she could incur costs for data or be unable to reach important information. In their context, there's no easy fix like changing a line of CSS or switching to the newest browser.

This post doesn't address the power behind the open web or scold deadline pressured developers with clients that don't understand. It doesn't argue for the value of accessibility from a business standpoint or talk about disabilities. It doesn't provide massive amounts of data illustrating the expansion of the device-iverse or mention pervasive computing on the horizon.

Lets just think twice before skipping over responsibility and Progressive Enhancement in relation to UX/Human Centered Design.

Posted on The Pastry Box Project

Thoughts? @Aetherpoint

A Note On Content Planning

Andrew Johnson — Fri, 22 Nov 2013 19:00:00 -0500

Keeping your personal site current and tuned up takes a lot of time. Even for small blogs, anticipating content growth early can be worth it.

Things change – design aesthetics become outdated, information architecture can buckle under large amounts of changing content, and code becomes inferior as new things are supported. For something like a personal site and blog, it can be hard to keep up on these different fronts. Content drives both the design and development of a site, and keeping it under control requires some thought.

At the outset I knew I wanted to publish posts efficently and
independently of other services. Content also needed to be as pure and portable as possible for future use, so I chose Ruhoh, a static blogging platform that uses Markdown. That way I could compile and push the site locally, while backing up / editing posts via Dropbox and Writer. Before designing the site, I did a content audit and planned ahead for projected change in content by designing in a modular way and using a tagging system.

Recently, I extended tagging to casestudies, in addition to blog posts. Both casestudies and blog posts now have their own set of tags for organization and findability. Planning ahead really has paid dividends – the site has a flexible information architecture for a single content creator with evolving interests. Maybe they'll be an opportunity to do some visualizations based off of categories / scraped content down the road.

Yes, all the setup takes time, but content is valuable and should be
treated that way.

Thoughts or strategies? Let me know @Aetherpoint

Designer or Producer

Andrew Johnson — Mon, 28 Oct 2013 20:00:00 -0400

One of the powers visual designers have is the ability to comment on and draw from culture. If we're just using design principles to enforce basic hierarchy or style UI elements are we designers or producers?

Visual designers can use style to intelligently match, play off and
comment on culture. The former takes place as part of user research,
while the latter two often require skills of visual communication and semiotics in addition to personal experiences to be carried out effectively.

How do designers communicate through UI design? UI design is an
intersection of an ever widening pool disciplines as designers find
new forms of interaction across more connected mediums. Style or
personality,
part of communication are intertwined with functionality. The use of expression in visual design is when communication happens in both directions.

Personality in design isn't just aesthetic, it's behavioral. It does more than match users preferences, it comments on them and converses with the user. It utilizes emotions like humor to engage people. It has its own view. Conversations, let alone friends, are boring if the other person always agrees with you 110%.

At what point does UI design become dilluted by submitting to the user instead of promoting discourse?

This is a reframing of Ellen Lupton's article.

Thoughts? Let me know @Aetherpoint

On Shifting Interfaces

Andrew Johnson — Wed, 21 Aug 2013 20:00:00 -0400

People and their contexts evolve. Ideally, interfaces should do the same across longer periods of time to cater to the user's mental processes.

This article on layervault touches on an interesting point: "Usability is a moving target. A user’s understanding of your application improves over time and your application’s interface should adapt to your user." Expanded, this would mean that a User Interface should be able to inherently take advantage of data gathered over time and roll in appropriate micro enhancements if possible.

As a framework, this could provide UI components with set paths of evolution configured to accept and respond to quantifiable data at set speeds. These components could behave independently or be codependent in regards to how they handle data. Libraries could be based off human factor requirements in addition to code dependencies. Things like color, size, positioning, proportions, typography, visual complexity, information architecture, and motion are all properties that can be tailored over time.

Value also extends past reduction. Showing users full text over "Universal Icons" could be used on a Semiotic level to reach out to and grandfather international users into a better understanding of a UI. While this doesn't seem viable for UI with persistant / radical changes like Facebook's, it would add an extra degree of flexibility for interfaces in less flux.

The notion of a shifting interface does not base critical features off of assumptions collected by sniffing device capabilities (WURFLES are gross). Instead, it captures behavior and strategically progressively enhances fitted UI to key users. It's not intended to be a one size fits all, or some transformer, it's just predicting ahead and saving trips to the tailor. If someone's weight will fluctuate, give them shorts with an elastic waistband.

###Doing It Responsibly

Layervault uses CSS classes to alter UI.

#TimelineSignpostButton {
  .TimelineButton {
    text-indent: 60px; // Allows label text to be hidden when button shrinks
  }
  .SignpostLevel1 &.TimelineButton {
    width: 116px; // Wide button with label
  }
  .SignpostLevel1 &.TimelineButton,
  .SignpostLevel2 &.TimelineButton {
    background: $official_white image-url('signpost-dark.svg');
    background-size: 24px 24px;
  }
  .SignpostLevel2 &.TimelineButton,
  .SignpostLevel3 &.TimelineButton {
    width: 60px; // Smaller button hides the label
  }
  .SignpostLevel3 &.TimelineButton {
    background: image-url('signpost-light.svg') no-repeat 8px 6px;
    background-size: 24px 24px;
  }
}

The downside to this of course, is the extra unused CSS that all users download.

CSS styling interface shifts could be modularized and atomized and then compiled statically before being shipped to users based off of authentication or some other distinguishing factor.

##Connections

The notion of designing control systems is not new. A similar
thing can be found in The Architectural Relevance of
Cybernetics.

A detailed paper on interfaces collecting patterns on a strictly flexible UX related field can be found here.

Thoughts? Let me know @Aetherpoint

Why This Site Is Not Flat

Andrew Johnson — Tue, 11 Jun 2013 20:00:00 -0400

Flat UI is a natural progression from skeumorphism for the digital medium, but can only be boiled down so far.

With Apple's move away from skeumorphism to mostly flat UI and Android's existing flat UI, it's apparent that this will be the norm for some time. This UI aesthetic has a large amount of benefits.

I opted for textures in this site to contrast flat design.

While flat design aids usability and clarity while carrying its own associations with Modernistic and Swiss Design, it eventually reaches a point in which it is restrained in terms of expression. While skeumorphism attempts to be something it's not, there's still a great deal of genuine visual expression that can be gained in textures and other graphical affects. Visual effects do not need to be skeumorphic, they can utilize other design aesthetics that communicate and create addit,....ional visual hierarchy for the user.

"What’s the use of being legible, when nothing inspires you to take notice of it?" - Wolfgang Weingart

parallels with:

"What’s the use of being usable, when nothing inspires you to use it?"

While making sure our interfaces are usable is of the utmost importance, they do not exist in a vacuum. Flat design is still subject to overuse and being lost in the crowd of similar aesthetics. From a strictly information design standpoint, constricting palettes to solid opaque colors provides less options for visualizing complex data.

There's nothing wrong with the flat design aesthetic, it's just important to remember it's one of many strategies and can be mixed and matched based on design intentions.

Skeuomorphism’s Death Has Been Greatly Exaggerated also brings up an interesting point on the evolving definition of skeumorphism.

Let me know what you think @Aetherpoint

Design Aesthetics vs. Development

Andrew Johnson — Thu, 25 Apr 2013 20:00:00 -0400

Yes, design is much more than how something looks, it's how it works. Regardless, the honing of design aesthetics and development skills simultaneously still fight for attention.

Design and development play off of each other to creating working beauty. Design aesthetics, however are different.

"Design is not synonymous with aesthetics, although aesthetics are a component of design." - Aral Balkan

While design aesthetics and development don't necessarily knock heads, they still fight for room in a designer's / developer's mental toolbox.

Graphic Design as visual communication remains reliant on signs to generate emotions from viewers and users. Some of these signs are only accessible to the designers who can do more than utilize visual hierarchy. Great graphic designers tap into specific aesthetics to reach different target audiences. Much of design is building a set of aesthetics you can draw from by seeing influential and quality work. These aesthetics manifest themselves in a synergistic way into a project.

Programming is another thing, involving the abstraction of code into something modular, efficient and elegant. It's how things actually work underneath the visual level. Programming requires an understanding of the context the code will be executed in. It also calls for the ability to use of different syntaxes (not quite unlike designers use visual verbal syntax) and understand how the logic underneath works (similar to visual communication in graphic design).

##The Conflict?

At their core however the two are different. The fight for attention between the two is a rather simple one of time. There are only so many hours in a day to program or soak up great design. When you add weight to one you take time from the other. Writing in new languages does little to inspire creative visual approaches to problems and trying out new typefaces does little to aid in abstracting code.

Everything is a spectrum, but how do you do both really well?

How do you balance the two (or more) disciplines? Let me know @Aetherpoint

Personal Site == Infinite Sandbox

Andrew Johnson — Sat, 23 Mar 2013 20:00:00 -0400

Some passive todos for the site (not that it will ever be 100% done).

There's still some things to accomplish. They include:

Integration of Responsive Images via Picturefill.
Better content management / templating of casestudies as posts.
Find a better way to manage / automate image asset compression.
Consider using a second column for blockquotes on posts for more typographic hierarchy.
Resolve Post / Work filtering behavior.

Credit Where Credit Is Due

Andrew Johnson — Sun, 17 Mar 2013 20:00:00 -0400

I was first introduced to design by experimenting with animated gifs for signatures on forums. Since then i've learned a few things. This is just a quick shout out to everyone who i've learned a great deal from.

Thank you to the awesome Filament Group, who took me in as an intern and taught me a lot. Before Filament, I had little knowledge of web design / development and how all the pieces came together. I wasn't familiar with best practices, or web standards (and all the complexity behind them). I didn't know what version control was, how to maintain efficient workflows, or how to negotiate with clients.

You changed the way I look at and build websites / apps (while having a ton of fun). Thanks!

Thanks to Ethan Marcotte for directing me to Filament.

Thank you to Professor F for holding the bar high for design and for me personally as a designer and learner.

Thanks my professors: Professor R (for instilling a love for Typography), Professor C (for constant constructive feedback even when I thought I didn't need it), Professor M (for encouraging me to explore and express) and Professor B (for showing me that great design is just hard work).

To Professor O, who has been awesome on the Computer Science side of things.

To my design friend Alain who consistently churns out absolutely nasty typography, thanks for your extra design eye. Oh, and just rocking out.

To my design classmates for the encouragement and not getting too annoyed at my guts.

Aetherpoint

The Manifold of Viable Interfaces

Perceptual Constraints

Representation

Interaction

Input Constraints

Environmental Constraints

Bringing it together

Footnotes

Depth Camera Memory Generator

Recent Favorite Album Art

Pleasures - ADOY (2023)

Remember That You Will Die - Polyphia (2022)

FRUTO - OWALLOIL (2025)

smells like earth - aruka (2023)

WonderStruck - Shiroi-Ice & Ceru_Lean (2025)

gutter angel - sunnbrella (2025)

Misery - jeebanoff (2025)

Les Chants de l'Aurore - Alcest (2024)

未確認・惑星・幻天國 - 失業魔法少女 (2023)

andromeda (Single) - nuphory (2024)

86400+ - KBSNK, ISLTR (2025)

Project Caelus - Ochre (2018)

Emotions Over Time

Prototyping Environments

Site Update - Live Weather

Inspiring Game Music

1990s:

2000s:

2010s:

2020s:

Human Input and AI

Footnotes

Responsive Design Ecosystems

1. Advent

2. Experimentation

Simplicity

Scalability

3. Condensation

Currently

Footnotes

In Defense of Form

Communication Decay

Product defensibility

1. Unique, extensible and rapid production tools

2. Rich interaction

3. Format ownership

Manufacturing Meaning

Footnotes

Installing the USDZ Converter

Typographic Emotions

Generalizations: A disclaimer

Prior research

Charting a course

Data collection

Further exploration

Footnotes

Approaching Spatially Adaptive Type

Illusions of Grandeur

A Different Perspective

1. The person moves around the typography anchored in worldspace

2. The typography moves around the person, manipulated or by itself

Distance → Optical size axis

Horizontal viewing angle → Width axis

Horizontal viewing angle → Slant axis

Vertical viewing angle → Height axis

Ambient Lighting → Font color / Optical grade axis

Context-based axes

From the original angle

Applications

Measure App

Tilt Brush

Footnotes

Breaking Boxes – Typography and Augmented Reality

Unity Threshold Shader

Augmented Reality Design – Crossing the Screen Space Divide

Tied to Space

Medium-Sized Spaces

Knocking Down Walls

AR: 3D Visualization