Homepage concept for Rescue Me theme
So, as I said in my previous post about my Sassy Nautical Theme, I’m trying to push myself to get into general public themes instead of themes that are designed or tweaked for just one customer. I find the process to be a good “workout” for both my design skills and for my coding skills. There is a different process you have to go through to design something that potentially everyone can use. After chatting this weekend at WordCamp San Francisco with other theme designers, I realized that people will use your theme in ways that you never intended. The question: “How to design for the user who is going to use your theme in ways you didn’t foresee,” has been banging around in my head for the last few days.
This shouldn’t be a shocking revelation to me since I’ve modified themes so they work differently or for a different clientele than it was designed for. I think it’s just a great exercise in trying to not pigeonhole your design process to only fit one situation. You need to design for your theme to be as flexible as possible so it can fit needs that you don’t even know to be addressed.
This brings me to the newest theme that I’m working on. Since my last theme that I did was blog-centered, I wanted this site to use WordPress as more of a CMS instead of just a blogging platform. My last theme was to help me learn to use Underscores and Sass, so my goal with this theme to push me to learn grids, better use of categories, and coding for multiple header/color palette options. Like I said, I’ve mostly designed custom sites, so this will fill in the holes in my education.
The Back Story
I love my dog, Professor Snugglesworth, and we have thought about getting another dog so he has a playmate. So, I’ve spent more time lately looking at rescue organizations and breeder pages online and I have to admit that they aren’t all that great. Most of these organizations have no money, so they can’t afford great sites. I recognize there is a need for a solid free well-designed theme for rescue organizations out there, so I decided to make it my new project. I want these organizations to spend their money on the animals, not their website.
So, the volunteers that run these organizations aren’t always tech savvy, so I need to make the theme function easy to understand. These organizations need a site that displays images of their animals quickly, as well as basic information about gender, breed, age, etc. There also needs to be a way to display additional information about the dog if people want to learn more about them. It seems that most organizations use Petfinder to list their animals but also must have their own website where you can fill out an application.
Here is my current concept that I’m working from. I wanted to play with illustration a bit since I haven’t needed to in a while so I drew out some cute dogs, brought them into Illustrator, outlined and colored them. I also want to do a cat version in blue. I want to try to have the theme all in white, gray, and black with one color accent. In the case of the dogs version, it will be green and in the case of the cat version it will be blue. I want to see if I can code it in such a way that the user can pick the accent color and then change out the header image to being whatever they want.
Functionality of the gird system
After lots of thought, I’ve decided that the grid page that shows the animals available for adoption should be the post thumbnail featured images of the posts. The question is how to pull the posts. The most obvious answer is to use custom post types, but I’m not a fan of them because it breaks the site if someone wants to change themes later.
So my current solution is that the homepage only displays posts that are in the category “homepage” so that the website can still have a normal blog that just shows all the posts minus this one category. This causes a little potential confusion if the user wants to not show the animals on its homepage but I figure that if you are looking for animals to adopt, they should be front and center on the homepage.
I also put a “adopt now” button at the top that can link to their application process page since I find that sites are really bad about burying that page in their site. Also, I added a search bar at top so people can quickly find the animal that they are look for.
The problems I foresee in this project is setting up a good responsive grid system. I’ve been picking people’s brains to see what they use and there is no consensus at the moment. Bootstrap was popular as was making up your own system. I’ve looked into Blueprint for Compass, but there isn’t good documentation of how to make it work.
Anyhoo… This is my current project. If you have any ideas, I would love for you to let me know. I’ll keep you updated on my progress.