Initial iBook Ideas

For the ibook project I got two ideas on the visual style straight away,  the first being a explorer style scrapbook on the canyon so it would look like it was written by someone who has explored the area. The second idea was to use background images continuously across each of the chapters or headings. 

To keep a consistent theme with the website I decided to look into the continuous background image further as it is more in the style of the website. After a little bit of experimenting in photoshop it looks the idea would work mainly down to the large number of massive images that can be found of the grand canyon.

The photos would look something like this with information going across each of the pages on the same subject. Then when you get to a new chapter or subject the background image changes. I think it's a nice way to use some of the great images of the canyon and also separate the information in the iBook in a visual way. 

iBook interactivity

One of the first things I did whilst planning my ibook was think about the what interactivity I could involve to make it interesting and a  true iBook. I looked at the different widgets available both in iBooks author and a website called Bookry, then looking at the types of content and media I had I could start picking out widgets that I thought would be useful and add something to the iBook. 

I collected the different widgets into a list to use in my pitch later on. With the widgets on the lists I thought I could. 

Google maps - Shows where the grand canyon is and let the user explore the area, giving a feel for how big it actually is.

Image explorer - Put in big images for the user to explore possibly labelled so the information is presented in a more visual way. 

Panoramic View - Let the user explore a panoramic view of the canyon mainly for visual reasons but would gains give and idea of howe big it is and could link in with the geology section for example. 

Image Over time - Show the process of erosion using and image over time as I would be able to go through the changes and stages. 

Youtube - Involve videos that are helpful or relevant to the content in the book. 

Image galleries - Let the user flick through galleries with information also presented could be used on animals or rock types for example. 

Labelled images - Agains lets the suer explore a section of the canyon but lets me label certain parts to give the user information. 

Pitch Feedback

After pitching to my idea to the class I received some useful feedback on the website and the ibook. The overall feedback was that the idea for the website will work but need a little more developing and some of the graphics need a few tweaks. So this was good a reassured me that my ideas would work and that I would be able to achieve some of the harder features on the site. Such as the changing background. 

For the ibook I had not done as much work as I had done for the website so it was harder to get feedback on. However the base of my ideas for look and interactivity were there so it was useful to get some opinions on these. The idea to use continuos image across each of the chapters was liked and hopefully this works when I come to try and design it. Also explaining the types of interactivity in the site showing widgets etc. was useful as I got people views on what would be useful and wouldn't. 

Overall I think it went well getting different opinions ideas on the whole I think people they would work and there were no real major issues. The different opinions also led to some suggestions that I could play around with such as changing the opacity of some elements, little changes to graphics or a suggestion for an ibook widget. 

Mock - Up

Whilst making my wireframes for the Project I thought it wold be hard to see how they would look or work on an actual site. So with this in mind I decided to create and mock-up of the home page in as much detail as possible to show how I think the website will look. 

Here it is with all of the elements that were in the wireframes, you can see the background image is the main part of the site with the continent and there elements being built around this. In this mock-up I haven't experimented with the opacity of the boxes on the page yet but this is definitely something I will look at. 

The idea on the i=homepage is that you can browse through some more background images just to make the site a bit more unique and visual. Going with this idea the box above the text area is so the users can hide the text box to look at the image if they want to.

Overall I am happy with the mockup and think the colours and the fonts mix really well with the picture of the grand canyon in background. As well as this it gives a clearer idea of how my wirer frames will work.

Colour Choices

For colours on the site I did originally play around with an stronger colours scheme but after some experimenting and mock-ups I couldn't really find anything that worked or that I liked. So I began taking colours off the images I will be using which ended up working really well. The colours linked in with the backgrounds and it looked more complete as a site, well mock-up at this point. 

I ended up with a scheme which had different shades of browns and greens with a little bit of blue also, I decided to use the darker brown for the main colour of the site using it on the backgrounds of the nav, the logo and the content areas. This meant that white text worked really well.

