
Digital World-Building 101: How I Built My Website
I didn't set out to become a web designer.
I'm NOT a web designer.
I just wanted a home for my newsletter.
So I bought a template from a creator.
At first it felt like a wināI finally had a place to publish.
But eventually, the excitement wore off, and frustration set in.
The course that came with the template only showed how to tweak colors and fonts. That was it.
Every time I tried to do something moreālike adding a photo to the hero sectionāit broke. And I had no idea how to fix it.
Worse, I came across a few other creators using the same template. Same structure. Same layout. Just different colors and fonts.
I felt like I looked like everyone elseā¦
I didn't want something that was "good enough."
I wanted something different.
Something that felt like me.
Maybe even with cool micro-interactions? Some animations?
A website that felt alive.
I decided if I wanted more customization I'd have to learn Webflow.
So I took the Webflow 101 course and Ā followed along to get familiar with the software.
After the course, I opened up a blank canvas and started building from scratch.
It was tough.
I got stuck at parts.
But eventually, I figured it out.
My website has evolved since I first launched it.
Throughout the evolution, I drew inspiration from a lot of different placesāvideo games, websites, and various brands.
In this piece, I'll share the behind the scenes of my website and hopefully inspire you to create something dope.
Feeling First, Then Design
Before building your website, you should have a visual identity in place for your brand.
This means getting clear on which fonts, colors, and imagery reflect your brand (aka your world).
Own an aesthetic.
People will also begin to associate you with a certain style or feeling.
To do this think about what feelings you want your brand to convey.
With my brand and website, I hope to evoke a feeling of play.
Fireberry pink is my favorite color, but I guess that's kind of the point, right? Your brand should feel like you.
Besides the personal preference, pink shows up a lot in cyberpunk and retro-futuristic aestheticsāthe visual world I draw inspiration from.
The color screams bold, playful, rebellious, and passionate.

One of the main fonts I choose is 'Chakra Petch.' It has this clean, futuristic vibeālike something you'd see in a sci-fi game menu or high-tech dashboard. I feel like it gives my site the "video game interface" feel. That's exactly why I choose it.

MOODBOARDING
As you collect your fonts and colors, drop them into a moodboard. This becomes your visual playgroundāthe place where your brand's look and feel starts to take shape.
Mine is down below (or click here to view it).

I threw in anything and everything thatās shaped my brand and inspired my aesthetic.
š® Scenes from GTA Vice City

š Book covers that shaped my thinking

š§ Creators, thought leaders, brands, and quotes that inspire me



š Streetwear that reflects my personal style


Oh, and if I had to pick music for the soundtrack to my brand?
It'd be a mix of synthwave, pop punk, and hip-hop.
All of these influences shape the vibe of my brand.
STEALING LIKE AN ARTIST
Nothing is originalābut your unique blend is.
In my piece on original thinking, I say: "What we refer to as originality is simply a fresh blend of borrowed ideas."
Every design, layout, and concept is built on something before it.
This is what people mean when they say steal like an artist.
You gather pieces that resonate. You remix them.
You add your own flair.
You're like a DJāand your brand is the playlist.
This is the mindset I had as I built my website.
I didn't create from scratch. I drew inspiration from various places.
A button here.
A layout there.
A micro-interaction I thought looked clean.
I mixed and matched. I made it my own.
Now, let me walk you through the different areas of my siteāand if I can find the reference I'll link it.
DECONSTRUCTING MY SITE
My website has evolved a lot since I first launched it.
Every time I found something I liked, I would go back and tweak things.
My references come from going down various rabbit holes. Pinterest, Behance, Dribble, and Awwwards are some of the places I used to find inspiration.
BLOG THUMBNAILS
Let's zoom into one particular area of my moodboard.
I used to overlay text on my blog thumbnails. This was inspired by the GTA Vice City cover.
I picked a script font that fit the vibe and used my brand colors.

Eventually, I dropped the overlay text. It felt like a bit much since the title of the blog was already underneath the thumbnail.
It cluttered the page.
The thumbnails themselves were loosely inspired by GTA loading screens. You know, that pop-art style illustration?
I mean, come on..⦠tell me these couldn't be loading screens in a GTA game?

