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.

SPCA NZ Adoption Research

Essential information 

• If you wish to adopt a kitten or puppy, it is preferable, but not necessary, for someone in your household to be home during the day to supply regular small feeds and for socialisation.
• All cats and kittens, dogs and puppies available for adoption have undergone a thorough veterinary check-up and are approved by our veterinarians.
  To adopt a dog, you must have a fully fenced property to decrease the chance of the animal straying.
• All animals are vaccinated and treated to eliminate fleas and worms.
  The temperament and behavioural habits of all animals are thoroughly tested to ensure that they are adopted by homes that will best suit them.
• SPCA Auckland maintains a very strict policy on de-sexing and neutering both male and female cats prior to adoption. This policy is strictly enforced as the Society's contribution to reducing the misery of unwanted animals.

How to adopt a cat

•  It is best to call us first on 09 256 7300 to check the availability of cats and kittens for adoption. At most times we have a good selection available, but the influx of kittens particularly is seasonal.
• Cats and kittens available for adoption may be viewed in our cattery at the Auckland Animal Village between 10am and 4pm, seven days a week. You are invited to enter the cattery runs to meet and become acquainted with the cats you like. Our cattery staff or our customer service staff at front reception will be pleased to assist with further information about any animal in the cattery.
• Once you have chosen your cat or kitten, please ask one of our cattery staff to help you though the adoption process. If cattery staff are not available, please ask for assistance from our customer service staff at front reception.
• You will then be asked to complete an SPCA Adoption Application. Our staff will assist you in completing it, if necessary.
• All cats and kittens must travel in a proper cat carry box. You can purchase one from our shop if you don't already have one and they can be used for future trips to your vet for vaccinations, etc.

How to adopt a dog

• It is best to call us first on 09 256 7300 to discuss the types of dogs and puppies we have available for adoption.
• Dogs and puppies available for adoption may be viewed only in the Dog Adoption Centre at the SPCA Auckland Animal Village between 10am and 4pm seven days a week.
• After completing our Dog Adoption Questionnaire, our Adoption Team will be pleased to share with you all the information that is available about the animal's background and to give you our assessment of its temperament. They can advise you and help you to select a suitable animal for your situation.
• Adoptees of dogs and puppies may be subject to a property check by an SPCA Inspector. This is simply to determine whether adequate fencing and kennel facilities exist. Our Adoption Team will arrange for an SPCA Inspector to perform a property check and the adoption process can continue after the Inspector's approval. You do not need to be at home when the Inspector does their check.
• We will contact you with the decision on the property check and if approval has been given, the adoption process will continue and an appointment made to collect your new companion.
• You will then be asked to sign a form to acknowledge your understanding of the full terms and conditions of adoption before you leave with your chosen animal.
• There is an adoption fee to be paid - you can call our Retail Team to enquire about adoption costs or discuss with a SPCA staff member during your visit.

How to adopt a rabbit or small animal

• It is best to call us first on 09 256 7300 to check whether we have the kind of rabbit or small animal that you are looking for available for adoption. As well as rabbits, we often have guinea pigs and occasionally birds, rats and mice available for adoption as companion animals.
• If a particular animal attracts your attention, please ask one of our animal attendants for assistance.
• Our attendants will be pleased to share with you all the information that is available about the animal's background and to give you our assessment of its temperament. They can advise you and help you to select a suitable animal for your situation.
• If you find an animal you would like to adopt, please note its Village Number, if available, and cage/pen number and make your way to front reception, where one of our Customer Services staff will assist you to complete the preliminary adoption process.
• You will be invited to complete an Adoption Application form. Our staff will complete it with you, if necessary.
• You will then be asked to make an adoption contribution and to sign a form to acknowledge your understanding of the full terms and conditions of adoption before you leave with your chosen animal.

How to adopt farm animals

• It is best to call us first on 09 256 7300 to check whether we have the kind of animal you are looking for available for adoption. 
• From time to time, chickens, goats, sheep, pigs, cows, horses and even donkeys have come into our care. There are stringent rules regarding adoption of these animals and our staff can advise you on these species.
• Auckland Council can advise on whether animals such as these are permitted on your property. An SPCA Inspector will also conduct a property check to ensure suitability for a particular species.
• If a particular animal attracts your attention, please ask one of our animal attendants for assistance. Our attendants will be pleased to share with you all the information that is available about the animal's background and give you our assessment of its temperament. They can advise you and help you to select a suitable animal for your situation.
• If you find an animal you would like to adopt, please note its Village Number, if available, and cage/pen number and make your way to front reception, where one of our Customer Services staff will assist you to complete the preliminary adoption process.
• You will be invited to complete an Adoption Application form. Our staff will complete it with you, if necessary.
• You will then be asked to make an adoption contribution and to sign a form to acknowledge your understanding of the full terms and conditions of adoption before you leave with your chosen animal.

