Noonoo Design Language

Experience the future with Noonoo Design: High-tech utopianism that you can (almost) feel! ❋

Developed for my website, resume, and other contingencies, Noonoo Design blends neumorphism with a harmony between techno-artifice and organicism to be bright, friendly, functional, and optimistic; a design-space that reminds us that the technologies we create can be great.

Conceptual influences

Noonoo Design draws from the school of neumorphism, a design trend from around 2020 that acts as a visual midway between pre-2010s skeuomorphism and minimalist flat design. Neumorphism constructs UIs that look more ‘tangible’ and ‘realistic’ while avoiding the visual noise and complexity of skeumorphism. Light and shadow are used to create depth and a 3D-like effect, with elements pressed into or protruding from the interface.

As you might imagine by the heavy use of shadows and near-skeumorphic design, I drew inspiration from a lot of (personally) nostalgic sources. I wanted to create a somewhat modernized ‘sequel’ to the bright blue optimism of the frutiger aero era while eschewing flat design and Corporate Memphis; not out of lack of appreciation for Memphis, but because creating a portfolio’s a great opportunity to construct a distinctive identity out of personally resonant sources:

Here’s the mood board:

Noonoo; where neumorphism meets nostalgia!

It’s a seemingly disparate blend of ideas, but there’s some key commonalities and features that I’ve borrowed:

• Rounded, organic shapes with smooth, curved lines - To gently guide focus along the interface like the carpets of a casino¹ and to conjure the human affinity for curved shapes originating from our pre-90° angle past.
• Symbiosis between nature and artifice - Intended to balance the ‘techy’ look & feel of the language and offer some reprieve from the digital claustrophobia of an always-online world.
• Wide, plains-like white space - To create a less busy / cluttered interface, minimizing cognitive load and leveraging the savanna principle.
• Utilitarianism - Artifacts like Wikipedia, monorails, airplanes, OS X, and brutalist architecture all have a functionality-first, tool-centric utility at their core that makes for efficient and satisfying experiences.
• Red as focus conductor - The (relatively) more numerous low-frequency cones in our retinas pick up the wide gamut of red wavelengths; because of this, red is an eye-catching and memorable color.

Design principles

The guiding principles of Noonoo are THUSS:

• Tactility: Noonoo uses neumorphism’s tactile traits to construct a UI that feels like a tangible and immersive experience, communicating function through form.
  • Interactive objects are shaped to suggest tactile interaction. Ex: Buttons protrude from and depress into the interface like real buttons, and cards float above the interface to evoke layering and depth.
  • Non-interactive objects are shaped to suggest tactile artifacts. Ex: Block quotes and certain images are 'pressed' into the interface.
• Hospitality: Noonoo is approachable; “user friendly” in both aesthetic and utility.
  • Tactility is used to simulate a familiar experience interacting with tangible high-tech tools such as clocks, phones, machines, and synthesizers. This is in contrast to designs that more closely mimic print or take advantage of preexisting familiarity with digital experiences.
  • Rounded shapes are used to evoke approachability and friendliness.
• Usability: Noonoo prioritizes usability, ensuring that its interfaces and artifacts can be traversed with ease.
  • Click boxes are substantial and accessible. This is a lucky side-effect of neumorphic objects being relatively ‘large’ owing to the shadows required for the tactile visual effect to work.
  • Typography is minimally sophisticated with clear information architecture to fortify legibility. Individual characters are distinguishable from each other: 0s have slashes and ‘l’ is clearly not ‘I.’ Monospaced code is just as readable and its handwriting-like qualities have an affable organicism to it.
• Simplicity: Noonoo eschews the visual complexity of skeumorphism while retaining its strengths, and borrows from flat design’s function-first philosophy.
  • Components are minimally complex; their use should be obvious.
  • Colors are relatively neutral so as to better showcase designs with other color schemes and design languages, as well as photos and illustrations.
• Spectacle: Noonoo is designed to be immediately distinguishable at a glance so as to be memorable; this is partially thanks to its roots in an unconventional design paradigm (neumorphism) and pseudo-anachronistic tactility.

