Production Diary

Production Diary

Today I have viewed tutorials on the programme Dreamweaver to gain a better understanding as to how to use this programme to achieve the creation of my website.  I have learnt how to cut pages from Photoshop and insert them into Dreamweaver, and also how to create tables in Dreamweaver. I will use the knowledge gained from these tutorials to help create the website I intend to design.

 

Splash page

Today I started working on the splash page of my website using Photoshop.  I created a page showing my logo, which features the letters ‘G’ and ‘L’ which stand for ‘Gaming Live’.  I used the colours black green and white to create the initial house style of my website. I added the words “Enter Here” at the bottom of my page, which when transferred over to Dreamweaver will become the button to my home page.

 

Home page

My home page features an image of the upcoming game ‘Watch Dogs’ to give off the impression that this website is up to date as this is up to date news. I found this image using google images and will reference this image. I added text to the web page using a typeface called “Prototype” and transferred the page over to Dreamweaver, where I then created the relevant buttons using the button link tool on Dreamweaver.

 

 

News Page

 

I created my News Page using the house style used throughout my website, I wrote the articles after designing my page so I could make sure that they fit within the sections. The text used on this page is written in the ‘Prototype’  typeface. I wrote the articles myself and then had to experiment with font size and placement to get the articles to fit within the sections. I found the EA logo used on my news page on another website, but edited the image in Photoshop to remove whitespace seen behind the image, and added a drop shadow to make the image fit more naturally on the page. I could have found already written news articles on another website to save myself more time, but I decided to write them myself.

Games list page

 

 

 

I created this page by using and editing images found on google images, it was quite difficult to find working images due to game websites being blocked. I added strokes to the images used to make them stand out more on the page rather than looking simple and stuck on. I wanted to find images that were the same size, but due to the limitations of available websites at the time this was too hard to achieve and decided to go for different sized images. I don’t think this ruins the page though, and I believe the page still looks okay.  

 

 

Consoles Page

My consoles page was quite simple to create, I found the images used on the page on google images and have referenced them, and I used the typeface used throughout my house style to keep consistent. I added the words “Last Gen” to the corner of the page, this would in theory lead to a page of last generation consoles, but I won’t be actually creating that page.

 

 

 

Xbox One page

 

To create my Xbox One page, I used the house style design of black white and green colour, and the Prototype typeface. I added a white stroke and a white drop shadow to my Xbox One image to make the black image stand out more on the black background. I could have left the Xbox One image with a white square background, but this would look like not a lot of effort was put into the design of the page and the image would look simply stuck on.

PlayStation 4 page

I created this page using my previous Xbox One page as a guideline, as they are both intended to be similar. I used the same design as the Xbox One page but simply featured a different image and different information. I decided not to edit the background out of the ps4 image due to the magic wand tool having trouble deciding between what was the background and what was the actual ps4 within the image.

 

 

Wii U Page

 

I created my Wii U page using the page template all my other pages are based on, I used the prototype typeface to fit in with the house style. I edited the Wii U image to cut out the white box around the image, to make the image fit more naturally on the page.  I then inserted the Wii U image onto the page and set it in the same area as the PS4 and Xbox One images on their page.

Sign Up page

 

 

 

To start creating my sign up page where I would include a form, I had to cut my banner from the rest of my page in preparation for copying over to Dreamweaver.  I then transferred the banner over to a Dreamweaver page. I then inserted a table that my form would fit in, which was 8 rows and 2 columns. I then inserted the text I wanted to show within my form and inserted tick able boxes into the form.

 

 

Contact Us Page

For my contact us page, I used the initial page template used with the majority of my pages and then added more text to the middle of the page. This page is quite simple as it is simply a page full of information the audience could use to contact the site owners. I added a hotspot to the ‘Click Here’ button which leads to my ‘sorry’ page. I could have created a complaint form page, but I decided against this for the sake of time management.

 

 

Sorry Page

 

 

