Building my personal website - Part 2 - The design

ayrtonvwf

Ayrton Fidelis

Posted on March 11, 2020

Building my personal website - Part 2 - The design

Oh boy, here comes a tricky one.

As stated on the previous article, I've looked for content guidance, but proactively avoided any design inspiration. Even though I'm not a designer, I wanted to make this website as mine as possible.

Performance was a concern from the very beginning: I avoided using images as much as I could and used a pretty common font-face from Google Fonts, so that most users would have it cached already. You guessed it. It's Roboto.

The first thing I designed was a logo. I didn't know at that time, but it showed crucial on shaping the website as a whole. The final logo turned into something really simple: a colorful version of the website's domain.

Now we've got to a delicate point.

What the domain??!?#!%*?

Ok, I'll say it out loud: ayrtonvwf.dev.

Ask your mom to go to this website and watch her never being able to type it correctly.

The .dev part is pretty obvious, although non-dev folks would have a hard time believing that they've got it right.

"What? .dev? Is that a thing?"
ā€“ Non-dev person.

I've heard it a lot already, and it's not even deployed.

ayrtonvwf? My name concatenated to my initials. I've used it as a username on every social network since I started interneting. Easy for me to remember and it won't ever be taken by someone else before me, but it's a nightmare for other people to remember and that's a serious accessibility issue.

But, at the end of the day, I feel that it's uniqueness is what makes it work. It stands out. Most of the people will only click on a link rather than typing it, so I guess it's not a total disaster.

It's a bad decision that I don't regret.

Mostly important: I've chosen it in less than a week.

Don't start with a big bitmap image so that the first impression of the site will load instantly

That was my first challenge when I opened Figma to start the design. I've failed.

The user should understand right away that this website is about a person, a developer, rather than an enterprise or a single product. It felt so personal with a picture of an actual human being that I couldn't come back.

It feels like many websites glued together

It does.

The layout consists of the following sections:

  • Me
  • Personal Project 1
  • Personal Project 2
  • Contact info
  • Footnotes

Each Personal Project section feels like a separated website embedded into the main one. The first project is about security, so it feels bold and strong. The second one is about a lightweight layout, so it feels light and minimal.

In both cases, it's not me, a developer, talking about a product. It's the product presenting itself to the newcomer, with it's own personality and focusing on it's own features.

Building these so-different sections into my website is an arguable decision that I'm proud of making in less than a week.

It works.

The final design

It's finished.

I'll surely change some margins and font sizes as needed while implementing it, but it's finished. In less than a week.

One of my biggest challenges was not spending a whole month on every detail. I'm trying to finish a step and move to the next one before I get caught into a never ending loop. It's working.

Next step: Implementing a static website with no JS (and refusing to make it less of an website because of that).

šŸ’– šŸ’Ŗ šŸ™… šŸš©
ayrtonvwf
Ayrton Fidelis

Posted on March 11, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related