Chloe McMaster B00712281MED331: Interactive Design PracticeProduction Package

Project ProposalThe aim of my project is to build an interactive enviroment for Coronation Street; a British Soap Opera set in Manchester, England. Coronation Street has been a much loved British Soap for over 50 years and is the longest running soap opera in the UK. I plan to create an experience of coronation street for my users so that they can get a feel for all things Corrie. The website will be navigated using parallax scrolling and the main navigation will look like a 360 degree image or street view of the Coronation Set; this is to give the users the impression that Weatherfield in a real place and the characters are all real people. I chose to do this piece of primary text because it is a universal pleasure for British people and since there is a Coronation Street tour that the public can go on I wanted to bring the street to their computers as this isn’t always easy for people to get to due to it’s location and the cost baring in mind that the majority of coronation street viewers are probably from a working class background. My initial idea for this piece was to create a catch up service for the audience how-ever; this is not really necessary as ITV player provides a perfectly good catch up service of the past 30 episodes and most people have a record button or on demand service on their TV’s so that they can watch episodes whenever it suits them.

Coronation StreetCoronation Street is a British soap opera which chronicles the lives of the residents of a backstreet terrace in Weatherfield, a fictional town in the north of England. Created by Tony Warren and produced by Granada Television and then ITV plc for the country’s main commercial network, it was first transmitted on 9th December 1960 and is the longest running drama series in the world still in production.

The programme was created in 1960 by scriptwriter Tony Warren at Granada Television in Manchester. Warren’s initial kitchen sink drama proposal was rejected by the station’s founder Sidney Bernstein, but he was persuaded by producer Harry Elton to produce the programme for 13 pilot episodes. Within six months of the show’s first broadcast, it had become the most-watched programme on British television, and is now a significant part of British culture. The show has been one of the most lucrative programmes on British commercial television, underpinning the success of Granada Television and ITV.Coronation Street is on ITV 6 episodes per week, on a Monday, Wednesday and Friday evening. The street tackles everyday issues such as health problems, relation-ships, and family issues with a comedic spin that the audience love. The characters on the street are down-to-earth, working class and strong and that is why the public love the program because they see themselves in the characters in a parallel community in the real world. Some of the longest serving characters are Rita Tanner, Ken Barlow, Audrey Roberts, Gail Platt, Sally Webster and Norris Cole.

Timeline of workTask Aims Action Completion date

Project Definition

Production Planning

Production

Quality Assurance

End of week 419/10/17

End of week 79/11/17

End of week 117/12/17

End of week 12 14/12/17

• Construct Coronation Street brief • Define aims and objective of

Coronation Street artefact

• Define all content for pages • Gather all necessary resources eg

images, typekit, colour pallette, music.

• Build framework and insert assets

• Check that outcome of build equals initial goals set

• Look back at project definition and compare to final project

• Research other websites • Research and build an audience

profile for new site• Decide on genre and style of website • Decide on font, colour palette and

images

• Produce a production schedule• Create a sitemap • Creation of digital assets • Create a storyboard with user

scenarios using sitemap to test navigation

• Create layout design and navigation design

• Build site using HTML, CSS and Java Scripts

• Test site for functionality • Conduct user tests for navigation

and accessibility • Test that all fonts, images, and

content is working across all internet browers eg: chrome, internet explorer, fire fox

Audience ProfileName: Kylie Black

Age: 38

Occupation: Care Assistant

Family: Married with 2 kids age 8 and 11

Hobbies: Enjoys going to her local gym for fitness classes such as “Legs,

Bums and Tums” and “Social Circuits”

TV: Kylie enjoys watching Coronation Street and Emmerdale during the

week and likes to watch ITV drama series such as “Vera”

About: Kylie has a busy work life balance; when she is not working she is

taking her children to football and dance lessons during the week along with

going to fitness classes herself. Therefore whenever she gets home she likes

to download the latest TV programs using the ITV player. She regular surfs

the internet on her iPad and plays games such as Candy Crush Saga.

Kylie would like an Interactive Website for her favourite Soap Opera;

Coronation Street to learn about the latest storylines and characters.

SitemapThe navigation of the website will be parallax scrolling primarily with the a 360 degree like experience where the locations of the links will be in one 360 degree image which users will click left and right to get to their desired location and once there they will then scroll down to find out about the place, the characters and some past clips in the set.

User scenariosUser Scenario 1

Problem:The user has recently just watched an episode of Coronation Street which was mainly set in The Bistro; they are confused as to which characters are who and would like to find out more about them.

Solution:The user can go online to the Coronation Street Website and enter the site through the splash screen; from there they can either click on the tab “The Bistro” in the navigation bar or they can click the left arrow on screen until they arrive at The Bistro. They will then scroll down the parallax page to the section titled “Characters” to find out the names and some information about them.

