Design for the web evaluation 

I enjoyed this project of creating a website with the content about the arctic taken from my ibook as it was useful to see how the same content would fit in another format from ibook to website. By using the same content this meant that it reduced the amount of time I had to spend on the project before actually creating the website then allowing me more time to design and build the site.

When designing and creating my site I tried to keep to the same simple layout as I had for my ibook as this is the main thing that will keep the same visual feel between the website and the ibook. The other main thing I am planning to keep the same is  the images as backgrounds and the low opacity as this gave a strong look that I could follow through to the site.

Some of the things I found difficult was when adding videos to my website as after getting the videos to work i then had the problem that the BBC had restricted viewing on some of their videos meaning i then had to find another way of including that video in my site. I also found it difficult when working out how the grid works as this made adding padding and margins to parts of my site confusing. 

Some of the things I liked most about my website is the Lightbox I used for my images and also the fixed background with a drop shadow on my content box which then made the appearance of my content box moving and the background staying in the same place. 

If I were to do this project again I would make sure to spend longer reasserting and designing my site to make sure I came across all the issues before I started making my site in order to create my website easier.

Checking my website is Accessible

I thought about how my website should meet basic accessibility needs and throughout my website I have made sure all my text is placed on an appropriate background that allows it to be easily readable. I then made sure that all of the text was text and not text on an image so that my site could be used with a screen reader if needed.  All of these are easy things to do but greatly improve how the website will be used and will help expand the audience that can use the site.

Adding Video

One of the things I found difficult was adding video to my website, at first I stated by using the embed code on youtube were I had sourced my videos from.

I found when I added all the videos to my site they worked well apart from one about polar bears which was restricted by the BBC who own the video. This is the message I received when trying to play the video.

This then meant that I had to find a way around the restrictions and ended up downloading the video to source from the website folder I had created. This then worked well as my video started working. as it was the only video that I had this problem with I left the others with the embed code taken from youtube and just added a class to set the size and boarders in css. 

Lightbox

I have decided to add a light box effect to all the photos on my Arctic website. By adding a light box effect I am able to keep my images at a decent size that they can be seen but would not take up to much of the space when reduced down to mobile version.  This is how images currently look on my website

Desktop 

Mobile 

This is after I added Lightbox and used it to maximise the size of my images making them stand out and adding galleries for the related images to be flicked through together.

Desktop

Mobile 

User testing 

I decided to test my website to make sure it would meet all the requirements that would make it work.  some of the things i looked in to were 

• navigation - is the site easy to navigate? were the relevant pages easy to find and access? 
• content relevance - was all the content text, images and videos relevant to the subject?
• responsive - did the website open as it should and did it work well at mobile and tablet size?
• enjoyable - was the website enjoyable and interesting?

Presenting to the class

This is how my site will look when opened as a desktop site . . .

This is how it will look when opened on a mobile device . . . . 

When I presented my website to the class I found that there was several things that they liked including the drop shadow and fixed background that makes the content box look as if it is sat on top of the background and is the only thing moving.  Feedback from presenting to the class also told me that the use of the images and changing the opacity of the content box and navigation because it is keeping in with the theme and visual style i started in my ibook. 

Some of the things they said I could improve on are images to open at the same size in each Lightbox and not keep changing size when going through a gallery.  They also said that I could improve the footer of the page to make it fit in with the rest of the visual style and not just look like links at the bottom of the page.

Changes to Navigation

when building my website I found it harder to add a fixed navigation to my site and I quickly found that it would be more of a problem than it would be benefit to add a fixed navigation and found that by adding a footer. 

I added simple links in to the footer of each page and separated them by adding a (|) at the start and end of each link for example the home page link would look like (|Home|).

This is what it looked like when i added it to my site. . . 

This is my pitch presentation. . . . 

Default style

Web browsers have their own basic default style for any code they are given. This is shown well when I created a basic html document without any styling. 

This is the code I used to create my test website. Although it has code to create imbedded styles for the website there is no code giving a style to the content. I have adde6 6 headings one at each heading level the web browser will automatically style. 

This shows how the web browsers would display each header without any added styling.

It makes header one the biggest and works its way down to header 6 which is the smallest. web browsers also have styling for other things like links, body text. 

default CSS styles 

http://www.iecss.com 

second mock up

This is the second mockup I made, it is also very simple but as I made it in illustrator I was able to show the difference that will between the desktop and mobile versions of the site.  On the left of the image it shows how the website would look on a phone and on the right it shows how the site would be different on desktop. 

