meow manor — cms multi-page responsive website
summary
The inspiration behind this website stemmed from a previous branding project I had created based on the idea of a cat cafe and wine bar hybrid. I took this opportunity to continue to extend this concept by creating a website to go along with it. By using Wix, a free CMS site builder, I designed three pages for this fictional establishment: the home page, an adoption/resident page, and the menu page.
goals
I had used CMS builders before for casual projects, but I had never taken it seriously or crafted one with a brand in mind. I took this as an opportunity to expand upon my abilities to design a responsive webpage. I had never experimented with designing both mobile and desktop versions of something, so that was a challenge to figure out how to make my design work with both while retaining cohesivity.
design process & wix page builds
As with any project, I started out with rough low-fi wireframes before cleaning them up to make a med-fi wireframe for each page. The most difficult part of this process was keeping in mind that the entire web page would not be visible at one time. I had to ensure that I understood where it would be “sectioned off”, and how it would look when someone scrolled through it. To help me begin, I started with a blank Wix template, but I ended up deleting almost all of it and replacing it with my own designs.
* webpages have been zoomed out to show more
As I was building this site, I tried to keep in mind the design system of this fictional establishment. I knew I did not want it to be overly complicated or have too many baubles for viewers to become distracted by. I kept it stripped down, instead focusing on well-placed images and fitting typography. I wanted to maintain the blend of elegance and fun I had in mind when first creating Meow Manor’s concept.
I also tried to maintain the concept of not relying on WIx’s templates for this project. Aside from the footer, header, and the booking button, everything was designed and laid out by myself. The images at the top of each page were stock images, while every cat listed on the “adopt” page was lovingly submitted to me by friends and friends-of-friends!
final work
knowledge gained
Through this project, I gained more insight into how to build a responsive webpage. As someone who mainly works with print-based design, it was a learning curve to process how to design something that cannot be fully controlled. There were many things to keep in mind as I designed, as my website needed to be both functional and well-designed for viewing on both desktop and mobile devices.
Additionally, it was interesting using Wix. Even if I did not use their templates beyond a few bare-bones instances, it was enlightening to click on certain premade sections/widgets just to see how they were put together, and then use that knowledge to design something of my own.