To create my sorry page, I didn’t use my template and just used a black background to show that this page was different to the rest of the site and isn’t really supposed to be there. I used the ‘Prototype’ font for the majority of the text, and used ‘Cybertooth’ for the ‘Go Home’ text which is also a button that leads to the websites homepage.

 

Bound By Flame page

 
 

 

To create this page, I started with my page template and decided to use information found on other websites to include on my page, such as the review score and the developer name. I created the text using the ‘Prototype’ typeface and found the images seen on the page on other websites. I edited the pictures slightly using Photoshop to change the brightness and also add effects such as a stroke and drop shadows.  I also included a button on the page using the words “Read the full review here”

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Community Page

 

To create my community page, I added images and text to my template much like the majority of my webpages. I had to find a relevant image to a gaming community which fit with the theme and house style of my website, and I believe I eventually found an image relevant enough. For the text used on my page, I used the ‘prototype’ typeface and used some of this text to create buttons on Dreamweaver to link to a sign up page, which I created using Dreamweaver creating forms.

 

 

 

 

 

 

 

 

 

 

 

 

Terms & Conditions

 

For my terms & conditions page, I didn’t use my page template and I didn’t write that much text myself. I wrote the title of the page and simply copy and pasted the terms & conditions text from another site. I could have wrote it out myself, but I don’t really know what to put and for the sake of time management this wasn’t a good idea.

 

I then transferred the page over to Dreamweaver; I didn’t create any buttons on the page as none were required.

 

 

 

Videos Page

 



My videos page  was created using my page template, I originally wanted to embed a video into the page by adding the embed code into the coding, but this wouldn't work so I decided to add an image to my page and create a button so that clicking the image would lead you to the video I originally intended to embed.

 

 

Site Map

 

This shows that my site map is organized and everything is saved in the relevant folders. This is just so that finding the relevant items of the relevant page is easy and quick.

 

To my knowledge my website is now complete, and I will be partaking in alpha and beta testing of the site in the coming week.

After alpha and beta testing my site, I confirmed that the site was working fine and also had peer feedback to back this up. "All inks are working on this website, there are no spelling errors and everything is working fine! Well done Chris!!
Chloe Frid."
This comment backs up my claim that the site works fine, and I am now confident that my website is finished and is working fine.
Overall I have enjoyed this project, and I have learned many new skills that I can use in the future and I believe I had done well.

 

 

 

Production Diary

 

Design Board

 

 

 

 

I created this design board to showcase my website ideas and present my ideas to the group. The design board will help me plan my website production better, as I have a better idea as to what I want to include within my website and why. Having the design board makes me more organized and prepared for creating my site, and also makes it easier for me to share my ideas with other people.

Essentials of web design

Welcome to my blog about web design and construction, in this first post I will discuss the essentials of web design, including interactivity and control. I will go through these in detail so that you will learn the basics of web design and could use this knowledge to help design your own website. Technical things. 

Interactivity and control: 

When creating an interactive website, there are quite a few things that can go into making an interesting and interactive site for your audience. Buttons for example can be created quite simply and are used as navigation throughout your website. They can also look very pretty if you want them to. Hotspots are another example of interactivity in a website and are similar to hyper links, but are triggered by clicking an image they are attached to rather than text. Scripting can also be added to create a cinematic effect to your website. For example, moving your cursor over certain text and the text reacting to the cursor by dancing, this would be scripting. If you are creating a website for perhaps a company, you can create an interactive timeline to spruce up your page, and also inform the viewer of many different things regarding the company, such as the date they were started and other key dates in the history of the company, complete with text and images to attract the audiences attention. You could even throw in a slideshow to your website, giving the audience a small presentation on whatever you want it to be on, work, games, music, or even pictures of cats, you know your audience, you know what they want to see. And finally, effects, you can throw in some effects to your website to make it look more exciting. Such as an expanding search bar, moving images, or even a simple drop shadow to add more character to your images. If you can figure out how to do it, you could do it, if you wanted to. Or if you were really desperate to make your website appear special, you could add an event such as cinematic transitions or even an opening to your website. All of these are just a few examples of things you can add to your website to make them more interactive and/or exciting. 