The main changes I am looking to make between the different views of the site would be the navigation, on the desktop site I am planning to have navigation along the left of the site much like in my first mockup and how the navigation was placed in my ibook. On the mobile site I am planning for the navigation to be a drop down selection from the top of the site which will allow more of the screen space to be used for the content and then allowing me to add all the content to both versions of the website.

The second main change I am making between the desktop version of my website and the mobile version of the website is the main content.  On the desktop version of the website there is 1 main content area that takes up most of the page allowing some space on the left for the navigation. on the mobile version of the website there is one main content area but it is smaller so with the same amount of content displayed on each the audience would have to scroll down the page more.

I am also going to making the navigation a fixed navigation so that for someone navigating around the website they will always be able to switch between each chapter they are on without having to scroll back up to the top. This gives the user freedom to explore the site in the order they feel works best rather than sticking to the order it is presented in.

mock up

This is the first basic mock up I made. it is really simple and just shows the first ideas I had.

This it the first simple mock up I created it was taken from one of the pages in my ibook. I then added two white sections to the right of the page to show where the main content would be if this were a website and not a page in the ibook I created.  The navigation between ibook pages would create the navigation between each page in my responsive website. It shows how my idea is simple and as close to the design of the ibook as possible, this helps make the design between the two stay consistent and also the layout making it easy for the audience to use both without a struggle to learn a new layout when switching between the ibook and website.

Fonts

I have also chosen to use the font I used for the headings in my ibook as this is another factor I will be using to keep the visual style from my ibook to the website the same the font is called snow which I got from www.dafont.com and I will be using www.fontsquirrel.com to create the code to add to my website.

by using font squirrel I can upload a font and then save the code that allows me to use it in my website. by doing this I am not restricted to the fonts that are currently available to use on websites.

I feel the font snow worked well for headings  but I have decides to change the main body font from my ibook to my website as most of the websites I looked at used a san-serif font making it easier to read on a computer phone or tablet screen.

colours

I have chosen to use the same colours that I used in my ibook being mostly light blue and white with some black, this works well as it will help keep the theme and visual style between my ibook and my responsive website. I am planning to use the same images as backgrounds for each section as I found they worked well in my ibook and provided a large part of my visual style that I can keep the same. Another reason why they would work well is because they are photos and give the realistic and believable feel to the website, unlike drawings or a graphic style that could become less  believable and realistic. These are the images i have chosen to use.

WWF

After looking at responsive websites I then started looking at websites that were about a similar subject as mine would be. By looking at similar websites this gives me the advantage of knowing how other websites look and respond. The first website I looked at was WWF 

This is the main home page of the WWF website. It has a main colour scheme of white on a black background with some orange in the top right of the page to help highlight some of the important sections like where you can donate to the WWF or where you can adopt an animal.

The layout is simple with the main navigation along the top and consisting of white text on a black black background. Under the navigation is a main image banner that scrolls through like a slide show of different images. under that is 4 sections for 4 smaller images and then the bottom of the page includes a footer. By using big images at the top of the page it will attract the audience to look and also reduces the content that can be on each page avoiding making it text heavy but by being a slide show it also keeps the audience interested and maximises the space it takes up.

This shows the website when reduced to phone or tablet size. the main differences apart from the size are in the top section of the site, first being the navigation which is hidden under a burger icon in the top right. In the computer view of the site the navigation was originally across the top of the page but by being hid in the burger button it gives the option of a drop down menu that can be hidden to maximise the amount of screen that is used for content and therefore maximises the amount of content that can be on each page. The other main change of the website is the colours where as the website opened on computer uses white on a black background and then uses orange to hi light sections this version of the website uses black on a white background and also uses orange to highlight some of the sections.

www.skinnyties.com

This website skinny ties works well with clear navigation along the top and underneath is the main banner with ties under that the site is split in to 3 sections for most popular ties, tie bars and solid satin ties. By having this website in sections it works well when resized to fit on a smaller device like phone or tablet.

This shows how when the website is opened at tablet size the sections ether get smaller or move down the page for example the section that says solid satin has moved under the other two sections it was originally next to. Also you can see they have moved the shopping cart and search bar to be above the navigation rather than in line with it making more room to spread out the navigation. 

I then looked at how the website would display if on a phone browser and found that it follows the same structurer as the others but ether reduces the size again or moves things further down the page.

This page shows how each of the 3 sections has been moved down the page and placed under each other rather than beside they also reduced the size of the banner with tie images but this works less well as the ties start to overlap off the side of the page and out of view. This version of the page also has buttons in the top right for shopping and search options rather than a full search bar that was on the other 2 views. 

