Evaluation |

Pre-pro:

As I'd stated in my initial post about the brief, I was expecting this to be a challenging assignment to do as it entailed learning a lot of new technical skills in order to complete the website. I quickly got stuck into doing side projects of my own, trying to learn my way around HTML and CSS after a few lessons and tutorials writing up simple websites. This spurred me on to do sketchbook work (brainstorming, visual language, styling and sketching etc) and get ideas down for my wireframes etc. By doing this early on and deciding on where I wanted to go with the site made the process a lot smoother than it could have been. Unfortunately I ended up having to change my design due to a design vs technical hiccup. Fortunately I had thought of a simpler design that would work responsively so I went with that. 

Production:

I was eager to continue designing after having a go at doing a side project by myself. I quickly got addicted to coding due to its constant problem solve nature. Its fun learning how to put the bricks together and take it apart, and then rebuild it again. Less challenging in some aspect was the iBook which I began working on a couple of weeks after the website. I felt because there was a lack of technical difficulty with this one that I had to make my layouts, imagery and all other visual language extra special to get the attention of the examiners.

Post-pro:

After I'd finished creating my iBook and Website I went onto do validating/accessibility tests. I used W3C markup validator service to search for any problems within my code that I needed to iron out before user testing began. Once this was done I used a variety of people to use my website. In a previous post called "User testing" you can see the screen recordings and my reviews of how things went. It was very important to do the user testing and I feel it has boosted my confidence in my design quite substantially. I also feel it will be very valuable later on when I could be working in a Ue/Ux team. This was in fact one of my favourite parts of the web process as it gave me some really good feedback on how things physically worked not just about how it looked.

This has definitely been my favourite project of the year, it been much more technically challenging due to learning HTML and CSS. I found the iBooks author fun to use also, but i don't think its something I'll find as valuable as learning how to code a website. I feel I've worked well with iBooks alongside my website which was something I thought I'd struggle with. I think the schedule and having a weekly 'to do' list has really helped me keep focused.

Testing | Validator + Accessibility

Site validation and accessibility testing successful! Above are screen shots as evidence. 

I then went on to run my CSS through Css Lint and W3C Css validator. As you can see from the screen shots above it has passed them both!

Testing | 1st test

