Case Study
Animal Crossing: Summer Fishing Guide

A look behind the curtains of the Animal Crossing: Summer Fishing Guide.

Design Decisions

What design choices did you make and why?

Visual Design: For my field guide page, I chose a simple, minimal visual design that relies primarily on icons and text. Given that the field guide is about summer and fishing, I created a simple palette of blues that really drives the oceanic atmosphere in the design. For my palette, I mainly derived the hues from the hero image to maintain visual consistency and cohesion. While my tones of blue vary widely in saturation, they create a bold, cartoonish style that suits the Animal Crossing theme.
Layout Design: In terms of layout, I kept things pretty close to the template provided. I kept the sidebar at a consistent 300 px, as specified in the assignment, while experimenting with icon use and spacing for the link elements. In the mobile version, I simplified the icons and sections to a grid layout to reduce the space taken up by the nav bar, given its tight position at the top of the screen. However, I would have liked to play around with the nav bar on mobile if I had extra time to code it. Overall, my layout is fairly minimal and focuses more on usability than flashy display.

Summary: Simple, minimal visual design with focus on usability.

What was difficult to code? How did you solve it?

Mobile Nav Bar: I found it particularly difficult to code the nav bar on mobile. It was very hard to figure out how to fit all of my subsection links into a format that worked well and didn’t take up too much space. I still feel like nav on the mobile version of the site is somewhat incomplete and feels off. For coding, I had to ask Copilot for a lot of help and explanations on what made things work right. Overall, I think it came out decently enough that it is at least functional to use despite its visual appearance.
Icons: I also found the icons to be particularly painful to code. At first, I tried using the list-style-image function to replace the bullet points of my li elements with their respective images. However, I quickly learned that I could not adjust the spacing or sizing of my images when I set them within a list-style. After struggling with a lot of selectors, I turned to Copilot and Google to figure out the best solution for my problem. To fix the issues, I ended up setting my icons as background images within my elements so that I could freely play with scale, sizing, and positioning. In the end, I think it worked fairly well despite some minor visual placement glitches on small screens.

Summary: The mobile nav bar and icons were a particular challenge to code.

How did you adapt your design for mobile?

Mobile Navigation: When adapting my site for mobile, I struggled immensely with the nav bar. It was tough to fit all the content I needed into a small space without taking up too much of an already tiny screen. It took a lot of help from Copilot to even get my elements positioned right without breaking my entire layout. After a while, I reached a point I was somewhat content with and decided to invest my time into other parts of the layout. Overall, I think the website looks better on a desktop or a tablet than mobile overall, as the content fits far better on a medium to large screen. I would like to reapproach my navigation bar in the future.
Usability on Mobile: Otherwise, I tried my best to make the content easy to view for the reader within a flexbox layout. All of my main content, including the hero section, is responsive to screen size and shrinks/expands with ease. While there are some issues with the icons on particularly small mobile screens, the text stays legible. In that respect, I feel that my efforts to improve usability across screens were successful. However, there is plenty of room for growth and improvement when it comes to visuals.

Summary: While there were struggles, mobile responsiveness was fairly successful.

What did you learn about Flexbox or CSS positioning?

Copilot and Flexbox: Through my time coding, Copilot was very helpful in explaining certain elements of flexbox and CSS positioning I was not familiar with. In particular, my work with the li elements and positioning icons taught me a lot about using the before:: pseudo-element for placement. Alongside this, working with the nav bars taught me a lot about using media queries across multiple elements to ensure all content responds well. Overall, I learned a lot about working with my resources to resolve challenges with flexbox and positioning.
My Understanding: In terms of my overall knowledge of flexbox and CSS positioning, I think I could use some more time with it. I do not, for sure, remember every single selector or parameter for placing things. Copilot was something I relied on heavily for figuring out positioning, alongside Google. While the tutorials we completed in class were somewhat helpful, the amount of content discussed felt overwhelming and left me feeling like I didn’t fully understand the content. I think that this is a part of the code that comes with a lot of practice, patience, and experience building layouts.

Summary: Copilot was a helpful resource, yet more time is needed to learn CSS positioning and flexbox fully.

What would you add or change with more time?

Visual Tweaks:I would change so many things! I think in terms of visuals, I want to work more on fixing the weird glitch that appears with conflicts between my variable font and the border around my H1 text. I would also like to add the same decoration from my Figma document to my nav bar on both desktop and mobile. Icons in the mobile version could use some readjustment to fit with smaller screen sizes overall. I also think spacing is a bit off in my content sections, somewhat, but very minorly.
Content Changes: In terms of content, I would like to do more with my guide. Right now, it is not very descriptive and relatively simple. I would much rather have more detailed content linked to separate HTML pages, so users can find additional useful information. However, the specifications for this assignment were more focused on layout than on content writing. Overall, I would just like to make my guide more useful to a user rather than a repeat of basic info.

Summary: There is a lot that could be changed in terms of visuals and content overall.