Evaulation

I have enjoyed this project, But I felt that I did not necessarily approach it in the best way.  I was unable to fully understand what i-book author could produce. I enjoyed After Effects as I found elements  and skill set similar to using Photoshops. I believe I have produced a coherent and well made book. Others example have only inspire me to do more and try different things.

Crit and Useability

 Before Crit I undertook a usability test of my first completed book. I showed it to a number of people to gauge their feelings about the book. Most of the feed back was positive, people had no problems with the navigation. The interactive content was easy to understand and the liked the flow and general look of the book. However one comment did ring in my ears and that was when did James text start and the introduction end, they also confused by the headings on one of the pages.

Acting on the comments given I have removed the heading clearly stated that part of the writings different from the story is created to James. 

Small change to page

 Crit as always was an enjoyable experience. I like opportunity to see others work and how they have come up with creative solutions to fill the brief. I partially liked Lucy and Jamie e-book. They came up with ideas that to my mind fill one of the key ideas of and e-book, that is the book has to create its own world and all the elements are in keeping with that world. For my part the crit of my book was very favorable, an obvious omission was pointed out. That being a silhouette of a man in the window of the house, this being key to the story. It was also pointed out that the image of a hat was interfering with the text on one of the pages making it hard to read. Lastly an issue of one of the videos needing a slight purse in the audio. On reflection I felt that the text on the front cover was to small so I have increased it as well attending to the elements brought up in crit. 

The entire book

Since refining my e-book I have undertaken further useability test and have had nothing but good and positive response from those who have tested the e-book.

Crossing the T's and dotting the I's

As we are getting closer to crit it is time finish the videos. I have been making quicktime file to view the finished work. I have done this so I can view them out side of After Effects.

I have noticed that all of the videos seem to be a lot lighter than they appear in After Effect. I have reviewed each of the videos and made notes for each dividing them in to units of scenes as you can see from the listed below :- 

Name of video. Intro Video

 

1.Image needs to be darker. James & Mirror

2.Image needs to be darker. Cholton st 1892

3.Image needs to be darker. James & Mirror

4.Ok

5.Image needs to be darker. Pit head

6.Move bricks.

7.Image needs to be darker. School

8.Image needs to be darker. Boys in mine

9.Needs background sound

10.Ok

11.Image needs to be darker. Bricklayer image

Add fade to end of video

Scene reference

 

After I have instigated the changes I have produced a quicktime video to review again and make more changes if needed. As it turned out I dropped the second image of James, scene 3 and made the others around it longer.

Finally I have rendered my videos to a finished format. I has set the image size 1024 x 768 so it would fit the i-pad window. I used the codec h.264 and save them as a Quicktime .mov . The version 2, i-books author converts .mov so it can be played in i-books. This process I went through for all the videos I made.

The finished video 

Development of an idea

I was originally going to use the cropped mage of James for the front cover of the book. But it really does not have the impact I feel a front cover should have.

Original family group and cropped image

I have been toying with the idea of using it graphically. I have converted it and used it as a mask to make an image of his face being cut out of bricks. I have used two layers, one where I took all the cement out from between the bricks. This image I place over the original wall and used the mask to cut out the brick. I have introduced a shadow to add to the depth of the image.

Wall face

I have played around with text. Originally I used black type, then in the process of making the intro video I have the extended wall with the type cut out. It seems one idea is feeding another. I felt that that idea of cut out letters did not work for the front cover and I made a version using chalk as the text for the cover.

Wall face work outs

Looking at all three I prefer the last one using chalk.

Development of original idea

The animation are progressing quite well It time to focus more on the book content it self. My initial idea was to have the e-book quite bookie lots of text illustrations the intro video and interviews.

Initial layout for book

 

I wanted to draw on the elements in the videos to illustrate the book. From my limited understanding of i-books author I have constrained my ideas. This week I have had a chance to see one of my fellow colleges work for his book and feel that I have to change parts of my design. As in an earlier blog there are two types of e-books. One which realise on original text, ie a traditional book and the other a more media rich book which draws you in to the books own world. The key elements I want to employ in my updated design will draw more on the graphic side of the imagery I have created. I want the elements to flow graphically. 

