Building my first website - Part 1

I have a confession to make: at the time of writing this, I've
been a full-stack engineer for over 4 years, but I've never built
a website in my whole career. Shocker, I know!.

However, I've decided that to further my career, I need to start
building personal projects and generally making myself known around
the tech space. This starts with having a personal website where I
can post some (hopefully entertaining and, with some luck, even
educational) content, as well as projects I'm working on and whatever
else I may want to share with the world.

I'm also taking this as a learning experience to sharpen my design
and web-building skills. Despite the years I've been working in this
field, it's not often you get to work on things from scratch with
full ownership in a regular 9-to-5 developer job.

So, over the course of this and subsequent blog posts, I'm going to be
documenting my process for making this website. From gathering inspiration
and sorting out what I want, to learning a bit of design theory and all
the way up to implementing it. And if you are reading this right now, it
means I've somehow succeeded (Yay! :D).

I hope you enjoy the ride and keep following along. That being said,
let us start from the beginning.

In the beginning there was the white canvas

Okay, but for real, how the heck do you go about coming up with a
website design from nothing? 😭 This is probably the part that has
taken me the longest since I had no previous experience trying to
build any kind of UI. The worst part is that I had some vague ideas
in my head and an overall mood/vibe that I wanted to hit (I swear I
could almost see the whole page in my head!), but I could not express
it into a tangible design.

So I spent a whoooole lot of time just watching as many videos about
web design as I could; from fonts and color theory to design systems
and UX/UI theory. Frankly, I ended up pretty overwhelmed, but I pushed
on and managed to make a few key takeaways from this journey:

• Focus on design before writing any single line of code.

This is so you can make fast changes and let your creativity and
exploration loose without the overhead of having to think about
the low-level details that may take too much time to change.

• Have a good idea of what you want to accomplish and transmit with the your website/app.

This will guide you through most of your UI/UX decisions, much like
having a mission and vision for your business idea; it helps in keeping
a consistent style and nudges you toward elements that complement each
other and bear cohesion.

• Lean into the nature of the web platform and it's strengths.

It's easy to get too creative and want to implement fancy or complex
UIs that are precise in their dimensions and interactivity. However,
when building for the web, it's better to exercise restraint and build
aiming to lean on the fluid nature of the web. This helps to keep things
simple and intuitive.

• If you cant make it... then steal it.

A lot of ideas that come up have most likely already been implemented,
and the greatest source of inspiration is out there on every website
you visit. So it's okay if your website/app is a mixture of all these
inspirations.

You can only cook with what's in the fridge

The first order of business was to write down what I wanted my website
to look and feel, and what I wanted to accomplish with it. I wrote a
whole document with various ramblings, but long story short, I landed on:

A clean and modern-looking website with mostly white, but also strong
accent colors where the interactive parts shine. I want it to be a
place where people can find more about my ideas and what I'm passionate
about and currently working on.

Then I needed to get some inspiration from which to steal learn. So
I began bookmarking every website and landing page that I felt looked
like what I had envisioned for my website. And I decided to use tldraw
for mood boarding and designing the first prototype.

Brief tangent: I've used other infinite canvas software like excalidraw
in the past, but tldraw just feels better to use, perhaps due to its
simplicity. It makes me feel more comfortable when using it, and so I
highly recommend it.

I dropped every screenshot I thought I could "borrow" something from and
added some bullet points of what I liked about them and what I would like
to take from them as context for future me, and ended up with this:

I also got a bit ahead and began sourcing some possible fonts I could
use for my website and lined them up alongside their pros and cons for
future reference once the design was materialized.

There's always a first time for everything

Once I felt I was satisfied with the amount of inspiration I had gathered,
I began laying out the basic prototype of the pages that would make up my
website. I decided that I would only concentrate on how my website would
have to look on a big desktop screen and a small mobile screen, and then
let the browser do its best to accommodate the in-between.

This made the designs easier to reason about, but it still was hard to come
up with coherent and sensible layouts for both displays, so when in doubt,
I opted for leaving information out in the mobile version in favor of ease
of navigation.

I originally wanted to design a lot of different pages for various purposes
within my website, but it dawned on me that the task would take an overwhelming
amount of time to design, let alone implement. So I took the approach of
"less is more" and limited the scope of pages on my website to motivate myself
to actually finish building the thing.

• I went way too hard on the main page.

• Lost a bit of steam when designing other common pages.

• And try my best again for the post and projects pages.

It may not be much, but I feel pretty proud of the end result. Given that it's
my first time, I think it doesn't look half bad, at least in concept.

In another time... in another place

I must admit that I may have spent way too much time than I should've on the
inspiration-gathering phase. I collected a lot of screenshots and made a whole
lot of annotations that I never actually ended up reading.

It ended up having the counter effect and gave me more analysis paralysis than
actual help, so I didn't use most of the images that I collected. For future
designs, I plan to keep the mood board as small as possible and not use it for
practical references nor add any annotations to it.

Furthermore, even though I liked using tldraw for this process, I'm interested
in trying other dedicated tools and seeing if they make the process easier
and more effective.

For mood boarding and inspiration gathering, I've been looking at milanote
since it seems to be feature-rich. Though the fact that it's closed-source
and a paid product is a bit of a bummer, I'm open to giving it a try and even
paying for it if it proves to be useful.

For wireframming and quick prototyping, on the other hand, I have my eyes on a
dedicated tool called balsamiq. As far as I can tell, it's purpose-built for
this; and it's also paid and closed-source, but given its niche nature, I have
high hopes for it and I'm willing to give it a try.

What comes next

This whole first part took me longer than I had anticipated, and the project
was put on hold for long periods of time due to a lack of motivation and plain
old laziness. But I'm proud that I managed to drag myself to finish my vision.

Next, I will share with you the process of moving this low-fidelity prototype
into a full-fledged design, for which I'll be using penpot as my design tool,
just because I hate figma and penpot is open source, which gives it extra
points in my book 😝.

Hope you liked this little story and see you on the next one!