User Scenario 2

Problem:The user has just watched an episode of Coronation Street set in the Rovers and is interested to learn about the past Land Ladies of the Rovers.

Solution:The user can go online to the Coronation Street Website and enter the site through the splash screen; from there they can either click on the tab “The Rov-ers Return” in the navigation bar or they can click the left arrow on screen until they arrive at The Rovers. They will then scroll down the parallax page to the section titled “History” to find out about the past Land Ladies of the Rovers and some of their storylines and family tree.

User Scenario 3

Problem:The user has just watched a scene in Coronation Street of a fight between Adam Barlow and Aiden Connor in which they were arguing over who owns the Factory Under World; they mentioned a “Mike Baldwin” and would like to find out more.

Solution:The user can enter the site through the splash page and navigate to the Under World tab or page and scroll down to the history to find out where Adam Barlow fits into the owning of the Factory and how the Connor family came to take over Unde World.

INSPIRATION

ColourThe colour palette I have chosen for the Coronation Street interactive website was pulled out of the image of the Rovers Return and the rest of the street bricks using Adobe Col-our wheel. I used the colour mood “muted” to get this colour palette. I have used the first, third and fifth colour in this swatch to build this production folder. I think the colour works as it suits the iconic cobbles on the street. I have chosen the 1st, 3rd and last swatch on this colour palette as shown below.

FontI used the Coronation Street Logo as my inspiration for the font/type-kit in my project. I tried to find out what the font is in the Coronation Street logo in order to find out if it was available for download. How-ever I was unable to find out exactly what the name of the font is; so I then logged into my Adobe Type Kit and searched for Serif fonts that looked similar to the Coronation Street logo. The typekit that I found to be most similar to the logo was called “Mrs Eaves” which is what this current font that I am using for this folder. I think finding the correct font for this project is important to make sure that the theme and style of the website is consistent. This typekit is available for download for print and web.

Media

I sourced my images of the street locations from Google images which means that not all the images are taken from the same photographer or company; I found the best images and had to make them look like they are from the same camera in order for the the colour and style of the website to be consistent. I did this by taking all the images into Adobe Photoshop and adjusting the brightness and contrast to make them all rich in colour. After this I adjusted the layer using the “posterize” option which inhances certain details in the image by adding 4 basic levels into the layer. It is only a small edit on my part but I think they needed it in order to keep the consistency of style in the naviagtion of the website. I also plan to include the Coronation Street theme tune in the the background of the splash screen so the users feel like they are stepping into an episode of Coronation Street.

RESEARCH

Making my project better“Links are the basic currency of the Web. They tie two pieces of web content together in a meaningful way. But it’s not just that navigation provides access to information. It’s how navigation provides access that’s important. Navigation reveals a site’s thematic scope and it’s relevance to a particular need.” (J Kalbach, 2007)After reading this section of the book “designing web navigation” it has shown me that navigation is a very important aspect to a website; it is no longer just 5 links at the top of the website. Navigation comes in all sorts of different ways now depending on the theme of website. The wording of the navigation is also important to fit the style of the primary text.

This is a screenshot of a figure I found in the book “Balanced web design” on how to manage your project time line. I found it very helpful in creating my project timescale and have learned that it is important to go back and review each section of the project as you go forward to gain the best outcome of the website for your user.“At each of these three ‘Review and Reflect’ (R&R) steps, we can take a‘flashback’ to earlier steps. The flashback is so that we can go through oneor more previous steps again to resolve a problem” (D Lawrence, 2007)

Hybrid ForestThis is a screenshot of a website called Hybrid Forest. They are a company based in Stockholm and they create and work with lots of new media technology such as Virtual Reality, 360 Video and Game Development. I felt really engaged when naviagting my way round this website as it makes you feel like you are in this virtual world. It is easy to catch on to the way of navigating through this website because there are simple but effective icons which teaches me as a user how to navigate to each page/section. Hybrid forest used a lot of parallax scrolling through out this site in order to break up the content in digestable parts for the user to take in. This is the main in navigation inspiration for my interavtive website as I want to take my users on a journey through coronation street but also teach them at the same time and I think this is the more effective way of doing so.

Deadliest Catch 360This is a website based on the TV program Deadliest Catch. It is an interactive enviroment where the user feels like they are on the ships in the TV program and can navigate their way through ship levels and interact with the sailors on board. They are able to take tests, watch videos, look at images and lots more. I like this this website as there has been a lot of work put into it however I found it very difficult to navigate through as there is no direct start and finish to it. The website provides the user with instructions to teach them how to naviagte through the website but I still struggled to get my head around it until the fourth time I visited it. I think the site fits the style of a ship out at sea with the colour scheme and fonts and music playing in the backgorund but for me it is too busy and far too many icons on screen at the same time. This does give the user an opportunity to explore the site but I think it confuses them too.