Well used wall of bricks

 

I have repeatedly used the same elements in the video. This brick wall has been used for a number of things, the mine shaft being one of them. I intend to use this wall as a back drop for all the elements of the book. When the pages are swiped you will see one long connected wall.

Photo album

I have taken the family photo album and cleaned it up in Photoshop I will use this a s a backdrop for my bio gallery. I like the idea of including elements personal to James. The child in the picture is James' granddaughter. I have James pocket watch which must have belonged to his father that image I will use as well.

A break through with After Effects

Original image and converted to graphic image.

 

I been working every other day with After Effects. I have been generating ideas in photoshop and then animating them in After Effect. I have an image of the winding gear from Thurcroft colliery. It is in black and white, I have added colour and I am now on the third version of the animation of it.

Photoshop layered image.

 

In last version I have redefined the colour in the image, added the cable. Then creating 8 more layers I have added dark and light elements to the spokes of the wheel and light and dark elements to the cable. When imported into After Effects it give a feeling of moment. To further enhance the animation I have sourced sound clips of machines and lifts. As this is part of the illustration of the text I know I need more animation. The text talks about going down in a Hoppet to where the work is inside the shaft. A Hoppet being a type of lift cage or bucket to take you down the shaft. 

Wall image and grid used for animation.

 

I have created a wall and a grid, using a spot light effect in after effect I have managed to create a shadow on the wall and animate going up or down passed the wall. However it was not until I spoke to Chris my tutor that I was able to remove the grid from the image, leaving the projected shadow on the wall. It is these little victories that make a project worth doing. From this it has lead me to a third image of scaffolding illuminated by a torch.

 Early version of lift shaft with artifacts and sound effects

Taking a fresh look

I been taking a look at what work I have produced so far in context with all the material I have gathered. I want the book to flow and have a narrative. My initial idea was to have part of the story in the introduction. This has always troubled me. I felt I would be repeating my self if I used elements later in the book. I had already thought of using a voice over for parts of the text to give a flavor of James for those who never meet him. I would like to carry this theme in a new introduction. I have some historical records about James early life other than his writings, census records from 1901 and 1911 and with those and his writings I want to construct a script of James introducing himself.

1911 Census

 

I have written a new intro part and have asked Mike McCrory to kindly re do the voice over for me. This will be the third set of recordings he has done. The original complete readings, a new set of reading plus alternative lines for the old introduction and now the text below.

 

My name is James Hunt I was born in Chorlton Manchester in 1892. We are now living in Rotherham with my mother Emma and my father George, Flow, Nellie, Elsie and my brother Walter. My dad comes from a mining family they all worked down the mine, not him he's a bricklayer and finds work where he can. I left school at thirteen and started work at the pit head I had to walk six miles every day, I worked there for six month, then my dad got me a job closer to home working with him. I aways found work where ever I could And have work as a bricklayer all my working life.

 

I am now creating a story board to populate the new text. It will still include a young James in front of the mirror with the addition of a picture of his father George.

 The above video is a workout in After Effects to help with the generation of ideas.

More Recordings

Having got home I have listened to the recordings of my mothers interview. I am not very happy with the initial results and wish to repeat the process again. I have edited some of the recordings to help me with the process of creating the video.

Using Audacity

 

After opening Audacity I open a sound file in the program. The best thing to do is to listen to it and work out what part are best from the interview.

 

I then create a second track under the first. This track is to receive a copy of a section of the recording I wish to use.

 

I highlight the section I wish to keep in the finished sound track, copy and paste it into the track below.

 

I have built up a collection of snippets of the interview. I do all the post production work on the snippets. As part of the process I save the two set of tracks as a project this allows me to revisit the project in the future. Collectively I readjust the levels and add any effect if need to all the selection in the lower track. If I don't need to use the original track I close it. Once all the section are ready to use I save them as snippets by highlighting each section one by one and export as .aiff file to a folder of assets that I am going to use in After Effect. I name them after the first line that is spoken making it easier to identify later when importing into After Effects.

