Friday, 24 May 2013

Usability Testing

It is again specified in the brief that we had to test our products on people who were not involved in creating them to ensure they are functional and easy to use. I chose to print out three questionnaires and give them to my family. I will cover it in more detail and show the results in my sketchbook however, here is the questionnaire:

I briefly went over the iBook and website addressing some of the key points in the brief. The feedback was all positive in the 4-5 range. It may have something to do with only using my family as Guinea Pigs but I found the process very enlightening. I can see how a broader application would really help you to open your eyes to what you have created and see it in a different light. Luckily nothing really needs to be changed after this process for me but it still helped and I have made a few minor tweaks here and there!


This is something I forgot to add earlier in my blog entries. Where I sourced the content. I used various sites across the web. I mentioned them all in my asset register so I'm not going to go into all of them but there were two main ones. Ocean light, Wikipedia and Fishbase. These all proved to be great resources as they had different strengths. I used them to create this database:

Here I collated the names of a lot of different marine life and put them along with the species and genome. I then also placed along with that the links to the Wikipedia page on the animal and the Fishbase page.

Ocean Light:

This is the site I first used to find the names of all the fish:

This site has a fairly comprehensive list of fish in the ocean. I went through and determined which ones resided within the Pacific. I found there names on Wikipedia and entered them into the database. Wikipedia worked well to find out there names and species however, I wanted something far more detailed for when I would be entering the information into my website and iBook. After a quick search on the net I found Fishbase.


This site has extremely detailed information on it on almost every animal I searched. This is how I managed to create the tables below each animal on my third page:

As you can see the information is extensive and was a great resource for me to find and use. Not only did it give me information like the depth the animal lives at, its age, size and weight. It also supplies a cornucopia of images at the top! This was great for when I was drawing out the creatures in Illustrator as I could find a side on image or a scientific diagram and trace round it.

The only down side to this site is that it is "Fish" base. This meant that whales were not included as they are technically mammals. To find information about them I used a mixture of Wikipedia, Enchanted Learning and National Geographic. These both proved amazing resources and I ended up going back to add information using Enchanted Learning!


A lot of people slate Wikipedia for being unreliable and spurious. It can be and often times is. Because of this I never used it to source long pieces of information or important sections. I only used it to verify the species and genome and to some facts about the size and weight of some of the animals. The reason I did this is because Wikipedia is often times written by a member of the public. This means that they would have collated information from across the web to one place. Any time I pulled information off this site I would verify it else where and make sure it was valid but it often was. This proved to be a valuable resource for stats and info concerning animals because it really helped to get a wide array of information that would often be spread far and wide across the web. Wikipedia gathers it all and displays it in one place.

Summary of AF103 & AF106

The Products:

Overall I am very happy with how my products came out. The website is responsive, engaging, graphically accomplished and coated with lovely jQuery that isn't intrusive but just helps to add a little polish, class and sophistication to the entire experience. As I mentioned previously I am glad I built it first and allocated a lot of time to doing so. I think that the product came out very well because of this.

The iBook again I am pleased with. I definitely felt a little stunted due to the Apple design mentality of holding your hand and utilising an obscene amount of fairly rigid presets. Nonetheless I felt that I managed to overcome that and create an overall engaging, interactive and functional product. I really like the continuity between the iBook and my website. There is a very strong sense of brand identity and validity which would be great for the target audience of A level students and they would recognise the resource and trust in it's ability to be engaging and informative.

The Pre Production:

This is my problem with every project so far. The sketchbook. I am alright at making blog entries I think (although I definitely need to try and explore design principles more) but when I create my best work it is by actually doing it. I can't sit down and plan everything in meticulous detail because I cannot properly envision it and I am bound by certain limitations. For example in iBooks author I couldn't use the font I planned to and thus had to compromise in certain aspects. I also couldn't go as in depth with interactive, moving elements due to other limitations.

If I sat down and planned out something in detail then I would only encounter road blocks along the way and so I feel as though I am wasting my time. Perhaps that was a little confusing. It's not that I can't plan or that if I did plan properly my work could be better. I do still plan my work it is just in my head and a few seconds before actually executing it. I realise that I should take a second and use my sketchbook to jot down what just happened but that intervenes with the flow and train of thought for me. Once I'm in the zone it is very easy for me to be taken out of it by the idea of having to document my moves through the design. Another thing is that I don't feel as though my designs are suffering from a lack of planning. I think that to a certain extent I am better at designing in the moment, winging it, and using my eye to lead the design forward.

