A2 Media: Evaluation
The purpose of this unit is to assess my ability to plan and construction media products using appropriate technical and creative skills. Within this process I had to assess my application of knowledge and understanding in evaluating my own work, showing how meanings and responses for an audience are created. Also to assess my ability to undertake, apply and present appropriate research.
The aim was to produce a media portfolio comprising a main and two ancillary texts, presentation of my research, planning and evaluation.
My media portfolio will be produced through a combination of two or more of the following media:
- Video
- Print
- Web based
- Audio
- Games software
I have chosen to create A website for a new TV channel (to include a minimum of three hyperlinked pages with original images, audio, and video extract), together with two of the following three options:
- A newspaper advertisement for the channel;
- A double page spread for a listing magazine, focused on the channels launch. ;
- An animated ident sequence for the channel.
This task requires me to create an identity for my TV channel, as well as a website and some forms of branding and advertising. This must follow the guidelines for the task, and be fitting to the audience and genre of the TV Channel.
My chosen medium for this project is websites, this mostly consists of a well designed website and coding of the design. For this brief, I have created a website for a TV channel based around HD and the next generation of media such as 3D etc. Since my TV channel was based around HD/3D content, I began to look into the technology behind these “next generation” technologies, and see if I could incorporate any of these aspects into my design throughout the course. I began by researching into the technology behind 3D television, which employs techniques of 3D Presentation, such as stereoscopic capture, multi-view capture, or 2D plus depth and a 3D Display, Basically this is the very technology now sitting in our houses which produces a realistic 3D projection in front of us. The depth of field and visibility in 3D media is what separates it from tradition 2D media, advanced by IMAX high end theatres and Disney venues. Today, 3D is readily available and is rapidly growing within the movie industry because of such films as Avatar. A film directed by James Cameron, development on Avatar began in 1994, when Cameron wrote an 80 page script for the film. Filming for this film was supposed to begin straight after the filming of Titanic in 1997 but didn’t happen for some time after, as Cameron believed that the technology needed to capture, create and display his vision wasn’t not yet available. This new and exciting technology that is sweeping the world has been used as a theme within my website. As well as 3D technology, I also researched HD media. HDTV is video content which has substantially higher resolution than old traditional television systems (Standard Definition Television or SDTV)The difference in the picture quality can sometimes be hard to tell the difference between SD however HD is revolutionising the market in other areas other than TV, such as gaming. This HD content has one or two million pixels per frame, roughly five times that of SD.
Even though the website I contrasted is heavily themed around HD and 3D content, the main medium and theme for the website is Movies. The movie industry itself has been heavily digitalised over the years to overcome many limitations such as difficulty of viewing footage while recording the footage, as well as other problems such as poor film development and processing. Also given that the film industry has a huge boost in the use of computer generated imagery in movies and that the editing procedure is often now down digitally a lot of directors now choose to film in HD format using the latest in technology high end digital video cameras. Although the quality of current HD video is extremely high compared to SD video, and offers to fix many problems with traditional film such as signal and noise ratios which is considerably superior with HD video than sensitivity film, the industry still choose film over HD in some cases. Film can still contain more detail than some HD, and other films also have a wider dynamic range than then best HD cameras. (this being the ability to resolve extremes of dark and light areas in a scene) But the argument is usually concluded by the fact that the use of HD is currently cost saving on film stock and eases the transfer to editing systems for special effects. The swift move of Standard definition to High definition has definitely provoked me to look into the movement from HD to 3D and since this movement between high end systems is currently still happening and is a big movement in the movie and television world, creating a website for a TV channel themed around these features of today’s Movie industry seemed to be a successful idea.
After deconstructing the technology and history behind modern video, I looked into the essentials of a well designed website, and the history behind websites and then applied these to the design of my website.
There are hundreds of different types, or sub genres of websites but I will be focusing on creating a Hybrid website based around a Corporate/Content website which would be used to provide background information about a business, organization, or service and distribution of content.
The World Wide Web was created in 1989 by CERN physicist Tim Berners-Lee. It was announced, on 30th April 1993 by CERN that the World Wide Web would be free for everyone to use but websites themselves haven't always been the same as way we see them today, before the introduction of web languages such as HTML. CSS and Java which are really the foundations upon which you build websites, other protocols such as File Transfer Protocol and the Gopher Protocol were used to retrieve individual files from the websites server. These protocols where in place to create a simple directory of files which the user could navigate around to choose files to download. Documents on the web were usually presented as plain text files without any formatting much like a plain word document or notepad file, in fact most where encoded in word processor formats. Going by these old styles and means of creating a website when the internet for first made commercially available, it is extremely hard to say what the first ever “website” actually was, as it wasn’t really a website at all. This primitive website was made in the early 70’s when the computers that were used in the first infrastructure network weighed over 5 tonnes each and all the computers were linked to the networks together weighed over 100 tones. This whole network was originally created as an experiment to see if migration of mass information would be stable by sending the data through wires. This was found to be successful by the pentagon as they could share all their information with their bases around the USA and if it wasn’t for the success of this pentagon networking development, we wouldn’t have the internet that we take for granted day in day out. My website has largely developed since the days of the first websites. Granted, I created my website using the base language of HTML, I also had to learn other languages such as Java and CSS. CSS being Cascading Style Sheet, this is used to link to a webpage to give elements style, location and other qualities. The CSS is coding that can be linked a multiple pages across one website to give the whole site a consistent house style, to make sure all the text is formatted in the same way and also to play logos and links in the same place on every page. Java is a prototype-based object-oriented scripting language. This language can be used to animate websites and make elements move or perform certain tasks, there are two examples of this on my website, one being the clock and the other being the slide show of top news on the homepage.
The first thing I had to take into consideration while designing the website was a clear form of website navigation. The navigation on the website tells the user how to find the information and content that they want. The navigation should be easy to find and very clear. For my design, the websites navigation is simple and minimalistic, the links are easy to find and use, even links to such social networking sites as Facebook and Twitter. After sorting out the placement and general construction of the website’s layout I then looked towards creating a visually appealing, yet simple stylish home page. When designing my homepage, don’t clutter it. Don’t try and put all your content on the home page, use snippets and pockets of information and link to the full picture, you want the user to have basic knowledge over the websites general business and what they can gain from using your website. The detail needs to be added to additional hyperlinked pages. The design of my own website is simple, yet individual. I believe it fits in with its genre and content and creates a very stylised and professional look for the business. The website is easy to navigate around and leaves the consumer/audience with a strong understanding of the service that the website provides. Even though the website clearly shows what purouse it serves and its numourious services sometimes customers will want to contact a real person to make contact with the business. This contact information needs to be available to access on your website, which on my website is based on a contact us page, where there are multiple ways to contact the company. As well as contact since my website relates to my "product" or the TV Channel and programs, it is smart to include an FAQ (Frequently Asked Questions) section to help customers easily find answer to questions about your services. For smaller businesses this may also help cut down on phone calls or tech support emails, saving time and money for the business owner. Make sure it is clear to visitors what you want them to do when they get to your site. If your intention is to drive sales with your site, be sure you include special pricing, promotions or offers and make it easy for customers to buy. If your intention is to educate visitors about your business, make sure information about your company is prominently displayed and easy to find and easy to navigate around as previously mentioned. Within my website, I have tried to promote a service across all networks, not just the website itself. Within the design I have incorporated links and embedded components from Social networking sites such as Facebook and Twitter. All of these where taken into consideration while designing my website. I think that my website must have a simple navigation, as a TV Channel is viewed by millions of viewers, some older, some young, some who find it hard to use the Internet, and some who are fluent. My web page needs to be easily accessible for any customer to view, to create a wide audience. While designing the website I also had to try and not to be too ambitious as the task of moving a design from a flat Photoshop design to a moving, working interactive website can become almost impossible if things aren’t kept to a level which it is able to be coded.
To create my website, I used a mixture of adobe’s creative suite 3 and 5 depending on the location, CS3 being used at college and CS5 at home, to built my website. It started with coming up with some initial sketches of basic layouts of the website after looking at similar websites and how the place their advertisements and content around the page; for this I looked at websites such like Channel 4 and Sky Movies being my main influence as it was the closest commercial website similar to what I was producing. After looking into layouts, I then created some easier to understand IT drafts of the placements, upon these I then chose the best to work with and produce the most efficient website. I then chose a colour scheme, this choice of style was a big decision, as this would influence the rest of my website and both ancillary texts. I chose to work mostly with Blue, but using a ride range of tones. I started by creating a simple gradient background and then placing tables on top where the content would be. I created separate tables for the top links, the advertisement bar, and then the main content table which is then split up into different sections for different articles and content. I created simple logos for Facebook and Twitter which matched the style of my website and used to them link the business across multiple platforms, I used various layer styles such as strokes and drop shadows to create a simple yet dynamic look across the website, as well as adding touches with the brush tool and pen tool. I have used Photoshop for around 5 years no and have become fluent with all of the tools, styles and various other aspects across the program and usually spend my spare time creating websites and working and maintaining my own website, so creating this website was still tricky but I felt I had a large advantage having used this software for so many years previous to the course. After I created the 2d flat design in Photoshop, saving as a PSD as to save all the layers separate making it easier for me to isolate certain areas and save images that will be used in the making of the actual website, I then moved over to another piece of software from the Adobe package called Dreamweaver.
Dreamweaver is a program in the Adobe package which is used to create websites, and can be used by first time users, to experts. The program itself consists of a Design view and a code view, both of which aren’t always available depending on the type of file your editing in the program, but for HTML you can choose which use or even half and half. After creating the base blank files “index.html” and “style.css” I then used this piece of coding to link these two files together; . This piece of code links the Style sheet to the HTML file, this makes for a cleaner coding of the website and basically allows me to put 90% of the pages coding into a file that can then be linked to every other HTML page on the website to apply the same style to all of them. The transition between design and actual product wasn’t as hard as I previously thought, and only came across a few problems while doing so. One being a language I hadn’t recently delved into, Java. I needed to use this language to create my self-scrolling slide show at the top of my homepage to advertise the latest content. It was easy enough to design but the making of it proved extremely difficult, and I had to learn a lot of Java and use some very helpful online tips on websites such as youtube as to how I could create a something along the lines of which I had designed. After coming across this problem I then have to create a clock, again just a text clock at the top of my page but I needed to be coded using Java. After previously learning some Java within my work I had prior knowledge but just had to look up a few phrases within the language to get the widget to do what I wanted it to do.
One major problem I had with this design while coding it was the fact that Internet explorer reads the code differently to other browsers such as Google Chrome and Mozilla Firefox. This became a big problem as everything was miss placed in the browsers depending which browser I was using to view my coded work. I first noticed then when I did a huge amount of coding at home, viewing the product in Google Chrome only to then continue coding at college and then viewing in Internet Explorer to see my website is completely different. After messing about with trying to use different style sheets for each browsers, I realised it was getting way too complicated because of the wide range of browsers now available, I looked to an alternative, which I found in a small line of code.
After writing a line of code in the CSS, for example:
#trailer
{
background-image:url(images/textbg.PNG);
background-repeat:no-repeat;
margin-left: -335px;
position: absolute;
top: 1335px;
left: 50%;
width: 640px;
height: 520px;
visibility: visible
}
I would then follow it with:
*+html #trailer {
top: 1345px;
}
This meant that the all browsers would read the code that followed “#trailer”
But then only Internet explorer would read the coding which followed “*+html #trailer”. This coding saves me a lot and messing about, and again allowed me to use one CSS for all web pages used for my website. After overcoming these problems the rest was simple coding, aligning text, images, embedding videos which I hosted on youtube again for more connections to the website, connecting to more networks to broaden the websites potential audience. Each page had the same layout, advert at the top with the clock above and then a large content box at the top of the main table which on the homepage houses the slideshow, but houses videos and images on other pages. After producing all over the pages, which consisted of a page introducing my new Ident for the company, an exclusive interview with the main star from the film trailer I produced for the website and the homepage as well as FAQ and contact pages. These were then linked to each other and then had all of the Java files and CSS files linked, and all uploading to online hosting. Usually this would have to be purchased when creating a new website, but since I already own my own website I already own my own web space to host. I then hosted the website under a sub domain of my own website to make it easy to access;
http://www.ngm.jordanharrison.co.uk
The design of my website was heavily influenced by audience feedback. For my audience feedback on this particular project while building the basic website I added a FAQ, and a Contact Us page, which had feedback links. When showing people my progress, I would ask them to email the feedback email and send me their ideas and concerns. The range of people that emailed me for feedback was between the ages of 60 to 40. I tried to get the biggest selection possible. From what I could see there was a strong positive correlation of people being happy with the website and how it works. The main concerns that came up during the audience feedback was browser compatibility. One person had a smaller resolution screen, admittedly she was part of the minority out there with smaller old resolution screens but never the less I had to resolve the problem.
First of all I gathered the screen resolutions of the people with problems and then began to make the website smaller by approximately 10% to compensate for the smaller screen. After adjusting the site I began to reply to the feedback to ask them if the screen now fit their resolutions, and it did. The main problems was with Netbooks.
The rest of the feedback was positive, from older and younger users. People liked the link from website to social networking, and how they could keep up to date with the websites top news by following on such websites at Twitter and Facebook. One more problem was with the links, some of the links became hidden and lost under other lays due to how the way internet explorer reads the CSS and applies it to the website. Again, I didn’t come up with any of these problems while using Chrome or Firefox as these browsers read the CSS in a more efficient and correct way. Although it was only a minor problem, I still had to try and resolve it, which wasn’t as easy as giving the element a separate value, I had to re write the coding and move the contents into a different layer would could be placed on top of all o the other layers using z-index orders. (z-index is a system of ordering the layers on a website to put certain layers behind others to create desired effects.)
The majority of my feedback was positive, and I had to change the problems that the website did have, but I believe that if not for the audience feedback, I wouldn’t of created a website that flows and works as well as it does. I also believed that the way of which I collected feedback was very efficient as people didn’t have to sit and fill forms in, they could easily just send an email in their own time.
Overall I was extremely pleased with the outcome of my website, it took some hard work to get the desired look and affect online and working across all platforms but I think the outcome is a simple and professional website that works well with the chosen brief and fits in with the theme of HD and 3D content. The website itself I tried to aim at a wide range of people, by creating an easy to navigate environment with content for different peoples interests and linking to social networking sites for easy access for the younger age band, as well as the older population of the audience who also use today’ s social networks.
For my ancillary texts, I chose to create a newspaper advertisement and an Ident. An Ident is a small video clip which is used to promote and advertise the institution, examples of these would be the short BBC clips before programs such as the bikers, or the swimmers. Also the Channel 4 idents which consist of large obscure 4’s which slowly come into focus. The main objective of both of these is to promote and create a tangible link between the audience and the channel and to put a front and give the channel its own look and style.
For my media advertisement I chose to use a clip from my ident which displays the exploded text behind the institutional logo of NextGenMovies. With this I then used it to create a background upon which my writing and text would be placed around with the main focus being on the logo. This then focused the attention on the logo and also fed the readers information. The logo is then used within the website, ident and advert, as well as using the ident animation within the advert, and then the ident on the website. Creating a link across all mediums used i have used and created, making a consistent house style and being able to tell that the products are related. Again I used Photoshop to create advert and quite basic since I already had created the logo and just needed to incorporate it into my advertisement. For my ident I decided to look at the market of readily available software to create an individual animated ident from scratch. I already know that there are a lot programs out there that are great for creating 3D models and text, but I also needed to use this 3D development within video to create this short animation clip. I begin by looking into the adobe package previously mentioned a I have used most of their products before and have background knowledge about how they work and how to use them affectively. But after searching, and trying out such programs such as After affects and Premier Pro from the adobe package, I decided upon a package by Maxon called Cinema 4D. I had never heard of used this program before and was unsure about putting all my time into it to see how it worked and how to use it, but I gave it a try. After researching the program and giving it a go, I found some clips from Maxon that had been used commercially and created by professionals for the American Superbowl, F1 and other world famous projects ad content that was view by millions of people worldwide.
This packaged creates a virtual stage for which you can create whatever you like dependant on your skill level. Before diving in at the deep end, I experimented with basic lighting, text and camera work before moving onto the bigger project. I researched different techniques and followed many online tutorials to get to the level where I felt I was confident enough to create my own ident. For me, the ideal film to promote 3D and HD content would be Transformers, the stunning effects and amazing use of CGI really works well within the new digital era. For my ident I looked for inspiration from transformers, in the form of their opening sequence, I really like the idea of some kind of mechanical explosion, all of the tiny particles coming into 1, millions of pieces creating one final high definition piece. I used a series of different lighting and textures to create my desired final piece. After a day of rendering, I then fed this though the process of Adobe Premier Pro to get the best quality outcome possible. While putting it through this process, I decided to have a play around with different borders and edges and finally created a grungy texture around the end of the video which I personally feel added to the piece. As well as this touch, I added audio to the piece to give it another dimension and all of my pieces came together just as I had wished.
Personally I feel that I have worked to my full potential on this brief, within the design and final piece. Not to say I didn’t encounter my fair share of problems, as well as issues throughout the process of working, such as losing access to the internet on my personal computers and also problems with my hosting and name servers while trying to host my final website. I believe I created a strong body of work with good research to back up my reasoning’s behind why I did and what I did as well as regularly collecting feedback while working about my website, what could be changed and if you liked the design. This website had to be designed for other users in mine, I am not the demographic. My audience is, and I believe I have created a functional media text which serves its purpose with style ease of use. Being critical about the website, there are 1 or 2 things I wish I had the time to do differently. Such as how I centred the whole content, the coding works but when the window is made slightly smaller than the table width it doesn’t add a scroll bar meaning smaller monitors would lose out on some viewing space. Although this is highly unlikely because the size of the monitor would have to be something extremely small for a PC or Laptop for it to not function correctly, I would still of liked to changed the coding for this. The project was too far in to change this now, It would of meant a total site rebuild, completely back to the Photoshop file and creating the site a different way completely.
The Ident was a lot of work, for this I had to learn a native program which I had never used before, much like the learning of Java for my website. But in the end the outcome was worth it, the ident really does say exactly what I wanted it to say about the product and the company. Its clean, crisp and ready for now, but also on the edge. This was probably my most favourite part of the project as I learnt a new way of creating and developing my idea’s outside of the curriculum and tools we were given to use at the college. Using it has given me a greater knowledge in 3D design and rendering.
For the newspaper advertisement I tried to work as if I was to create and print this in budget, for this to be efficient, and affordable I kept the tones down and the vivid colours away. I wanted it to make a statement, but not to attract the wrong people. Also using these colours and tones the printing of this advert itself would of been cheaper than printing a whole spectrum of colours. The advertisement itself links the extremely well into both the website and the ident and pulls everything together very well. Which is what I would of wanted most from my ident, to follow the conventions of the ident and create a brand and a face for the company.
Together with all my practical work, I also provided a lot of research into similar websites and idents that I could use within my own work. Without the research, I think for obvious reasons my final outcome would of been completely different, but due to the research, my work is organised, easy to use and well structured. The task as a whole has benefited me with a greater knowledge in a whole range of different areas within media and within other aspects such as web design, coding and 3D rendering. It’s also taught me the importance of audience feedback and research. In all, I believe that my project has been a success.
The purpose of this unit is to assess my ability to plan and construction media products using appropriate technical and creative skills. Within this process I had to assess my application of knowledge and understanding in evaluating my own work, showing how meanings and responses for an audience are created. Also to assess my ability to undertake, apply and present appropriate research.
The aim was to produce a media portfolio comprising a main and two ancillary texts, presentation of my research, planning and evaluation.
My media portfolio will be produced through a combination of two or more of the following media:
- Video
- Web based
- Audio
- Games software
I have chosen to create A website for a new TV channel (to include a minimum of three hyperlinked pages with original images, audio, and video extract), together with two of the following three options:
- A newspaper advertisement for the channel;
- A double page spread for a listing magazine, focused on the channels launch. ;
- An animated ident sequence for the channel.
This task requires me to create an identity for my TV channel, as well as a website and some forms of branding and advertising. This must follow the guidelines for the task, and be fitting to the audience and genre of the TV Channel.
My chosen medium for this project is websites, this mostly consists of a well designed website and coding of the design. For this brief, I have created a website for a TV channel based around HD and the next generation of media such as 3D etc. Since my TV channel was based around HD/3D content, I began to look into the technology behind these “next generation” technologies, and see if I could incorporate any of these aspects into my design throughout the course. I began by researching into the technology behind 3D television, which employs techniques of 3D Presentation, such as stereoscopic capture, multi-view capture, or 2D plus depth and a 3D Display, Basically this is the very technology now sitting in our houses which produces a realistic 3D projection in front of us. The depth of field and visibility in 3D media is what separates it from tradition 2D media, advanced by IMAX high end theatres and Disney venues. Today, 3D is readily available and is rapidly growing within the movie industry because of such films as Avatar. A film directed by James Cameron, development on Avatar began in 1994, when Cameron wrote an 80 page script for the film. Filming for this film was supposed to begin straight after the filming of Titanic in 1997 but didn’t happen for some time after, as Cameron believed that the technology needed to capture, create and display his vision wasn’t not yet available. This new and exciting technology that is sweeping the world has been used as a theme within my website. As well as 3D technology, I also researched HD media. HDTV is video content which has substantially higher resolution than old traditional television systems (Standard Definition Television or SDTV)The difference in the picture quality can sometimes be hard to tell the difference between SD however HD is revolutionising the market in other areas other than TV, such as gaming. This HD content has one or two million pixels per frame, roughly five times that of SD.
Even though the website I contrasted is heavily themed around HD and 3D content, the main medium and theme for the website is Movies. The movie industry itself has been heavily digitalised over the years to overcome many limitations such as difficulty of viewing footage while recording the footage, as well as other problems such as poor film development and processing. Also given that the film industry has a huge boost in the use of computer generated imagery in movies and that the editing procedure is often now down digitally a lot of directors now choose to film in HD format using the latest in technology high end digital video cameras. Although the quality of current HD video is extremely high compared to SD video, and offers to fix many problems with traditional film such as signal and noise ratios which is considerably superior with HD video than sensitivity film, the industry still choose film over HD in some cases. Film can still contain more detail than some HD, and other films also have a wider dynamic range than then best HD cameras. (this being the ability to resolve extremes of dark and light areas in a scene) But the argument is usually concluded by the fact that the use of HD is currently cost saving on film stock and eases the transfer to editing systems for special effects. The swift move of Standard definition to High definition has definitely provoked me to look into the movement from HD to 3D and since this movement between high end systems is currently still happening and is a big movement in the movie and television world, creating a website for a TV channel themed around these features of today’s Movie industry seemed to be a successful idea.
After deconstructing the technology and history behind modern video, I looked into the essentials of a well designed website, and the history behind websites and then applied these to the design of my website.
There are hundreds of different types, or sub genres of websites but I will be focusing on creating a Hybrid website based around a Corporate/Content website which would be used to provide background information about a business, organization, or service and distribution of content.
The World Wide Web was created in 1989 by CERN physicist Tim Berners-Lee. It was announced, on 30th April 1993 by CERN that the World Wide Web would be free for everyone to use but websites themselves haven't always been the same as way we see them today, before the introduction of web languages such as HTML. CSS and Java which are really the foundations upon which you build websites, other protocols such as File Transfer Protocol and the Gopher Protocol were used to retrieve individual files from the websites server. These protocols where in place to create a simple directory of files which the user could navigate around to choose files to download. Documents on the web were usually presented as plain text files without any formatting much like a plain word document or notepad file, in fact most where encoded in word processor formats. Going by these old styles and means of creating a website when the internet for first made commercially available, it is extremely hard to say what the first ever “website” actually was, as it wasn’t really a website at all. This primitive website was made in the early 70’s when the computers that were used in the first infrastructure network weighed over 5 tonnes each and all the computers were linked to the networks together weighed over 100 tones. This whole network was originally created as an experiment to see if migration of mass information would be stable by sending the data through wires. This was found to be successful by the pentagon as they could share all their information with their bases around the USA and if it wasn’t for the success of this pentagon networking development, we wouldn’t have the internet that we take for granted day in day out. My website has largely developed since the days of the first websites. Granted, I created my website using the base language of HTML, I also had to learn other languages such as Java and CSS. CSS being Cascading Style Sheet, this is used to link to a webpage to give elements style, location and other qualities. The CSS is coding that can be linked a multiple pages across one website to give the whole site a consistent house style, to make sure all the text is formatted in the same way and also to play logos and links in the same place on every page. Java is a prototype-based object-oriented scripting language. This language can be used to animate websites and make elements move or perform certain tasks, there are two examples of this on my website, one being the clock and the other being the slide show of top news on the homepage.
The first thing I had to take into consideration while designing the website was a clear form of website navigation. The navigation on the website tells the user how to find the information and content that they want. The navigation should be easy to find and very clear. For my design, the websites navigation is simple and minimalistic, the links are easy to find and use, even links to such social networking sites as Facebook and Twitter. After sorting out the placement and general construction of the website’s layout I then looked towards creating a visually appealing, yet simple stylish home page. When designing my homepage, don’t clutter it. Don’t try and put all your content on the home page, use snippets and pockets of information and link to the full picture, you want the user to have basic knowledge over the websites general business and what they can gain from using your website. The detail needs to be added to additional hyperlinked pages. The design of my own website is simple, yet individual. I believe it fits in with its genre and content and creates a very stylised and professional look for the business. The website is easy to navigate around and leaves the consumer/audience with a strong understanding of the service that the website provides. Even though the website clearly shows what purouse it serves and its numourious services sometimes customers will want to contact a real person to make contact with the business. This contact information needs to be available to access on your website, which on my website is based on a contact us page, where there are multiple ways to contact the company. As well as contact since my website relates to my "product" or the TV Channel and programs, it is smart to include an FAQ (Frequently Asked Questions) section to help customers easily find answer to questions about your services. For smaller businesses this may also help cut down on phone calls or tech support emails, saving time and money for the business owner. Make sure it is clear to visitors what you want them to do when they get to your site. If your intention is to drive sales with your site, be sure you include special pricing, promotions or offers and make it easy for customers to buy. If your intention is to educate visitors about your business, make sure information about your company is prominently displayed and easy to find and easy to navigate around as previously mentioned. Within my website, I have tried to promote a service across all networks, not just the website itself. Within the design I have incorporated links and embedded components from Social networking sites such as Facebook and Twitter. All of these where taken into consideration while designing my website. I think that my website must have a simple navigation, as a TV Channel is viewed by millions of viewers, some older, some young, some who find it hard to use the Internet, and some who are fluent. My web page needs to be easily accessible for any customer to view, to create a wide audience. While designing the website I also had to try and not to be too ambitious as the task of moving a design from a flat Photoshop design to a moving, working interactive website can become almost impossible if things aren’t kept to a level which it is able to be coded.
To create my website, I used a mixture of adobe’s creative suite 3 and 5 depending on the location, CS3 being used at college and CS5 at home, to built my website. It started with coming up with some initial sketches of basic layouts of the website after looking at similar websites and how the place their advertisements and content around the page; for this I looked at websites such like Channel 4 and Sky Movies being my main influence as it was the closest commercial website similar to what I was producing. After looking into layouts, I then created some easier to understand IT drafts of the placements, upon these I then chose the best to work with and produce the most efficient website. I then chose a colour scheme, this choice of style was a big decision, as this would influence the rest of my website and both ancillary texts. I chose to work mostly with Blue, but using a ride range of tones. I started by creating a simple gradient background and then placing tables on top where the content would be. I created separate tables for the top links, the advertisement bar, and then the main content table which is then split up into different sections for different articles and content. I created simple logos for Facebook and Twitter which matched the style of my website and used to them link the business across multiple platforms, I used various layer styles such as strokes and drop shadows to create a simple yet dynamic look across the website, as well as adding touches with the brush tool and pen tool. I have used Photoshop for around 5 years no and have become fluent with all of the tools, styles and various other aspects across the program and usually spend my spare time creating websites and working and maintaining my own website, so creating this website was still tricky but I felt I had a large advantage having used this software for so many years previous to the course. After I created the 2d flat design in Photoshop, saving as a PSD as to save all the layers separate making it easier for me to isolate certain areas and save images that will be used in the making of the actual website, I then moved over to another piece of software from the Adobe package called Dreamweaver.
Dreamweaver is a program in the Adobe package which is used to create websites, and can be used by first time users, to experts. The program itself consists of a Design view and a code view, both of which aren’t always available depending on the type of file your editing in the program, but for HTML you can choose which use or even half and half. After creating the base blank files “index.html” and “style.css” I then used this piece of coding to link these two files together; . This piece of code links the Style sheet to the HTML file, this makes for a cleaner coding of the website and basically allows me to put 90% of the pages coding into a file that can then be linked to every other HTML page on the website to apply the same style to all of them. The transition between design and actual product wasn’t as hard as I previously thought, and only came across a few problems while doing so. One being a language I hadn’t recently delved into, Java. I needed to use this language to create my self-scrolling slide show at the top of my homepage to advertise the latest content. It was easy enough to design but the making of it proved extremely difficult, and I had to learn a lot of Java and use some very helpful online tips on websites such as youtube as to how I could create a something along the lines of which I had designed. After coming across this problem I then have to create a clock, again just a text clock at the top of my page but I needed to be coded using Java. After previously learning some Java within my work I had prior knowledge but just had to look up a few phrases within the language to get the widget to do what I wanted it to do.
One major problem I had with this design while coding it was the fact that Internet explorer reads the code differently to other browsers such as Google Chrome and Mozilla Firefox. This became a big problem as everything was miss placed in the browsers depending which browser I was using to view my coded work. I first noticed then when I did a huge amount of coding at home, viewing the product in Google Chrome only to then continue coding at college and then viewing in Internet Explorer to see my website is completely different. After messing about with trying to use different style sheets for each browsers, I realised it was getting way too complicated because of the wide range of browsers now available, I looked to an alternative, which I found in a small line of code.
After writing a line of code in the CSS, for example:
#trailer
{
background-image:url(images/textbg.PNG);
background-repeat:no-repeat;
margin-left: -335px;
position: absolute;
top: 1335px;
left: 50%;
width: 640px;
height: 520px;
visibility: visible
}
I would then follow it with:
*+html #trailer {
top: 1345px;
}
This meant that the all browsers would read the code that followed “#trailer”
But then only Internet explorer would read the coding which followed “*+html #trailer”. This coding saves me a lot and messing about, and again allowed me to use one CSS for all web pages used for my website. After overcoming these problems the rest was simple coding, aligning text, images, embedding videos which I hosted on youtube again for more connections to the website, connecting to more networks to broaden the websites potential audience. Each page had the same layout, advert at the top with the clock above and then a large content box at the top of the main table which on the homepage houses the slideshow, but houses videos and images on other pages. After producing all over the pages, which consisted of a page introducing my new Ident for the company, an exclusive interview with the main star from the film trailer I produced for the website and the homepage as well as FAQ and contact pages. These were then linked to each other and then had all of the Java files and CSS files linked, and all uploading to online hosting. Usually this would have to be purchased when creating a new website, but since I already own my own website I already own my own web space to host. I then hosted the website under a sub domain of my own website to make it easy to access;
http://www.ngm.jordanharrison.co.uk
The design of my website was heavily influenced by audience feedback. For my audience feedback on this particular project while building the basic website I added a FAQ, and a Contact Us page, which had feedback links. When showing people my progress, I would ask them to email the feedback email and send me their ideas and concerns. The range of people that emailed me for feedback was between the ages of 60 to 40. I tried to get the biggest selection possible. From what I could see there was a strong positive correlation of people being happy with the website and how it works. The main concerns that came up during the audience feedback was browser compatibility. One person had a smaller resolution screen, admittedly she was part of the minority out there with smaller old resolution screens but never the less I had to resolve the problem.
First of all I gathered the screen resolutions of the people with problems and then began to make the website smaller by approximately 10% to compensate for the smaller screen. After adjusting the site I began to reply to the feedback to ask them if the screen now fit their resolutions, and it did. The main problems was with Netbooks.
The rest of the feedback was positive, from older and younger users. People liked the link from website to social networking, and how they could keep up to date with the websites top news by following on such websites at Twitter and Facebook. One more problem was with the links, some of the links became hidden and lost under other lays due to how the way internet explorer reads the CSS and applies it to the website. Again, I didn’t come up with any of these problems while using Chrome or Firefox as these browsers read the CSS in a more efficient and correct way. Although it was only a minor problem, I still had to try and resolve it, which wasn’t as easy as giving the element a separate value, I had to re write the coding and move the contents into a different layer would could be placed on top of all o the other layers using z-index orders. (z-index is a system of ordering the layers on a website to put certain layers behind others to create desired effects.)
The majority of my feedback was positive, and I had to change the problems that the website did have, but I believe that if not for the audience feedback, I wouldn’t of created a website that flows and works as well as it does. I also believed that the way of which I collected feedback was very efficient as people didn’t have to sit and fill forms in, they could easily just send an email in their own time.
Overall I was extremely pleased with the outcome of my website, it took some hard work to get the desired look and affect online and working across all platforms but I think the outcome is a simple and professional website that works well with the chosen brief and fits in with the theme of HD and 3D content. The website itself I tried to aim at a wide range of people, by creating an easy to navigate environment with content for different peoples interests and linking to social networking sites for easy access for the younger age band, as well as the older population of the audience who also use today’ s social networks.
For my ancillary texts, I chose to create a newspaper advertisement and an Ident. An Ident is a small video clip which is used to promote and advertise the institution, examples of these would be the short BBC clips before programs such as the bikers, or the swimmers. Also the Channel 4 idents which consist of large obscure 4’s which slowly come into focus. The main objective of both of these is to promote and create a tangible link between the audience and the channel and to put a front and give the channel its own look and style.
For my media advertisement I chose to use a clip from my ident which displays the exploded text behind the institutional logo of NextGenMovies. With this I then used it to create a background upon which my writing and text would be placed around with the main focus being on the logo. This then focused the attention on the logo and also fed the readers information. The logo is then used within the website, ident and advert, as well as using the ident animation within the advert, and then the ident on the website. Creating a link across all mediums used i have used and created, making a consistent house style and being able to tell that the products are related. Again I used Photoshop to create advert and quite basic since I already had created the logo and just needed to incorporate it into my advertisement. For my ident I decided to look at the market of readily available software to create an individual animated ident from scratch. I already know that there are a lot programs out there that are great for creating 3D models and text, but I also needed to use this 3D development within video to create this short animation clip. I begin by looking into the adobe package previously mentioned a I have used most of their products before and have background knowledge about how they work and how to use them affectively. But after searching, and trying out such programs such as After affects and Premier Pro from the adobe package, I decided upon a package by Maxon called Cinema 4D. I had never heard of used this program before and was unsure about putting all my time into it to see how it worked and how to use it, but I gave it a try. After researching the program and giving it a go, I found some clips from Maxon that had been used commercially and created by professionals for the American Superbowl, F1 and other world famous projects ad content that was view by millions of people worldwide.
This packaged creates a virtual stage for which you can create whatever you like dependant on your skill level. Before diving in at the deep end, I experimented with basic lighting, text and camera work before moving onto the bigger project. I researched different techniques and followed many online tutorials to get to the level where I felt I was confident enough to create my own ident. For me, the ideal film to promote 3D and HD content would be Transformers, the stunning effects and amazing use of CGI really works well within the new digital era. For my ident I looked for inspiration from transformers, in the form of their opening sequence, I really like the idea of some kind of mechanical explosion, all of the tiny particles coming into 1, millions of pieces creating one final high definition piece. I used a series of different lighting and textures to create my desired final piece. After a day of rendering, I then fed this though the process of Adobe Premier Pro to get the best quality outcome possible. While putting it through this process, I decided to have a play around with different borders and edges and finally created a grungy texture around the end of the video which I personally feel added to the piece. As well as this touch, I added audio to the piece to give it another dimension and all of my pieces came together just as I had wished.
Personally I feel that I have worked to my full potential on this brief, within the design and final piece. Not to say I didn’t encounter my fair share of problems, as well as issues throughout the process of working, such as losing access to the internet on my personal computers and also problems with my hosting and name servers while trying to host my final website. I believe I created a strong body of work with good research to back up my reasoning’s behind why I did and what I did as well as regularly collecting feedback while working about my website, what could be changed and if you liked the design. This website had to be designed for other users in mine, I am not the demographic. My audience is, and I believe I have created a functional media text which serves its purpose with style ease of use. Being critical about the website, there are 1 or 2 things I wish I had the time to do differently. Such as how I centred the whole content, the coding works but when the window is made slightly smaller than the table width it doesn’t add a scroll bar meaning smaller monitors would lose out on some viewing space. Although this is highly unlikely because the size of the monitor would have to be something extremely small for a PC or Laptop for it to not function correctly, I would still of liked to changed the coding for this. The project was too far in to change this now, It would of meant a total site rebuild, completely back to the Photoshop file and creating the site a different way completely.
The Ident was a lot of work, for this I had to learn a native program which I had never used before, much like the learning of Java for my website. But in the end the outcome was worth it, the ident really does say exactly what I wanted it to say about the product and the company. Its clean, crisp and ready for now, but also on the edge. This was probably my most favourite part of the project as I learnt a new way of creating and developing my idea’s outside of the curriculum and tools we were given to use at the college. Using it has given me a greater knowledge in 3D design and rendering.
For the newspaper advertisement I tried to work as if I was to create and print this in budget, for this to be efficient, and affordable I kept the tones down and the vivid colours away. I wanted it to make a statement, but not to attract the wrong people. Also using these colours and tones the printing of this advert itself would of been cheaper than printing a whole spectrum of colours. The advertisement itself links the extremely well into both the website and the ident and pulls everything together very well. Which is what I would of wanted most from my ident, to follow the conventions of the ident and create a brand and a face for the company.
Together with all my practical work, I also provided a lot of research into similar websites and idents that I could use within my own work. Without the research, I think for obvious reasons my final outcome would of been completely different, but due to the research, my work is organised, easy to use and well structured. The task as a whole has benefited me with a greater knowledge in a whole range of different areas within media and within other aspects such as web design, coding and 3D rendering. It’s also taught me the importance of audience feedback and research. In all, I believe that my project has been a success.