I have found by using the sound snippets this allows me to move section of the sound track back wards and forwards in time to help it fit better with the images used and change the pace of the finished video.

I could kick myself.

I have listen back to the recording from the previous week, I now know that I have to do the whole process again. The sound levels are low the microphone is picking up my hand moving. I have now set up another date to re-record the interview again. It is lucky I can do it again, a better understanding of the equipment would have helped.

Audacity® is free, open source, cross-platform software for recording and editing sounds.

Recording the interview

I have set a side this week to record the interviews for the bio part of my book. In discussion within the class the BBC programme The Listening Project has been high lighted as a model for the type of interview / sound track, we should employ for our illustrated interview.

The BBC inform us on their web site “ The Listening Project is a Radio 4 initiative that offers a snapshot of contemporary Britain in which people across the UK volunteer to have a conversation with someone close to them about a subject they've never discussed intimately before. Every conversation - they're not BBC interviews, and that's an important difference - lasts up to an hour, and is then edited to extract the key moment of connection between the participants.” Many of these interview are going to be held by the British library in longer forms.

BBC Listening Project

 The Listening Project

Research for interview

Looking at all of the archive materiel I have on my Great-grandfather James Hunt I have draw up a list of topics I hope my mother will cover in conversation.

Where did James Hunt come from. What was his families background. What kind of person was he, physically and personality. We have a copy of article from the News of the world 1952 how did that come about. In family folk law James like to gamble on the horses. The other major family story of a bomb dropping in the middle of the street during the war.

Many of these things I all ready know about, what is important is its my mother has to tell the story.

I am going to my mother house, and in quite room conduct the interview without notes in a cam a relaxed atmosphere.

Equipment

 

For the recording process I will be using a “Zoom H1” to record the interview and to edit the recording I will use the program “Audacity”. The Zoom is a hand held stereo mini recorder with built in microphone. It can be mounted on a tripod and has a removable micro card or it can be connected to your computer by cable to down load files. Its saves as mp3 or a wav file. Levels can be set manually or set in an auto level mode. There is one simple record button to record or stop the recording. It comes with a build in speaker to hear the play back.

Zoom H1 Recorder

 The day of the recording

I went to my mothers house late morning and we used her dinning room and sat near each other near the table. I sat at a distance which was comfortable but not to close, almost side on and at arms distance from my mother. I set up the recorder and held it close to her face. Before we started I set out what I hoped would happen during the interview. I asked if my mother could repeat the question if I ask one tell her this would help with editing. I started by making sure the recorder was on and recording. I first asked who was James Hunt. My mother started by saying that James was her grandfather and continued the story of his life. She spoke for 8 to 10 mins with a few interruptions from me to steer the interview when needed. I pressed the stop / record button only to discover it had been on pause. After we both laughed about it we went through the process again. The second interview did not flow as well as the first, we took a short break and went through the process for a third time. After that I returned home to work on the recordings.

 

 

Pitich

My e-book will be based on the writings of my great grandfather James Hunt. He was born in Manchester in 1892. His father George was a bricklayer and he followed him into the same profession. From the writing James has left I want to tell the story of the young James. He left school at 13 and the story is set in 1909 when he was 17. While looking for work he meet a friend with 4 children who tells him the are sinking a shaft at 'Thurcroft' to create a new mine and need bricklayer to line the shaft.

 

Element in my e-book

 

There will be front cover which will have an image of James. As the book opens an introductory video will play showing a brief introduction to the story. It will will include a little background information provide by a voice over in a accent similar to that of James.

 

Animations of introduction

 

I have created an animation from my story broad to give a feeling of the flow of the introduction video.

Image research

I have a found a web site which contain many images of old Rotherham, the town in which James was living at the time. I will use images of Rotherham as background images for the video laying over the top a stylised image of James. I not trying to recreate the past, I want to give a feeling of a different world.

From the old Black and White images I created a graffic image as a background.

 

Through out the book I want to include image and small cameo videos relating to the story and James.

                                                     Animation of pump with sound effects