THUSS aren’t standalone ‘columns’ buttressing the structure of Noonoo all on their own; there’s a lot of conceptual overlap and mutual reinforcement. For example, tactility reinforces hospitality and usability; simplicity reinforces usability too. T, H, U, S, and S are all interdependent.

Think of the principles as many pentagonal plates shaping a geodesic dome.

What’s in a name?

I call it “Noonoo” because:

1. Neumorphism → Neuneumorphism → Neuneu → Noonoo
2. Noonoo’s a fun, light-hearted bisyllabic name that fits the quintessential Filipino nickname format, and its whimsy embodies the utopic essence of the design language.
3. That sentient vacuum from Teletubbies is called “Noo-Noo,” and man, was that a wonderfully bizarre fever dream of a show.

Colors

Color Palette

Tahoma White

• Namesake: Mt. Rainier / Tahoma
• Role: Primary

Tahoma White has the tiniest hint of red to it for a couple reasons:

1. The neumorphic effect doesn’t quite ‘work’ in pure grayscale; an off-white like Tahoma White better simulates ‘physicality’ using the extra dimension of hue in addition to the spectrum of brightness that would be found between plain black & white (grayscale).
2. Since white is the base color of my interface I decided to lean more towards the warmer spectrum of color in order to minimize eye strain and project a ‘warm’ experience.

Lawetlat’la Ash

• Namesake: Mt. St. Helens / Lawetlet’la
• Role: Primary

Lawetlet’la Ash has slightly more green and blue than red, making it a good compliment to Tahoma White’s warmth.

The ashy grays make me think of a soft B-grade pencil.

Spectacular Red

• Role: Main accent

Spectacular Red is the main accent color of Noonoo Design, chosen for its bright, electric hue. I use it to direct attention and indicate interactivity; “active” elements light up with Spectacular Red, inviting users to action.

Spectacular Red is intended to be evocative of a highly precise and competent energy; something like a laser pointer, the innards of HAL-9000, or the glowing eyes of robots from 1980s sci-fi action films.

Rain City Emerald

• Namesake: City of Seattle
• Role: Secondary accent

With our main accent color out of the way, I finished off the palette with two more complementary accents; a green and a blue, as a salute to the red, green, and blue LEDs that comprise modern-day monitors and construct the spectrum of color we see on our screens through their many possible permutations.

Rain City Emerald just happened to look good juxtaposed with Spectacular Red, Tahoma White, and Lawetlat’la Ash.

Whulge Blue

• Namesake: Puget Sound / Whulge
• Role: Secondary accent

Like Rain City Emerald, Whulge Blue serves to ‘round out’ Noonoo’s color palette. If I were to leave it at just Spectacular Red and Emerald City Green we’d have a bit of a Christmas-color cliché situation, and the addition of Whulge Blue leaves the door open for tertiary colors that could be used to further distinguish and categorize elements.

Whulge Blue also allows a playful (but not derivative) homage to Aqua’s iconic window decoration “traffic lights”:

// Intermittent reminder to hack the Gibson.
const randomInterval = () => Math.floor(Math.random() * (5000 - 1000 + 1) 
  + 1000);
const reminder = () => console.log("We gotta hack the Gibson!");
setInterval(reminder, randomInterval());

Dark Mode / Light Mode

I’m working on a dark mode color scheme as well:

The dark / light theme swap is more of a nice-to-have feature; I plan to add it to the site in the future.

Logo: The Octostar

The Octostar (❋) is an asterisk / star glyph consisting of eight teardrop-like spokes.

The Octostar’s symbolism, shape, and history make it particularly well-fitted to represent my practice:

Symbolism

