Concept

The first step with designing this website, as with any other design project, was conceptualization. I wanted my website to be personal, intriguing, and fun, so I listed interests of mine and looked through them. Of my interests — art, computers, wolves, and so on — one stood out to me:

Space!

I felt a lot of inspiration and leeway with the concepts of space and the night sky. Quite quickly, I settled on the idea of my website being like the display of a screen within a deep-space starship. A visitor can rummage through projects like a pilot through flight logs. Since I wanted to showcase my skills in interactive design and in working with 3D (even within a browser), I wanted to make the landing page the cockpit of this spaceship.

Categories and Colors

One of the most important features of my previous website was its use of categories. My work spreads across many practices (albeit mostly on a computer), so I felt it important to split it into sections so that visitors can find what they feel like finding — common sense, really. I wanted to strongly distinguish categories from each other, though, so that visitors will know well what category a project belongs under.

Thus, I decided to assign both a color and a symbol to each category.

The website’s color scheme consists primarily of six accent colors. I created this scheme before I even thought about creating a website, back in 2019, when I wanted to create a style for my personal work that revolved around a rainbow of accent colors over stark black and/or white. I decided to keep the site to six categories and assign each a color. The red category would be the first: the one I focus most in my career. The purple would be the last: the one that’s more personal work than any other. The rest, of course, would fall in-between. Next, I brainstormed the symbols for each section. My main tactic was to create a list of things that come to mind when I think of space or the night sky, then to list archetypes and associations for each thing. For example, with “aurora”, I associated “beauty” and “magnificence”. Then, connecting each category to a symbol was as simple as seeing which symbol’s associations match the category best. For example, the category “Programming” matched “constellation” because the connected, almost node-like nature of constellations suites the field of computer programming well.

With that, I had the six symbols I would need to design. However, I would need additional symbols for the other important parts of my website, such as the homepage and demo reel page. Extra symbols I couldn’t assign to categories would find use in these extra sections later on.

Design

When looking for typefaces, I tried to keep to open-source webfonts. I wanted typefaces that fit the space theme well without coming across as tacky. I focused on space-themed media and found a focus on contemporary fonts that are blocky but rounded at the corners. Radjhani fit that style, with Raleway seemingly accompanying it well.

Colors

I knew upfront that I wanted my design to revolve around a set color scheme of six vibrant colors that stand out wonderfully against a dark or light background. I wanted a strong emphasis on the artistic concept of color fields, along with thick, blocky lines. I decided to avoid using gradients or too many colors at once; I wanted each color to stand out on its own.

I created shades and tints of each color with their hues slightly deviating cooler or warmer (respectively), as I would with pixel art. I also created names for each color; this, in my opinion, is a very important step for any design, as I feel it characterizes the colors and makes them more personal. These names originally corresponded with the symbol the color is tied to. However, at some point, when I swapped the symbols for “Programming” and “Web Design”, I didn’t change the color; they were not only already ingrained in the style with their names, but also referenced by name in code, so changing the names would have been pointless.

Symbols

The symbols for each major page of the website needed to be simple and animatable. I knew it would be difficult to make every symbol visibly read immediately as what they stand for by design alone, so I focused on making them rememberable so that a visitor can quickly learn what each symbol leads to. This also provides a sense of exploration and discovery, which matches the space theme of the website very well. I nonetheless designed these icons with emphasis on how they relate to their subject so that they would serve as mnemonic devices, helping visitors learn them. Later, I would use animation to improve these connections.

Web Layout

The most important part of a project is the project. While I strive to add as much documentation as I can for each of my projects for others to learn from (and maybe sometimes to show off a little…), I know that this is nothing without something to show. So, for the project pages, I wanted the top of each project’s page to showcase the project itself, front-and-center, with minimal other content to distract from it: just the project, the menu button, and an indication at the bottom that the page continues.

I also decided that each project page should have only one color: the one corresponding to its main category.

The header bar with all the buttons, referred to at least within the site as the navbar, would carry the aforementioned symbols, which would expand to show the full name of the corresponding page upon hover. I decided to have the symbols hide and their color field expand to fill the empty space. I settled on the idea to have the non-project pages combine into one when a visitor hovers over a project tab, giving each category more space to expand.

Production