Revamping my digital playground: Random and a bit quirky
--
Your personal online haven, a corner of the web where you can be yourself, unapologetically creative, and occasionally a little bit quirky. Now, imagine it’s been gathering digital dust, yearning for a fresh coat of paint. This is where I found myself some weeks ago until I couldn’t resist the siren call of reinvention anymore. So, here is a quick makeover ride from thought process to implementation and highlight features of my personal website.
Concept
One of the reasons we industry professionals often struggle to maintain our online presence is the vulnerability it entails — not necessarily towards others’ opinions but our own. Reinvention demands commitment and decision-making, which is undeniably a tough process. So I tried to be smarter this time and chose the way of least resistance reducing the design choices I would have to take with a very minimal — almost brutalist — approach: Typographical focus without any images or even icons, minimal coloring, very simple responsive layout, easy implementation and maintenance — and of course doable in as little time as possible, at best a weekend project.
Sketches
I had a rough idea to merge two sources of inspiration that have been on my mind lately. One was the bento box design trend and the other was ChatGPT, specifically their login screen with its interesting duotone color choice. I shrunk down the content of the current website version and started sketching with my minimal typography approach in mind and landed somewhere here:
Clearly, I hadn’t given the visual design much consideration at this stage, but it just didn’t sit well with me early on. The information was repetitive and not as organized as the bento box idea I had in mind; instead, it felt cluttered and challenging to navigate. Additionally the design wouldn’t scale — at least it would be pretty difficult to add elements to the “navigation” in the future.
I tend to not design mobile-first in very early stages. Instead, I often choose a tablet size to see how flexible certain elements will need to be. This led me to regrouping the various links into dropdown menus, making it more intuitive to distinguish between clickable and non-clickable elements. I then started to experiment with different color sets, too:
As I shifted away from my initial concept, I found myself increasingly drawn to the brutalist aesthetic of the early computer and gaming era. However, I also recognized that the design was becoming excessively minimal, and it would require some adjustments to regain its distinctiveness.
At this point, I was definitely satisfied with the layout, and I felt it didn’t need significant iterations anymore. Therefore, I decided to simultaneously transition to code, allowing me to experiment with various design elements along the way in CSS (more details on this below). The final design, with its dotted background, bold drop-shadows and dynamic coloring, then took shape back and forth between Figma and VS Code:
Coding
Despite being “only” an UX/UI designer, I’ve developed a quite elaborated workflow over the years when diving into coding projects, which are primarily static websites. I rely on a handy development tool called CodeKit, that not only compiles and minifies my PUG, SASS, and JS code but also provides an auto-reload browser sync on save. This WYSIWYG feeling is really crucial to my development experience.
Overlapping borders
Early on, I encountered a challenge with the overlapping border styles of the box layout — a situation that demands special handling when using a global box-sizing: border-box property. Additionally, I aimed to make the stroke width adaptable to different screen sizes, which required a more scalable approach. The solution here was the outline + outline-offset method, using SASS variables to control the stroke width, while calculating the offset placement by halving its value:
outline: $borderWidth solid $primaryColor;
outline-offset: calc(-#{$borderWidth} / 2);Random duotone color generator
As mentioned in the design process, I started exploring various color sets while deliberately avoiding excessive design decisions. I have a deep appreciation for randomness, having dabbled in the use of randomly generated content in recent projects. This led me to the concept of generating the website’s colors entirely. The advantage was that the website’s color scheme consisted of just two colors. However, the challenge lay in the fact that the design with its bold shadows only really worked well when the foreground color was darker than the background. As I delved deeper into this process, I encountered another issue — not all colors harmonized well together, or even worse, had poor legibility.
I actually quite liked the fact that there were sometimes weird color combinations — that was exactly the degree of quirkiness I was looking for. But poor readability was a severe accessibility issue.
The final function now generates two colors upon page load, ensuring that the first color is darker than the second. Together, they maintain a minimum WCAG (Web Content Accessibility Guidelines) contrast ratio value that is freely adjustable (and I’m still exploring which values lead to best results). Finally the generated color variables are inserted as style element into the document’s header:
Halftone dotted background
In addition to the bold drop-shadows that added depth to the content boxes, I wanted to create an even better differentiation between content elements and background. However, I didn’t want to compromise the purity of the color generator concept that has come so far by introducing additional shades with transparencies, which felt like cheating at this point. So, I was looking into various halftone coloring patterns and ultimately settled on the dotted design. Remarkably, this choice seemed rather unconventional in today’s web design —although new Adobe Illustrator features seem to be spurring an overall design trend — , and I discovered that achieving it through background gradients was anything but intuitive.
Luckily, I stumbled upon this fantastic Pen by Michelle Barker, which helped me a lot to fine-tune the perfect values and create an own simplified solution:
$dotSize: 2px
$bgSize: 12px
$primary: #0C041B
$secondary: #7AED6E
body
background-color: $secondary
$bgPosition: calc(#{$bgSize} / 2)
background-image: radial-gradient(circle at center, $primary $dotSize, transparent 0), radial-gradient(circle at center, $primary $dotSize, transparent 0)
background-size: $bgSize $bgSize
background-position: 0 0, $bgPosition $bgPositionHosting
For years, I maintained my own domain and webspace with a traditional hosting provider. While I hadn’t encountered any significant issues with this setup, I felt a compelling need to explore new avenues. I was eager to try something different, which led me to GitHub Pages. This setup has proven to be quite fruitful for me. It not only offers a reliable and stable hosting solution but also provides an excellent opportunity to expand my knowledge and dive into the intricacies of GitHub’s functionalities.
It’s a free account so the repository is publicly available. Make sure to stop by and of course visit mandolinie.github.io. Thanks for reading!
