Rabbit Holes and Failure

Aborted web design and what 12 hours of wasted development did for me



While researching for my book “Semiotics of Skulls”, I visited my website to save an image. Unified Memory dot com utilizes a video for desktop homepages (hosted on Youtube). If using iCloud Private Relay, VPNs, or Private / Incognito Mode, Google serves excessive CAPTCHAs and anti-bot sign in requests. Unfortunately, this meant my website on Desktop showed a banner reading “SIGN IN TO PROVE YOU ARE NOT A BOT” instead of beautiful text animation. This is deeply embarrassing for a website-making-person.

So I began to redesign a website from scratch. I was missing using my design muscles. Here’s the first questions I had – note that “Should I do this?” was' not one of them.

  • Should I start building beautiful layouts from scratch or work with Cargo’s template wireframes and customize?
  • Should I have a glyph / symbol or wordmark logo?
  • Should I switch from branding myself Unified Memory to being personal since it is after all, a personal website?

I decided in 5 mins:
  • Start with wireframe to focus on typography, color palette, branding. Good decision, saved me from the rabbit hole of fixing layouts, allowed me to produce beautiful typography and color palette.
  • Yes. I want to write SVG from scratch. I cannot justify this decision because 60% of the time spent was spent on getting my SVG to display correctly.
  • Yes, but I was wrong. Unified Memory is a metaphor borrowed from computing: where Random Access Memory provides fast access to data for CPU, unified memory allows the CPU and GPU to reduce the need for transfer between memory pools, making it more efficient to share data. Unified Memory (the website) is about processing memory (mine), bit by bit. It decenters me but emphasis my work. A site under my name’s domain (aimen.me) is just conceptually less interesting to the kind of people I’d like to appeal to. That would appeal to people who like me, find me interesting, but not so much what I have to say, or the ethos behind why I’d say it like that.

Logo Exploration 

  • Has to be glyph or symbol reproducible across sizes in various colorways (it should look good light on dark, and dark on light).
  • Must communicate wholeness, inherent contrast, input–-output, the fx of transformation, because my alias has been IO for 10+ years (not a single original thought…).
  • I sketched on index cards in blue fountain pen stolen from the elder of my younger brothers. Then I wrote SVG for the symbol I most loved.

Symbols explored initially


I selected a double circle bisected by a bi-directional arrow because I feel a kinship with the most ancient symbol (a circle) for its simplicity, it communicated wholeness and the cyclical nature of creativity. 

The arrow was inherently limited to up and down, reflecting the limited nature of my mind as an artist (I can only operate within the confines of the human brain, there’ss much I won’t know). 

I liked the filled-unfilled aspect in the circle because it communicated targets and my inherent contrast: so wise but so unable to hydrate daily, smart enough to do this design exercise but stupid enough not to ask if it was necessary in the first place, etc.

SVG v0
SVG vWonkyArrow
SVG vHowManyWaysAreThereToMessUp

The final correct symbol is below.

vFF_Final_FinalFinal_ReallyFinal


This is where I started to feel the subtle foreshadowing that I was on the wrong path, but of course I persevered bravely into wrongness. 

Correct symbol in situ in mobile layout


Lessons learned:

  • Plain paper and pen is the fastest prototyping for logomarks.
  • For paid clients, I’d never write SVG…I would draw this in a vector illustration program. SVG writing is a waste of time for logo design: I spent 30 min flipping arrowheads, another 30 figuring out the viewbox was clipping the arrows off when exporting to PNG, another 30 mins where I finally asked ChatGPT for help but it was wrong in trying to get the arrow markers at ends furthest from the circle (spoiler I just had to flip marker-start to marker-end LOL).
  • SVG art might be something I wanna dabble in! I didn’t realize people could draw landscapes, mess around with blend modes. I love a new medium.


Color Palette Exploration


I wanted the new website to transmit clinical sterility (thought purity), and a blank canvas. Lots of people have told me my art is feminine, unfortunately this made me fear it was being parsed as unserious. So I wanted to seem masculine or androgynous. I always want to echo Web 1.0 brutalism.

I’ll be honest even with paid clients my approach is to try a couple of main colors (in this case Prussian Blue, Forest Green). Once I have a ‘main’ color I pick 4 more, and create 10-15 palettes like this. 

Here, Prussian Blue served as Primary Accent (for use in Bodycopy, Headers, Logo Mark). Acid Yellow was the Secondary Accent (Website Side Borders and Drop Shadows). Acid Blue was used for links and very thin stroke borders on quotes. Middle Teal was used in date markers and image captions. To echo wireframes and brutalism, Cold Pale Gray was used for the background. I included True White because you always see it (e.g. even in the background of a URL bar) but didn’t actually utilize it.