I need to focus more on relaying what I am seeing in my mind. Incidentally I feel like I have accomplished that better than on my previous projects in this one. Most of my early planning and changes have been documented in my sketchbook and there is more content in there than I think ever. This is still one of my biggest challenges though with any project. I have never been good at keeping a sketchbook.


Production was fairly stressless. Everything went more or less according to plan. Nothing in the website broke catastrophically as I expected it had the potential to. Overall it was fairly painless. I managed to complete the iBook quite quickly and it was pretty easy thanks to the drag and drop functionality. The website also took shape quite quickly as well. Once I understood the CSS and JavaScript I was incorporating, I got to a stage where I could just copy and paste all the content in and it would just work. That was a great success. 

So all in all the production was pretty smooth. It was also bundles of fun. I think I have found a new passion in web design as there are aspects that are very similar to visual effects and video editing. The animation parts and trying to accomplish a difficult effect that looks good echo to me After Effects and that is right up my alley.


This project for me went really well. I really enjoyed the production of both the products and I feel as though the end result came out very well. For my first proper attempt at web design I think the site is quite sophisticated and advanced. Some of the jQuery I think works really well to add a little fines to the site and also to make it that little bit more interactive. Whats more I think that my site and my iBook both suit the target audience and the brief completely.

The colour scheme, though child-like, really works. The pink pops and draws the eye and the blue creates a calming backdrop that echoes of the ocean. In the iBook I chose to steer clear of any games and activities that others included as I deemed them too childish. I certainly wouldn't want to perform a word search or sketch a flower at A level and so I don't think it fits the target audience at all. Furthermore I think that the typography is modern and easy to read, the information is of a high standard and reliable and the videos really add to the experience and work well. 

This project went well from start to finish and I am definitely going to be exploring web design further as I really enjoyed it in this project and would like to learn more!


Planning was an important aspect to this project and so I chose to create and keep and document through which I could plan my time management, highlight priority and keep up to date. This is what it looks like:

I have used the intensity of the colour to show how important that section is. The darker and more vibrant the colour the more important that task is at that time. This of course was only a rough estimate and as you can see I slipped behind quite a lot around the 29th of April.

My thought process behind this was to get the website out of the way first. I had no idea how to code a website by hand and I knew that I had somewhat of an idea of how to build the iBook. All my tutors said I should build them both side by side but I knew that for me that wouldn't work. I need to focus on one thing at a time in order to get results I am happy with. 

I wanted to code the website first because I knew that I would have to learn it from scratch. I could see myself trying to do both at once or doing the iBook first and running out of time to do the website and panicking. To avoid that I allocated the majority of my time to building the website and put that first. That way I could gauge how long it was going to take me and if the need arose I could half way through begin work on the iBook. That is was the "Prepare assets and content." starting April 22nd is for. If I felt the need at that point I could have started work on the iBook.

As you can see though, I did slip behind. I am a massive perfectionist. It's a curse. I sit in-front of After Effects and Photoshop changing one value by 1% either way for hours. I can't decide if a cut should be one frame earlier or later in Premiere Pro and in web I could play for months. That is why I slipped behind. It is because of my last page. I spent ages drawing all of those vector images and coding the jQuery to get them to animate. That ate up time however, it wasn't really slipping behind in the conventional sense. I wasn't sure to what detail I was going to draw the animals. I could have summarised each species with one drawing them moved on. In my planning I wanted to draw a few of each species and i felt it would make for a more fulfilling learning experience and also fill out the iBook a little more. In the end I decided to go all out and draw a few species for each section. This is the main reason for me falling behind because it meant the website took longer to complete however, I was still technically drawing assets for the iBook which meant that that was a lot quicker to build and could have a lot more content.

Overall I think I planned my time very well and I am definitely glad that I didn't try to make both products at the same time or do the iBook first as I think it would have severely compromised the website and the overall success of both projects. Doing the website first allowed me to see what content worked where and make tables and charts and embed video in the right spot. This worked well on the site and transferred perfectly to the iBook. If I did the iBook first, I ca't help but think that, that wouldn't have been the case.


