Ayrton Fidelis
Posted on March 11, 2020
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).
Posted on March 11, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.