www.jeet.gs 

I looked at this responsive website http://jeet.gs as it has several good features that work well. The website jeet.gs is all about using grids in css and it has options to view the website with or without a grid. This becomes useful for the website as you start to see how a grid would really be used and how it is an example of how it works well. Although this grid idea would be irrelevant to most websites the idea of a button to turn elements of the website on and off works well.  

This website is based around one page and so requirers very minimal navigation around the site. Along the top left of the browser there is the Jeet logo and  underneath is 4 icons that link to parts of the page and also pop out bars on the left. This idea works well for a small website like this, as most of the site content is visible from the start and the extra content can be made visible when needed. Allowing the site to be simple and the audience to not be overwhelmed.

Another feature I like about this website is when opened at the size of a tablet or phone there becomes a icon in the top right of the website. This again is very useful for a small website as it allows the text to fill the room previously taken up by the navigation bar and now when viewed on a phone the main text takes up most of the screen with the navigation tucked away at the top. This is how the navigation drawdown looks. a drop down menu like this is often used on mobile or tablet because of limited screen space and making it easy to navigate around a site or app. This icon also stays int the top right of the browser rather than of the top right of the website which means it is always in view and there is no need to keep scrolling to the top of the page to navigate the site.

Wonders of Nature Design for the Web

I was given this assignment Wonders of Nature Design for the Web after finishing the project Wonders of Nature which was to create an ibook . . . 

The brief for Wonders of Nature Design for the Web was to produce a responsive Website that will display on Desktop. Tablet and Smartphone devices.You will each be using the material, which you created for the “Wonders of Nature” iBooks from Unit AF106 as your site content. The aim is to develop your own visual approach that will be consistent across your products.

iBook Evaluation 

This has been a very enjoyable project because I found it quite straight forward and it gave me many opportunities to experiment with the interactive elements, layout and structure.The research was time consuming because so much is written about the different aspects of the arctic, ranging from the climate to global warming. I had not previously studded the arctic and so my knowledge base was low but it gave me an opportunity for learning about this important region and I am now much more interested in all aspects of the arctic.

I had a good look at existing ibooks but found that i didn't like many of them because they were not very interactive and this made me understand that for a lot of people, this would be an important element of their enjoyment of the ibook, especially as it is aimed at a teenage market. 

I found the website “www.Bookry.com” particularly helpful as it gave a wide range of interactive widgets that could be used in my ibook. In my book people have especially enjoyed the videos that i embedded using the ‘Youtube” widget. As they were taken from authoritative sources (BBC and National Geographic) it shows that they are factually correct as well as being enjoyable. 

As there is so much information written about the arctic one of my problems was to decide what to include in my ibook, I am aware that it dose contain quite a lot of text but as it is designed as a reference book I felt this was justified. 

Initially I struggled with a colour scheme but in the end it naturally evolved from the colours of the snow and ice in the natural environment, lending its self to the use of different shades of blue and lots of white with some stark contrasts such as the bright colours of the Northern lights. 

I also struggled at the beginning of this project when learning how the structure of ibooks works, but by learning the structure of chapters, sections and pages it gave me the knowledge I needed to structure my book and decide on the chapters I would include.

I tried to keep a simple layout as this would help make the book more accessible to the audience. I used a page to show each chapter of my ibook and a page to show the contents of each chapter, this became difficult to show the difference between headings and different sections that were linked to parts of the book. After feedback I had to go back and change this adding a box around each chapter heading separating it from the sections in that chapter. In addition I had to add clear links on each page that would take the reader back to the previous page of my book. I wanted the reader to be able to access any part of the book without always having to go back to the index and this enabled this to work consistently. 

I feel it would have been beneficial to have created my ibook on a subject that I had previous knowledge and interest. This would have allowed more time to focus on the design and structure aspects of the project rather than on researching a topic that I had no existing knowledge of. It would have also been beneficial to create an ibook to a younger audience as the visual language would have been less formal allowing me to be more creative and use different visual aspects rather than sticking to factual and informative images. I realise my challenge is to learn how to be both formal and creative!

If I did the project again i would try to make my ibook more visually creative and still informative as this would attract the audience without taking away from the information offer that is being provided. I would also look at creating pages with less text that would be less overwhelming to some of the teenage audience and would increase the number of pages, leaving room for more interactive elements.

User Testing 