Again as specified in the brief we need to ensure our sites are accessible to the public. This means specifying certain things that are in guidelines online and ensuring everything is written correctly and fully. I used AChecker to check my HTML pages:

It was pretty simple and quick to you use you just upload the document (similar to the W3C site I used earlier) and then it reads all your code and points out any errors. I had the same errors for every page fortunately and there was only one. I was quite lucky with that:

Passed certificate page:

This is what you get when your page passes the accessibility checks. Luckily al I had to add was a little bit of code into just above the head of the document that specified a language:

This I think just means that people computers and instantly know and understand the language instead of relying upon detection software. I thought it fairly redundant however, it is well worth including.


As is specified in the brief, I took all the HTML and CSS documents I have made and put them through W3C's validation testing:

This site allows you to upload your HTML and CSS to it's servers where it reads every line of code and reports back any errors. You can then go back and fix the errors leaving you with a W3C certified correct page of HTML and CSS. This is immensely helpful and the CSS check even gives you a piece of code you can use to place a W3C certified badge at the bottom of your page. I ran the tests all in a row and fixed my pages accordingly so they comply to the guidelines.

Page 1:



This page was fairly simple. The issues I had applied to almost all the pages I tested. They were that I hadn't used "alt" values within my images which is bad for accessibility and I had mixed up my class's and id's. I got it the wrong way round and thought id's could be used as many times as you want but classes can only be used once. I simply had to go back through adding in "alt" values and swapping some of my id's for classes. One other thing was that some of the embed code vimeo gave me was a little off so I just had to tidy that up as well.

In the CSS it was only 2 warnings. The first was that one of the pseudo classes I had specified wasn't correct and so I had to change "::selection" to "::-webkit-selection" and also just delete some redundant padding on my footer.

Page 2:



On the second page the issues were exactly the same as on the first. The missing "alt" tags, confused id's/classes and untidy iframe tags.

Page 3:



This page was an absolute nightmare. I had used about 4 id's to specify each image of which there are about 13. I also hadn't put alt tags in any of my images. This took ages to fix going through by hand and replacing everything. My tables also (whilst not errors and merely warnings) were incorrect as well as I hadn't 2 columns in the first row for stylistic reasons. I added it anyway as it looked quite good in the end. along with this the CSS was a little messy too. Luckily that didn't take very long to fix it was just the HTML. 


Doing this validation was a good thing. In the least it has helped me understand my code a little better and learn some very valuable lessons. I now know some professional techniques which I can apply and just how to understand the language a little more comprehensively. Luckily the first two pages didn't need much work at all. Needless to say I will definitely be adding alt tags to every image and getting my id's and classes the right way round for ever more.

Thursday, 23 May 2013


The crit went well. Everyone liked my designs and didn't really have much to improve. My iBook was unfinished at the time because I don't have access to the Bookry website from home for some reason which is really frustrating but overall everyone liked the design and didn't have any suggestions or improvements.

This process was still valuable however, although there wasn't any constructive criticism it still gave me the opportunity to talk through my products and explain all my design choices. This mean that I had to think myself why I chose each and every aspect and solidify it in my own head. I got to step out of my shoes as a designer and see it in a different light and apart from a few minor issues everything holds up and works well.

One thing that was picked up on was the continuity. People really liked how well my website and my iBook work together. There is a really strong sense of brand identity and that is really important. 

Asset Register

Here is my asset register:

I have shown where I got everything from the images I used to the content I sourced. The vast majority of the images I used, I created and so there wasn't all that much to externally link to unfortunately.

Making My Site Responsive

I have completely finished the design of my site and I have a few responsive elements (for example the iframes). The vast majority of my site however, is still not responsive and so I set about changing that through the use of media queries. I shall take you through the key challenges and stages I encountered as most of it is quite repetitive. I will take you through every media query I have made and the key problems and challenges I had to deal with.

Media Query Max-Width 975px:

