DEV Community

Tiago Rangel
Tiago Rangel

Posted on • Originally published at blog.tiagorangel.com on

Making my BETA website design

Step 1. Font selection

To begin this project, I carefully selected two fonts: Playfair Display and Inter, which I felt captured the modern and beautiful aesthetic I desired for the beta redesign.

Step 2. Prototype in Figma

After that, I started making a prototype in Figma with a design that was clear, organized, and fast.

The results were satisfactory, and I liked the design. The prototype website featured my logo in a small font at the top, a header, a description, projects with a Show More button (a significant upgrade from the original website), and a slider with social links (another significant upgrade).

The resulting figma sketch. Looked quite nice, for me!

Wow, for me looks nice! Now, the most difficult part: make it work. As usual, I coded everything on Glitch.com: It's a nice interface, with autosave, and HTTPS domains, and works fast.

After working some time creating the initial preview with Glitch, I got an honestly nice result:

The HTML+CSS+JS website I made

I was quite happy with the result. Splide worked well with the slider: some small customization and I was good to go.

Step 3. Make it work

I added multiple things to actually make the website work:

  • I added a title animation (the one saying "Howdy"). Moving letters provided some outstanding ones, and were easy to integrate. I decided to go with #7. I also added a waving hand APNG from emojipedia.

  • I also added a language picker

  • I connected my spreadsheet with data to the website (see this post)

  • I also added much more features and I am adding more features, so check out my website!

Top comments (0)