Animal Crossing Portfolio

figmasveltehtml + cssjstalwind css

summary.

Ask almost anybody and they’ll say their Animal Crossing obsession started during the early stages of the pandemic. The same goes for me, and although the fervor has waned considerably since, it doesn’t change the fact that the charming game’s UI design is among my favorites!

The game’s visual style encompasses what I love and strive for when designing: immersive experiences that not only tell a story but are also intuitive and delightful. And so I wanted to pay it homage by interpreting its different UI patterns as pages for my portfolio.

See it live

design.

[ 01. Villager Dialogue ]

villager dialogue

To welcome visitors to the website, I wanted to greet them like the villagers in Animal Crossing did. I recreated the speech bubble and dialogue choices, and used @louie.ds630 wonderful artwork as my character portrait.

[ 02. Phone Navigation ]

villager dialogue

The NookPhone™ that your character uses acts as your main menu, allowing you to access various features in the game. It’s one of my favorite parts of the game’s design. The interactions and transitions were delightful and it felt like a proper smartphone within the Animal Crossing world.

For my portfolio, I used it as the main navigation. It’s not as efficient on the web as in the game, but in this case, it was purely for immersion and aesthetic purposes.

[ 03. Passport ]

passport

Another feature that was basically a 1:1 translation from in-game to portfolio website was the NookPhone™ Passport app. In the game, it contains information about the player and their island. On my portfolio, it’s a cute little “about me” section.

[ 04. Stamp Card ]

stamp card

In Animal Crossing, you can earn achievements through collecting Nook Miles Rewards. Milestones are tracked with stamp cards. I wanted to replicate that through using a stamp card to display a project, and using the slots for stamps to show the role I had in it.

The stamps may not have been as seld-explanatory as I wanted. A tooltip would help clarify each role.

[ 05. Post Card ]

send a postcard

Finally, another design and mechanic I love from the game is its letter system. You can send villagers on your island letters that help you build your friendship with them. There are a myriad of letter designs you can choose from so you can personalize your letter.

It seemed like a natural fit for a contact form. I created a couple of different designs for visitors to choose from.