You are currently browsing the monthly archive for February 2010.
Initially I sketched up my primary design idea on an A4 piece of paper; jotting down bits of content, title and graphic ideas.
I had decided to create a recipe page directed at a younger generation so decided to do spicy burgers as the food. This is quite daring and I think it would appeal to younger people. I came up with the title Keeping It Hot and wanted to use lots of words and phrases based around the theme of heat.
I also came up with the idea of using the Uncle Sam Wants You in my design by using the famous image and the phrase TV Listings Magazine (or whatever I decided to name the listings magazine) are challenging you! I thought it was comical and made the hot burgers sound dangerous.
Down the middle of the page I put a thermometer to imply hot and wanted it to be glowing red at the top. I also designed the recipe with images, but forgot about the ingredients list. One thing I definitely want to put in my design is the jalapeno and the tip which will be how to make the burgers even hotter. I want this because it will add authenticity.
at the bottom of the second page I’m going to have some text advertising a food programme on Edge’s Food channel, and also the Edge logo.
I sketched a second design which was some new ideas compared with my first draft.
The Contact Us page is a simple, plain page with just contact details on. This means the user doesn’t get confused by loads of text and images. In the footer of each page I have put a textual internal link which reads ‘Contact Us’. When the user clicks on it they will be directed to the contact us page. I’ve chosen to do it like this because it is standard for most existing websites to have the contact link at the bottom of each webpage, so if the user wants to know, that is the first place they would generally look.
This is what my Contact Us page looks like:
The contact us link looks like this after it has been clicked on (before it is blue):
The second part of my homepage is related to the music part of my website. I used a photo I’d taken from a seperate project which I felt was approriate.
I used the roll over effect on this the same as the last photo but with a green hue to match the banner ‘Music’. I also put a little section in, which related to ‘A day in the life of..’ page.
I also changed the food bit because I thought it looked tacky and added another small image and some content relating to the Recipe page.
All the images on the homepage so far have internal hyperlinks to the relevant web pages.
I left my homepage until my website was in full swing as I wanted to incorporate things from through out and wanted this to be a lot more advanced then it would have been if I hadn’t picked up the skills I’d learnt through out this assignment.
I wanted to split my homepage into three parts, each representing a different part of the website.
I started with food and quickly and easily created a spinoff version of the image used in my newspaper advert.
The image is comical, kitsch, eye catching and creates familiarty and consistency. All items I want to acheive from something which a user will see when they first access my website. It links my tv channel themes together by showing fun, body modifications, a relation to my tv programme Essex Ink and also food.
I put together my homepage using layers.
This made it easier to manage the items of my page particularly when it came to layout.
This is an example of the different layers used:
You can clearly see where everything is in relation to other objects and the rest of the page.
I found a way of making the image into a rollover image which I thought could add profesionalism and fun to my website.
This means that I can add an effect so that when the user rolls over an image with the mouse it changes to a different one. I wanted to keep this simple for now so on my homepage if you roll over the image you get this effect:
However, I would like to work more with the rollover effect, furthering it’s use and incorporating it more into my website.
Another big addition to my website was the flash advertisement (see previous blog on how I created the Flash Video).
This was simply found by selecting Flash Video in Media…
Choosing the video you want to use…
And determining size, placement, playback options etc.
The Flash video comes up as a grey box at first, but it can be played using the button at the bottom and you can also choose to loop the video and whether you want auto play.
Because my homepage is going to consist of a mixture of things from throughout my website I’m leaving that for a while whilt I foucs on getting some of the other web pages sorted.
My top ten recipes page is similar to the music chart pages showing smooth consistency throughout my website. I made it completly on Photoshop using lots of layers and groups o create the background.
I also added a thick banner across the top for the header which is similar to the music chart headers.
On the right hand side I have created adverts:
The first is for something I made up called Scrumptious. It is a food advert so it relates to the theme of this part of the website.
This is a basic textual commonly seen on websites and usually sponsered links from Google. I added these because advertisements are all over existing websites and it helped create a busy look.
Today I created a flash video for my homepage. I struggled a lot at first. I wanted flowers to move around the screen, but found this too hard to learn in such short time and decided that I would have to keep my video simple.
Even though it is basic I think it works well, is effective and looks like the kind of advert you’d see online these days. It is also suitable for my website particualrly the food part.
From what I learnt from my animated advert I carried through to design another one which was to be used on my homepage. This was a simple 3 keyframe flash video.
I designed the pages on Photoshop as images using pink as the consistent colour and the leaf brush tool in various shades of pink and purple (see below).
I also added outer glow onto my text to make it stand out:
I created the video in Macromedia flash using one layer. I inserted key frames evry 20 seconds and changed the image. I then edited the play options so that it looped.
I started today by adding two new pages to my website, Diamond Girls and Essex Ink. I also added them to the Programmes section of the navigation menu and linked them. I started with Diamond Girls which is a reality TV show about some rich girls, inspired by The Hills.
http://www.mtv.com/shows/the_hills/season_5/series.jhtml
Using two images of diamonds from the internet I made a background for my web page which looks like this:
I really like the shine I’ve added to random diamonds which I achieved with the star brush, but it did look a bit tacky on it’s own. However, after looking at this tutorial:
http://www.ehow.com/how_14789_add-background-image.html
I was able to put this behind the main body of my web page and it looks really good.
I like the look of this so much that I’m going to put different backgrounds in for each section which co-ordinate.
I also created the banner using font from Da Font which I’ve used a lot in this project. I’m going to use banners for both the programmes web pages with the title and an image of the cast.
This is my banner for Diamond Girls so far:
I really like the font and the contrast of the hot pink against the blue. The pink is also a very girlie colour and reflects the personalities of the people in the show.
I also made my mock advert today. I’m so pleased with the skills I was able to pick up in Flash, which I didn’t have a clue about this morning. I was able to import images, extend time frames and play my video in a loop. I’ve now got to take my own images for the advert, as well as creating some more for the website.
I’ve planned out the content for my Programmes which will be:
Diamond Girls:
-Episode Guide (short summaries of a selection of episodes with images)
-Meet the characters (a few sentences about the main characters with images)
Essex Ink:
-Tattoo Gallery (a collaboration of the artists best work)
-Meet the artists (same as Diamond Girls)
My next step is to take the images for these pages and create the content.
Any website you visit these days will be bombarded with adverts. This has its advantages and disadvantages, but is a vital validation of a professional looking website. I decided I was going to create a few adverts to go on my website, not too many, but enough to give it authenticity.
The first one I was going to create was to advertise a shoe shop. Nothing is more eye-catching than moving images so I wanted to incorporate this, but keep it simple like a photo slide show.
I created this on Flash, something I had never used before so followed several tutorials from the following websites:
http://www.republicofcode.com/tutorials/flash/video/slideshow.php
http://www.ehow.com/how_2150099_import-image-flash.html
I made a mock advert first to get to grips with the workings of flash. I used a couple of photos of shoes from the internet and played them in a loop to emphasise the wide variety of shoes at the ‘shoe shop’.
I exported the video as a GIF first and found that I couldn’t get it to work and it just appeared as a still image.
I then found that you could export it as an Animated GIF. This worked, but has left a snake-skin effect on the video which I will get rid of when I put it on my website because it won’t be a GIF file then.
This is my animated advert:
I’m going to use similar images which I will be taking myself. I want to show the contrast between girlie high heels and skate shoes etc.
I’m also going to add some text which will probably not be animated, because that will be too much.