The other colours I thought I would use if needed on the side for example on hover effects or buttons themselves, just so I had some options whilst designing.

Background Photos

As I was using a background image on my site I looked at a bunch of examples of how other website have used background images. To start with I found this website based on wedding which uses the image as the main part of the page with borders on the top and the bottom of the page for navigation etc. I like this and think it is a good idea as it stop people getting lost on the site within the images for example it also make the text easy to read.  Other that that the images are really good quality and slide along giving it a different feel for each wedding but the borders stay the same throughout and as I said I like this as people are less likely to get lost. 

The second website here is a lot more similar to the content of my site and I thin this had a nice style to it, using a photo or postcard feel to separate the wrapper from the background. Which looks really good but is also practical and makes it easier to layout the site. The site has three of these each of a different area and each one works really well. The footer at the bottom stays throughout the site and similar to the last site just gives users another option to navigate or find out where they are on the site. 

The final site I looked at used a background to cover the whole page like the other but did not have clear borders or navigation with the text boxes being put on the image which I like the idea of but the boxes here I feel needed some consistency in the colour like the one on the right of the page to make the text easy to read. This is something I need to watch out for in my designs as with all of the content I am going to have on my site I need it to be easy to read to the users. 

These are a few of the examples I looked at but they gave me some good inspiration for what to try on my and also what to try to avoid. 

Wireframes

For my wireframes I looked at and thought a lot about websites that use big background images I wanted to do something a little bit differently to the examples I looked at. Instead of just stoping the image or fading it by using a wrapper I wanted to build around the background image. I experimented a little with different images and layouts and finally found one that I thought showed of the background image really well.   

This is the wireframe for how I want the site to look at desktop the white space being the big background image. As I said I wanted to build around it and show it off as much as possible. The navigation goes on the top of the page with the logo's coming in off of the right hand side. Then again on the left I am going to have a text box and a gallery in a two column layout. With the footer at the bottom. The gallery will be links to the other pages and the colours will fit with the background image and I will play around with there opacity to see what looks right. 





At tablet the layout is pretty much the same the elements of the page come closer together leaving less space for the image to show. Another reason to use some sort of opacity change on the content and logo's etc. 


Finally on mobile the navigation will split into two rows of two so everything fits nicely and the logo will sit directly under these. The content will go to a single column layout for the gallery and the text box will fill the screen making it easier to read. 

Style Tiles

What is a style tile - Before the project I had never heard of a style tile but it turns out they a very useful tools for this type of project. They are basically a canvas where you can put all of your final design choices for your project where everything is visible and it is clear to a client what your ideas are for the product. But at the same time it is not as developed as a mock-up so it gives you more freedom to play with the choices on the tile. 

So this is the my style tile for the this project I put all of my final choices and image idea onto the tile to try and give a feel for what I wanted my site to look like.  With examples of text, buttons, logos, colours and the types of background images I want to use on the site. Overall I think it gives a good feel for my idea of the site.

Logo Designs

For my logo I wasn't sure where to start to begin so I brainstormed a few ideas and just tried to come up with something that links to the grand canyon or Arizona and is interesting to look at and unique. So I decided to base the little graphic off of an image I had been using on the homepage of the site.  Just using one of the canyon mounds to make it a bit more unique and visual.

The idea for the hand written style font came from looking at some looking at welcome to Arizona or grand canyon signs much like this one, and whilst it is not the same font or massively similar it just reminded me of these types of signs. With the hand written personal feel to it.  So I played around with it a little and as I have said in another post I thought that it worked really well with the Futura font on the grand canyon text.

I then mixed it with the other logos I had been making for wonders of nature I had a few of these which I had mocked up seen here. But I finally decided on this one as it just a little bit of styling compared to some of the others so I thought this would stop the logo being to strong.  I wanted to keep the white colour theme going which worked best on this logo as well,  I combined it with the grand canyon logo I had made just by adding a little white separator which I thought balanced it out well.