I decided I would design it on Photoshop, as that is what I learnt to do it on at my placement. I figure it is best to use this, as it is what industry use at the moment.
I wanted a double navigation to have a hierarchy of information.
I tried shortening the navigation to see how that would look, but it looks unbalanced
I tried the navigation bar shortened to wear the content is, but it doesn't feel like a proper navigation - more of a widget.
I lengthened it which I much prefer.
I also added some text and a black gradient at the bottom of the header for content.
I really didn't like the image I chose, so I picked another one which I think works better. The orange contrasts with the green.
I also scrapped the black gradient in favour for a box. This makes it more different to the wwf website, and fits in with the blocky layout of the nav.
I also added slider arrows. I changed the lorem ipsum into content - advising users to read more of the oranguatans story - would lead into specific page of project timeline.
I added more of a black gradient so the title stood out more against the photo.
I made the top of the header full opacity, and the 2nd nav 90% which I prefer.
This is what I have so far - I am happy with how it is looking up to now. I feel like it flows well, but I need to add the illustrations underneath the hero image to give it more personality. I wonder if it looks too green right now.
I added a section for 'what we do' so users get an insight of the charity. I also put 'latest stories' so users can get an idea of the type of content the timeline/website has to offer. I have tried to keep it as simple as possible so it is easy to understand. I feel like the 'why we need your help' section needs to clearly state why you need to donate as there isn't anything else on the site that tells the user about donating/adopting aside from the buttons. I am wondering if it needs more calls to action?
I finally thought of the content for the top and decided on 'Why Adopt a Primate?' as it gives users reasons on why to engage with the site.
Here is the final page.
When doing the other pages, I realised it would be more consistent if the background colours were swapped around, so I did that:
Project Timeline
I decided to start working on the project timeline now - I wanted to wait until the crit to see what people thought I should put on the remaining part of the home page.
I began by changing the slider image - I did consider whether an image slider was necessary on this page - but I think it makes it more consistent across the other pages. I changed the content to say the page name and what it's about. I feel like it is too small here though and out of the way - I will try this in other places.
I also wanted to add a filter to the page, so that users could easily find what they wanted when there is a large quantity of content. I wanted to sort it through the type of content and through species.
I began by having the heading 'sort by' on one line, and the categories on a 2nd line.
I tried moving the arrow to the right as it didn't sit well next to sort by previously. I also changed the cross into an arrow, so that it shows the user it would slide up and down.
I then tried it back next to sort by because it was too out of the way on the right hand side.
This is how it would look closed with this layout
I then tried it all on one line to save space
I then tried having sort by like this, which would go at the bottom of the hero image.
I decided to put the filter into practice, and placed it on the header. I think this works the most so far.
I also moved the content on the hero image, as I didn't feel like it stood out enough previously. I'm still not sure if this is the right place for it, but an improvement I think. I changed the colour so that it stood out more against the green background. I added a white gradient behind the title so that it stood out more.
I started making the petition section. I wanted it to be full width so that it matched the rest of the page. I started by trying a big image background.
I felt like that perhaps didn't match the rest of the site, and was a bit too distracting, so I divided the section into two. I feel this is laid out better.
I added a goal bar underneath so the user can visually see how much has been signed.
I noticed that two photos were on one side and looked a litle unbalanced.
I tried this layout where the images were on opposite sides, which worked better, but it then clashed with the blog so I reverted it back.
I also wanted a section for the blogs, and this is the layout I thought for it. When the user clicks on the arrow, the page will slide down and more content will show.
I decided to start working on this section, as it's the last part of the page to do. I thought of the five important things that show how the charity help the primates.
I started drawing icons on Illustrator that match the text.
I also tried adding a splatter of colour behind them, by using the brand green. I realise this doesn't look very clean..
I tried it with the background colour on Multiply which works better.
I tried a few different splatter patterns.
Here is the final page:
Contact
I started working on the contact page, and thinking what people would want from this page. I decided to use a picture of a map of where the office would be, so the user can visually think where it is. I tried to keep it all the same layout as the rest of the pages.
I decided to have a section where you can subscribe to the timeline updates, giving more engagement
Here is the final contact page:
Primates
For the primates pages, there will be 5 different ones, specific to each primate. I made a call to action on the header so people can go to adoption if they want.
I wanted to have an overview of the chimps at the beginning of the page.
I also found a realistic petition I could add. I just want this page to have everything to do with chimps that is on the whole website, inc news, petitions etc.
I started to build up the content that was needed in the same layout as the other pages.
I changed the latest stories to Chimpanzee related.
Here are the icons I made for the Quick Facts section. These will stay the same on each primate page, just the content will change.
I also created a secondary navigation for when the user clicks on Primate. This will just slide down.
Here is the final page for Chimpanzees:
Adopt
I decided the adopt/donate section should be on separate pages.
I started by making the form that would need to go on the page.
I tried the form over two columns, but it just looked too boring and wordy.
As it is a step process, the first one is selecting which primate you want to adopt. The user just clicks on the one that they want, on the Gorilla image you can see what it would look like when selected.
I also altered the form, so that there is only one column of form. This led a big white space, so I filled it with an image, which I think matches the rest of the site then.
I had to make the form longer due to the amount of content that needed to go in. I also used the same arrow that has been used throughout the site when I needed to use a drop down menu.
I then started on the third step, using the same layout as the 2nd.
I added what cards they would accept, and a button which goes on to the next page. This just takes you to your bank and confirm the payment process.
Here is the final adopt page. I think it has everything you would need to know about adopting a primate on it, and is easy to use.
Leave your comment