Tabby Cat Rescue

Try It

Type: Responsive Static Website / Web Design & Development

Tools: Figma · HTML · CSS · Responsive layout · GitHub Pages (hosting) · Midjourney (AI image generation)

Year: 2024 Mar

Intro

Tabby Cat Rescue is a responsive static website designed for the stray cat shelter “Tabby Cats Rescue”. The site brings together six core sections, homepage showcase, cat adoption listings, organization introduction, events, volunteer recruitment, and donation support, so visitors can quickly understand the shelter’s mission and take action. The UI and page structure were designed in Figma first (including a rounded / circular visual direction), while most of the website imagery was generated with Midjourney and curated to match a warm, friendly tone. Built with pure HTML/CSS and hosted on GitHub Pages, the project focuses on clear information architecture, consistent visual language, and accessible browsing across devices.

The Problems

In the early stage, the biggest challenge was turning a school brief made of dense, text-heavy documents into an actual website structure. The requirements were scattered and hard to read, so I needed to break the documents apart, re-organize them, and decide which information belonged on which page—before I could even start designing layouts. After the content was categorized, the next problem was translating that information into a coherent visual system in Figma: defining page hierarchy, deciding what text to keep or simplify, and building a rounded / circular design language that still felt friendly and trustworthy for a rescue organization.

I also needed the visuals to feel cohesive across the whole site, so generating and selecting Midjourney images introduced another layer of iteration—prompting, curating, and adjusting composition so the images matched the UI tone. Finally, the development stage introduced a practical challenge: the layout that looked clean on desktop could become messy on mobile. Different screen sizes caused spacing, alignment, and typography issues, requiring careful adjustments and responsive rules to ensure the site remained readable and well-structured on phones.

How I Solved Them

To solve the documentation-to-design gap, I first “decoded” the brief by splitting the original documents into smaller information blocks, then regrouping them into a clear sitemap that mapped content to the six pages. This made it possible to design with confidence because every section had a purpose and a destination.
Next, I iterated the design through multiple rounds in Figma—starting with low-fidelity layout planning, then moving into higher-fidelity page design—refining the rounded / circular components (buttons, cards, section containers) until the pages felt unified and easy to navigate. In parallel, I generated the main site imagery with Midjourney, then curated and adjusted the selection so the visuals stayed consistent in style and supported the content rather than distracting from it.
For responsiveness, I treated desktop and mobile as two deliberate presentation states. I improved the CSS step-by-step (structure, layout rules, and breakpoints), tested repeatedly across screen sizes, and adjusted components so that when the layout switches to mobile, it reorganizes rather than “breaks.” After final debugging, I deployed the full website to GitHub Pages to generate a shareable online link that anyone can open and view directly.

(Close)

(Return to Projects)

Mar 2024