Evaluation - Website

To be honest I am a disappointed with the way my website has turned out it just doesn't look like I thought or hoped it would. One of the main issues I think I have made for myself is spending more time planning and designing the home page than any other, and I think when people look at the site they will know and realise as it is so obvious more effort and designing went into it than another page. I think that if I had planned out the other pages and the ways I wanted to present the information on these pages I would have saved myself a lot of problems when designing and also got each page to a design level where I was happy with it. 

That being said I am happy with what I have learnt and can take away form this project as this was my first time hand coding a  website fully I learnt a lot on this side of the project. Coding both HTML and CSS which I really enjoyed and think will be very useful for the future, I also learnt about responsive website what makes them, how they work etc. which again will be very useful for the future. Planning and designing for a full website was also slightly different to when I last did it in a previous project. Also as mentioned above I have learnt that you need to plan all of your pages for a website and not just one otherwise it just becomes weaker and weaker as you add more pages. 

I also don't think that making as many changes as I did on the final day helped either as the changes were rushed so it could be submitted for the deadline. These changes were completely remaking the geology and wildlife page to lose the tab system and the image slider. Which I think these pages now look better but with more time could of become something I was really happy with. Whilst I know these changes needed to be made and make my website stronger I think I should have considered them and made them earlier so the pages would look a lot better now. 

Overall I am happy with my ideas for this project and what I have learnt form it such as coding, making it responsive, user testing, validating and jquery etc. However I feel that I could have made the website look a lot better in terms of layouts and structures and basically just a stronger final product. But i think making this mistake now in this project will make my next website or web based project a lot stronger. 

Validating my Website

I validated the code of my website using http://validator.w3.org/check, I put each of the html pages through the check and got a page like this one for each of the checks.  It gave me a number of error and warnings and also detailed this further down the page like this.

I then went through trying to fix the error in there code this was not difficult as the validator gave me a description of the error as well as the line number for where it was in the code. It took time to validate each of the pages and fix the errors, but at the same time it sorted out parts of the code and helped me find little errors that I otherwise wouldn't of. 

After making the changes to the code for example adding a missing close tag I revalidated each of the pages and eventually they came up green with no errors found. 

CSS - 

I also validated my CSS3 using http://csslint.net after pasting in and checking my whole CSS my results ok as seen here. 

The main issue was the 3 errors in the code so I wanted to make sure these were fixed. After going through the code and fixing the problems i rechecked the CSS and got 0 errors the warning were still there but this was mainly all around the order and the way I had written the CSS and as this was my first time hand coding the CSS completely I can take these warning forward to my next website. 

User Testing on my website

To test my website I out I did some small user testing asking 5 people 5 questions about the site, to see if they could navigate around, find information or links and also find it easy to use. 

The questions I asked were - 

• Can you find the rock types gallery ?
• Can you find the Red tailed hawk in the wildlife page? 
• Can you navigate to the wildlife page without using the standard navigation?
• Can you find the information on Erosion?
• How quickly can you navigate to the bottom of the history pages info?

I picked these questions as they tested out the pages and features of the site I wasn't sure about as well as seeing if my navigation worked and people could get round the site easily. 

The results were pretty good people could find out the information and navigate to it well and without getting lost so the basic structure of my website was working. The main issues I had was the tab feature as it did not load automatically as you click on the page this confused some people whilst answering question 1. Also the scroll boxes I had on the website did not work as well as I hoped and people found these annoying to use. 

Overall using testing was successful and gave me things to improve on before the deadline. 

Updated Production Schedule.

As I said earlier in the blog I would update my production schedule nearer the end of the project So here is a screenshot of how that turned out. I marked out what I hoped to achieve at different stages such as "finish the homepage". Overall I think I managed to keep on trakc and almost up to date with my schedule. 

The schedule was useful but with the problems that appear whilst coding and making a website it was difficult to keep up. 

Evaluation - iBook

I enjoyed making the ibook in this project it was the first time I had used the software or even heard of it. So at first it was tricky to get used too as some of the features were different to what I was used too. However it was easy to learn and once I understood what I was doing I found it easy to start designing my ibook. To start with I worked on the background images for the book thinking about what ones would work how to split them up and also how to keep them themed to the content the were behind. What I tried to do was use rocks for the background of the geology chapter, vintage canyon imagery for the back of the history chapter and animals for the back of the wildlife chapter. This way the images relate to the topic they are the background too. In the end I thought this worked well and the images work well with each other in the different chapter and provide nice backdrops to the content. 

Next on I looked at the different option I had to get some interactivity into the ibook looking at the widgets both in ibook author and the website Bookry. This gave me a range of the widgets to use throughout the book, I wanted to try and make it as interesting and interactive as possible. Overall I am happy with the widgets I have included I think there is a good range from pop-overs to image galleries, to interactive mazes. This hopefully will keep the book interesting for the users and give them the information in a unique way. 

Overall I am happy with my final product for the iBook I think it has a lot of content for the users to read and explore but keeps it interesting and interactive through the widgets and imagery. Now the layout are cleaner as well I am pleased with how it all turned out, I found the software good and easy to use in the end. 

Asset Register