After presenting my ibook to the class I then tested my ibook with someone from the target audience from testing the book. I asked them to open my ibook and read through each page and click on anything they want along the way. Whilst watching I found that several times it took the reader time to return to the previous page and only did this by closing and reopening the book.

 I got feedback similar to the feedback I got from the class crit. Three main points that came up in the user testing is the good use of images that made my ibook interesting and helped make the subject of The Arctic feel realistic. The second main feedback I got from user testing was that my book was simple to navigate through with lots of interesting facts and interactive elements but they couldn't return to the previous page of a book without having to exit the book and re open it which is a problem i am looking to solve. The third main thing that was mentioned was that titles throughout the last section were hard to read as they are whit text on a light grey background image. This is another thing I am also looking to change by changing the white headings to black for the last section of my book.

Ideally I would like to do more user testing on my book by asking other people to look at my book and also asking them to look at my book after I had made changes to see if the changes I made had improved my book or if there were still problems that I could easily fix. By doing user testing on more than one user it allows for any main problems to be seen and anything that may have been a problem for one user but not everyone using the book to show.

I was only able to test my book on one user due to the time seclude for this project and also allowing time to make changes before the deadline but I found the feedback I got useful. Seeing someone use my ibook as if it was a published ibook made clear which problems were most important to solve. User testing made clear not only what the strengths and weaknesses were with my ibook but also gave me ideas of how I could solve them simply for example changing the colour of the heading on some pages to make the text readable.

After looking at some books that are being used to learn and revise by students similar to my target audience I started to think about how they could be improved. I didn't like the books I looked at because they all seemed to focus on being a formal reference book rather than trying to appeal to the target audience that would be using the books. They included very little visual elements and any images that had been used were often small and difficult to see detail. This made some images pointless as the audience would pay little attention to diagrams which could help explain something in a clear, visual way. I found that along with being text heavy books they had a problem of looking dated which makes them unappealing to a modern audience. This has in forced my idea of using lots of photos to create my visual style because it would increase the appeal of my book and also as they are real photos would still be informative. The advantage of using real photos is that the images will stand out and not be created in a style that could become dated or irrelevant over time. Another way to make my ibook more appealing would be to include lots of elements that would not be in a book for example videos and interactive images that students would find enjoyable and could be in addition to information/text.

iBook Feedback 

After i presented my ibook about the arctic to the class this is some of the feedback I got. 

Positive feedback was that i had a good use of images and videos as I had included mostly photos which worked well and videos from a reliable source. Feedback also said that I had included lots if useful information and that the images and videos were relevant.

Some of the things they said I could work on were navigation as there is no obvious way to go back to a previous page, this making the ibook difficult to navigate. 

The second big thing to change is the text being hard to read on the background image. This would benefit from ether having a text box background, change the text colour so it stands out more on the background or a lower opacity on the background which would decrease the background visibility. 

The 3rd main problem with my ibook is the basic fonts that have been used. I am planning to change these to be a heading font of snow and a serif font as the main text font as this is easer to read in larger pieces of text like books compared to a san-serif font.  

Links to the Web

I am planning to add links in to my iBook that will let the reader explore websites that relate to the subject of the arctic. The two links I am planning on adding will be to the World Wildlife Found (WWF) and Greenpeace which these sites both have pages about the arctic.

Greenpeace

www.savethearctic.org

This is the first link I will be adding that links to the saving the arctic campaign that was started by Greenpeace. This would be a relevant to add in to my book as it is from a charity that is campaigning to protect the arctic. 

World Wildlife Found

This is the second link i will be adding to my book as this is also a charity that is working to protect the arctic. The WWF website provides information on the arctic and the work they do to help, they also provide a means in which you can donate. 

Both these links come form valued charities that would be seen as reputable sources for information and resources. They are both known for the work they do to help save animals and the environment so would be a reliable place to turn to when donating or volunteering to help.

Adding video

This is one of the videos i am planning on using in my iBook. . . 

I will be using this video in my iBook as it shows a family of Polar Bears emerging from their den. 

I have chosen this video i found on youtube as it will fit well after the page where i have written about Polar Bears in my book.  I also chose this video because it was added to youtube by the BBC Worldwide youtube account and is a clip taken from a documentary film by David Attenborough. 

This makes the video perfect to use in a reference book like mine about the arctic because it has the gravitas of being from a well known documentary series rather than being a video recorded by an un reliable source. 

The start of my iBook 

This is the first page i created in iBooks author it gives a clear view of how I plan for the style of my books to look, it follows my chosen design with having 1 main background image and a title for each chapter on the left of the page that are each in a box. 

Each box that is used for each chapter has a different opacity level that would help the reader see each separate chapter. I am planning on linking each heading to the chapter it relates to and having a heading in a similar way for each part of the chapter. 

