Animal Rescue Website Redesign

In a world with boatloads of disagreements and conflicting opinions the one thing I’m sure almost everyone can agree on, is a love for animals... especially dogs. In my opinion, dogs have made millions of American homes friendlier and happier living spaces with just their friendly and furry faces. Therefore, when clicking on an adoption or animal rescue website, I’d want those same feelings of joy, comfort, and warmth to be relayed to be from the page. This is why I’ve chosen to redesign the Brookhaven Animal Rescue page.

The original site can be seen below. When you enter the site the organization is poor and there is little site design to appeal to viewers. These are the two main things I hope to fix in my redesign.

Original Site

My first step in redesigning this website was to envision what I wanted the theme of the website to look like. This meant creating a mood board.

Mood Board

A mood board is a collage or a collection of images that represent a visual display of your ideas. Mood boards are most helpful when starting a project or a pitch in which you need to communicate your ideas to others. This helps you explain them in a way that is not only easy to explain but also easy for others to imagine.

In this mood board, I made sure to include the color palette I envisioned; including neutral tones including light orange, tan, black, white, and grey. I also went for a warm and cozy look in this. I like the look of black simple typography going along the page and I think it matches a simple, friendly vibe.

Color Palette

These two color palettes are what I want the website to be based on. Although I’m leaning toward using the first one on the left, I wanted to include both to show the process behind it. In order to develop a color palette I used a site called Coolers which allowed me to choose colors from within the mood board I made. By doing this, I was able to stick with the ideas I already had and continue to grow from them.

I find the neutral tones in these color palettes very appealing, soothing, and fitting. They remind me of some of the most common colors of dogs. Additionally, the colors are easy to understand along with the context since they match.

Site Map

Upon developing a site map, I took the sub-pages that the original website already had and expanded them. For instance, I expanded the events tab to include an events calendar to be easier for viewers to see. In addition, I also made the sub-pages more concise so it was less jumbled and cluttered on the home screen. For example, contact us is now also under the about us section. Now, as you can see below, the only sub-pages are Home, About Us, News and Membership.

Wireframes

For the last step, it was important for me to have a vision of the website design layout. These are 3 wireframes of 3 pages on the new site. I chose to layout the homepage, the about us page and the adopt page because those seemed to be the most important ones.

See the wireframes below.