One of the aims for this project was to have an asset register I had not created one of these for a project before so it was a interesting learning experience. The idea is to record all of the text and graphic content that goes into your website. To do this I created a number document and had three columns. 

• Asset 
• Source
• Use

The asset column is where I put a picture of each of the assets whether it was and image I made or sourced and even website where I got my content from. The source column is the URL of each of the images videos or website that I got the assets from, N/A was for the content that I made as I was the source. Finally the use column is where I explained where and what the use of the assets was, for example "Eagle in the bird gallery."

Overall I thin I have recored almost all of the text and graphics used in the website and the ibook with a source and a use. So I am happy with how the asset register turned out. 

Images and Graphics for the iBook

For some of the ibook widgets I decided to created cover for them whether they were videos or games. I went with the same theme throughout with a image in the background and the main colour form my colour scheme. Combined them together so the colour was a overlay with a reduced opacity, this way it looked similar to the website and kept the theme consistent. As well as this I think they are nice visual queues for the user in the ibook and fit in well rather than just having a youtube icon for example.

iBook research and layouts

Without an iPad it was difficult to do a large amount of research not ibooks however I did find some layout examples that were helpful. I had not used ibooks author before so looking at the different types of layouts you could use was helpful and I started to get some ideas on how to present my content.

The first layout here obviously is just a large image gallery but this could be useful in terms of my content as you can see it has labels to give information to the user whilst they browse the images. For me I could easily incorporate this type of layout and feature into my project on the grand canyon.

The second layout is a bit more standard but still useful. It shows that the basic layouts still look good on the iPad and can still involve some sort of interactive elements which again for me is useful and I could use this type of layout easily in my ibook. I like it because it is clean easy to look at and understand but as I said still involves the interactive elements of iBooks.

The third layout is one that I really like each dress has is own description and label coming of of it with other information in a scroll bar at the side. I think this worked really well for an iPad layout and I could use this in my work by replacing a dress with and animal for example.

Changes after Crit

After the crit there were a few changes to the iBook that I could make, so I did and what I changes were : 

• Edited layouts - to make them more balnced and even 
• Added in the table of contents so users can navigate through 
• Edited some graphics to make them clearer for the user
• Highlighted the interactive elements a little bit more so users can find them easily

So with these minor changes I think my iBook has improved a lot even though many of the changes are small they do make a difference.

Crit Feedback

For the crit I showed the class my almost finished ibook, this was useful and I got some good feed back on the good and the bad parts of the book. The positive part of the feedback was mainly on the interactive side of the ibook will people liking the different interactive elements on each page.  Another positive was the background images of the iBook people thought these worked and looked good throughout the book. 

The stuff I could improve on in the iBook was mainly the layouts of certain pages as they had little structure to them. So these needed improvement which was fine and I expected this anyway as I mainly focused on getting all of the content into the book. Using a grid and putting more time and effort into the layouts should improve them a lot so it ill be worth it. 

Overall the crit was useful and helped me to identify some issues and problems with the ibook so that I could now fix them.

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. 

Responsive Web Design

For this project my website must be responsive which is a website which responds to what device it is being accessed on such as desktop, tablet, or mobile. As this was a requirement for my I looked at some other websites that are responsive as examples and possibly to get some inspiration. 

The first website I looked at was Microsoft being a massive brand it's important to keep up with the latest web design features and there web site does this by having a clean modern design. The website uses a image slider on the home page which shows the responsive element of the site really well, this shows the break points of the site really as it adapts along with the caption box to suit the size of the page. 

These images show the change at the breakpoints going from mobile to desktop. They are really clean and look professional whilst keeping all the information clear and readable. So for me this site works really well and does not lose it's interactivity or navigation features. 

The website uses 3 to 4 columns for desktop size and then moves down to 2 columns for tablets and 1 for mobile which works really well for the information on the site. It would be a system I would consider for my site depending on the information on my site.

Mozilla Website - The website for mozilla is another website I found that is responsive and changes between the breakpoints really well. The website layout seen on the right has a few navigation features layed out horizontally and spaced out well across the page. It uses a three column layout after the images at the top of the page. This was a good website for me to look at because of the images slider on the page which is something I am thinking of using on my site so how this was treated at the different breakpoints is something I will take note of. 

At tablet size the page is page is very similar too the layout at desktop size. The elements and features have had their spacing reduced to make it fit. This looks fine and the changes can be seen in the menu above the image slider where the options have become bullet pointed and the log has moved to the middle. 












Finally at mobile size the website goes to a single column layout and the navigation of the page has changed significantly but the website still works well and surprisingly still has the image slider just a much smaller version which with the imagery I will be using i'm not sure would work for me. 


The navigation for the site is something I will look at though with the drop down menu appearing in the top left which shows all the options in a really professional and clean way. 

Looking at the image slider at the different breakpoints the way it is positioned on the mobile layout doesn't really work for me. It feels clunky and is awkward to use which is not something I want to happen on my site. So at the moment I think the mobile breakpoint will see the end of the image slider on the page. 













http://engage.synecoretech.com/marketing-technology-for-growth/bid/169593/10-Examples-of-Amazing-Responsive-Web-Design


http://sixrevisions.com/design-showcase-inspiration/responsive-webdesign-examples/

http://designpin.co/responsive-web-design-20-great-examples/