At the end of the book I want to have a section that is a kind of bio His granddaughter will tell us some things about James these interviews will be illustrated buy animated videos of images of James, one of which will be a newspaper cutting of James building a 2 houses on his own.

News of the World 1952

Understanding content for our e-book project.

We had the chance to see a few examples of e-books and interactive media to engage us in the process of making our e-book using i-book author. After looking at the workings of the i-Author program. Our design for the e-book has to include a cover and title, an introductory video which we have generated the animation ourselves, Text content, Still image and Audio. As the i-Author allows us to include video and links I hope to include those. 

 

Research

Interactive media

During our class time we were lucky to see an interactive project called Storming Juno a film documentary and interactive website. The website has a introductory video and then has a interactive menu page made up of a 360 degrees panoramic image, with key areas to open links. For example the tank link takes you to a series of interviews and other media related to the tank and the men of operated them.

 

I have included a video of the 360 degrees panoramic as example of what is possible.

Storming Juno website

E-Book 

 

While looking specifically at e-book I have found two example of the same book. Alice in Wonderland by Lewis Carol the much loved classic. The two example are very different. The first is Just a straight example of the book that you can read on any platform. It is text with example of the original illustration by Sir John Tenniel from the website of the University of Adelaide. It performs as a book that it can be read on a digital device. There is no interactivity and pressing the next button takes you to the next page.

Alice in wonderland edition by the University of Adelaide.

University of Adelaide

The second version of the book is specifically for the I-pad it has a rich interactive content and certainly play with the imagery form the original Lewis Carol book. The Sir John Tenniel illustrations are in colour and the style has created an all encompassing world.  It can best be described as playful and there are many thing that exploit the potential of the I-pad as a media device. One section has jam tarts moving around the screen like a cheap children’s toy which you tilt to move the tarts to any part of the screen as if they suspended in water. This version has been created by Atomic Antelope and is available from I-tunes at $8.99.

Alice in Wonderland by Atomic Antelope

Itunes for Alice in Wonderland 

Style and Inspiration

I have chosen to illustrate the story of my great grand father and his writing. I have been looking at different style. I want to get a way from the stereo type images of northern working men, images that are dark show lots of heavy industries. My initial thoughts of the opening sequence for my animation was a chair and a hat and boots waiting to start the day. I looked at the many pictures of chairs and fount this by Van Gogh.

Van Gogh

Having given more thought about the animated story. James get up at 4 o'clock in the morning to get to the pit for 6 am. He will be walking in the dark and perhaps the rising sun. I have come across Alexander Millar and his paintings of working men.

Alexander Millar

 Alexander Millar

 

I have found a collection of old photographs of Rotherham and I want to use these as a back drop of my introduction animation. I have converted them to look more like an illustration in Photoshop. 

Rotherham

Rotherham then and now

Family History Reseach

I have a large and wide spread family and along with most people I have many family stories to tell.

I have thought long and hard about the stories that could adapt themselves to this project and have laid out three possibility.

1. I thought about my father who in 1956 boarded a ship in bombay to come to England for the first time having been born and raised in India. His father was originally from Islington  North London and had gone to india in 1921 with the army. My grandfather felt that it was time for the family to move to England and had sent his youngest son ahead to find some were for them to live. I wanted to plot his journey from Bombay via the Suez cannel to England and the streets of 1950's Brighton, highlighting the different world he was about to discover.

   

   My Grand Father William Barrett and the ship my father traveled to England in.

   
   
2. My grandmother on my mothers side always told us stories from WW2.  One of the most vivid was, after working late one night at 'The Regent' a cinema and dance hall in Brighton. Where she ran the Bar with her sister.  She returned home to find my aunt and my mother where a sleep in their beds,  she and my great grandmother carried them down stairs and put them to sleep in the air raid shelter my great grandfather had build in the basement. In the early hours of the morning a bomb dropped in the middle of the street. The force of the explosion blew out all of the windows in the front of the house. If my aunt and mother had remained in their beds they would have been killed by the flying glass and debris.

   

   News paper article about the bomb. My Great grandparents with my mother and aunt after the windows had been repaired.

   
   