Limitations: 

When designing your website and focussing on making it look as nice as possible, you should also take into consideration the limitations you could and probably will face. For example, size and download time. Make your website too big and filled to the brim with stuff, then it's going to have issues with download times. This can be a pain for your audience, as they probably won't sit around for ten minutes waiting for your website when any other website will load in half a second for them, in other words, if you want an audience make sure your website isn't too big and it doesn't take a long time to download. When designing your website, you have to make sure your content is suitable for your audience, otherwise there will be issues. Make sure every little thing is suitable for your audience, if you are designing a website aimed at children, you have to make sure you don't have anything that would offend or upset the audience. Think of the children. Your audience will definitely want to see the content of your page, otherwise they wouldn't be there. This is why you should make sure any visual content such as videos or slideshows don't require any elusive plug-ins that not many people will have, stick to the usual plug-in requirements, or people will be put off your website as they have to go through the painful process of downloading unwanted plug-ins they have never heard of before. 

Assets:

Your website will contain quite a few different assets, otherwise it would be a pretty empty and boring site. Sound for example can be used in many different ways, such as simply having music that plays automatically when somebody views your page, or maybe having a beeping sound when buttons are pressed. Text. Text is an asset. This text could be whatever you want it to be. A story, information about stuff, or even just the world "hello", this text is important. You could throw a video into your site and attract the audience with a video of a company meeting on your serious formal website, or a video of hamsters on your not so formal website. Vector graphics such as a logo can be added to your site to create brand recognition, this causes the audience to instantly know what the site represents and perhaps feel at home if they are familiar with the company. A good example of this would the the MTV logo on the official site welcoming viewers of the Television channel. Animations such as a flash animation could add quite a lot to your site, and could make the page look a lot more lively and active, this would attract the audience and make them want to stay. Images once again are definitely an asset to your site and can make your site look a lot more attractive, depending on what the images are of course. These are just a few examples of the many different assets you could incorporate into your website.

Opportunities:

There are many opportunities when creating a website, for example, if your website is being used to advertise your product or company, you can attract an audience and potential customers with an interesting design. Your website can also be used to showcase your skills as a designer, attracting potential employers or creating an audience of fans of your work, this will help you find a place within the media industry or find a job where you can use your design skills. The interactivity of your site will keep the audience entertained, and will show off your skills in creating an interesting and interactive media product. Having interesting and visually appealing colours, typefaces and shapes within your site will show off your knowledge of colour, type and shape theory to the audience, giving them the impression that you know your stuff when it comes to design. Making sure your site is usable is also important, as good usability will make the site feel welcoming to users, and will encourage them to stay and check out your whole site. By designing an interesting, usable and visually appealing website, you can show off your skills to potential employers and fans of your work, and can help solidify a place within the industry.

Legal

Many legal aspects must be taken into consideration when designing your website, for example copyright issues. You cannot create a website and use the property of somebody else unless referenced, such as images and videos. Intellectual property must also be taken into consideration, as you shouldn't steal anybody else's website idea and use it for yourself. You must make sure your design is for the most part original, and you haven't clearly ripped off somebody else's design. You must also be careful not to offend using your website, and aspects such as race, sexual orientation and gender should be taken into consideration.

Ethical:

Ethical issues are similar to legal issues, but less about legalities such as copyright and more about simply being a good person when designing your website and making sure you don't upset the audience in any way. For example, you must be careful not to use images or videos on your website that could upset or offend your audience. Race, religion, and many other factors should be considered when creating your site, to be sure you don't single any demographic out, racial slurs or blasphemy towards a particular religion shouldn't be included within your site. While these things aren't exactly illegal, they are ethically wrong and should be taken into consideration when trying to build an audience.