Analysis - Existing Animal and Charity Infographics

Animal Testing

The integration of photography and graphic design in this infographic helps create sympathy and connection with the viewer. Successful hierarchy is displayed through the type, with the focal point of 'blinded, poisoned, killed' which we then connect to the 'Beauty Industry' and the rabbit image. The symbols alongside the impacting words helps us visually understand what is being done to these animals.  

Adoption

I think the colour palette of this infographic works nicely. In the case of charity or adoption, a more harmonious colour scheme is often more effective and welcoming to the viewer. It encourages them to read the facts and consider adopting or donating. The images and graphs are all nicely spaced and easy to read.

Whaling

Another harmonious infographic, depicting a serious message. Through hierarchy we understand that whaling is a big issue, and feel sympathy for the whale in the bandage. The facts alongside help provide a seriousness of how impacting whaling is. The overall colour scheme and design also suits, displayed under the ocean where whales live. 

Foster Pets

This infographic follows a timeline depicting the story of a typical foster parent named Julie. It outlines the typical and expected process of fostering a pet, and the self reward afterward. This encourages people, perhaps similar to Julie, to visit Pet360 and consider fostering a pet. The flat design re-inforces simplicity to the overall process, and the arrow line mimics a timeline or stages of progress. The visual depictions of the statistics at each stage are successful in conveying the message visually and quickly, without an overwhelming amount of text.

Turtles

The colour scheme of this infographic is relevant to the information and message portrayed. The green orange and grey relates to the colours of turtles, whilst the red is relevant to the deadly threats and protection needed for these creatures. Though there is quite a bit of text, it is alternatively displayed as an image so users don't need to read everything to understand the information. 

Peer-to-peer Fundraising

This infographic displays and explains the importance and facts of peer-to-peer fundraising. The visual imagery representing the data helps make this a successful infographic. Straight away the viewer understand the increase of online donations, and the percentages of  initiatives that drove people to fund raise previously. 

Infographics

Infographics are visual presentations intended to communicate complex information quickly and clearly. The devices include, charts, diagrams, graphs, tables, maps, icons and lists. The basic material of an infographic is the data, information, or knowledge that the graphic presents. Most Infographics are fun to read and provide valuable information.

Types of Infographics

Cause and Effect Infographics
These graphs explain causal relationships between various physical or conceptual stages; for example, the causes of the recession in the US and its effect on the global economy.

Chronological Infographics
Chronological infographics explain an event or process as it happened in time. Presenting information on a timeline enables readers to analyze the temporal relationship between various stages of a process.

Quantitative Infographics
Quantitative infographics convey statistical data to readers quickly and clearly. These graphics include charts, bar graphs, tables and lists.

Directional Infographics
Infographics can navigate readers through information. Numbers, symbols, icons, diagrams, graphs, tables, arrows and bullets are used to communicate information.

Product Infographics
Product infographics can be seen on notice boards at factories and corporate offices.. They can also be used by dieticians and in cooking schools to convey key procedures. Combining images with data makes it easier to comprehend large amounts of information in a limited space.

Analysis- UNICEF Tap Project

The UNICEF Tap Project is a nation wide campaign that provides children from impoverished nations with access to clean water. Alongside the project they created a successful responsive website, allowing anyone to donate money towards this cause and explain how the Tap project works. 

Desktop

Tablet

Mobile

The overall design of the site is timeline/ scroll based, totaling 5 sections of information. This allows a quick and easy donation process, with the user still learning about the project and current statistics relevant to the to phone and water usage. This furthermore engages and encourages them to donate to a good cause. 

The site appears very similar to a giant infographic, containing minimal text and alot of imagery to explain and depict statistics. The difference however being that the site contains dynamic data through its ever changing statistics.

For my project I plan on creating something similar, where I will not create the website but just the adoption branch from the website. It will explain the adoption process and allow the user to donate and view current animals available to adopt and donate towards.