A 6 color palette including Prussian Blue (#003153), Middle Teal (#0096b3), Acid Web Yellow (#EBFF69), Acid Azure (#FFC5FD) on a background of Cold Pale Gray (#F1F1F1) bordered by White (#FFFFFF).



Lessons learned:

  • Using a rigorous approach where I picked from complementary, monochrome, duo chrome, analogous, tertiary etc color schemes would have prevented me using Middle Teal and Acid Blue alongside Acid Yellow…sometimes I wonder whether good sense exited the building. A lack of strategy failed me!
  • For a website talking about art, the soul, philosophy, this palette makes me feel too cold. Ultimately that stemmed from a mismatch in branding ethos rather than color specifically, but…the colors just didn’t mesh with the content.
  • Middle Teal has no relationship to the other colors. I later preferred to tone Prussian Blue to 10-20% alpha then found the hex code equivalent and used that as header background and caption color. Middle Teal was a desperate decision made because the other 3 colors didn’t mesh well.
  • Acid Yellow is off-putting, off-kilter. I would’ve built the palette around this next time (using itself minimally). Most people hate this color or think of Ling’s Cars, which is what I wanted.
  • I would still have used colors echoing wireframes, if I wanted to give the effect of being “in progress” or “under transformation”. Cold Gray is a bit bright, I’d likely tone it warmer. 
  • No dark mode color palette was provided, which I do intentionally because I HATE DARK MODE…but paid clients please know I would have designed one with joy because of accessibility reasons!


Typography


My ‘locked-in’ choice for bodycopy was Times Roman (not Times New Roman). This is because I love Web 1.0 or the feeling of reading a student essay where they didn’t bother to change the typeface. It’s a workhorse I know looks consistent across devices, screens, small sizes, varying lengths of text.

Unified Memory uses Favorit (a variable font) as an alternate header style. So I was thinking about Favorit, but switched to Mono so I could echo ‘retro’, ‘technology’, ‘cold’. However, Times Roman and Favorit Mono did not want to be friends. I switched to Arizona Text Light, another variable font.

Coupling Favorit Mono and Arizona Text Light wins obvious contrast between headers and body. It’s not a pairing I see often; distinctive is good in personal branding. Favorit Mono Bold is slightly academic, easy to read at a glance which is good for big lumps of 2-5 words max (headers). Arizona Text Light is stylish and bookish for long form body copy, a little too thin at small sizes. I tested on iPhone 14 and 16 and it was fine, so I didn’t bother to optimize for my Android brethren because I think having an Android is a bad choice, and as my site is (gasp!) desktop optimized. 

The two font families work well because they echo nerd, contrasting computer and book perspectives. They clash because Arizona is spiky and skinny and Favorit is fat and bold, which I didn’t see as a bad thing. It’s hard to articulate but without nailing spacing (which I did not), they can feel a little unexpected in a negative way; I think this is because Favorit Mono doesn’t prime you for long-form reading.

In situ on the wireframe. If I had nailed the kerning and spacing I truly believe this would be a beautiful, exceptional font pairing.


Lessons learned:

  • TBH I felt the font pairing was beautiful. I’ll put it in my pocket if someone with shorter essays / a blog about computers / reviewing gadgets wants a website. The mismatch was between pairing personality and the ethos of my content: Unified Memory has a goofy-one-woman-academia energy that this pairing is too polished for. It’s an androgynous pairing.
  • Spacing matters. In reality you wouldn’t see H1 like I shared in the screen grab, so it would be the spacing of H2:Body:H3:Body I’d focus on. I don’t think my headers had enough room to breathe amongst the awkward padding which made Arizona Text Light perform badly for legibility on first lines.
  • It was correct to lead with typography, color next. Monochrome wireframes made this pairing look a lot better, when I added color it got shittier. Which is down to a lack of color palette strategy.

12 hours of wasted development time later, I realized the largest errors had taken place very early. 

  • From a branding perspective, I shouldn’t have second-guessed Unified Memory (my OG website) because it nailed being weird, aloof, esoteric, warm, academic, kooky. I could make my animation video work, which I too-late discovered was as simple as hosting the video within Cargo, then linking to it (I was hosting on Youtube so getting hit with sign-in banners).
  • It’s self indulgent to start from scratch and the opposite of what I do when paid to design. I mean, duh I like to explore, but for a paid client I would start with “what’s wrong with what we have” which would’ve prevented much of the aborted website 2.0 being conceived.
  • Typography is a strength, good because it’s hard. Color remains my weakest sense in branding, which hit home once I saw my color palette in action…
  • In the grand scheme of things, 12 hours practicing design and writing SVG was a net positive. It contrasts painting by hand, writing so I had fun doing it. I need to practice accepting waste as part of the creative process, so it was lovely to be humbled so deeply. I wish I hadn’t got to the ‘changing DNS settings’ stage but hey, a girl’s gotta learn.

Tell me if you need a site or branding xoxox bisouuus 💋