3. I have just spent the last summer moving out of my grandparent house and during this process I have unearth some writing from my great grandfather on my mothers side. As a child I lived in a house with my mother and my brother and both my great grandparents I remember him well but never got on with him so I knew nothing of his back ground. Reading through his writing opened a window on a world I never knew. His name was James Hunt, he was born in Manchester and work all his life in the building trade as a brick layer. He talks about his early life and how he would do any thing to get work. The strongest story is of him walking 8 miles to a new mine to try and get work as a brick layer building the shaft and the working conditions he found.

   

   Walter and James Hunt and Jame's writing.

   
   

Interactive Family e-book

This is the start of a new year. In this assignment we are going to produce an e-book. We will have to produce a piece of interactive documentary narrative, utilising a wide range of media to produce an e-book for the iPad. The e-book will based on an aspect of my family history allowing me to draw on an archive of material which is close at hand. My aim is to bring aspect of my family history to life with mixed media. I can interpret it in a wide range of ways, retelling stories of events and histories of past and present members of my family. The challenge of this brief is to find an interesting and engaging angle to convey the story.

I will have to source or generate text, images sound, moving images and animation. The e-book must contain at least the following:-

A title page or cove which may be animated.

Text and images.

At least one audio interview with a family member, edited to tell the story in one minute or less. Animated visual elements to accompany the interviews.

The animations will have to be created using After Effects and the e-book authored in iBook Author.

Project planning and design process will reflected in my sketchbook and this blog. Elements will have to include at lease the following:-

A plan of my time using a production schedule.

Research and analyse examples of interactive documentary narrative.

Research and analyse of animation in a documentary context.

Visual research which contributes to devising the look and fell.

Design graphical style, interactivity an animation.

Undertake design and technology research into developing content for the iPad.

Key events in the project.

Monday 24^th September Assessment to be set.

Monday 22^nd October I will have to pitch my proposal for my family e-book, showing proposed content and design solutions in the form of a presentation. It must contain mock ups, navigation plans storyboards and animatics and/or sequences which experiment with my animation style.

Wednesday 5^th December I will have crit on the final and complete product so the group can evaluate it.

Wednesday 12^th December I will up load my final submission after any changes arising out of the discussion in crit to the server, completed my blog and submit my sketchbook for assessment.

Completed website

I have had to submit my final work for the year. As I had produced three different version of the website  I was only allowed to submit one. So I have chosen to submit the red wall paper site. For me it has the most impact.

I have made a short movie which seems to be the best way to illustrate how the site looks and feels.

Flood of activity

Blue print website

Since coming to grips with the positing I have a flood of activity I have finished a working version of the website and I have to refine the content. I have also adapted from the font a logo. I have been able to over / underlay different elements. I taken a side turn and produced a slightly different working version of the site employing the same basic model as the blue print with the addition of different background, and more underlay elements.

Red wall paper website

The Red wall paper website has added elements to highlight the text and the navigation is what I call a lift button.

Vertical site

Now that I have switched to a vertical site I am following the same ideas the background will use the same blue colour and a similar layout as with the floating site. I sill having issue with positioning after a discussion with my tutor I have anchored everything in side a box and each box is repeated. I still unable to get to grips with the terminology. Everything is position from the left and down from the corner of each box.

Repeatable box layout

 Since I used this method things have become easier and is allowing me to be more organized with my content.

Having a few problems

I really like the idea of the floating site but I am have a few problems. Due the the nature of the coding which makes the site glide I am having trouble adapting the j query to my site. I can't lock the size of the website so it looks the same on different size screens. With the last project I was able to have the main part of the site 960px with a floating background. so if viewed on a smaller or larger screen it would only be the background image that changes.

Screen resolutions

I have done a little research into screen resolution. My laptop displays at 1440 x 900px from what I can see if I try to keep the resolution to around 1280 x 900px I will encompass most of the screen resolution used. I have also decided to change the type of navigation on my site.  I am changing to a vertical type and hopeful this will give me better control on placement of the elements on the site, this will allow me to float everything from the left. The other advantage to the vertical model is I can add a new level as I wish, even though I have not tried it if I was to extend my floating site I would have to add three units at a time.

