To fully understand the task at hand i decided to research into visual concepts.
I found this video on the internet. where Alexandra Alter talking about EBooks, both fiction and non-fiction and how the usability has changed from paper back books to E-Books.
http://live.wsj.com/video/enhanced-ebooks-next-frontier-or-passing-fad/C6B97950-5E0F-4EBD-9986-3FB1369FE4AF.html#!C6B97950-5E0F-4EBD-9986-3FB1369FE4AF
This video really helped me to understand what exactly i have been assigned to produce.
I then decided to find videos that preview/ show case Ebooks, giving me information about what types of media i can insert with in my own Ebook. Below is short video of an Ebook preview of JFK..
http://www.youtube.com/watch?v=rSkbtjxzOXY
As you can see within the Ebook you can incorporate text, images, video content. You can apply subtle effects using Java script which gives more depth and detail to the Ebook.
After watching this video i decided to try and find existing examples of Ebooks.
Tuesday, 11 December 2012
Monday, 10 December 2012
My Chosen Story
In 2004 my dad passed away unexpectedly which really strained my family, mentally and emotionally. There were so many things that my dad wanted to do/ achieve but never got around to doing. When my mum got to grips with the situation and everything that had happened, she devised a 'to do list'. This list stated all the things that my dad never got around to doing and my mum wanted to full fill my dads plans/ intentions. One of these things was to take the family to america, orlando florida.
My animation will reflect the list, and give a description of the holiday. For example, going to the airport, the flights, the villa, where we visited, why we visited the places we did.
My animation will reflect the list, and give a description of the holiday. For example, going to the airport, the flights, the villa, where we visited, why we visited the places we did.
Family Story
I have started thinking about what family story i wish to portray within my Ebook and animation. I have devised a list of possible stories i could design...
- Past Family Events
- Birthdays
- Weddings
- Funerals
- School
- Work
- Christmas
- Holiday
- Mum - Dad - Brothers
After thinking about what i could base my animation and Ebook on, i have decided i am going to do it on my holiday to orlando florida with my mum and brothers.
- Past Family Events
- Birthdays
- Weddings
- Funerals
- School
- Work
- Christmas
- Holiday
- Mum - Dad - Brothers
After thinking about what i could base my animation and Ebook on, i have decided i am going to do it on my holiday to orlando florida with my mum and brothers.
What is an Ebook?
What is an Ebook?
An Ebook is an electronic book that has been created for electronic devices. Here are some examples of devices in which support the Ebook format...
-Apple iPads/ other Apple products
- Kindles note books
An Ebook replicates that of a normal printed book, hoever within the Ebook you can interact with the Ebook on a higher level. By this i mean you can tap certain items or objects within the Ebook in order to gather a great understanding of what you are reading. These Ebooks are able to support media rich layouts and interactivity allowing the reader to dive deeper within the information they are reading.
An Ebook is an electronic book that has been created for electronic devices. Here are some examples of devices in which support the Ebook format...
-Apple iPads/ other Apple products
- Kindles note books
An Ebook replicates that of a normal printed book, hoever within the Ebook you can interact with the Ebook on a higher level. By this i mean you can tap certain items or objects within the Ebook in order to gather a great understanding of what you are reading. These Ebooks are able to support media rich layouts and interactivity allowing the reader to dive deeper within the information they are reading.
Production Schedule
I have created a production schedule in order to organise my time, allowing me to effectively pre-produce, produce and post-produce this assignment. I have updated this schedule on a weekly basis allowing me to keep my production up to date on on track. Here is the finished Schedule...
In order to organise my schedule i have both labeled and color coded the chart. These labels and color codes are as follows -
D/Green - Done
P/Amber - Partly Done
N/Red - Not Done
Within this production schedule i appointed key dates, tasks and sub tasks within the left hand column, then on each week i have dated each column at the top and through out the each individual column.
In order to organise my schedule i have both labeled and color coded the chart. These labels and color codes are as follows -
D/Green - Done
P/Amber - Partly Done
N/Red - Not Done
Within this production schedule i appointed key dates, tasks and sub tasks within the left hand column, then on each week i have dated each column at the top and through out the each individual column.
Monday, 15 October 2012
E-Book Assignment FDA Brief
The Brief (general description of the course work requirements)
In this assignment you are going to produce a piece of interactive documentary narrative which utilises a wide range of media, delivered as an ebook for the iPad. Researching content and sourcing the assets for documentary can be an extremely time consuming process, so this project will keep the content and themes of your story close to home, drawing initially from material that exist for you (family stories and archives of images) and then extend this with new assets (interviews, graphics, animations).
Your aim is to bring an aspect of your family history or a family story to life with mixed media. This family theme can be interpreted in a wide range of ways; think quirky stories or remarkable family members, relatives who took part in historic events or have lived interesting lives. It can be historic and/or contemporary, can focus on one particular family member or spread of personalities, can tell a story in depth or cover range of events, can focus on a period of history or range over time. Alternatively, you could explore the place you’re from, which might mean the house, street, or town. Part of the challenge of this brief is to find an interesting an engaging angle.
You will source or generate text, images, sound, moving image and animation. The ebook must contain at least the following:-
· An animated introduction
· Text and images
· At least one audio interview with a family member, edited to tell the story in 1 minute or less
· Animated visual elements to accompany the interviews
You will use After Effects to create the animations and iBooks Author to create the interactive ebook for iPad.
You will follow a project planning and design process which will be reflected in your blog and sketchbook. This will include at least the following:-
· Plan your time with a production schedule
· Find and analyse examples of interactive documentary narrative
· Find and analyse examples of ebooks which use media content
· Find and analyse examples of animation used in a documentary context
· Visual research which contributes to devising the look and feel
· Design the graphical style, interactivity and animation
· Undertake design and technology research into developing content for the iPad
You will pitch your content and design solutions to this project to the group for discussion in the form of a prepared presentation. This must contain mock-ups, navigation plans, storyboards and animatics and/or sequences which experiment with your animation style.
You will produce your ebook and apply user testing techniques to explore it’s characteristics as a piece of interactivity. You will detail your user testing in your blog.
You will prepare a finished ebook to crit with the group and your tutors
This assignment requires the following:-
· Attendance at pitches and crit presentations is compulsory.
· Sketchbooks must be available for discussion with your tutors in every lesson, and must be updated at least weekly throughout the project
· Blogs must be updated at least weekly throughout the project
· The pitch must be in the form of a presentation, prepared in advance of pitch session Production will be complete by the crit, so a full product is shown in the crit session, though changes and improvements can be made between crit and deadline
In this assignment you are going to produce a piece of interactive documentary narrative which utilises a wide range of media, delivered as an ebook for the iPad. Researching content and sourcing the assets for documentary can be an extremely time consuming process, so this project will keep the content and themes of your story close to home, drawing initially from material that exist for you (family stories and archives of images) and then extend this with new assets (interviews, graphics, animations).
Your aim is to bring an aspect of your family history or a family story to life with mixed media. This family theme can be interpreted in a wide range of ways; think quirky stories or remarkable family members, relatives who took part in historic events or have lived interesting lives. It can be historic and/or contemporary, can focus on one particular family member or spread of personalities, can tell a story in depth or cover range of events, can focus on a period of history or range over time. Alternatively, you could explore the place you’re from, which might mean the house, street, or town. Part of the challenge of this brief is to find an interesting an engaging angle.
You will source or generate text, images, sound, moving image and animation. The ebook must contain at least the following:-
· An animated introduction
· Text and images
· At least one audio interview with a family member, edited to tell the story in 1 minute or less
· Animated visual elements to accompany the interviews
You will use After Effects to create the animations and iBooks Author to create the interactive ebook for iPad.
You will follow a project planning and design process which will be reflected in your blog and sketchbook. This will include at least the following:-
· Plan your time with a production schedule
· Find and analyse examples of interactive documentary narrative
· Find and analyse examples of ebooks which use media content
· Find and analyse examples of animation used in a documentary context
· Visual research which contributes to devising the look and feel
· Design the graphical style, interactivity and animation
· Undertake design and technology research into developing content for the iPad
You will pitch your content and design solutions to this project to the group for discussion in the form of a prepared presentation. This must contain mock-ups, navigation plans, storyboards and animatics and/or sequences which experiment with your animation style.
You will produce your ebook and apply user testing techniques to explore it’s characteristics as a piece of interactivity. You will detail your user testing in your blog.
You will prepare a finished ebook to crit with the group and your tutors
This assignment requires the following:-
· Attendance at pitches and crit presentations is compulsory.
· Sketchbooks must be available for discussion with your tutors in every lesson, and must be updated at least weekly throughout the project
· Blogs must be updated at least weekly throughout the project
· The pitch must be in the form of a presentation, prepared in advance of pitch session Production will be complete by the crit, so a full product is shown in the crit session, though changes and improvements can be made between crit and deadline
Saturday, 28 April 2012
Research Into Existing One Page Websites
After being set the new brief i thought a good place to start would be to look into existing one page websites. This would give me a feel on how they navigate, the sort of visual components they include and the style of the page.
The first example one page website i looked at was Nymphea - Fitness Furniture.
http://nympheaproject.com/#theteam
"More than a simple fitness accessory"
"Our first idea was to offer a simple aesthetic to practice sport at work. Nymphea grew out from this concept to become an elegant fitness accessory, harmonious enough to fit in perfectly in an office. The exercises which can be realised (sit-ups, strengthening...) allow you to decrease stress at work and offer a nice take-off to the user.
To fit in even more, Nymphea's leaves work as sound isolators, enabling a visual and acoustic separation between working spaces. With its organics curves, outlined with a touch of aluminium, Nymphea lives out to be a modern sculpture dedicated to relaxation and well-being."
I am going to analyse a few of these websites as they are exactly what im looking for both content wise and visual/ technical construction.
The next example i looked at was called 'Art Direction'
http://www.mathieudebruyere.com/#contact_area
This website is a portfolio website, exactly the same kind of website i have been assigned to build. The following image was taken from his about page, generally stating what exactly it is he does, which happens to be an 'Art Director'.
The first example one page website i looked at was Nymphea - Fitness Furniture.
http://nympheaproject.com/#theteam
"More than a simple fitness accessory"
"Our first idea was to offer a simple aesthetic to practice sport at work. Nymphea grew out from this concept to become an elegant fitness accessory, harmonious enough to fit in perfectly in an office. The exercises which can be realised (sit-ups, strengthening...) allow you to decrease stress at work and offer a nice take-off to the user.
To fit in even more, Nymphea's leaves work as sound isolators, enabling a visual and acoustic separation between working spaces. With its organics curves, outlined with a touch of aluminium, Nymphea lives out to be a modern sculpture dedicated to relaxation and well-being."
The above was quoted from the website, roughly explaining what it is.
Analyzing the site
I looked at each page of the website:
Layout
When first entering the site i recognized almost straight away that everything was nicely spaced apart, not to much content close together. This made the site seem very modern and gave it a subtle and gentle overlook as seen in the image above. The positioning of the side navigation bar in the top right corner is a nice touch.
Theme/ Visual Styles
They have gone with the a commonly known visual style known as 'White Space' or Negative Space'. This is when the background is very white/ plain which then focuses the attention to the visual elements that contrast and stand out from the page. An example of this visual style is as seen below:
I then proceeded to look at the header for the website, i think this is a custom header, as they have included artwork with in text there title header to give make it more isync with the theme/ style of the rest of the website.
As you can see, the artwork they have included is roughly the same as the type of products viewed on the website.
Navigation:
They have two navigation bars with in this website, the first is located on the home page as seen above and the second is in the right hand corner, which happens to stay with in the browser window on every page you visit. The navigation on the home page is a traditional navigation, which features the text and inline elements with in a horizontal navigation bar, as seen below:
The Other navigation bar that stays within the browser window on every page is a custom navigation bar that has been designed specially for this website by the designers. Instead of custom navigation bar using words/ text for the buttons, it has used small images (created in photoshop or illustrator no doubt) as the buttons. Also, unlike the other navigation bar on the home page, the custom navigation bar is vertical, i'm not entirely sure this works interms of the flow of the webpage.
You may have noticed there is an arrow next to the vertical nav bar in the above image. This is another way to navigate the page without having to use either the traditional and custom navigation bars. The arrow simple takes you to the next page, which is next in line after the home page, the reason being the website is all on a single page.
Typography:
The typography used through out the site seems to be very stylish and modern. All san-serif fonts, not sure what font exactly. They used the same font for the body text but made it bigger and bolder for the titles.
Colour:
When designing the site they have kept to a chosen colour scheme and have used the bright colours sparingly which is good because it focuses the consumers attention on the bold colours against the 'Negative Space'. The negative space in this website is white, known as, yes you guessed it, 'White Space', however this can also apply to the colour black. They have used grey for the typography and when highlighting key words they have used one of the colours from the product itself. This keeps within the theme. The images of the product also have shadows on them, this adds depth to the product because the background is all white.
Interactivity:
With in this site, there are a couple of interactive features besides the navigation bar that allow the consumer engage with the content which over all improves the user experience and make it more interesting. On the overview page there are little grey like circles as seen below:
These little circles are located on the product image in different areas and when there are clicked on with the cursor an information box pops up near the circle telling you more about each area of the product, as seen below:
As you can see the images change through out the slide show and so does the information on the side. There is a fade transition set with in the slide show between each slide, this is smooth and looks more professional then just jumping from one slide to another. She fade transition is shown below:
Usability:
Content - There wasnt much content both images and text on a couple of the pages which i thought worked surprisingly well. Sometimes less is more, and because of the design theme/ concept this was the case.
Text - The typography overal was very clear and visible. The site wasn't text heavy, until the 'The Team' page where it stated the biography of each designer.
Loading Time - The site was very quick to load up, the interactivity features were very smooth and fluent which was good.
Layout - Very well laid out both content, and navigation. However the right side vertical navigation was just hanging in mid air, this might look better if it was further to the right side of the page, a bit like a scroll bar. The layout was easy to get to grips with as most content was labeled.
Navigation - The navigation was quick and easy to understand, more then one type of navigation was good as it added more variety to exploring the one page website which all in all made it more interesting.
Colour - The colours used were very contrasting but worked well with the way they were used against one another (images against background colour, typography colour and navigation colour)
size - The size of the page was standard, keep to the conventions of a normal website. Although unlike a 'normal' website, this website was based all on one page which is what i am looking to do with mine.
User Experience:
The user experience overall is the most important thing when making a website. The user experience i gained from this website was very thorough, i knew what the site was about and what it was trying to achieve very easily. I could navigate the way i wanted to, with out having to divert to different pages in order to get to the page i wanted/ to find the information i needed. Content wise there wasnt much, but the content they had was useful and helpful.
-------------------------------------------------------------------------------------------------------------------------------------------------
After looking at that website i discovered there was an image on the right hand side of the website shown below.
This was a link to another websites gallery that stated many other websites that were nominees for a CSS award. This website is called CSS Design Awards and the URL is stated below:
http://www.cssdesignawards.com/css-web-design-award-nominees.php
I looked at each page of the website:
Home Page
Overview Page
How To Page
The Team Page
The Contact Page
Layout
When first entering the site i recognized almost straight away that everything was nicely spaced apart, not to much content close together. This made the site seem very modern and gave it a subtle and gentle overlook as seen in the image above. The positioning of the side navigation bar in the top right corner is a nice touch.
Theme/ Visual Styles
They have gone with the a commonly known visual style known as 'White Space' or Negative Space'. This is when the background is very white/ plain which then focuses the attention to the visual elements that contrast and stand out from the page. An example of this visual style is as seen below:
Navigation:
They have two navigation bars with in this website, the first is located on the home page as seen above and the second is in the right hand corner, which happens to stay with in the browser window on every page you visit. The navigation on the home page is a traditional navigation, which features the text and inline elements with in a horizontal navigation bar, as seen below:
The Other navigation bar that stays within the browser window on every page is a custom navigation bar that has been designed specially for this website by the designers. Instead of custom navigation bar using words/ text for the buttons, it has used small images (created in photoshop or illustrator no doubt) as the buttons. Also, unlike the other navigation bar on the home page, the custom navigation bar is vertical, i'm not entirely sure this works interms of the flow of the webpage.
Typography:
The typography used through out the site seems to be very stylish and modern. All san-serif fonts, not sure what font exactly. They used the same font for the body text but made it bigger and bolder for the titles.
Body Text
Titles/ Header Text
When designing the site they have kept to a chosen colour scheme and have used the bright colours sparingly which is good because it focuses the consumers attention on the bold colours against the 'Negative Space'. The negative space in this website is white, known as, yes you guessed it, 'White Space', however this can also apply to the colour black. They have used grey for the typography and when highlighting key words they have used one of the colours from the product itself. This keeps within the theme. The images of the product also have shadows on them, this adds depth to the product because the background is all white.
Interactivity:
With in this site, there are a couple of interactive features besides the navigation bar that allow the consumer engage with the content which over all improves the user experience and make it more interesting. On the overview page there are little grey like circles as seen below:
This interactivity is quite interesting because it allows the consumer to engage more with in the site, making the site more interesting whilst adding visual and content depth. On the 'How To' page there is a slide show, with navigation buttons allowing you to move through the slides.
There is also a timer set on the slide show where it changes slides by itself. The slides are as shown below:
Transition fade out
Transition fade in
Within the ' The Team' page, there is a little biography section to the four designers who made the product. They all have links and contact details at the end of there biography as shown in the images below:
Usability:
Content - There wasnt much content both images and text on a couple of the pages which i thought worked surprisingly well. Sometimes less is more, and because of the design theme/ concept this was the case.
Text - The typography overal was very clear and visible. The site wasn't text heavy, until the 'The Team' page where it stated the biography of each designer.
Loading Time - The site was very quick to load up, the interactivity features were very smooth and fluent which was good.
Layout - Very well laid out both content, and navigation. However the right side vertical navigation was just hanging in mid air, this might look better if it was further to the right side of the page, a bit like a scroll bar. The layout was easy to get to grips with as most content was labeled.
Navigation - The navigation was quick and easy to understand, more then one type of navigation was good as it added more variety to exploring the one page website which all in all made it more interesting.
Colour - The colours used were very contrasting but worked well with the way they were used against one another (images against background colour, typography colour and navigation colour)
size - The size of the page was standard, keep to the conventions of a normal website. Although unlike a 'normal' website, this website was based all on one page which is what i am looking to do with mine.
User Experience:
The user experience overall is the most important thing when making a website. The user experience i gained from this website was very thorough, i knew what the site was about and what it was trying to achieve very easily. I could navigate the way i wanted to, with out having to divert to different pages in order to get to the page i wanted/ to find the information i needed. Content wise there wasnt much, but the content they had was useful and helpful.
-------------------------------------------------------------------------------------------------------------------------------------------------
After looking at that website i discovered there was an image on the right hand side of the website shown below.
This was a link to another websites gallery that stated many other websites that were nominees for a CSS award. This website is called CSS Design Awards and the URL is stated below:
http://www.cssdesignawards.com/css-web-design-award-nominees.php
I am going to analyse a few of these websites as they are exactly what im looking for both content wise and visual/ technical construction.
The next example i looked at was called 'Art Direction'
http://www.mathieudebruyere.com/#contact_area
This website is a portfolio website, exactly the same kind of website i have been assigned to build. The following image was taken from his about page, generally stating what exactly it is he does, which happens to be an 'Art Director'.
After finding out what the website was for i then began to break down the visual elements of the site just like the last website i looked at.
Analysing the site
I looked at each page of the website:
Home/ Contact Page
About Page
Portfolio Page
Services Page
Layout
From the first Home/Contact page i could see that (just like the previous website) this one was going to be laid out with lots of free space/ negative space. The contents on every page is as minimal as cam be, whilst still getting over the information needed. I like the idea of simplicity and minimalism, and this site does exactly that. Everything seems centered in the middle of the browser window, again i like this idea, seems very modern. The navigation bar is laid out off screen and slides down from the top to reveal the other page buttons, i like the idea of keeping things off screen and having an action point for a roll over.
Hidden
Visible
Theme/ Visual Styles
The theme of this website is very different from other website, it uses shapes and the sides of shapes to give it some sort of visual effect. Though they are not exactly mirrored from the center, they do seem to have some sort of visual style but its hard to pin point, its very abstract.
Abstract Background One
Abstract Background Two
Abstract Background Three
Abstract Background Four
Navigation
The navigation as i mentioned earlier slides drown from the top on every page, or you can scroll up and down the website because it is a one page website. When you click on a page from the navigation bar it slides you to the correct page which is nice. - A bit vague. Every page was interlinked with one another so made this easier to navigate the site.
Typography
Colour
Interactivity
Usability
User Experience
Subscribe to:
Posts (Atom)