As part of my website testing I have asked a few of my friends and family to test my website. I did the first one over skype hence why I'm in the bottom left giving instructions of what to scroll to. I found that my website didn't work nearly as well on this size screen (17" widescreen monitor). As you can see my girlfriend had to go to the normal scroll bar on the side before the actual navigation popped out, but as soon as it did she noticed it and began to use it. She commented about the smooth scroll feature and the navigation being very obvious even after some issues to start with. She faultlessly found all the things I was looking for and didn't get confused. This has increased my confidence in the usability of my website, but I am fairly disappointed with how the website responded at this size. 

For the next week I will be working on getting my website to work at this size as well as mobile size as it's currently not responding as i'd like. 

Organisation | Asset Register pt.2

Here is my second asset register that holds links and descriptions as to where all my content is sourced from. I used a total of 4 sources as you can see below in the spreadsheet. The most helpful was the BBC natural world source, and it was by far the most reliable too due to being broadcast by The BBC. 

Below is the final part of my asset register. It holds information about where i got my jquery scripts from for my website. I used smooth scroll effect on my navigation and a responsive image gallery in the first section of my website, both of which are documented in this document. There's also the fixing script i used on my scroll script to smooth it out. 

Organisation | Asset Register

Throughout this project I've been adding to my asset register. It is used to keep a record of where I get my images from and what they're used for. Below are numerous screenshots of my video/images asset register, it features 44 elements, with URL's and descriptions to support. I also have a text and jQuery code one which I will upload in due course.

Evidence of interactive design | Web + iBook

One of the main learning outcomes of this project was designing something interactive, taking into considerations interactive design principles and practices. Below are a few videos of the interactive elements that can be found in my iBook and website.

The following interactive elements can be found in my iBook:
- Scroll box
- Interactive images
- Pop-up boxes
- Google Maps widget
- YouTube widget
- Multiple answer quiz


And below are the interactive elements found on my website:
- Click button start with rollover
- jQuery image gallery
- Smooth scroll navigation
- Sticky horizontal navigation bar with interactive hover (opacity/position change)
- Hover sensitive images (rotate/size decrease)

Issues | Jumping scroll fixed!

After two hours looking for a problem in my jquery I started searching the internet for new bits of code to add to my jquery. After trying a few I came across this fix:



Try changing this line:

$(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {
  location.hash = target;
});
To:

 $(scrollElem).animate({scrollTop: targetOffset}, 1000, function() {    
    if(history.pushState) {
        history.pushState(null, null, target);
    }
    else {
        location.hash = target;
    }
});


(Link: http://stackoverflow.com/questions/11007929/jquery-smooth-scroll-jumps-upon-first-load-i-with-fixed-side-bar)

It's completely sorted the jumping during a smooth scroll. I knew it was something to do with the .animate line but i couldn't understand what I was mean't to change it too. Below is a video of the fixed smooth scroll!

Issues | Design and Technical

I've been having problems positioning 6 images next to each other in a single row for my gallery half way down my page. The fact I had id's for every single image made my code a nightmare and to make it was responsive was going to be horrific. I  have now realised I can use column count and its sorted out my problem completely. I've applied column count and it now works really well. You can see a screenshot of my code below!

I then went on to develop this idea further and add some interactivity. I set a hover state using a pseudo class. That means that on hover the image gets smaller. Its something very small but I think it adds a playful and fun element. Again you can see this below in the screenshot.

Here's a video of the final product!

Development | Final iBook section

I've added in a Google Maps widget that links straight to the Himalayas. This is the final page of my iBook. I think it works well because of the breathtaking background and option to discover the Himalayas through the Google Maps widget. I've added a shadow to the maps widget and to the sign above it. This makes it pop out of the page and give it a 3d feel that I think works really well. 

I've added this title page to the start of the final section. I've used an old style compass graphic and then altitude/air pressure chapter identifiers to give a consistent feel. I think the background graphic gives a feel of adventure and discovery to this final section which I really like, and it gives the user a visual que for what is coming up. 

Development | iBook 3

Today I made changes to my iBook that were listed in my feedback post. As you can see above I have added in chapter identifiers to the pages that they were missing from. I've also enlarged the content boxes and removed the faded edge from my second page. The final change that I needed to make was to the content pages as these were completely blank and so I added text to describe the chapter and the mountain graphic as this adds consistency between my iBook and website.

Next I plan on adding to the Fold Mountains section as this is currently quite bland. I plan to add a Google Maps widget, a title page and a background texture to the page saturated in text.

Issues | Design and Technical 2

As you can see here my website has all the content and navigation working finally. I decided I wanted to make the page scroll smoothly instead of jumping up or down to a specific element. To do this I used a jQuery script which makes the page scroll smoothy up and down as you click on the different buttons. It has however been a real pain recently and I cannot seem to solve it. As you've seen in the video the scroll starts smoothly, but just before arriving at its target it jumps causing a very jarring experience for the user. Another issue is that the element is meant to be in the centre of the page once the scroll has stopped, but as you can see it is currently stopping right at the top of the page. This has something to do with the margins applied to different elements as the element targeted in my first section has a large top margin, causing the scroll to think this is the top of the visual element.  Hopefully i'll be able to solve this soon changing some of the parameters in the script.

Feedback | Critique

I thought the feedback from crit today was very helpful. There was a positive reaction to my site's overall design and my classmates commented upon the sense of drama created by the background image at the top, as well as the way it blended into the rest of the site really well. The feedback for my iBook was pretty much the same. I have used vibrant, full screen backgrounds for my pages to make the most of the iPad display. This stirred up mostly positive reactions, but some people felt they were a bit overpowering and that I should make my content elements slightly larger to take up more of the viewers attention.

From looking at other people's products I realised I'd missed out something very key that could add something extra to the users experience - The Google Maps widget. This would be great interactivity and would help people to learn where the Himalayas are in the world.

To do:

- Enlarge content elements
- Content page needed
- Chapter Identifiers need to be consistent
- Add Google Map widget

Development | iBook 2

I'm still not completely sure of what I want the iBook to graphically look like. I know from reading the brief that it needed to be more interactive than the website, i figured this is due to its lack of technical difficulty in comparison to the website.

I have been toying about with ideas and finally settled with doing full page background images for the majority of the pages in my iBook. This reflects part of my website design, but the rest of it will be very different as consistency wasn't a compulsory element of our products. I will be going for a more contemporary style with my iBook. I think the use of full page background images will take advantage of the fantastic screen the iPad has. Small pop-over buttons and other interactive elements will go over the top of these backgrounds for users' to click upon for more information.

Here's an example of one my pages so far for the first section of my iBook:

Development | iBook 1

At the beginning of my design for both my website and iBook I thought I'd come up with a really great concept and something I'd not seen before. I wanted to create a website on top of a huge scrolling background image of a mountain. This turned out to be an issue as it wouldn't repsond correctly and the information would be too small to see after a while, as well as the background being far too small for have any impact.

With this in mind I thought I could go into my iBook and replicate this idea. I wanted a vertical scroll to give the user a feeling of going up and down the mountain, but there isn't support for this even in the portait only templates. I have now decided to completely avoid this original idea and go with something new. My next post about my iBook will detail these new ideas. 

An example of what I wanted my website/iBook to look like:

Source: http://news-by-design.com/wp-content/uploads
/2013/04/land-and-sea-MAHOOSIVE.jpg

New inspiration

http://gordoncressy.com/
http://www.paperboat.io/#case-1

One Page Love

Change of idea

So far I've struggled to find enough information to populate my website enough with specifically Mt.Everest information, but I have successfully found a lot of information about the mountain range it is included in. With this in mind I'm going to change my focal point to a more general subject; The Himalayas.

Content

http://www.calctool.org/CALC/phys/default/pres_at_alt
http://www.engineeringtoolbox.com/air-altitude-pressure-d_462.html

Plants and Animals:
http://wiki.answers.com/Q/What_plants_grow_on_Mount_Everest
http://library.thinkquest.org/10131/nepal_park_everest.html

Ecology and Fold mountains:
http://en.wikipedia.org/wiki/Mountain#Ecology

animals+plants detail:
http://edugreen.teri.res.in/explore/life/himalay.htm
http://library.thinkquest.org/10131/javamenu_final.html

BBC Source:
http://www.bbc.co.uk/nature/life/Himalayan_marmot
http://www.bbc.co.uk/nature/places/Himalayas
http://www.youtube.com/watch?v=fWtE4jT5c7o

Updated Choices | Typography and Colour

Final colour choices for my website can be seen above. In my post "feedback" I spoke about how my classmates had said that my greyscale colour palette could be an issue. I have been thinking quite carefully about what colour to add to my website and what elements to apply it to. I think that surf green has a feeling of freshness, purity and cleanliness. These are all words I think are associated with my websites style so far and I think this is why it will work. I think I will use it very sparingly, possibly on the navigation and any other buttons I choose to include on the site. I think this will allow it to have enough impact but not so much impact that it distracts from the rest of the site.



The colour palette for my iBook is greyscale + blue. The blue gradient will be used on button graphics to add a splash of colour to my design. Overall I think my iBook will be very colourful due to the large background images, and won't need extra colours adding to it.
Here are the two fonts I intend to use in my website, and example of how they could look once laid out. I was going to use Georgia but decided to swap it out for PMingLiU because I think it is far more legible at smaller sizes.

Below are screenshots of the fonts I intend on using for my iBook. I have changed the heading font to Chapparel Pro Light (1), and changed back to Georgia for my body text. This change of font will add a more contemporary feel to my iBook that I want. 

(1)