Reference W3schools

Fonts

I have been looking at fonts for my blue print themed site. I want the font to have the feeling of  being hand written.  My initial idea was to go for comic sans ms.

Comic sans ms

During my presentation this is the type face I said I wanted to use. However during discussions in class most people said they did not like this type face. I have since discovered that some people like it and other hate it, so I have looked around for a less controversial type face.

Selection of fonts

As part of the brief we have to use we have to use webfonts from @fontface or Google web fonts. I have looked at more fonts and have chosen  'Shadow into light two'. It has everything I want to convey in a font, it is a hand written style of script. The hand writing is neat and well ordered and is easy to  read. If you look at the last example of script type, 'Cedarville Cursive', I find this harder to read even though it is more like hand writing and that is way I rejected it.

Website presentation

I have found a navigation system that allows the part of my site to float from one point to another. The concept for my portfolio site is of a blue print which is laying on an imaginary table and the navigation glides from one section to another.

Sections of website

At this present moment I have nine section to the website. A welcome or home section, Fuji printer of the year, Royal Opera House, Paper mache artist, Bea Cummings project, my panoramas, Propaganda poster, Web project, Contact and CV. 

I have generated a wire frame to give an indication where the content will go. Each of the section will follow the same patten, however the Background image and the static content could be swapped round to break up the feel of the site.

My navigation will look like a list on a piece of paper and it will float in the bottom left of the page.

I have generated a movie to show how the site will work.

More Navigation

I have come across a website called Fredhq this site has as he say in his words awesome web things. Here a couple of examples of the web things I may consider for my web page.

These are basically the same type of navigation one is more 3d than the other. I would put my content on each of the faces. It does advise on his web site that your browser has to be able to show the 3d movement.

Link to Fred hq

Navigation

I have been looking at different types of navigation for the website. I have found this example where the central image changes as you move across the menu bar showing other options to go to. I have added my images to make the example work.

 

I like the movement that this type of navigation give, however it limits you to the number of images /pages that can be used.

During our class our tutor has shown as an example of similar horizontal web page the longer the strips the more image it can be made up of. The menu tabs do not have a drop down element to them.

More Research

I have look at further examples of one page websites the first of which is a horizontal website that is a wide and narrow photographic image. The navigation bar has a fixed position at the bottom of the screen. I have a screen grab which is made up of a number of grabs, hence the number of menu bars. There are six section to this website as indicated by six options on the menu bar.

Horizontal web page for Gudang

The second example I like to show is of a vertical website, though it is only made up a three section it does show the basic principal of vertical websites it travels up and down. The menu bar has only three section and there are only three areas  of interest. The image is only made up of illustration.

Vertical website for Yodaa

Research

This project is to highlight projects we have undertaken over the past year. It can also include projects that we have done in past years. As we progress we can add to the website. The key factor of this project is that it is a one page website. I have done some initial research in to one page websites. The common factor for getting the best from these sites is the navigation. 

Basic horizontal layout

Site fall into three basic categories navigation is either horizontal, vertical and a combination of both. The site is in effect a long strip which passes by the viewable area by the aid of the navigation. 

First rough idea

 I have sketched out a rough idea of TV screen come radio where the navigation is the tuner dial at bottom showing what will appear above and then content is shown on the screen.

New Project

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

These are the parameters that have been set for 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.

My design work

I will ensure that I take note of screen sizes and that my pages work effectively with current popular screen resolutions.

I have to 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.

My designs must achieve consistency over the sections of the site: I must use common type styling, layout and structural elements between sections. I need to consider usability and accessibility in the design of your interface and page layout.

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

Final website

I have revamped my site after the crit we had the other day.  As you can see from the screen grabs I have extended the tape across the whole site and added colour to make it more distinctive. The Logos and images on the left had side are smaller and this subtle change works well. I have added a drop shadow to the text boxes and the background image now extends over the whole site toning down the overall whiteness.

 I have to say I am very happy with the overall result and feel I have achieved what I set out to do.