• Focus - Asterisks are used in writing to denote edits; tactical diversions of attention and detours to edification. A designer is mindful of the foci of their users, stakeholders, and the product itself. The decisions a designer makes and the patterns they apply are informed by knowledge, logic, and qualifications that could be seemingly called out by a traditional asterisk in a text—an unobtrusive option to follow their reasoning if necessary.
• Fusion - Stars are used as wildcard characters in software development; to capture ‘anything’ and ‘everything.’ Say you’d like to delete everything in your file system; using a wildcard, that’s sudo rm -rf / *. We draw from diverse sources, experiences, collaborators, skills, inspirations, ideas, and fields to engineer and design quality experiences. This inquisitive interfusion is not unlike the fully-inclusive dragnet of wildcards.
• Growth - Asterisks are used as multiplication operators in math, symbolizing growth through duplication, iteration, and repetition. In UX we use iteration to find our way to optimal designs, features, and concepts: Each iteration of a design is an evolution of a previous iteration. Under a different light, iteration can also be understood as a form of practice; a method of ‘growing’ skill through repetition—something that applies to any kind of labor; motor skills, creativity, social finesse, or knowledge work.
• Computing - This one’s straightforward; there’s 8 bits to a byte! ☻

Shape

❋ shares the curved lines used elsewhere in Noonoo Design. Its symmetry, heavy weight, and simplicity make it recognizable from a distance and easy to draw on paper, which is about all one can ask for from a logo.

Stars have six spokes in the majority of fonts (like ＊—check your own * key), but most writers will draw their stars with eight spokes when writing by hand because it’s easier to make out a neatly symmetrical character with eight. I’d like to think that the eight-spoked star has a dash of extra humanism because of this.

History

❋ was added to Unicode in 1991 as part of the ITC Zap Dingbats typeface along with a handful of other asterisk-like decorations and stars. I think taking a logo right out of Unicode is pretty fitting; the ease with which I can print the plain Unicode glyph onto virtually anything speaks to its usability and simplicity.

Despite the glyph’s institutional roots, I’ve noticed a ‘chip’ in the spoke at the 10:30 o’clock mark that I’d like to correct when I modify the glyph to use as a logo.

I think that chip adds a little character, though; a humanist hint of mortality.

Why neumorphism?

I’ve come across numerous thinkpieces and YouTube video essays purporting that neumorphism is inherently inaccessible; that the visual style is sub-optimally usable.

I think this is a bit of a myth:

A green field UX design begins with wireframes; basic, grayscale wireframes without personality or branding. Through a process of iteration and refinement, a designer’s goal is to reach a point where these anonymous wireframes are accessible and speak to the function of the interface. They should be usable, even in black & white or sketched out on paper.

This would be done by (among all sorts of other techniques) designing wireframes with Gestalt principles in mind, leveraging perceptual patterns and/or interaction grammar to locate and design components, using a logical information architecture, minimizing cognitive load, and testing whether the design ‘stands straight’ as far as desired user experience and product indicators.

Because of this, adding a visual treatment like neumorphic design to your interface shouldn’t lessen the proven usability of your wireframes so long as the final design adheres to the same basic visual grammar of the frames and accessibility standards like WCAG—and that’s still possible with neumorphic design.

I think, though, that there’s a greater risk of creating less accessible neumorphic designs if the designer skips wireframing and builds something ‘from’ visual design with the main intention of making it look aesthetically awesome.

In comparison, a flat, minimal design is less risky because the lack of visual chrome naturally leads designers to focus on what’s remaining—usability and functionality; there’s less mental overhead.

Neumorphism’s traits don’t present much risk to usability in our case since I’ll be using Noonoo Design for a fairly basic, paper-like interface consisting of cards, buttons, forms, images and simple components. If, instead, this were a richly interactive mobile app or something as jam-packed with functionality as a DAW or NLE, then creating a fitting neumorphic design language could be a whole lot more challenging.

Afterthoughts

This page is a living document; Noonoo Design isn’t really ‘done.’

As I get more practice, visual trends evolve, tools develop, time passes by and I encounter the necessity I’m sure this iteration of Noonoo will look as dated as anything ever designed and warrant some mutation.

Let’s hope it’s later, rather than sooner, right?