Pretty Little Liars

My other idea for the Interactive website was based on an American TV program called Pretty Little Liars. It is about five teenage girls that live in a town called Rose-wood. Their friend Alison goes missing in the first episode and the other girls are suspects of her murder. Mean while they have a mysterious person called “A” that terrorises the girls and follows their every move so they are trying to figure out who killed Alli and who is A. “A” is always sending emails, texts messages and causing trouble for the girls as it knows their secrets from that night and the girls always have to make sure that their secrets are kept safe. The idea for this was to create a website about all 7 seasons of Pretty Little Liars like a fan page and have a page for each season and all the characters clips, theories and lots more about who is A. My other spin on this Primary text would be to create a site soley for the final season 7 of Pretty Little Liars which is called “The End Game” which I thought would be interesting to break down each episode in the season and get the user to decide who is A by playing clips and giving them background knowledge about the characters. This way they could watch season 7 and explore “Rosewood” at the same time. The theme of this would be like the board game “Clue-do” where it is the users job to find out to murdered who, why and where.

Titanic Another idea of mine for the Interactive website was to base the website on the sinking of the Titanic. The story of the titanic is about a ship built in Belfast which was the largest moving object ever built that was meant to voage across the North Atlantic but sadly struck ice berges in the early hours of 15th April 1915 and the “Ship of dreams” sank along with 1500 of it’s passengers. The movie made about the ship was based on it’s journey and two of the passengers; Jack and Rose who fell in love on the ship and sadly Jack didn’t survive the cold waters. The story is told by Rose who is in her 80’s now as she thinks back to that day. The idea for the website would be to create a website to tell the story in stages from when the ship initially struck the ice berge to when the sink sank at the end of the movie. This is similar to the website “Suly” which tells the story of a plane crashing in 208 seconds. I think that this website would engage users and would teach them details about certain moments in time about the Titanic and about the passengers on board for example; the captain, the upper class, the working class and the workers on the ship.

IDEAS

Splash page

The Rovers 1

The Rovers 1.1

The Kabin 1

The Kabin 1.1

Underworld 1

Underworld 1.1

Roys Rolls 1

Roys Rolls 1.1

Audrey’s 1

Audrey’s 1.1

Corner Shop 1

Corner Shop 1.1

Street Cars 1

Street Cars 1.1

The Bistro 1

The Bistro 1.1

Bibliographyhttps://www.deadliestcatch360.com/

http://www.thehybridforest.com/

http://coronationstreet.wikia.com/wiki/Coronation_Street_Wiki

https://color.adobe.com/create/color-wheel/

https://typekit.com/

Kalbach, J. (2007). Designing web navigation. O’Reilly.

Lawrence, D. (2007). Balanced Web Design. London Springer.

Image References URL links

http://news.images.itv.com/image/file/1024498/img.jpg

https://i2-prod.manchestereveningnews.co.uk/incoming/article5389231.ece/ALTERNATES/s615/Rovers-Return.jpg

http://assets.heart.co.uk/2017/08/roys-rolls-1487671337.jpg

https://media-cdn.tripadvisor.com/media/photo-s/06/71/8c/4b/coronation-street-the.jpg

https://media-cdn.tripadvisor.com/media/photo-s/05/b3/f7/be/coronation-street-the.jpg

http://images.dailystar.co.uk/dynamic/1/photos/23000/620x/The-Kabin-Coronation-street-430677.jpg

https://farm1.staticflickr.com/491/18935757538_1652c8b75e_b.jpg

http://vignette1.wikia.nocookie.net/coronationstreet/images/6/68/Street_cars_full_view.jpg/revision/latest?cb=20140413092350

http://2.bp.blogspot.com/-j07RUC5UJcI/VBNN2US14CI/AAAAAAAAMYU/4y3AFG1PEHs/s1600/underworld-coronation-street-tour.JPG

https://freeform.azureedge.net/showms/2017/289/e0b4df55-2e11-4f35-b9eb-2c16e10b0510.jpghttps://static.rogerebert.com/uploads/movie/movie_poster/titanic-1997/large_s2Z25JcBWS9tKAysSKuWyon5lwP.jpghttps://www.itv.com/hub//assets/img/svgmin/icons/brands/itv/itv-colour-picked.svghttps://www.seoreseller.com/wp-content/uploads/2015/08/Website-Navigation-Issues.png

http://digitalspyuk.cdnds.net/13/20/980x592/gallery_soaps-corrie-rovers-return-open-10.jpg

http://keyassets-p2.timeincuk.net/wp/prod/wp-content/uploads/sites/42/2013/05/9207208-1.jpg