Concept & Inspiration
The Animal Crossing: New Horizons Field Guide was inspired by the sense of calm exploration that defines the game. I wanted to create a guide that feels like a traveler’s companion, something both playful and informative. My goal was to blend the charm of island life with the structure of a real-world documentation site, showing how web design can feel warm and personal while still being organized and functional. I chose Animal Crossing because of its strong visual identity, seasonal depth, and clear systems that translate beautifully into sections, like critter collecting, event calendars, and customization. It’s a perfect world to explore through design.
Visual Design Decisions
The visual language for this project draws from Animal Crossing’s cozy, nature-inspired world. I used a soft color palette of
- #DAECDE (leaf green)
- #AED4B7 (matcha green)
- #80C9D7 (sky blue)
- #A16D3F (burnt sand)
- #653A21 (cocoa brown)
- Gorditas for headers (friendly and rounded)
- Lato for body text (clean and readable)
Layout & Structure
For the desktop layout (1440 px), I used a fixed sidebar navigation to echo the feeling of a sturdy handbook spine. The main content area includes a hero section introducing the guide and five themed sections: island setup, crafting, critter collection, villagers, and seasonal events. Each section was structured to mimic HTML logic: headers, paragraphs, lists, and highlight boxes all align with their future code equivalents. The footer includes copyright info and two call-to-action buttons: “View Portfolio” and “Read Case Study,” styled as primary and secondary buttons for balance. This structure not only organizes information but also builds a strong foundation for coding in the next phase.
Responsive Design Choices
Designing for mobile (375 px) required simplifying without losing the guide’s cozy feel. The sidebar navigation transformed into a top navigation bar for easier access. All sections were stacked vertically, with reduced padding for better readability on smaller screens. Font sizes were adjusted proportionally, decorative elements were either hidden or scaled down, and buttons were expanded to full width for easy tapping. The result maintains the island atmosphere while ensuring accessibility and comfort across all devices. Each visual choice supported usability, reflecting the gentle, uncluttered rhythm of Animal Crossing life.
Reflection & Next Steps
This project deepened my understanding of how design systems translate into front-end structure. By designing each element with HTML and CSS in mind, I built a layout that’s both visually appealing and technically sound. If I were to extend this project, I’d add light and dark mode options to reflect Animal Crossing’s day-night cycle, to bring the world to life. Overall, the Animal Crossing Field Guide represents the harmony between design clarity, player immersion, and the joy of exploration, the same values that make the game so beloved.