The first issue I had was that my nav background wasn't scalable or responsive and didn't have the potential to be. It is a static image exported as a PNG and this meant that I couldn't shrink it with the width of the browser. because the image would distort and look awful. I thought of re-exporting it in increments so it would keep jumping down smaller and smaller at each stage however, I thought that irresponsible in the end. There are curly ends to the ribbon each end and that requires a decent amount of padding on the left and right of the content which in smaller screen sizes had the potential to be quite ridiculous. I decided that at the point where the nav background touched the sides of the screen I would get rid of it and switch it so that the actual nav element was styled in the same way but in CSS without the curly ends. 

Along with this I got rid of all the padding on the content except for 8px left and right. This meant that the site was not basically 100% width. The wrapper was max-width: 960px and so that would shrink responsively anyway. 

However, another problem that arose was that all the absolutely positioned elements would now be out of place as all the text moving would have changed the position of the objects around them and so I also made all of them disappear as well. This is the change at 975px:

The CSS:



Media Query Max-Width 720px:

The next media query I specified was max-width 720px. This is iPad and tablet realm. There wasn't a lot that needed to be addressed here it must be said. All I did was make all the text content into a single column to make it fill the space better and flow better. I then also decreased the space between the links in the nav a little so they wouldn't try and stack and narrower widths.

The CSS:



One issue that did arise at this point was that some of the longer titles that were on later pages were running out of room and breaking it weird ways. They would reach the sides of the browser and then the letter on the end would jump below. This just looked odd. Luckily I found a helpful bit of code. In the HTML I placed a hidden hyphen:

The "­" acts as a hyphen only when the word reaches the sides of the browser and wants to overflow. It then instead of breaking the word letter by letter breaks the word once in that place and puts a hyphen in. This came in very handy!

Media Query Max-Width 480px:

This is the media query in which the most amount of changes took place. There were a lot of things that needed to change in order for the site to function properly. The first was the navigation. The links were getting a little crowded at this size. On almost all responsive sites, when you get down to mobile size the navigation hides and is shown with a button press. I wanted mine to do the same and so the first thing I did was to erase almost all of the navigation styling so far leaving only the background colour:

I then recycled one of the buttons from my animals page and made that the menu toggle. I could then create a menu element in the HTML that would hold all of the links. I then styled it in a similar way to the tables I have already styled and added the links in an unordered list (<ul>) and styled them. 

This is the HTML:

The CSS:

And the result:

As you can see in the result I also swapped out the logo for an abbreviated version. A tutor brought it to my attention that when viewing the page on a mobile device, my original logo would take up a lot of screen real-estate and that wasn't good. I created that banner logo in Illustrator and exported it as a PNG with a transparent background. This however, caused a massive headache with the sticky navigation. Because at this size now the value for the "menuOffset" would be different but I couldn't just change it because then it wouldn't work properly on anything above 480px. Luckily I discovered that you can create and use media queries within jQuery. I rewrote some of the code in my sticky nav jQuery and here it is:

There is more code that goes into but this portrays the idea. I basically specified a media query at the top. I specified a variable. That variable being "width" which is the width of the window. I then specified and if/else event which is if the width of the window is less than 480px. Within this I then specified another if/or event. This event is a copy and paste of the old event I had already made but the value for the "menuOffset" was changed from 276px to 147px. It is a bit complicated and long winded to explain but very basically. If the window is less than 480px wide, I'm telling it to use 147px as the "menuOffset" and so the nav element changes class to fixed when the page is scrolled down 147px. Then when it's more than 480px it uses the old value of 276px. This compensates for the change of height with the logo. I had to duplicate these rules and leave in the ones that weren't in media queries because there were issues with page loading. Those issues being that with just the media query rules when you loaded the page or refreshed it it would used the 147px rule even if above 480px in width because you needed to "resize" the window in order to activate the rule. Duplicating them and leaving rules outside of media queries made it so it would look at the rule regardless and if the page was below 480px, the media query rules would take precedence.

So that was the sticky nav sorted. I then just used a simple bit of reused content toggle code for the menu toggle of the nav at mobile size:

This just makes it so that when you press the menu button the nav links in the list below and the containing element fade between 0% and 100% opacity. This makes them invisible and inactive until the button is pressed at which point then fade into existence and become active.

The nav luckily took up the majority of the hardships though. After that was dealt with the only other things were sizing issues. I collapsed the borders on the tables to contract them a little bit and make them look nicer at that size.