This will help the reader drop in to each sub topic of the book and would keep with my idea of a book that dose not have to be read form front cover to back cover.

Space

When the book opens it starts off with an intro video which is a countdown before the take off of the spaceship. This works well as it is extremely relevant to the subject and also works as a countdown before entering the book. The audience will be attracted and want to find out what happens after take off and what is in the rest of the book.

This also follows the “Contemporary" template with one background image across the chapter page, a heading and room for a opening sentence or paragraph that for this book it has been left empty. This to avoids over complicating the design of the book and makes it easy for the audience to use it to full potential. 

The next page jumps straight in to interactivity by including a gallery that with big images takes up half of the page leaving the rest to another image and an the first paragraph. This shows they have thought about the audience and how they can make the book interesting and attention grabbing from the very start.

The next page of the book is very similar as the page is decided in to 2 parts the first being an image on the left of the page and the second being a 3d model of the same object on the right. This works extremely well providing content that could not be included in a normal book. It also helps attract the audience as if it is giving people a tour round the object. To show more than one side of an object in a normal book it would have taken several photos and taken up a lot of room in the book or the images would have been smaller reducing the detail seen.

The next interactive element to be included in this book about space is a timeline. This simple time line showing dates and events thorough time, It works by each click the user makes taking them to the next point marked along the timeline. This has been used to great potential thorough the book with several timelines being used and each timeline including lots of points that include information about an event that happened at that time. This again is something that would have taken up a lot more space in an ordinary book and could have been overwhelming to the audience that opens the book.

There is also interactive images used in this ibook these are useful as they add arrows to show points of the image and add info to expelling what is going on. The book includes lots of strong interactivity even though there is a simple layout. This works well as the audience will be able to navigate through the book easy and focus on its content rather than struggling to navigate between each page and interactive element.

Existing iBooks

This is one of the interactive iBooks I looked at, I chose to look at this book because it is also a reference book that would help people learn about Permafrost. This book may not be aimed at the same target audience as my book but would give me ideas into what an interactive iBook is like and the kinds of things that I would add in to my book. 

Permafrost

This shows the title section for the first chapter "What is Permafrost" by looking at the layout that includes one large background image, a chapter title, heading  and space for the opening sentence its clear how this is still following the "Contemporary" template. By keeping the template for this iBook simple they have avoided making irrelevant changes that could make the ibook less appealing.

This second image shows the first page in the first chapter of the book. This also looks like it has been a section used from the "Contemporary" template with a basic use of fonts and the same layout of a list on the left and text box on the right with a image banner across the top of the page. The image has been changed from the basic galaxy image that was in the template to a picture of the ground. 

Here they have included a video of an animation that helps add interactivity to the ibook. This video works well as it would attract the audience including something that could not be included in a regular book. The video is used to help inform the reader of what Permafrost is.

The ibook about permafrost includes very little interactivity with just videos being used to draw the audience in. The majority of the ibook includes lots of text but they have been carful to balance text with images and videos and have avoided creating a text heavy ibook that would have little benefit of being an ibook rather than a normal book. The images they have used have been presented at a decent size leaving room for text with some images taking up half a page and others being smaller. They have also used diagrams that are mostly covering a page giving the audience a clearer view of detail. 

The last page of this ibook is the credits page where they have linked all the information and sources used to create the ibook they have used a simple and effective way of linking text to an external website. This creating the blue links that show where the information from this book has come from. This also benefits the reader as they will immediately be able to open the site without having to copy the link in to the browser.

Science book

Hear I have looked at an existing science book that is also aimed at a similar audience as my ibook would be aimed at. The cover is formal and includes only the necessary information to tell you about the book and a dark red/black gradient is used as the background. In the top right corner the book has the company logo which irrelevant to the topic and being the only visual imagery could create confusion on what the book is about before the audience stop to read the cover. Across the cover they have used a san-serif font with simple shaped letter that help make the book formal without being difficult to read. 

This is one of the pages from inside the book which has been split up in to sections by a coloured box around parts of the text, which would make large pages of text less overwhelming to the young audience. They have continued to use a simple san-serif font that is easy to read on the small sections of text in each box, this also works well as it gives a more modern feel to the book and is taking a step away from the dated look and feel the book creates. They have also used some small images that are not photo realistic and often just simple diagrams. The small images would attract the reader but by being such small diagrams and illustrations they are hard to see or understand. to include the same amount of beneficial information and larger images this would mean making the book larger which could discourage students from wanting to read it.