Chloe McMaster B00712281 MED331: Interactive Design Practice Production Package Project Proposal
The 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 Street
Coronation 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 work Task Aims Action Completion date • Construct Coronation Street brief • Research other websites • Define aims and objective of • Research and build an audience Coronation Street artefact profile for new site End of week 4 Project Definition • Decide on genre and style of website 19/10/17 • Decide on font, colour palette and images
• Define all content for pages • Produce a production schedule • Gather all necessary resources eg • Create a sitemap images, typekit, colour pallette, • Creation of digital assets End of week 7 Production Planning music. • Create a storyboard with user 9/11/17 scenarios using sitemap to test navigation
• Build framework and insert assets • Create layout design and navigation design • Build site using HTML, CSS and End of week 11 Production Java Scripts 7/12/17
• Check that outcome of build equals • Test site for functionality initial goals set • Conduct user tests for navigation • Look back at project definition and and accessibility End of week 12 Quality Assurance compare to final project • Test that all fonts, images, and 14/12/17 content is working across all internet browers eg: chrome, internet explorer, fire fox Audience Profile Name: 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. Sitemap
The 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 scenarios
User Scenario 1 User Scenario 2
Problem: Problem: The user has recently just watched an episode of Coronation Street which was The user has just watched an episode of Coronation Street set in the Rovers and mainly set in The Bistro; they are confused as to which characters are who and is interested to learn about the past Land Ladies of the Rovers. would like to find out more about them. Solution: Solution: The user can go online to the Coronation Street Website and enter the site 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- through the splash screen; from there they can either click on the tab “The ers Return” in the navigation bar or they can click the left arrow on screen until Bistro” in the navigation bar or they can click the left arrow on screen until they they arrive at The Rovers. They will then scroll down the parallax page to the arrive at The Bistro. They will then scroll down the parallax page to the section section titled “History” to find out about the past Land Ladies of the Rovers and titled “Characters” to find out the names and some information about them. 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 Colour
The 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. Font
I 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 one or more previous steps again to resolve a problem” (D Lawrence, 2007) Hybrid Forest
This 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 360
This 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 Bibliography
https://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.jpg https://static.rogerebert.com/uploads/movie/movie_poster/titanic-1997/large_s2Z25JcBWS9tKAysSKuWyon5lwP.jpg https://www.itv.com/hub//assets/img/svgmin/icons/brands/itv/itv-colour-picked.svg https://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