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).
Top comments (0)