My thumbnails have evolved since the earlier days and take on more of the cyberpunk feel now.
BLOG ARTICLES
On my blog article page, you'll notice a subtle array of circles in the background.
I first came across this visual reference in a graphic from Dan Koe:

Then later in one of his Youtube videos, where he toned the opacity down and made it more subtle.

I thought it looked clean.
So I borrowed the idea and tweaked it for my website.

It really adds texture and depth to the post, giving it the futuristic interface feel.
NEON TEXT
Cyberpunk aesthetics are known for glowing neon lights. However, I never really thought to add that effect to the text of my blog until I came across this cyberpunk themed website:

Source: https://cyberpunkredone.webflow.io/
I felt inspired to update all my headings from off-white to a glowing fireberry pink. I even added a subtle glow to the paragraph font. (But not too much, it still needs to be readable.)
This website even inspired the āTo: Unknown Name [Player 1] / From: Priscilla [Player 2]ā detail at the top of each article. It really adds to the fun, interactive video game feel I'm going for.
LINKS
I remember stumbling onto an interaction designer's portfolio.
As I hovered over a linkāI paused.
It was glowing electric lime green and shifted with this buttery-smooth transition.
It felt⦠premium.
I appreciated the attention to detail.
It reminded me of Appleās packagingāthoughtfully engineered to evoke a feeling of delight.
It just hit different.
It was unlike anything I've ever seen. Far beyond the boring and bland sky blue links of the 90's.
I thought it was so freakin' cool. I had to capture that same feeling on my website.
So I borrowed the ideaāadding my own flair.
Instead of lime green, I used fireberry pinkāmy brand's signature color.
ā
[Normal state.]

ā
[Hover state.]

ā
It's the little details that level up the experience.
A micro-interaction that turns browsing into a feeling of play.
THE GRID
The grid on my website was inspired by countless websites I came across with grid backgrounds.
One stood outābut oddly, it's no longer live.
Thankfully, I already took a screenshot and added it to my moodboard:

This particular website had a cool animation where streams of light would drift across the grid lines like digital currents.
It felt alive and I loved it.
This lead me to create a grid on my own site, styled to match my aesthetic.

Mine lights up pink wherever the mouse hovers.
Grids also show up a lot in retro arcade games. The blockbuster movie Tron played a huge role in turning the grid into a cultural icon.
It became a symbol of futurism and a visual metaphor for entering the digital world.
Which is exactly what I'm going for.

CTA BUTTON
My CTA button was inspired by an NFT project site.
Their links would scramble and decode on hover.
It was giving cyberpunk vibes, and I thought it was sick!
I had to recreate it.
It would fit in perfectly with the immersive, video game-style interface I was going for.
So I rebuilt the effect with custom code (shoutout to AI for the assist).

ā
ABOUT ME
I always wanted my About Me section to feel like a "choose your character" screen from a video game. You know, the kind that lists all the player's stats?
Then I came across this guy's website:

Source: https://www.chrometattooparis.com/profile
He had this insanely cool profile card.
It instantly clicked.
I had to borrow the concept.
I drew inspiration from his and styled mine with my aesthetic.

I'll be realāhis still feels way cooler than mine!
But hey, I gave it shot.
READING PROGRESS BAR
Above every article, there's a slim bar that tracks your scroll.
It's meant to give the reader a feeling of progressālike collecting XP as you read.
I honestly can't remember where I first got this ideaā¦
But I was using Beehiiv's site before I bought my template, and I remember seeing it on their web newsletters.
Either way, I thought it was a cool addition that subtly reinforces the video game vibe (and gives the satisfying feeling of completing a level when it fills up at the end).

ā
A response I got about my website:

ā
READY PLAYER ONE?
None of my design choices are random. Each one is intentional and designed to spark feelings of play, curiosity, and delight.
Websites are dead. Experiences win.
If you're interested in collaborating with me on creating a digital universeāclick here.
Easter Egg:
And if you made it this far, you can DM me ādigital world-buildingā and Iāll give you a special offer.
[DM on X] Ā
[DM on IG]
Looking forward to seeing your moodboard and hearing all your creative ideas!
Not quite ready to build your own world yet, but still want to support mine?
Every bit helps me keep creating cool shit on the internet.
Until next time my friend,
āPriscilla [Player 2]
P.S. Nothing is originalābut your unique blend is. š