Introducing Avalon

Avalon is a multi-part, futuristic UI/UX concept.

Introduction

This is a multi-part series covering something I call—as an umbrella term—Avalon.

By "umbrella term" I mean that "Avalon" is short for a few sub-categories that I'll talk about in this series: AvalonUI, AvalonOS, and a few others. Although these sub-categories aren't related by necessity, I am choosing to talk about them in one series because they all share similar, albeit abstract, similarities.

In this section, part #1, I'll be talking about AvalonUI. In later sections, I'll describe AvalonOS and other parts of this series. Right now, this conceptual "AvalonOS" serves as the canvas for AvalonUI. I've omitted certain parts of AvalonOS from the demonstration images, as these will be explained in detail later.

Inspiration

Again due to the multi-part nature of this series, there are a few direct inspirations. AvalonUI was inspired mostly by my exploration in more futuristic, "gooey" interfaces. It serves as the foundation for the (as I like to describe it) "fluid" AvalonOS.

Without further delays, let's get into AvalonUI.

Frost

Although you haven't seen it too clearly yet, one of the most distinctive artisic features of Avalon is the frosty, blurred backgrounds inherent to some of its panels and components.

The blurry background is nothing new in modern operating systems. MacOS makes excellent use of it, and even recent Windows versions have inhereted the frosty look. One of the distinctions is that AvalonUI (usually) doesn't set too many blur colors by default. Instead, much of the interface is inherited from the background. In the case of the desktop, it is inherited from the wallpaper.

I'll talk about the search/command palette interface later, but notice how the blur of the search background inherits the colors of the wallpaper directly:

In this particular case, the search interface might be better without the blurred background—nevertheless, it is used here as a demonstration of the frosted effect at a large scale.

This brings me to the second primary characteristic...

Focus

Context is undeniably useful. Too much of it, however, can flow over into distraction. The blurred background provides the benefit of immediate and relatively distraction-free focus, while also providing a hint of context.

Focus will become more relevant when I go more into the design of the OS, but right now, the primary thing to note is that the blur provides a little focus, as long as it's applied correctly.

Here, it's being used to add a privacy-enhancing blur to the lock screen.

This is a good time to note: AvalonOS is still under development. The animations are smooth on my computer when I'm not screen recording, but once I start recording, the frame rate drops substantially. As such, when you see a laggy GIF like you do below, you'll pretend that the animations are as smooth as butter, like they are for me.

Functional Implications

Focus also applies functionally as well. The keyboard is a vital tool—and the fact that it's available at all times when using a desktop or laptop computer means we need to utilize it.

When I introduce the Menu component below, note that when you first open the menu, focus is shifted to where the background is—even as your mouse hovers over the items. This combination and close synchronization of the interface and keyboard gives AvalonOS some interesting capabilities. These will be discussed in more detail in later chapters.

Overflow

In the way that Focus helps to eliminate distraction, the characteristic overflow of Cystal helps to bring your attention to certain areas of the interface.

Most importantly, it directs your attention in a smooth, natural way that you can easily follow.

This attention-grabbing feature is functionally a result of two things:

  • the background literally overflowing out of its container (in most places); and

  • the background being disconnected from any given item.

These images introduce a few other characteristics: depth and color.

Depth

One of the goals with AvalonUI is to feel relatively natural. Now, it's arguable how close "futuristic" can come to "natural," but it's undeniable that depth in any interface is more "natural" than otherwise.

Unlike flat interfaces, Avalon intends to stand out in highly precise areas. One of the best and most natural ways to do that is with depth, introduced via dynamic backgrounds and shadows.

Color

Akin to crystals, AvalonUI intends to inherit its visual characteristics, in terms of color, from what it is currently doing.

Most prominently, the "atomic" components of the interface—Menus, Buttons, and so on—avoid using any bold colors. The Dropdown menu, as displayed above, uses shades of white on light mode. In the dark, it will eventually inherit its primary color from the background as well. For now, I defaulted to blue.

Animation

Animation, movement, and fluidity are some of the most important aspects of AvalonUI. The interface is designed to react to its environment.

Fluidity is important at both a small and grand scale. It's quite important that your users can fluidly move between tasks, just like it's important that dropdown menus open naturally instead of all at once. [1]

AvalonUI employs various stages of animations for most components. The Menu component, for instance, animates its height and each item sequentially within it:

And, just like fluidity, animations must translate nicely to a much larger scale:

Movement & Fluidity

Movement & Fluidity is something I've been saving until the end. It's one of AvalonUI's most distinctive features.

Described most simply, the UI moves with you:

Fluidity is also important within the context of multi-component animations. The widget animation is perhaps one of the best "flow-like" animations I can demonstrate at this point in time (again, forgive the frame rate):

Adaptation

Similar to how the colors adapt to their background, another distinctive characteristic of AvalonUI is the ability to adapt to certain conditions on-demand.

What you've seen thus far, all the imagery and videography, it's all been built with real web code. The code itself is closed-source, as I plan to use many parts of it in a real-life projet. Regardless, my point is that I'm a programmer by nature, almost. In practice, this means that AvalonUI has both aesthetic characteristics and functional ones.

So, when I say that components in AvalonUI are "adaptable," I mean that literally.

I've always had a very modular perspective to life and programming. In practice, I tend to write smaller, more versatile things. In AvalonUI, we see this with the adaptability of components. It may not be as clear now, but in later parts of this series, you'll see how adaptability plays a vital role in the efficacy of AvalonUI as a whole.

For demonstration, we can see this with a vertical list of widgets instead:

Even further, we can see this when I create what I call an "Exposé" with the calendar widget:

Closing remarks

I've only touched the tip of what I've got in store for Avalon. Today concludes most of what AvalonUI is or will become.

Next up, we'll talk about the philosophy behind AvalonOS, and some of its implementation.

In the meantime, share this if you found it interesting.

Thanks for reading.

Part 2: Philosophy

Extra shots

References

  • [1]: "just like it's important that dropdown menus open naturally instead of all at once." this is important only if your goal is to create a natural interface.

Copyright © 2022

Privacy

Made with

in SLC