I also shrunk the headers down a little to stop them all from breaking, I swapped the logo's over and added thin borders around the headings to help separate them out a little and give them more defined edges because at the smaller sizes some of the text elements began to blend together and it became hard to see where one stopped and another began. I think this was due, in large part, to the reduced size of the headers and that they were a lot closer in size to the <p> text.

The CSS:



Media Query Max-Width 320px:

This only applied to the second page because it had a large table that kept overflowing as it was too wide. To fix this I simply shrunk the text size quite dramatically below 320px window width:

And that's it my site is now fully responsive! Here all the stages in a row for you too see better:






The navigation on the iBook is one of the things mentioned in the brief. It should be simple and clear. I believe mine is. When you open the book you will be greeted by the table of contents:

There is a very strong sense of brand identity which ties in heavily to the website. The name of the book is mentioned and below it the name of the chapter. Right at the very bottom it is clear that you can swipe left and right to see other pages. These have on them the other chapters. On the iPad where the faded squares are along the bottom will be placeholders of the pages within the chapter. On the computer there aren't these images for some reason but it will be clear on the iPad what pages there are and you can select where to jump to from here.

Once in the iBook the beginning of each chapter is highlighted by a clear and bold splash screen which lets the user know exactly where they are and acts as a great navigation aid when flipping through the pages as there is a clear break and difference from the content pages which lets the user know they're onto a new section:

After this there are all the pages of content and at the very end of each chapter there is a quiz page. I mentioned this in the last post but I deliberately made them white and different from the other pages to again strengthen the visual difference between chapters. Once you get to a white page you know you've reached the end of a chapter and the first thing you see of the next chapter is the splash screen to let you know what's next. I think this works really well. This is an example of a quiz page: 

Overall I think that the navigation in my iBook is very simple and yet effective. I didn't want to clutter up the design of it with a chapter title as that takes up valuable real-estate and isn't really necessary as you can easily jump back to the table of contents with a pinch of the screen. Apple make the navigation easy with a simple swipe left or right across the screen taking to forward or backwards into the book. It is very intuitive and I think I have made it clear when you are approaching the end of and starting a new chapter.


The quizzes were a big part of the iBook. iBooks Author makes the quizzes fun, intuitive and engaging with a little work. I think that the quizzes I have are not patronising or anything they are a useful tool that recap what was in the previous section they act as a good section break as well. I chose to make them quite drastically different to all the other pages so the user knew they were at the end of a section and about to start another:


Multiple choice #1:

Multiple choice #2:


Image based multiple choice:

All the quizzes are designed in a way that, although different in colour, still adheres to all the themes and design principles present in the rest of the book. Most of the questions are answerable simply by looking back at the previous pages and often summarised in the galleries on the previous pages. However, there are one or two that are not mentioned and thus test their general knowledge, for example pinning the worlds oceans on the map above.

Google Maps

This is yet another Bookry widget. It is used on the first actual page of the book. It is in the corner of the page as the google maps icon. The information is displayed in image format in the gallery above and the google maps view isn't all that interactive or interesting as it is an ocean and so zooming in doesn't accomplish much and there isn't any street view or anything. I didn't feel the need to dedicate an entire page to it or anything as there wasn't a lot to offer with the widget. I did definitely want to include it though because it adds to the themes of exploration I have had throughout. people can zoom in and see the neighbouring countries in more detail and the islands that are within the Pacific if they so desire.

It is a good edition to the iBook and I like it's humble and unassuming position and scale. Again if people explore the page they can use the widget to explore the ocean but it is not distracting or taking up too much real estate for what could easily become a gimmick. I think that I found the balance quite successfully.


I wanted to have the same principles apply throughout as much of my ibook as possible. This meant that I wanted to try and make everything look tactile and softened against the background a little. For this reason I applied the same border and shadow to the videos I embedded through bookry:

I think it really helps to give the video a more integrated feel. It looks more designed and less placed. I wanted to leave all the play and share controls there to entice people to actually press on it as I thought probably the clearest way to show it was a clickable video was to leave it looking as the vimeo player does as that is what people will be accustomed to. Clicking the video launches it full screen which is nice. It makes the video more immersive I think. This is embedded from Bookry and was really easy to do.

Blog Archive