Tabby Cat Rescue
Category
Responsive Static Website / Web Design & Development
Tools
Figma · HTML · CSS · Responsive layout · GitHub Pages (hosting) · Midjourney (AI image generation)
/
/
A clean, modern Framer template designed for creative studios and businesses. Built with flexible sections, smooth interactions, and fully editable components so you can launch a professional agency site quickly and for free.
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.
