Rationale

For this brief I created a responsive website for the Wellington SPCA, that focuses on donation and the adoption of pets. It would act as more of a promotional tool, branching off their current website to encourage as well as make the donation and adoption process easier for anyone interested. 

The site I created appears friendly and inviting, containing minimal written information often supported by visual imagery. I added subtle animation where necessary to entice and excite viewers to continue through my site.  I used a blue and white colour scheme - reflecting the official New Zealand SPCA blue currently used, whilst creating a harmonious impression so viewers don't feel pressured. My photographs support this, and help add an element f sympathy to the viewer encouraging them to donate or adopt in a less compelling way.

The dynamic data of my site is sourced through images from flickr, which appear updated on my adoption website section. The photographs of the animals are pulled directly from the Wellington SPCA photo album, and displayed onto my site along with the animals name and adoption stage. I also imply dynamic data through my statistics page, which I sourced from a New Zealand website. 

If I worked on the site further, I would add more pages for each of the sections and treat it as the main website rather than a charity branch section. I would also push the dynamic data and responsiveness, having it work on smaller mobile screen sizes and source data through my facts and statistics, rather than imply it. 

Mobile and Tablet Testing

Throughout this assignment, I have been testing the responsiveness of the site on my desktop computer as well as a tablet and mobile phone. It displays nicely on all three, and through this testing I was able to assure it continued to work.

Desktop

Tablet

Mobile

Development

Currently, completed every section of the website with only a few touch ups to do. I have sorted the donation section, creating buttons for users to press and chose their amount. The dynamic data is working, and updates the current felines, canines and pocket pets that are available for adoption. Unfortunately, the descriptions of the animals (including age and personality) are unaccessible from the image source, but the name is which I have linked to appear underneath the images of each animal. 

Development

So far, I have coded all of my content nicely for desktop and now it is just a matter of touching it up for mobile and tablet. I have also decided to create a drop down menu for the mobile view, when you click on the condensed menu icon-

Animation

For my stats page I have decided to add some subtle animations, to engage the viewer more. 

I felt that by only making subtle animations it will still maintain the viewers focus on the text, whilst adding some excitement and attention towards it. These are the templates  I created before animation-

Dynamic Data

 In my website, I will have two sets of dynamic data. The first is in the 'stats' page, and it will act more as an implication of dynamic data, although the facts are currently up to date. 

I sourced them from this website, and made images to sit alongside them to reinforce the message, and have them displayed visually for the viewer.

My second set will be in the 'adoption' page, and will source its content live from the Wellington SPCA's current flickr photo adoption albums.

Currently, their website links out to flickr and the viewer can browse through the flickr pages. I think it will provide an ease of access for the viewer if a live feed is directly in my website, so they don't need to leave the site. With an API key, I can have them streamed onto my website with any details they currently hold on flickr.

Facebook and Twitter

Because social media plays such a prominent part in marketing and business nowadays, I decided to link the Facebook and twitter pages the Wellington SPCA currently has. It will also help gather awareness, and if users have any further questions it encourages then to post them.

Wellington SPCA's facebook page

Wellington SPCA's twitter page

Development

So far, I have managed to put in majority of my content I sourced from the SPCA Wellington website, and placed it into my site. My next goal is to arrange it all so it appears like my wireframe, and start to add dynamic data through recent statistics on the stats page and perhaps an update of pets through the adoption page. The only changes I have thus far considered that differ from the wireframe, is adding animations to the facts page to make it more enticing and exciting for the viewer, to further encourage them to donate.

Responsive Interface

After coding my content into the site, my first goal was to make it change form depending on the device it is being used on. I created an extra css styling sheet for the mobile interface because it has alot of drastic changes, and loses alot of content. When the browser reaches a width of less than 481px, it will project the mobile layout. As for the tablet, I set the margins on the desktop css styling sheet to automatically get smaller in proportion to the size of the screen, so it will simply have smaller margins when on a tablet screen. The tablet dimensions I referenced were 1024x768px, which is a standard iPad size.

My screens-

Desktop

Tablet

Mobile

Audience

Target Audience
My site is directly aimed at those interested in adopting a pet or making a donation towards the Wellington SPCA. Because its built to branch off their current website, it is built minimal and direct ideal for getting to the point of charitable donation or adoption. The dynamic data feed also helps it keep up to date with the latest available adoptions. 

Secondary 
People wanting general information about Wellington SPCA and helping them in some way are secondary audiences to my site. Not everyone can afford to donate, so even if they didn't have any intention to hopefully my site can help encourage them even if its not alot. It also describes other forms of donation, such as giving a gift or volunteer work which people may be interested contributing in. 

Other
This site may also appeal to anyone interested in pets or owning one, people who may have lost or found a pet and anyone interested in charities generally.  

Wireframe

These are some wireframes I created using Adobe Illustrator. This gives a structural template of my content and imagery, and I now have a clear and visual idea of the interactive elements and steps needed to code it together.

Each section of the page follows a similar composition structure, to allow ease of navigation for the viewer. It also makes it easier to establish the interactive elements of the page, as they are consistent throughout.

Moodboard

Here is a mood board I have created to help gain a visual aesthetic of the website, and an overall idea of the layout change between mobile and desktop. I  decided to analyse the current Wellington SPCA website and use its branding as reference to the elements of my moodboard.

Flat Design

Flat design is a simple, graphic style common in UI, software and Web design. In the past, designers at a particular focus on showcasing their skills by portraying flashy illustrations and animations that supposedly wowed their users. Then skeuomorphic design became the trend, attempting to bring real life to the screen with realistic textures and real object characteristics. Today, flat design is popular and sought. It opposes all of these 'artificial' design techniques, in favor of a more simplified, classically digital aesthetic. 

Examples of web flat design-

Paper Prototype

Here is a paper prototype I created with Desktop, Tablet and Mobile phone templates printed out on paper to help map out my ideas more clearly. It provides me a better understanding of how the website will work and its navigation. In terms of responsive design, the desktop and tablet maintain a very similar layout. The only difference being the negative space that surrounds the desktop left and right sides. However the mobile has a different grid, and elements of the page will be stacked vertically rather than horizontally as displayed in my prototypes.

Desktop:

Tablet:

Mobile:

Difinitive Mindmap

Here is a finalized mind map I have developed for my Wellington SPCA site. As I am describing basically a process, I have decided to have the home page a scrolling page. This will provide ease of navigation, as users will be able to simply scroll down for information rather than go through alot of pages to reach their desired destination.