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

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."

The above was quoted from the website, roughly explaining what it is.

Analyzing the site 
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:

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.

Body Text 

Titles/ Header Text

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:

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: 

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:

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

New Assignment Brief - Portfolio Website

The Brief 

In this assignment, you will design and build a website containing your FdA work to date, plus any existing work you feel you should include in your portfolio and biography information such as an ‘about’ section and/or a CV.  This will form the starting point to your portfolio website which you will keep up to date with new projects throughout the course. 

Making web pages

To make successful websites with working links you will need to thoroughly understand the folder system that structures your files. You will create a web project folder with your name and make folders within this that offer a sensible navigation structure.  These may be, css, images, scripts, working files.  Please note the index.html page MUST be loose at the top of the hierarchy not inside a folder.

You will use TextWrangler to create all HTML and CSS. The goal of this project is to further your understanding and abilities in hand coding HTML & CSS, therefore you will not be allowed to make any of this assignment in Adobe Dreamweaver or any other visual WYSIWYG editor.

Your site will be constructed as a single page with the different sections made visible using css positioning or by a hide/show or similar jQuery method. CSS3 animation or jQuery will give the smoothest and best results.

You will not use images of text in this assignment. All text elements must be live selectable text and styled using css. You will use either Google Fonts or @fontface for your text elements.

Images are restricted for content, header (masthead) decoration or sprites for use as background to navigation elements but all links must be text based.

Important: You will not use html tables for the purpose of creating layouts at all in this assignment.

Working with CSS

You will use Cascading Style Sheets (CSS) to format and style the elements of your page so that you can:

·  style and distinguish between navigational and content areas of your page,

·  format and control your text and any links,

·  you can create print- friendly versions of your page which restyle the content for print outcomes.

Working with real outcomes

You will also prepare and format your page with CSS for different browsers on different platforms. This will involve testing your pages on both Mac and PC computers.

In order to make sure that your pages work seamlessly in different browsers and on both Macs and PCs, you can use conditional HTML comments to direct Mac and PC browsers (including Internet Explorer and Safari to sets of CSS files).

Working with text and images

Text material in Word .doc format or created in any other word processing package must be converted to 'vanilla' plain text (txt) files before inserting into the web page.

You will use Photoshop or Illustrator to process images that will be optimised for web delivery using Save for Web and Devices as a gif, jpg or png, with care taken over pixel dimensions, file sizes and image qualities. Video content should be displayed using the ‘Video for Everybody’ system.

All the images you make in Photoshop and Illustrator should be placed in the ‘images’ folder in your project folder and will be addressed with the correct routing through HTML. You will make these images accessible through the use of  <alt> and <title> tags.

For the typographic elements of your design you will use webfonts using either @fontface or Google Web Fonts.

Your design work

You should ensure that you take note of screen sizes and that your pages work effectively with current popular screen resolutions.

You should consider creating visually pleasing and legible designs where the design acts to make the content more appealing and readily readable with a standard web browser, rather than dominate or overpower the content.

Your designs must achieve consistency over the sections of your site: you must use common type styling, layout and structural elements between sections.

You need to consider usability and accessibility in the design of your interface and page layout.

You will need to demonstrate your approach to the creative process using methods that are standard to the digital media industries.  As well as your visual research, your sketchbook and blog should show sketches, ideas and experiments for the designs in development so the processes you used to reach decisions on such issues as wireframe layout, colour, typography and navigation are transparent.  Navigation must be planned using flow diagrams. 

 

Pitching your designs

You will pitch your designs to the group and tutors in a presentation.  You have to include your proposed content, layout, interface designs and look and feel in your pitch.  This can include:-

-   Wireframes

-   Flow diagrams

-   Graphics

-   Proposed content

-   Logo and heading designs

-   Interface designs

-   Page mock-ups

This pitch needs to be prepared as if you were selling your idea to a client.  Include technical research, particularly screen resolutions, browsers and platforms.  Show colours and fonts in mock ups rather than on their own – make visualisations rather than lists.

Evaluation

Things that i would do differently next time:

- First of all this was my first attempt at making a website, i was completely new to the HTML code and CSS. I would take more tutorials in how to code both HTML, CSS and javascript.

- I think that the time given between the start of the assignment and he deadline was long enough considering i had to earn the code from scratch. However the time i spent was mostly trying to work out how the site worked and how exactly was put together. I was forever looking online at trouble shooting blogs because it was difficult.

- I would organise my time better for my sketchbook, there wasn't enough drawing or sketches done in order to really solidify my ideas and visual styles.

- Clients missed meeting deadlines

Things that went well:

- I think that towards the end as i became more familiar with the code i was able to understand it better thus being able to work faster at coding HTML and CSS.

- The initial research went well, and the communication between the client went well, despite them not being able to turn up, twice.

What i have learnt overal:

- i have learnt to code HTML and CSS to a satisfactory level, more work needs to be done in this area of design, more experience required in order to fully reach my potential in web design.

Final Critique

Here is the feedback i got from my peers and my teacher:

- Needs more styled CSS, both on the layout and on the typography

- Logos needed to be better positioned, maybe either side of the main header and slogan

- The unbalanced content boxes, maybe try setting a height to one of them if not both of them

- Bottom navigation bar needs tweaking 

- Either put more information in the gallery feed or take it off completely 

- Change the blog placement or get rid of the blog 

- Roll overs on the images/ light box could be added to give the site more of a media flavour

- Colours were good, however another colour needs to be added to give it a bit more depth 

- The content is very good and used appropriately 

- No broken links, or loading issues with images 

Overall there are many improvements to be made and i will make the improvements in time for final submission. 

Final Website

                            

Trouble Shooting

Here is a list of some of the errors i had trouble with:

First off all writing out the main index page. This was vital because once i had one page done i could then just copy and paste the HTML code and save them as their own HTML sheets in the website folder located on my decktop.

Next was sourcing images from the images folder in my website folder. I then had to figure out how to style the images, in a way on the browser window, for example positioning, padding, margin.

I tried using light box how ever it took me far to long to code the light box because even after looking at tutorials i didnt know how to code and link it all together. So in the end i dropped the light box idea, this was the same with the roll over images.

Inserting line breaks into paragraph divs with in the HTML and CSS

After floating images, i then had to figure out how to use the class known as 'clearfix'.