Multimedia Blog

Artefact 6 Screenshots

2011-05-12T07:37:00.000-07:00

Below are the screenshots of the mobile site in action and how the site would look when saved to the home screen of an iPhone or iPod touch. The app icon was created by myself and code is entered to make it appear as the default home screen icon.

Artefact 6

2011-05-12T04:18:00.000-07:00

My final artefact is complete! It can be found at http://www.georgewood.me/artefact6 and is best viewed on an iPhone/iPod Touch as it is a mobile site.
______________________________________________________________

My sixth and final artefact was a mobile version of the site I created for my fifth artefact. Combined these sites take ideas from feedback gained throughout the process of evaluating my previous artefacts in order to make a music website which contains everything people want from a music website. Mobile browsing is already hugely popular and the amount of people who use this method is constantly growing, therefore it would be important for a company to have a site that is tailored specifically for the mobile device.

I am very happy with the overall design and it is clear that it links in with my fifth artefact. It was an interesting process to take the ideas and designs from the previous version and to alter them to work aesthetically on the mobile screen.

I am very happy with the process I chose and I feel that this artefact is a nice conclusion and my artefacts as a whole have taken a very logical route to the finish.

If I had more time then I would like to extend on the artefact and build in some extra features to make it even more functional. I would also like to find a way of being able to preview songs on the device, similar to the preview on the big-screen version.

I used HTML5 and lots of CSS3 once again in order to make sure I was using the most advanced techniques once again and therefore it was completely adequate.

The site works completely as it is but I would like some way of being able to play the music without navigating off the page, however the time constraints led me to stick to just video in order to get sound, whilst I put in lots of information to make up for the lack of music.

Artefact 5 Evaluation

2011-05-05T04:13:00.001-07:00

My fifth artefact is a fully functional HTML5 and CSS3 music website which has been created by taking ideas from feedback gained throughout previous artefacts. It features a preview mp3 button, as well as artist information as well as videos. I have also implemented many CSS3 features to improve the design such as rounded borders and background gradients.

I am very happy with the design and feel I have implemented plenty of CSS3 without over using it and sacrificing the quality of the design. If I had more time I would like to extend the page further and play around with different border radius effects.

The process I chose worked well and I feel I have achieved something that takes ideas from all the feedback gained through previous artefacts meaning that my artefacts have taken a clear path through to my final one.

It was good to learn the new CSS3 values and this proved a helpful experience for me, as I was able to learn different things for the first time. I am now confident I can implement these things in future sites I create.

The two-week period allowed me just enough time to design and build the site from scratch, whilst being able to look back through previous feedback in order to take ideas that I then implemented in the site.

I used the most advanced techniques I could to create the site and I don’t feel there were any other techniques I could have brought in which would have added to the site.

Overall I am very happy with the artefact and have received positive feedback from others throughout the process. There isn’t much I would change and I feel that other than a few possible design tweaks it would be hard to improve.

Artefact 4 Evaluation

2011-04-20T16:05:00.001-07:00

My fourth artefact was designed to see whether certain website features which have only been available since the introduction of HTML5 and CSS3 have an effect on which sites people prefer to buy their music from. I mainly used the ability to bring in any font that you desire to alter the looks of the three sites. I asked people to look at the three example web pages and then answer six questions relating to them.

I am very happy with the design of my artefact. I managed to create three mock websites with the same content that looked completely different. I don’t really think there is any way I could change the design of them to improve the set of survey results I gained.

I had sufficient time to design three web pages well and then have 30+ people complete the survey. I feel I had the perfect amount of time to get the most out of this artefact.

For this artefact I just used Photoshop to create the mock websites, after compiling the results next time I will properly create a web page in HTML5 and CSS3 in order to give the user a more realistic feel to the site.

I feel I achieved a good set of results from the survey that will allow me to move forwards with my final two artefacts. People had fairly unanimous views that allowed me to collate my results nicely and gain some good responses. Many of them also said the usage of fonts within the sites affected their decisions on which to choose, this has led me to decide to explore the use of fonts within websites further in my next artefacts. They also said they would rather download songs than listen online, this makes it easier for me to progress with my artefacts.

PHP Problem

2011-04-14T02:47:00.000-07:00

I had another problem when creating the contact form for the Bluebell webpage. When data was filled out into the form and the send button was pressed, rather than sending it to the correct address and redirecting to the 'message sent' page, a page with the PHP which sends the message appeared;

I felt it must have been a small problem with the HTML of the contact page as I could see the PHP was all correct. It took me while to find it but I had made a small error in the HTML for the form and had entered an incorrect value for the 'class' section. I corrected it to this;

The contact form now works fine.

Client Problem

2011-04-14T02:26:00.000-07:00

One problem I had when creating my clients website was with the width of the footer. It was set to 100% as you can see below;

However, even though the width meant it should go across the whole page, it didn't and left gaps to the side and bottom;

I had a play around with different ideas and eventually worked out that the default setting for Dreamweaver pages was to have a small, 10px gap around the edge of the webpage. I therefore needed to remove this gap through using the CSS 'body' tag. I added this section of code;

And after doing that the border has been removed and it now displays correctly;

Artefact 4 Results

2011-04-13T11:14:00.000-07:00

My fourth artefact was designed to see if certain HTML5 and CSS3 elements, such as being able to use any font, effected peoples decisions on where they would rather buy from. I made a page featuring three different website designs and asked people to look at them and then answer 6 questions, here are the results;

1. Would you rather buy from site 1, 2, or 3, and why?

3, it looks the most stylish and cool.

3 because it is very clear to use.

3 More professional looking

3 - 1 is too dark and boring and doesn't necessarily convey what the website is trying to do. 2 is too amateur and childlike, the 3rd is much more professional and easier to navigate. Nice use of graphics with the 'pause, play' etc.

I would rather buy from site number 1 because it tells you exactly what the website is for unlike site 3 and the font is easier to read than the 2nd site.

3. Font is the sickest. Colour scheme is nice. It just generally looks quality.

3. Is clearer and text is easier to read.

3. Plain and simple

Site 3 I like the buy now function and the description next to the number one

3. Nicest layout and prefer the font.

3 best layout. 1. looks like it has the stylings of a marijuana paraphanalia website 2. looks like a chewing gum packet 3. looks smart and is the best

3 - I think in looks a lot more professional and modern

3 - It looks more professional and more aesthetically pleasing. The fonts are easier to read. I feel it uses space more effectively that the others.

3 clear font, looks more interactive and provides more information.

2, easy to read and looks easy to use

3 - Looks more official which i believe is down to the neutral colours used.

3 - its looks more professional and the text is easy to read. The font used on 1 and 2 was hard to read.

Site 3 as it is clear and has the simple colouring of black text on grey with a clear buy now button like you would see on itunes!

3 - looks more professional and gives more information.

2. Given the choice, would you rather be able to save songs as favourites so you can listen many times online, or download a song so you could have it on a personal music player to listen to whenever?

3. If the pictures were really fully functioning web pages, which do you think would be the most user friendly?

4. Briefly, if you had the chance to create your own music download site, what features would you include?

Create my own playlists to listen to each time I visit

play online download mp3 download the video favourite

artist profiles and background info see gigs they are doing

A feature similar to Itunes genius - recommended music related to whatever the person has downloaded so far. Also the option to browse by genre.

a top 10 chart and the prices of the songs

To be honest I can't really think of anything that isn't featured on these sites. Maybe a free album artwork updater?

Recommendations

'Trending' type feature split into genre's to highlight album tracks that are listened to a lot that might be missed due to lack of commercial promotion

lyrics, song recommendation

Have a genre filter and a new music recommended to you section

A listen before you buy option, some artist info including some art work and also suggested artists relating to your previous purchases. Basically Itunes.

images, songs, artist description

recommendations , facebook link, high quality MP3 format, large music catalog.

Song previews, videos, artist biographies, charts, playlists

a suggestions app to analyze your previous purchases and recommend new music. A social element where you can add friends and see their purchases and favourites.

send music to your phone create playlist of most popular music

Youtube clips of the songs/ Videos, A member log in, Paypal/ Payment options, Blogs, News Feeds, Clubs, Quick downloads.

Previews of videos/songs.

smart playlists giving you songs similar to your own choices. Ready made playlists for specialised genres.

free single of the week like iTunes. suggestions of music in the same genre you may like to download.

5. Would you be happy to use and download from all three of the sites?

6. Did the usage of different fonts within the pages affect your decision on which was your favourite?

Inspiration

2011-04-13T09:48:00.000-07:00

I stumbled across the website for the restaurant chain 'Giraffe' and found it quite inspiring. It gave me ideas for different elements which I would like to include in the Bluebell site. I like how they have integrated the Twitter feed in an interesting way at the top of the page, I feel I have achieved something similar with my site and feel it is as exciting to look at. The website can be seen below;

Giraffe

I have also implemented a similar slideshow on my homepage, however they haven't used actual pictures, just offers. Since seeing this I have now decided to include a slideshow on the menu page which features offers rather than pictures of the restaurant.

They also have a nice feature on their menu page where a tooltip appears with a picture of the particular food you hover over on the menu, I will be implementing a similar thing on the Bluebell website.

They have also included lots of different image changes on hover, this really adds interactivity to the website without becoming too complex, I will try an incorporate many of these within the Bluebell site.

Alignment Problem

2011-04-13T09:37:00.000-07:00

Another problem I had when creating my website was on the Location page. I have a large map which is embedded from Google Maps, to the right of this is a box with the address and a link to the website of the sister pub.

When I first embedded the the map it moved the box on the right down for no apparent reason, it looked like this;

I played around with different bits of code to try and align it correctly again, as well as putting it into a container div box. I knew that the margin property was used to move that particular element away from one surrounding it from either/all of the top, left, right, or bottom. I wasn't however aware that by using '-' you could move the div closer to another div. This is done with;

Having found the correct amount of pixels to move the div up by, I have now aligned it properly. Simply using 'margin-bottom' would not work for this as it would leave empty space below and extend the page. It now looks like this;

Active Navigation State

2011-04-13T04:24:00.000-07:00

The navigation for my client site contains a different 'state' for whichever page is currently selected. As far as I could see there are two ways of doing this, one with CSS, and one with different images. The different 'state' looks like this;

The first, and more complex, way of achieving this look would be with CSS. To attempt this way I followed a tutorial online which states 'CSS Sprites' would have to be used. This is where one image would contain the three states of each navigation item, these are default, hover, and active. It would look something like this;

Using this with some clever CSS;

/*--CSS Sprites - Default State--*/
ul#topnav a {
float: left;
display: block;
height: 58px; /*--NAVIGATION HEIGHT--*/
text-indent: -99999px; /*--MOVES THE TEXT OFF THE PAGE--*/
background-position: left top;
}

/*--CSS Sprites - Hover State--*/
ul#topnav a:hover {
background-position: left -58px;
}

It gives the effect that the image is changing, when infact it is just moving up and down allowing different bits of the image to be shown.

The second way is alot more simple and just contains HTML and two separate images. One image of the default state, and one of the hover/active state. The HTML is as follows;

This just states on mouse over the image changes to the hover state, then when the mouse moves away again it goes back to the original image. It is then possible to create the appearance of the CSS method by just putting the hover state as the default image.

Client Twitter Integration

2011-04-11T04:07:00.000-07:00

In order to keep up with the latest web trends I thought it was important that my client has good links with social networks. I wanted to incorporate a Twitter feed into their website, but in a more interesting way than just featuring 'tweets' at the side of the page in a big row. I came up with the idea of having a ribbon across the top of the page, above the navigation. I feel this breaks up the page nicely and looks really cool;

To call in the correct Twitter feed JavaScript is referenced at the bottom of each HTML page the feed is required on;

Where it says "/user_timeline/thebluebellinn.json" is where the Twitter username is referenced, this code can be applied to any Twitter feed and and in any HTML page. To stop multiple posts appearing the code "twitterCallback2&count=1" is used, where '1' can be changed to whichever number you choose.

The CSS for the feed is as follows;

It is very easy to customise and it wasn't too difficult for me to correctly align the text in the ribbon to make it look good. After this I have also used the same JavaScript to create a Twitter feed on my own website; http://www.georgewood.me and as you can see there is a massive difference in the way I have displayed the information, showing how customisable this bit of JavaScript is.

Artefact 4 Design 2

2011-03-23T16:56:00.001-07:00

Artefact 4

2011-03-23T09:22:00.000-07:00

My fourth artefact will be focusing on the layout of a site to see what effects that has. I will try and incorporate different elements which are only available with HTML5 and CSS3, this includes things like rounded borders, external fonts, and text with inside shadows.

This is my first design;

I will now make two more designs and then put these online with a survey to see peoples opinions.

Artefact 3 Evaluation

2011-03-22T05:35:00.000-07:00

My third artefact set out to see whether people preferred interactive image adverts to video adverts. I set out a webpage with links to two separate pages that looked the same, one containing video, one with interactive images. I then got approximately 50 people to visit each page and then choose which one they would prefer to buy from. They were then taken to a short survey that helped me understand why they chose that particular site.

Opinions were split almost 50-50 between the two sites and people generally would be prepared to buy from either site. Some people said the videos helped them as they could try before they buy, whilst others said that videos made the site look overcrowded and tacky.

I was personally happy with the design of both sites and I feel I moved away well from the design of my second artefact. The whole idea was to make the sites look the same but the fact people were prepared to buy from either means I could draw no real conclusions from it.

I got all the videos from YouTube and embedded them using their embed code, changing the height and width properties accordingly so it fit in with my design. There isn’t really another way of doing this so the techniques I used for my solution seem adequate. I feel I utilised the time period set for this artefact well.

If I were to do the same again I think I would try and make the differences between the sites more distinguishable so that there would be more reasons for people to choose one site over the other. This may lead me more towards the layout side of things to see whether how a webpage is set out affects people’s choices.

Artefact 3 Results

2011-03-10T03:01:00.001-08:00

1.

2.Briefly, why did you choose the site you did over the other?

People who chose the image site;
"The video site looked too cluttered and dodgy."
"images site looked more professional website. videos looked like someones myspace page"
"I found the video had to much going on and if I wanted to watch the video I would have gone to YouTube. When buying a feel an imagine is suitable"
"Watching videos is too time consuming."
"I prefer graphic design adverts to video."
"I personally like album cover art."
"Video site was too busy and overcrowded"
"videos take too long to watch, if i'm buying its a quick process dont wanna sit around n watch a video."
"The site i chose was simple and clear and easily allowed me too choose the selected item."
"video looked like youtube so why would i buy you tube?"
"personal preferance is the images and slide show with the song in the back ground, not watching the full performance."
"The image leaves something to the imagination. I wouldn't be inclined to buy from the video if i could watch it in full on the web site."

People who chose the video site;
"Like the mini videos"
"because watching visuals and moving videos is more of an attraction and will keep the consumer hooked for longer"
"you could preview the songs, it was more interactive"
"More entertaining, listen first, know what I am buying"
"less hectic"
"more visual and interesting to look at"
"Image site was too plain and boring."
"Because I could try the song out before I'd hypothetically buy it."
"It was more informative"
"More interesting to watch"
"Able to see / hear more of the artist"
"more interesting, informative and loved the set up"
"As you could hear the song in full before choosing."
"i liked the idea of being able to watch the video first"
"I enjoy music videos"
"more detail & better to see this"

3.

4.

5.

6.

Transparent Text Box Client

2011-03-09T16:31:00.000-08:00

The first problem I have encountered whilst creating my clients website is with the transparent text box on the homepage. I have put in a temporary solution where I have literally used an image of the semi transparent box with the wooden flooring behind it, but I would like to find a way to have a properly transparent box.

It currently looks like this;

You can see that is isn't correctly aligned. Most people when browsing the site would not notice it, and would probably be distracted by the text. I searched around online and found this tutorial; http://www.w3schools.com/Css/css_image_transparency.asp. It shows how to alter the opacity of an image to make it transparent, but the same principles can be applied to a div box. I had a go at implementing a similar code for div's and came up with this;

Now when I look at this div on a page in Chrome it comes out as below and you can see there are no longer problems with alignment of the background. I suspect however that there would be problems when this is viewed in IE.

Artefact 2 Evaluation

2011-03-09T16:25:00.000-08:00

My second artefact was two websites comparing peoples views of a music download site. One of the sites featured completely still images, whilst the other had interactive imagery, such as a slideshow and different effects when images were hovered over.

I wanted to design it so it almost looked familiar when people first visited, so I took inspiration from the iTunes layout and am very happy with how it turned out. I got people to visit the two sites and then choose which one they would prefer to download from. I then asked for their reasoning behind their decisions.

I am happy with the design and I don’t think I would change much if I had the chance. I would add in more films and songs however in order to bulk out the website and make it look more filled. I felt having not much content on there made it less realistic, but with the time constraints I think I did well.

I managed to get a good amount of people visiting the site and filling out my questionnaires, which helped me gain a decent amount of statistical evidence to back up my claims.

Further on in my artefact process I would like to develop on the websites I made for this artefact and add in some HTML5 and CSS3 to see what, if any, effects this has on the results.

When designing the site I wanted to make it feel calm and as if there was lots of space for the user to operate in, I feel this is one of the ways iTunes has been so successful and I think I managed to make a site which isn’t too cluttered but allows the user to see enough functionality to give me a good idea of which adverts work best.

Client Phone Call

2011-03-09T09:09:00.001-08:00

I recently spoke to my client and they said they urgently needed something putting online as they have been questioned numerous times by customers about the Bluebell website. Therefore I decided to scan in some of their advertisements and upload these to the homepage. I saw this as an opportunity to get across the feel I would be hoping to achieve when my website is complete and therefore I used the same background as I am using in the proper site. This way people will remember the site next time they visit and it will link in well.

The current homepage can be found here.

Bluebell Slideshow

2011-03-09T08:51:00.000-08:00

For the slideshow on the homepage of my website I needed something which looked smooth and ran well allowing the website to look trendy without having lots of flashy gimmicks. I chose to use the jQuery Panel Gallery slideshow within my Bluebell website.

The slideshow can be found here and I chose to use this slideshow for a number of reasons. The slideshow has many different slide effects which can either run randomly or can be edited within the JavaScript so it is just one effect. I will discuss the effects with my client at our next meeting to see whether he would rather keep it random or have a specific one, this may make it more professional.

Below are some screenshots of various parts of the JavaScript where it can be edited to change what it does;

I also spoke to my client and uploaded an example of the slideshow working within their website so I could find out what they thought. It can be seen here.

PRP Artefact Three

2011-03-09T08:46:00.000-08:00

My third artefact is online now and I need as many responses as possible, so if you could go to http://www.georgewood.me/artefact3 and follow the instructions it would be a big help.

Why I'm Using Cushy CMS

2011-03-09T08:38:00.000-08:00

I have decided to implement Cushy CMS within my website for the Bluebell. It is probably the easiest CMS to implement and use I have come across and makes it very easy for my client to log in and change any details they wish to on their website.

The first thing I had to do was tell Cushy the FTP details to the site and then enter these, then by simply using the "div class" function and then using the class "cushycms" it automatically finds these areas and makes them editable. With Cushy you can also do the same for photos and these will be replaced and resized automatically. This makes the whole process less time consuming for my client.

When editing text there is a plain text box, which allows my chosen 'editors' to enter any text they want making it bold, italic, or underlined as they desire.

Below is a screenshot of my Cushy CMS homepage, you can see several sites which I have already uploaded, as well as the editors at the bottom. I have the ability to decide which websites they can edit, and which pages within these sites.

I have used this site throughout many previous websites I have made whilst freelancing and have always found it very reliable and user friendly.

Event Display For Client

2011-03-03T03:34:00.001-08:00

I have been trying to think of a way to display the list of events my client requires on their website. I don't want to do just a normal boring list but I want the information to still be easy to see straight away. I have found two possibilities which display the information nicely, but I don't think it would be that easy for my client to go in and update it.

Idea 1;

This is called an Accordion and it displays the information in tabs in a vertical navigation style. This way would be good as it uses a minimal amount of space and still looks good. It also allows for quite a bit of information to be input into each event, and there is space for a picture.

Idea 2;

This way is slightly more advanced. It works by displaying the information in two different ways, one as just images, and then one with images and some text. This way looks cool but may not work aswell if there are lots of events as it would lead to the page being very long.

Tutorials for these two functions can be found here and here.

Client Update

2011-03-03T03:26:00.000-08:00

I am slightly behind with my client project, due to the SPP3 deadline being pushed back. This meant I had to re-do my rationale and that teamed with PRP meant that my client project was pushed aside. My gantt chart states that I should be adding JQuery to the site now, which I am actually doing and some has been added, therefore I cannot be too far behind schedule.

By the end of this month I hope to have the site finished and will attend my third meeting with my client to check if they are happy and see if any changes need to be made. So far each page of the website has been created and basic elements, such as the homepage slideshow, have been put into place. I am now looking at new and exciting ways of displaying information to make the site stand out amongst other pub/restaurant sites.

PRP Interactive Image Site Results

2011-02-24T03:45:00.000-08:00

Below are the results to the questionnaires answered by people who chose to purchase from the interactive site.

1.
2.
3.
4.

Here are a selection of the most interesting answers for question 5.

5.Briefly, what were your main reasons behind choosing the interactive website to download from as opposed to the still image?
"it felt more professional and real"

"For some reason the interactivity made the website feel more professional and trustworthy to me, maybe because it requires more effort and therefore perhaps money"

"i felt that more work had gone into the interactive page. This made it feel more reputable and trustworthy. It was also easier to see what was on offer with the changing graphics at the top. That is all.."

"very little, i could have chose either. luck of the draw"

"every time the image changes it catches your and therefore keeps you interested"

"Feels more professional"

"More exciting and eye catching"

Essentially these answers are what I would have expected. The fact that I got a pretty much overwhelming response in favour of still image for my first survey has confused me a little as now its almost 100% for interactive images when people can actually see content.

PRP Still Image Site Results

2011-02-24T03:31:00.000-08:00

Overall just 6% of people preferred the still image site over the interactive image site, this does not link in with my previous responses.

I have collected responses from my still image site.

The first question established for me that 100% of people who answered could tell the difference between the sites.

2.
3.
4.

There weren't many responses for the final question, but the most interesting response was;

5. Briefly, what were your main reasons behind choosing the still image website to download from as opposed to the interactive?
I feel the interactive website looks more like one of those pop-up junk adverts, which put me off.

Artefact 2

2011-02-24T03:23:00.001-08:00

My second artefact is two identical web pages imitating a music download site. The homepage explains that the user is to look through both pages and identify which they would prefer to buy from, they do this by clicking a song or movie to download, they are then taken to a questionnaire asking them a few questions about why they chose that particular site to buy from.

The artefact can be found at: http://www.georgewood.me/prp

PRP Update

2011-02-14T04:49:00.000-08:00

I have been working on the three seperate sites for my second artefact and was having trouble creating rounded corners on my div boxes without implementing CSS3. However, I managed to find this great article which has 25 different ways of doing it! It has proved very helpful and I hope to have all 3 sites finished by Friday.

PRP Artefact Two

2011-02-10T04:03:00.001-08:00

My second artefact is my music advertising site made purely out of images. The whole main body of the web page is an image and even all of the links are done by using image mapping to mark out hotspots. This means that there will be no hover or any interactivity whatsoever throughout the website. This will mean the difference between my second and third artefact will be more distinguishable.

The artefact can be found at the link below. None of the links on the page go anywhere yet, when I have completed the next two artefacts then I will link it up to a questionnaire.

http://www.georgewood.me/prp

SPP Postgraduate Courses

2011-02-09T06:41:00.000-08:00

Here are the four courses I have chosen, I will now choose one of them to do a mock application for.

Course 1;
MA Communication Design
University of the Arts - Central Saint Martins
http://www.csm.arts.ac.uk/courses/postgraduate/ma-communication.htm
How do students begin to engage with communication design at Masters level? We start by framing questions that identify important themes, issues or problems. Then we develop an investigative structure or methodology through project work, tutorials,
seminars and lectures, embracing independent study and professional connections within academic and professional communities energised by these questions.

Inevitably, working this way produces outcomes and solutions that court difference, that are unpredictable, that aren’t bound by current disciplines and paradigms.

These outcomes are appropriate to the communication design question, audience and personal standpoint. They manifest themselves in, for example, data dynamics, image making, information and interaction design, photography, programming, typography, writing, or in new and as yet undefined products.

Course 2;
Mobile Application Design MSc
University of Kent
http://www.kent.ac.uk/courses/postgrad/subjects/engineering-and-digital-arts/mobile-application-design-msc
Mobile applications are having a profound effect on all our lives. Where the mobile phone of the last ten years was just a communication device, today's smartphones are also personal managers and information providers. Over the next few years, we can expect these types of phone to become the basic devices of tomorrow. This advanced Master's programme has been designed to allow you to become a highly skilled professional for the mobile industry, by combining technology, interface design and application development for mobile platforms with a strong emphasis on creating applications of high usability and reliability.

Course 3;
MA Web Design & Content Planning
University of Greenwich
http://www.gre.ac.uk/courses/pg/www/webdes
This programme takes graduates from many disciplines and provides them with the skills to plan, design, build and promote effective websites. It is aimed both at people who manage corporate websites and at those who wish to start their own web business. The design of excellent websites presents a notable intellectual challenge and, during the programme, students develop a modern, professional and 'real-world' approach. Our objective is to provide a balanced education in the three main aspects of web design and content management: technical, functional and aesthetic.

Course 4;
MA Interaction Design
Nottingham Trent University
http://www.ntu.ac.uk/apps/pss/course_finder/80907-1/13/MA_Interaction_Design.aspx?yoe=3&st=3&sv=4
This degree provides you with an opportunity to push the boundaries of contemporary digital practice through the exploration of interaction between people, objects and environments using existing technologies, new developments and practices.

This will provide exciting opportunities to combine live and digitally created media. The taught elements of the course encompass new media developments and human interfaces, information spaces and interaction as an art form.

PRP Layout

2011-02-07T09:57:00.000-08:00

My next three artefacts will be websites based around the same design. Each will have certain differences such as slideshows and videos. The design I have created is based around similar sites and I have taken inspiration from sites which sell extremely well.

When trying to advertise a still image I felt it was important to give the page some depth, else it would be very boring. I have tried to do this by using lots of texture and highlights to 'lift' items off the page. I think I have created a really sophisticated look which will help to sell the products.

I have kept the page simple due to the time restrictions, but I have still managed to include lots of relevant detail on the homepage.

Restaurant Websites

2011-02-02T04:41:00.000-08:00

Whilst looking for inspiration for creating my website for the Bluebell I remembered an article I came across a while ago. It contains 40 of the best restaurant websites on the internet. They are all very inspiring and take advantage of current web trends and techniques. They all contain nice features which will no doubt influence me when adding extra functionality into my clients website and by doing this I am able to show that I am aware of what is happening in the wider web design community.

I have taken inspiration from this article and this can be seen in my chosen design. Many of the sites on the list feature a wooden style background, and they also have bold imagery which is something I have tried to include.

The article can be found here.

Below are some of my favourite screenshots from the article.

Artefact 2 Research

2011-02-02T04:36:00.000-08:00

For the rest of my artefacts I will be creating a mock music advertising site with 3 variations. The first one I will make will contain still images, the second will be still images with slideshows and other pieces of movement, and the final one will contain video and more interactive elements. I will then ask people to try the website and see which one people are more willing to buy from.

I have been researching into the layout of different music download sites and was surprised to find that the majority of them contain just still images, and occasionally some slideshows. This fits in with my survey responses where the majority of people said that they would prefer just a still image for an advert.

Below are screenshots of Spotify and iTunes, both of which use still images, iTunes also has one slideshow on each page but no video.

PRP Artefact One - Evaluation

2011-02-02T04:32:00.001-08:00

My first artefact was a questionnaire; I did this in order to gain a better understanding of people perceptions of advertisements. I wanted to know what kind of adverts they preferred, and whether they were concerned with the design of a particular advert.

I sent out a nine-question survey to approximately 70 people aged above 18. I also requested that people who completed my survey were frequent Internet users and that they also listen to and buy music. This was confirmed in my first two questions where almost everyone questioned used the Internet everyday, and the majority of people bought or downloaded music online every week.

I felt it was necessary for me to begin my PRP artefacts with a survey, as I wanted to find out what people thought of adverts on websites and whether people paid any attention to them. From doing this survey I have been able to find a clear path through the rest of my artefacts and I now know what area I will move onto next.

After showing the results of the questionnaire to other people in my group, we all believed that the most interesting answer was for the last question. When I asked people which kind of adverts they prefer, either a still image, a video, a banner with moving images, or a banner which you can interact with, such as a game, 50% of people answered a still image. This was surprising to the rest of the group and me, and it is therefore the area I am going on to explore next.

Overall my survey did work as I achieved a few unexpected answers that allowed me to understand people’s views of advertising a little better, as well as giving me some ideas about where I go with creating the rest of my artefacts.

The Wilderness Downtown

2011-01-31T07:19:00.000-08:00

I came across this website the other day and thought it was a great example of new kinds of music advertising. It has been made by Google to highlight the capabilities of the Chrome browser and features music by the band Arcade Fire. At the start you enter the name of a town or city and then throughout the video different browser windows are opened featuring different videos. Some of the windows feature images from Google Maps and Street View of the town or city you entered at the start. This is an extremely advanced example of HMTL5 and fits in very well with the subject of my PRP research document.

You can find it online here.

Exhibition Designs

2011-01-30T15:30:00.000-08:00

I have been having a play around with possible designs for the exhibiton. I started with this idea;

But after feedback it developed into this;

I am now going to try and create a more 'themed' idea, with some sort of incorporation of three things, one to represent each pathway.

Artefact 1 Update

2011-01-27T07:57:00.000-08:00

Having just presented and discussed my first artefact I am now able to progress and get on with creating my second artefact. Following the discussion of my questionnaire responses people thought that the most interesting thing I found out is that the majority of people would prefer an advert to be just a still image, rather than a moving banner or something interactive. Therefore I have decided I will create three identical web pages for sites which sell music, one with just still images, one with still images with some interactivity (such as slideshows), and one with video content. I will then see which one people favour and ask them why.

The way I will do this is when people click on a 'buy now' link from their chosen site, it will open up a short questionnaire asking them to explain their choice. This way I can test whether the results from my questionnaire match up with the results from my next few artefacts.

Questionnaire Results

2011-01-26T09:29:00.001-08:00

I have collected the results for my survey and have collated the results into various tables and charts. By sending out the questionnaire my intention was to see how people perceived music advertising initially and to see within a select group whether it actually had an effect on people.

I created my survey online and asked people who were over 18 and frequently used the internet to fill it out. The majority of the results were as I expected they would be and there was no real surprises. It has however given me some ideas about peoples opinions of advertising and which styles they prefer. I was also interested as to whether people were actually concerned with the design of an advert.

Below are the charts for my results;

Research Survey

2011-01-24T05:33:00.001-08:00

I created a survey for my research project last Friday. Have got a decent amount of results already but I'm aiming for a few more before I start making charts and graphs. The survey can be found online here; http://www.surveymonkey.com/s/D6RHRB7and only takes 2 minutes. Would be a massive help if anyone could fill it out.

Blubell Photos

2011-01-23T14:53:00.000-08:00

Below are two of the pictures I took after my meeting with my client. The research of other pub websites showed me that it was very important to have several high quality images on the website. This shows off the pub well and gives people a good idea of the kind of atmosphere which is in the pub.

I took lots of photos when I was there and I plan to show several of these in the slideshow on the homepage, as well as including them all on the gallery page of the site.

New Design

2011-01-12T08:39:00.000-08:00

After my research I have created a new design. I personally think this is my favourite, so I will show it to my client during the meeting this weekend.

Pub Website Research

2011-01-12T07:42:00.000-08:00

I decided to research into other pubs to see what their websites were like. I found that many pubs had a very poorly designed website which really makes the pub look unattractive and would not make me want to visit. However, there are some pubs with well made websites and designed websites. I have included screenshots of those below;

I noticed a few similarities between the websites. They all use lots of high quality imagery in order to show off the pub itself. They also have bold backgrounds which give the website a real pub feel, as well as including all necessary details and looking welcoming. Based on this research I have chosen to redesign my website for the Bluebell to see if I can follow with these trends.

Bluebell Designs

2011-01-10T02:40:00.001-08:00

Here are a few of my possible design ideas for the Bluebell.

Download Page

2010-10-27T03:46:00.000-07:00

I am just adding the finishing touches to my website and have managed to complete the download page. This is the place people will be taken to when they think they are downloading content. I kept with the same layout but I decided to change the background and text colours to make it obvious that it has much different content. I was able to change the text and background colour's by accessing a different stylesheet. I also included a big bold heading so people have an instant message which it is impossible to ignore.

The page can be seen below;

Piracy so far...

2010-10-25T02:37:00.000-07:00

I have just uploaded my piracy project so far. None of the download links are working yet as I have not fully completed coding the warning page, and also the secret page isn't fully completed so the link in the top right corner won't open.

However, all of the jQuery is working and can be seen in action at;

http://www.gsdesignuk.com/piracy

Chart Share Coding

2010-10-18T08:37:00.001-07:00

The coding of my website is coming along nicely. I have finished the home, music, and film pages and now just need to do the secret page and the warning page which will be opened once someone tries to download something.

I have managed to implement several different interactive elements throughout the site. The homepage features lots of different changes on mouse hovers and other events. Three of these can be seen below, along with the actual homepage. I think it has come together nicely after my design and I feel it has progressed well.

Design For Chart Share Site

2010-10-18T08:22:00.000-07:00

Here is my chosen design for Chart Share. I like to experiment when it comes to layout and features of the website and I tend to do this whilst coding, therefore it may look slightly empty now but when I add in JavaScript and other things it will become much more interactive. I have tried to play around with using lots of bright colours and strong textures to make people almost want to touch the web page.

The question mark in the top right corner will have JQuery attached to it which makes it look as if the page is folding over, this will uncover the link to the secret page. This link is aimed at people who bothered to properly look around the site before just trying to download something straight away.

The four boxes at the top will be recommended downloads and will be pictures of certain song or film covers. There will also be a box which appears when you hover over a film name displaying a small synopsis of the film, this is done to make the site even more believable.

I decided to use 'Georgia' as my font, this is to show I am aware of current web trends as it was voted in the November 2010 issue of .net magazine as the 'best font for the web'.

Colour Scheme

2010-10-18T08:20:00.000-07:00

Below are the colour schemes I made when deciding which colours to use in the design of my website. I usually do these so I can see how the colours look next to each other and it makes it easier for me to choose which would look best for that particular project. In this case I chose the one on the left as I felt it was a bit more eye catching without being to full on.

Chart Share Logo

2010-10-18T08:16:00.000-07:00

The name of my fictional download company is Chart Share. This is a fictional company and therefore I have full creative license over the logo and corporate identity of the business. I decided to incorporate a pause, play, and stop sign in the logo as these are all things which can be applied to films and music. The finished logo can be seen below;

Simulated Client Project

2010-10-06T07:13:00.001-07:00

Having been thinking about my simulated client project since we received the brief on Monday, I have decided on how I will approach the project. Rather than create a normal informative website about piracy I wanted to make people aware of the dangers in a more interesting way. I have therefore decided to create a site which is set out like one offering you free downloads of chart films and songs. The website will contain lists of current chat items which have a download link next to them, however, rather than actually downloading a film or song, it will download a pdf file which contains information about the dangers of piracy and illegal downloading.

After reading the assessment criteria for the project I feel I can match each one at a high end with such an idea. I will be able to demonstrate my knowledge of the current industry but applying an interesting design to the website which fits in with the current trend of web 2.0 sites with lots of texture and attention to detail on background images and text. I will also be able to show my knowledge of typography by using different styles in an effective way. I may also be able to incorporate video and sound into the website to make it look more authentic. I may possibly decide to experiment with HTML5 and CSS3 also.

The research I conduct on the dangers of piracy will be easily incorporated into downloaded file and I will also be able to make this look very relevant to the current industry, once again through the use of texture and typography.

Back Again!

2010-09-21T06:55:00.000-07:00

I am back hard at work after a nice summer. I have undertaken a few client projects which have been somewhat of a farse and I am now concentrating on my own website which currently looks like this;

I am really happy with the look of the site and it contains some nice functionality which I have developed with thanks to my favourite web design guru, Soh Tanaka, (www.sohtanaka.com) without his tutorials my site would be rather empty.

I also wanted to share with you my new favourite website 'Dribbble', it is described as a 'show and tell for designers in 120,000 pixels or less' and this is exactly what it is. There is some really inspirational work on there and its great to waste time on just looking around!

Second Project

2010-03-03T09:51:00.000-08:00

I have done a few designs for the second project which will be a website for my cousins band.

The above image is my favourite of the designs and will feature as the header for the website if I decide to use that design.

I have tried to modernise their look and use lots of grey and black with splashes of colour which highlight particular areas of the site.

This will be the header for several of the pages. I have also decided one of my flash elements will be a full page animated flash linking the user to the different areas of the site.

Brief Two

2010-02-19T02:50:00.000-08:00

For the second project I will be using my cousins band as my client. They are a local band called Late of the Pier and are signed to the major record label Parlophone, along with other well known artists such as The Beatles, Coldplay, and Kylie Minogue!

Their current website is very minimal and only consists of a music player which contains all the tracks from their first album. The only other items on the page are links to their MySpace, shop, and the sign-up form for their mailing list.

I personally don't feel the current website does the band justice, and does not fully showcase how innovative and exciting they are. I think this is currently a very important thing for a band as it's the first place potential fans will go when they hear about a band and if they are presented with an extremely minimal website with no news or any real relevant information then it is likely they will leave the website straight away. Therefore I plan to design a website which is exciting and grabs the users attention from the start. I also want it to be interactive and the most important thing for me is that their music is easily accessible.

It is an exciting project for me because it is within the family, yet has the potential to be an international website. If I do a good job it is likely my cousin will decide to swap the website for their current one and this could lead to more work for me.

Check out their music here; http://www.lateofthepier.com/

Things That Are Brown

2010-02-05T02:17:00.000-08:00

Things That Are Brown are a small web design company based in Seattle, run by a husband and wife. They create really well layed out websites which are extremely effective and easy to use. Their own personal website very much sums up their style, and alot of the websites they have created follow a very similar layout.

It is very easy to navigate the website and the simple plain background means that attention is not distracted from the main body of information and people focus on what is important. A lot of the website has been created on Photoshop and then put together to creat a really neat and clean feel. They have also used different hover effects really well in order to create interesting links which are very easy to use. The website is also very informative without being boring and maintains a fun feel throughout which overall makes for a very happy web experience.

My favourite website from their portfolio is for the company MIX Online (http://visitmix.com/). That website looks like this;

This website is set out in a very similar way to the portfolio website of the company, but it still manages to become a completely different experience through the use of different colours and fonts. I really like the way they have used a very low-key light grey background and then put little splashes of colour in different places throughout the page. The page also has a nice feel to it, with everything being big and bold and it becomes obvious very quickly how to navigate through the website and what different things do. There are also several uses of really interesting graphic design in the page, particularly in the top right with the use of different coloured circles which overlap. Also a very heavy typography influence is apparent in the site, and some of the fonts used are very interesting but work really well together to create a nice and clean site.

The other sites designed by the company follow a very similar layout, with the links located in the top right corner and everything fitting together really nicely. They also use very plain backgrounds and little splashes of colour in different places to add a really nice design effect.

Design Exercise 11

2010-02-04T06:43:00.001-08:00

The three different platforms I have chosen are mobile phones, digital billboards, and tablet computers. I feel these are all extremely relevant at the moment, especially so soon after Apple announced its new iPad.

These three platforms are all varied in the length of time they have been around, but they are constantly bringing out new technological advancements which enhance the experience of the user and make the different platforms seem newer.

Mobile phones have been around for some time, but it is only recently that the capabilities of them have really become amazing. This is primarily down to touchscreen technology and 3G which allows the user to connect extremely easily with people all around the world. Touchscreen allows the user to have the world literally at their fingertips and gives a more interactive feeling to using a mobile phone, the most notable phone in this category is the iPhone.

Apple has its own dedicated 'App Store' which users can access through iTunes, or directly from their phone and it allows them to instantly get new applications which have different capabilities. Apps can be produced by anyone around the world, and these can then be added onto iTunes and then freely downloaded by anyone, obviously they are checked before they are added to the App Store else it would make it very easy for someone to hack into the system.

Overall the whole touchscreen interactive feel has really taken off and made millions of pounds for various companies around the world. It also has the capability to do some really interesting and experimental things through apps.

I personally feel digital billboards will be something which becomes more and more apparent over time. This is due to different enhancements in the quality of picture available through things like HD, and Blu-Ray. Another thing which I can see big companies taking advantage of is 3d. Last weekend saw several pubs around the UK show live football in 3d, this is the first time anything like that has happened and I feel it will become more and more popular. Companies will be able to bring in exciting and intriguing advertising campaigns which will attract more customers. This once again brings interactivity into the picture as people will feel as if they are within the advert.

Finally I can see more and more tablet computers being created to compete with the launch of Apple's iPad. The iPad is a huge release for the tech world, and although its first model has major flaws, such as no flash player, eventually it will become as popular as laptops. Once again through the touchscreen it adds even more interactivity and people feel as if they are interacting with something real. The iPad also uses the same App Store used by iPhones and this indicates that apps will become more and more popular and the store will continue to grow with thousands of people adding their own content. This could have a negative impact on a web designer and force me to change my practice. If people are doing everything through interactive apps, then it could be the end of the browser.

I think in one years time the major digital platform will be a combination of these three things. Phone technology is so good now people are able to access the internet and connect with people instantly. Also the recent screenings of 3d football games will happen more often and eventually, in a decade or so, everything we watch will be in 3d and allow the user to interact more.

Personally I don't think tablet technology will take off for a few years time as they are not yet able to do the same things a laptop can. However, once people can install programs onto a hand held tablet computer then it will become very popular and lots of people will be using them.

Overall these different technological advancements will mean I will have to be constantly moving forward as a practitioner. I will have to learn skills in lots of different software packages in order to keep up with the latest device.

Update

2010-02-03T10:42:00.001-08:00

Been very busy these past few weeks with various different things. First of all are the two websites I am working on for the Peacock pub. I have been trying to experiment with my second design more and it hasn't really come out how I intended it to, but I still think it works fairly well.

Alongside this I have been working on the website I made for a family friend's business, this can be found at; http://www.germanauto.co.uk and it is now very close to completion.

I have also been working on my own personal website which I am very happy with so far. It isn't online yet, but it looks like this;

Non Web Designer Three

2010-01-14T16:27:00.000-08:00

Peter Saville
Peter Saville is a graphic designer from Manchester. He is most famous for creating record sleeves for Factory Records and has designed covers for such bands as Joy Division and New Order.

I have been a fan of Factory Records and the bands they employed for a long time and I was always intrigued by the interesting simplicity of the record covers. I then started to look into the design and that is where I discovered Saville. I then went on to look at his other work he did for the 'Hacienda' club in Manchester.

All of his designs are very simple but yet so effective, and this is a theme which has run through all of the other successful designers I have looked at. This is also something I can interpret in my own work.

My favorite bits of Saville's work are the posters he created to advertise the different nights which were happening at the Hacienda. They all followed a similar theme which contained big bold colours and stood out amongst other designs. This is definitely something which I could interpret in my work by using big bold colours to attract the users attention, but at the same time not overcrowding the page with many contrasting colours.

Non Web Designer Two

2010-01-13T12:53:00.000-08:00

Shane Meadows (http://www.shanemeadows.co.uk/)
Shane Meadows is a director and screen writer from Uttoxeter. He has been my favourite director ever since I first saw the film 'Dead Man's Shoes'. The way he creates atmosphere within a film and really sets the scene for the audience is why I was mainly drawn to him, along with great storylines and scriptwriting.

I like the way he uses simple landscapes within his films, the kind of landscapes you look at and can straight away connect with as they are generally of commonly seen sights and areas. I can also relate to him on a personal level as he is from an area very close to me, and many of his films have been filmed where I live and some of my friends have also featured in these films.

He has won several awards for his films and achieved some success with the release of his most famous film 'This is England'.

I am inspired by Meadows on a daily basis, when I see things around me which look similar to the images portrayed in his films. I can take inspiration from the way he has stuck to his roots and is able to connect with so many different people through simple imagery.

Creating things which people can relate to gives you a much greater chance of achieving success and I can try to bring this across in my work. By creating imagery which people are familiar with and like my work will be spread across a more wide audience.

Non Web Designer One

2010-01-08T08:47:00.000-08:00

Raf Simons (http://www.rafbyrafsimons.com/)
Raf Simons is a 41 year old fashion designer from Belgium. He is strictly a menswear designer and has his own brand of clothing, Raf by Raf Simons, as well as designing for other companies. I became aware of Raf when he did some work for Fred Perry.

Fred Perry is a clothing brand which I am a massive fan of, I have spent a lot of money on their clothes and own hundreds of items. Raf announced a collaboration with Fred Perry in 2008 and they bought out several garments, primarily knitwear, but also some more casual items. The collaboration was fairly successful, although all the items were priced towards the top end of the market.

Raf primarily appealed to me because he was designing for Fred Perry, but through this collaboration I discovered his other work. Despite the fact I probably wouldn't wear his own personal brand, I still admire the way he has really expressed his own identity through his clothing. After looking more into Raf's work I discovered his website, this also fits in extremely well with his identity as it is based on a white background with very few things shown on the screen at any one time. This works really well and keeps you focused on what is important on each page.

I am influenced by Raf in the way he is able to express himself through his practice. You can really see his identity in the clothes he designs. He keeps them simple and sharp, creating stylish items. I can apply this into websites I create by being very minimal and taking the approach that keeping it simple keeps it effective. I can also be influenced by the way he has used a lot of experimentation during his career, this can easily be done through web design by collaboration with people from different areas of design and multimedia.

Waterfall and Whirlpool Software Development Methods

2010-01-08T08:30:00.000-08:00

The waterfall and whirlpool software development methods are very similar in what they do. They have both been designed in order to break down tasks for a project into smaller, more manageable pieces. This enables you to see each specific part of a project and will give you an idea of how many tasks you have left to do, much like a gantt chart.

The waterfall method is given its name as it looks like a waterfall, flowing downwards as you complete each phase of the project through the stages; requirements, analysis, design, build and testing. It is a very strict method, in the way you cannot begin the next task until the one you are currently working on has been fully completed. This means there is no room for error as you cannot go back to a previous section.

Whereas the whirlpool method flows round in a circle allowing you to go back to the start if required. This method allows the user to flow more, much like an actual whirlpool, and it gives you some freedom to work on different sections until you are completely happy with them.

The waterfall method is very straightforward and indicates that you work through each phase just once until it is completed. This is not very good for a web designer as it means you cannot go back to any of the previous sections in order to alter your work. This of course is a huge part of web design as it is important the client is happy.

The whirlpool method seems much more suited to web design as it allows the designer to go back to previous sections once a full circle has been completed. It allows you to constantly update and evaluate your design. This is good if you have a client as they may want you to update the website on a regular basis.

The Waterfall Method

Update

2009-12-06T13:24:00.000-08:00

Today has been a very productive and successful day for me. I have completed my website and all of its JavaScript functions, and I have now successfully validated each page of my website.

I have not uploaded my website to the internet yet, but here are some screen shots;

These screen shots give you a basic idea of what the website looks like and how it works.

In the end I decided to have four JavaScript functions in my website and I think that each of these adds to the experience gained by the user and allows them to really customize the site to their own personal needs.

The first function I put in was to allow the user to make the text size large, medium, or small. This makes it easier for people who don't have good eyesight to read the text.

The next function I added was to allow the user to change the background color of the website. This can be seen in the third screen shot where the color scheme has been changed to yellow. This can make it easier for people who may suffer from colorblindness or a similar deficiency.

After some advice I then tried the more advanced task of adding a lightbox to my photos page. This allows the user to click on a thumbnail and the picture is then enlarged on the screen without opening a separate window, the user can then use previous and next buttons to navigate through the photos. Obviously it would be too complicated for me to write this code myself but I managed to alter one from the internet to contain my own images, this is something I am very happy with as before this term I had never used any JavaScript.

I then decided to add one last function. This function is once again on the photos page and gives the user a description of each picture in a set text box at the top of the page.

Website Layout

2009-11-26T01:44:00.000-08:00

I have been trying out different possible layouts for my project. The image below is the first layout I came up with, I made the website in Dreamweaver and then decided I didn't really like it. This was primarily due to the dark navigation bar on the left hand side. I felt it looked untidy and I also didnt really like the text on the side bar.

I then designed the below layout in photoshop. I felt this layout was alot more user friendly with the navigation at the top of the page. I also think it makes it look more tidy and keeps the design simple but still does what it needs to to keep the user interested in the website. I have since created the layout for the page in Dreamweaver, this can now be used across all pages of the website and keeps it flowing nicely.

Analysis

2009-11-18T15:57:00.001-08:00

http://www.puma.jp/tribes

This is a Japanese website designed for sports teams, primarily football, to create and order a kit for themselves. I really liked the whole idea of the website and found it very easy to use. The website allows you to choose what kind of kit or training item you need, you can then choose the different styles of top and bottom, and then customize the colours of each item. You can then order your customized clothes directly from the website.

I really enjoyed using the website and thought it was a very good idea. The main problem I had with the website was the loading speed. It took quite a while to get onto each page, however once each page had fully loaded then the website ran a lot quicker.

I also really liked the way the website was designed, it was set out in a really neat and tidy way which worked very well. The way it has been designed means it is very user friendly and straightforward to use. Although this is not one of the best websites I have seen, it is a very nice design and a really good idea.

Colour Excercises

2009-11-13T02:52:00.000-08:00

Website Analysis

2009-11-10T16:41:00.000-08:00

http://www.nike.com/jumpman23/m6/

This website was made in order to advertise a new basketball shoe from Nike. The website is set out in a really unique way which I have never seen before. All of the pages of the website are navigated automatically in a movie clip. Each page has its own short movie and these play simultaneously allowing the user to browse the whole website without actually pressing anything.
There are also pages which can be navigated by the user, these look more closely at the shoe itself and allow you to have a 360 degree view of the shoe. You can also look at all the different colour ways for the shoe and it gives you great detail. The other options the user have which are featured in the top right of the screen allow the user to get directly to the several different websites which you can order the shoe from, this makes it even easier for the user and it maximises the chance of people buying the project.

Overall I really liked the website and the way it was set out. It is definately a way of creating websites which I can imagine becoming more and more popular in the coming years and I feel that it is a really good way of introducing people to a new product and allowing them to get a thorogh look at something without actually physically seeing it.

Wire Frame

2009-11-02T12:14:00.001-08:00

These are the wire frames which I have put together for the proposed five pages of the website I will be making.

Page 1 - Index
This is the homepage of the website and I will try and keep it as minimal as possible and use a lot of visual elements to keep the users attention and make them want to look further into the website.

Page 2 - Photos
This page will contain photos of the stadium. These will be done in a slideshow which will be very user friendly.

Page 3 - Football
This page will talk about the football team which plays at the stadium, Manchester City. It will outline a bit of their history and talk about their move to the stadium.

Page 4 - History
This page will contain information on the history of the stadium. It will talk about things like what was there before and why it was built in the first place.

Page 5 - Other Events
This page will contain information on the other events which take place in the stadium such as concerts. It will outline past people who have performed there, and what is planned for the future.

These may not be my final five pages, and I may decide to change the subject of some of them, however this can be done easily as my wire frame can be adapted for different subject matter very easily.

Analysis

2009-10-28T11:31:00.000-07:00

http://www.RedBullProjectX.com/

This week one of my favourite websites I have looked at is to advertise a snowboarding event which is happening next year. The website really impressed me in lots of different ways, for a start the photography used on the website is amazing. Some of the shots are really impressive and add to the whole atmosphere of the website.

The navigation for the website is all on the left hand side of the page and makes it really easy to navigate for the user. All of the information is scattered around each of the different pages and this means the user gets to interact with the website and can learn lots of interesting facts about the event, such as things like how long it took to build the half-pipe which will be used.

The website also contains an image gallery and other exciting features which contain some really impressive imagery which will keep the users attention for quite some time. There is also an audio track in the background of the website which contains very atmospheric music which almost makes you feel as if you are at the slope itself, and this helps to boost the experience gained by visiting the website.

Project Ideas

2009-10-28T07:24:00.000-07:00

After Shaun gave us an idea of what our project for this term would be, I began thinking more about possible location which I could base my website on.

I wanted to choose somewhere which is special to me, and which I am able to access easily, should I need to take photos or videos of it. The place which kept ticking all the right boxes for me is the City of Manchester Stadium. This stadium is the home of Manchester City Football Club, and I have been going there regularly to watch the team since they moved to the stadium in 2003.

It is very easy for me to get video and pictures of the stadium as I attend every home game so am there a few times every month. The stadium also has some history around it as it was originally built to host the 2002 Commonwealth Games. Therefore there is plenty of information available which I can use to fill a 5 page website.

Also, after viewing the stadiums current website - http://www.cityofmanchesterstadium.co.uk/, I feel I could easily improve the current website by both looks and content.

Website Analysis

2009-10-22T14:10:00.000-07:00

Website 1;

http://www.graphotism.com

Graphotism is a website which allows people to upload images of their graffiti, be it in their sketchbooks or on a wall. People can then comment on each others work and give each other advice on how they can improve. The website has a really good sense of community and people respect each others work. I also really like the layout of the website, it's fairly simple, yet it still looks extremely effective and sticks with the graffiti theme of its content. The website also contains other things such as a shop, a forum, and reviews. Overall I was very impressed by the website and the content was really impressive and there was some really good examples of different text styles.

Website 2;

http://www.tattooson.com/

TattoosOn is a website which allows people to talk to each other regarding tattoos. The interesting thing about this website is that it allows tattoo artists to register on the website and show off their work, this is a good way of them meeting new clients and it allows them to get to know other professionals in the same area so they can compare work and help each other improve. Some of the work on the website is really impressive and after looking around I believe it is the most widely used social networking site of its kind. The website also allows people to post saying what kind of tattoo they are looking for, then artists can get in touch if they are interested and potentially gain work. This is why I think it is an excellent tool if you are in, or interested in, the tattoo business.

Website 3;

http://www.football-networks.com/

The third website I looked at was a football related social network. This site allows people to upload images, videos, and other football related things. People can then comment on each of the items and people are able to share content. The website also features a forum, and other areas where people are able to able to converse with each other and talk about football related subjects. The website also features a shop and other interesting features. This was my least favorite of the three websites and I wasn't highly impressed by the layout of the site. It was a really basic website but it still did the job and had some interesting content.

Screenshot

2009-10-22T06:42:00.000-07:00

Managed to get the screenshot to upload properly. This is a photo of the design I am working on for a website of a local band.

Update

2009-10-21T06:22:00.000-07:00

Just a quick post to let you know what I have been up to over the past weeks and months.

During the summer I did a lot of hours work experience at a local design company. Spending my time working alongside their web designer, this gave me a great insight into the industry and how it worked. It also gave me the opportunity to make lots of website and get to grips with different coding languages. Here is a link to one of the many websites I made during my time there; http://www.thinkpebble.co.uk/

Since I finished my work experience I have been designing other websites for a few different clients. Personally I like to design the website first using Photoshop, and then build the website at a later stage, this means I know exactly what I want the website to look like, and it gives the client an idea of what the website will look like without me having to change lots of code and almost completely redo the website if they do not like it.

I tried to upload a screenshot of one of the websites I am currently working on, but for some unknown reason parts of the image were removed and the colours were changed.

Interview Analysis

2009-10-21T05:50:00.000-07:00

Dan Saffer; 'Interaction design is an applied art'

I found this article really interesting, I found it a really useful way of getting into the head of a successful interactive designer which allowed me to compare the way he works, to the way I work. The part of the article I found most interesting is where he is outlining all the other disciplines which are related to interaction design. It is amazing how many different disciplines are actually related and it makes you think about how big the interactive design industry actually is. I also found this article helpful with his pointers on what the typical mistakes made by newbies to the industry are. This allows me to avoid making these mistakes myself.

Joel Schafer; 'I'm into minimalistic clean design'

I really enjoyed this article. He gets straight to the point and also gives you a good idea of what his thought processes are when creating a website. I really like the idea of only using "greyscale + one color" when making a website. This is such a simple but effective idea, and it really allows him to put his own creative stamp on each website, this will be recognised by people and they will instantly know that he created the website. This article also had some really interesting tips and pointers for people who are new to the industry and this could prove to be a huge help to me.

The Box

2009-03-18T08:23:00.000-07:00

The box all my things will be contained in is either going to be a midi keyboard or a sampler. The user will then be able to click on different buttons of the item and this will take them to a different part of the box and will enable them to do different things. For those who are finding it difficult to understand what I mean, below is a sampler similar to the one I will be using;

Audio Jukebox

2009-03-18T08:20:00.000-07:00

I got the idea for an audio jukebox through researching last years projects. I'm not entirely sure how I will manage to make this part of the project. Hopefully I will make it so the user can select a certain song from a playlist and then the song will begin to play, I have also thought about the possibility of adding some information about that particular artist being displayed whilst the song is playing.

AV Part

2009-03-18T08:18:00.000-07:00

For the AV part of my box I will be doing a pixilation video. This video will incorporate me playing guitar as I feel this is something which represents me very well. At the moment I am working on making an audio soundtrack of me playing certain chords and then I will take pictures of my playing these chords, I will then try to match these up in premiere in order to create a song out of the images. I am quite far through this process and it should be finished within the next week or so. It's just a bit of a struggle to match the two and make it look effective.

Logo Cont...

2009-03-18T08:15:00.000-07:00

Here are another five logo ideas;

Logo

2009-03-18T08:08:00.000-07:00

After researching the logos of many famous brands I decided that it was best to keep the logo simple. I wanted to logo to say GSW, these are my initials and I thought it was the best fitting thing to represent me. Below are the first five possible logos, this probably won't be the final colour scheme but it gives you an idea of what the logo will look like.

Avatar

2009-03-18T07:39:00.000-07:00

When deciding what my avatar would look like I spent a while sketching basic ideas and found it hard to create something which fit my personality well. Then I remembered a music video I first saw a few years ago, its by a UK Hip-Hop group called the Planets, although a fairly underground group the video had been created by a design company and was a quality video.

The video can be seen below, and in a few days I will upload the final sketches for my avatar.

My avatar will look similar to the characters in the video, except they will be wearing different clothes and have slightly more hair.

Identities Update

2009-03-18T07:36:00.000-07:00

Realised I haven't updated for a while, so in this post I am going to sum up my ideas and the things I plan to do for the project, then in other individual posts I will go into more detail about specific things for the project.

Box; Either a Midi Keyboard or Sampler pad.

Avatar; Inspired by music video

Logo; Simple but effective

AV; Pixilation with guitar

Choice 1; Audio Jukebox

Choice 2; Not 100% certain yet.

My Creativity

2009-02-24T04:23:00.000-08:00

Over the past few years the majority of my creative work has been done for sixth form. Whether this be through art and design with such things as paintings and drawings, or through IT and Business by creating websites, and presentations. Outside of that music has always been my way to creatively express myself; whether it be through playing guitar, or making beats. Most of my creative work has been done for teachers and has been things I have been instructed to do. Sometimes I like to draw outside of work set, and this is always for my own pleasure.

I have always been like this because throughout my school life I took subjects which were all coursework based and had very few exams. This left me with little time outside of completing work for my own personal creativity. It was however my decision to take mainly coursework based subjects as I felt I would not be able to get enough revision done when the time for exams came around.

In the future I would like to be able to use my creativity to express myself and give others an idea of how my mind works. I would like to impress people by what they see, and influence others with the work I do.

For me the starting point in front of, seems irrelevant. I don't see how I could benefit from other peoples reactions to the piece of work, for me it is more important to see my own reaction to it. The starting point I feel drawn to is behind. This is because I feel by doing this you can gain a much greater understanding of the work and what it is all about. I feel weary of the in or through starting point, this is because I feel it would be hard to work out someone's writing process from just reading the piece. I also feel that the behind process would be a much better way of creating an interesting piece of writing.

My Practitioner Development

2009-01-27T04:19:00.000-08:00

It is important to me to develop myself as a practitioner, not only whilst completing set tasks from my course, but also by undertaking personal tasks which will help my gain a greater understanding of different elements of the course. The main thing I do outside of the course is to create music, this is either by the use of computer programs such as Reason, or by using my guitar. I like to record the music I make and then use other programs to edit that music. This gives me experience for when it comes to such things as editing a film. Using these programs will allow me to have greater knowledge of certain areas, for example what certain sound effects do.

Another thing I like to do in my spare time is to play on my Xbox. This allows me to get a greater understanding of how 3D areas work and how the big names in the computer gaming industry create realistic 3D backdrops. Xbox also have recently introduced a new avatar system so using this I have been able to create my own basic avatar and can easily edit it and play around with it.

Since a very young age I have also been drawing, whether this be for school or my own personal entertainment it has always been something I enjoy doing. This has continued in my university life and I still draw whenever I have some spare time.

One more thing I enjoy doing is watching films. Doing this allows me to see how professionals in that field interpret different things. It is interesting to see how people put across different messages whether it be through lighting or editing perhaps.

Update.

2009-01-15T05:49:00.000-08:00

Here we are again!

So, I'll start by updating you on my activities of the past month. Like the majority of people I know, I have been ill and stuck in my bed with some mumps type illness for a week or so. This left me a little worse for wear, but I'm getting back on top of things now.

On the work side of things I have recently begun to play Second Life, it took me a while to get into it at first and to properly understand how things worked. After a bit of practise I eventually found my way and began to get a little more into it. The diary I have been writing is saved in a separate document, so I will upload some of that later so you can see what I've been getting up to.

Other than that I've been working on my music and things. Some of you may know I enjoy making soundtracks, and where possible I like to include them in my work. The soundtrack for my interactive narrative has been on MySpace for a few weeks now and has almost hit 1000 plays! You can see it in the player I have embedded below (it's called Grimestar).

The player below also contains some of my other music stuff, a few beats I've made for people and some instrumentals aswell. If the player doesn't work then you can find me at http://www.myspace.com/w7f

Always appreciate feedback so please let me know what you think!

Cheers.

Interactive Narrative

2008-12-10T03:54:00.000-08:00

My interactive narrative is now complete.

I have uploaded it to deviant art and you can play the game yourself by clicking the link below.

The idea of the game is that you are trying to find your way back home and are being chased by a local gang.

The soundtrack for the game is also completely made by myself.

Enjoy.

The Radford Rudeboys by ~Woody7Figure on deviant ART

P.S. - My one shot film is finished, but im having a few problems with uploading it to YouTube as the file size is huge and its taking way too long.

Light and Colour

2008-11-24T08:51:00.000-08:00

"The Cloud of Unknowing" - Richard Kenton Webb

The painting I will be talking about is entitled The Cloud of Unknowing, and it was painted by Richard Kenton Webb. The thing that first struck me about this piece is the amazing amount of detail contained in the centre section of the painting. This detail then fades out and goes into an outline of the cliffs.

Kenton Webb has used light extremely well within this painting in order to focus the detail in the centre section running horizontally through the piece. Having the cliffs as a dark strip allows him to use lighter colours to create a high amount of photo-realistic detail.

The light colours used in the sky of the painting contrast extremely well with the dark colours used in the cliffs. This adds effect to the piece and is also another way of focusing the viewers attention on the detailed parts of the work.

Light has been used in a very effective way in the sky, by using light colours at the top of the cliffs and making the sky get darker the further out you look, it creates the effect of a sunset, this makes the piece more interesting and gives the viewer something interesting to take in.

Colour Replacement

2008-11-24T06:58:00.001-08:00

Above are the two colour replacement photographs I did in Photoshop.

Update

2008-11-19T07:22:00.000-08:00

Not posted for a while as I've been doing numerous different things.

Mainly I have been ill and spent the majority of the weekend back at home coughing and with a bad throat which wasn't great. I also forgot my laptop which made the weekend pretty boring.

On the work side of things I've been trying to write a script which isn't as easy as it looks, and in about 15mins I'm off out to attempt some filming with my group.

Nice.

One Shot Film - Writing.

2008-11-12T06:10:00.001-08:00

So today I've been doing the task of writing a script for my groups one shot film. Our film is going to be set in a sort of restaurant type place, and the idea of the film is a comedy sketch, based on speed dating.

Doing this will allow us to bring lots of different characters into the film in a short space of time, and with only one person in front of camera for the whole time it means we wont have to come up with lots of ridiculous costumes for the people to wear. Having only the person who is in front of the camera being able to see the people they are dating means that we can add in audio over the top where they are thinking in their head about what the person looks like. This allows us to create a costume, without actually wearing one.

So now I will begin writing my script, something which I have never done before so am not expecting to be amazing!

Rule of Thirds

2008-11-10T04:36:00.000-08:00

The rule of thirds is a rule which is used to aid the composition of photography, painting, and other visual arts. The rule states that an image can easily be split up into 9 equal sized sections via the use of two evenly spaced vertical lines, and two evenly spaced horizontal lines.

When these lines are put onto an image it creates four points around the middle section of the picture. These are used to align features of the image, for example the trunk of a tree could be positioned on the right hand line of the two vertical ones.

It has been said that using this technique creates a better composition and gives the picture more energy than simply positioning the main thing in the middle of the composition.

When using this technique the horizon line generally is in line with the top or bottom horizontal line and other parts of the landscape, for example trees are lined up with the two vertical lines. Doing this makes the image more aesthetically pleasing.

Reference; http://en.wikipedia.org/wiki/Rule_of_thirds

My camera/ video recorder has been playing up this week so unless it fixes itself during the day then my video wont be up for another few days.

Pixilation Final

2008-11-06T07:10:00.000-08:00

Below is my final pixilation piece. The idea of the video is to show different sporting activities, for example, long jump, and relay.

The soundtrack for the video was also entirely created by me using my trusty midi keyboard and various computer programs. Enjoy!

Design of Items

2008-11-03T09:57:00.000-08:00

The item I am going to be talking about is my MacBook laptop. When I bought this laptop it was primarily for the fact I knew the type of programs I would be running on it, such as Photoshop, and different pieces of music software, such as Reason, Recycle, and Soundforge, would be much more responsive on an Apple laptop. I've had problems for years with Windows PC's where they would randomly shut down or crash at just the wrong moment which would cause me to loose music, work, or other important things.

When buying my MacBook however, I was also swayed by the look of it. The design is superb and the laptop just seems to fit together nicely. It a perfect size where it's neither too small, nor too big. It also comes with some extremely good built in technology such as the camera, and the bluetooth function which allows me to easily transfer files between my phone and laptop.

People are generally willing to pay for things in attractive forms because the newer devices always seem to have more functionality built in. Take touch screen mobiles for example, some of them do exactly the same as mobiles without touch screens, but people are still prepared to pay more just because instead of pressing a button, they can touch a screen which is a new technology most people haven't had the chance to try.

The Future of Sat Nav

2008-10-27T12:09:00.000-07:00

In light of the award just picked up by British company SciTech, i thought it would be appropriate for me to look at the future of the Satellite Navigation. The competition they won shows appreciation for the smaller scale businesses which make use of the Galileo satellite positioning system.

Galileo is a fairly new project and was designed to outperform the current systems in operation as it covers a larger range and is more accurate.

When someone mentions sat-nav, the first thing people think of is a box which you put in your car which tells you directions from one place to another. This is the most common use of the system and the European Satellite Navigation Competition seeks to find new and innovative methods of using the Galileo system.

During the past six months the use of satellite navigation systems within peoples cars has dramatically risen and now a significant amount of people own one. Personally I think the idea of branching out into different areas which put the satellite navigation to use is a brilliant idea and it can be used for many different things.

The winning team in the competition had created a system which is put into a lifejacket. Once the lifejacket is inflated the system automatically turns on and it allows the people to be located. It also includes a communication system which allows the person to then talk to someone to give them even more details about their location. The unique thing about this system as opposed to other similar products available, is that it will be able to show the exact location of the person in the water, whereas previously it could only be seen where they left the boat and entered the water.

A similar product to this on the market is one which is used for diabetic people. It’s an ‘auto injecting’ pen which is used after the patient has suffered an anaphylactic shock, fitted with a sat nav device which informs a local center via a mobile phone network which then allows them to get instant medical attention.

In the future of satellite devices I can envisage them being placed into humans in a ‘Big Brother’ manner which will allow people to be located at all times. It could be used as an alternative to having an electronic tag on a criminals leg, it could be placed inside them and this means they would not be able to remove it easily. They could also place the device inside criminals released from jail so the police can track them at all times.

Reference; http://news.bbc.co.uk/1/hi/sci/tech/7684027.stm

Inspiration

2008-10-22T17:25:00.000-07:00

Below is a video which I have used as inspiration for the latest project. It's a music video for the song 'No Good' by Plan B.

The video uses the same process which I will be using and is a useful source and in my opinion an extremely good music video for a great tune.

Pixilation

2008-10-22T05:23:00.001-07:00

During the session last friday we were set the task of taking pictures in order to create a pixelation clip, which is basically the animation of a real thing, for example a human. I haven't really done anything like this before and it was interesting to see how the pictures turned out. We ended up taking around 400 pictures in an hour and a half in order to get some sort of idea where I wanted this task to go. None of us really had any ideas about what could be included in the pictures but eventually we came up with the idea of a sort of 'fun olympic games' with a few different events. I like the idea and the pictures look quite good. This week I have been taking more photos and trying to come up with a title screen for the images.

Also I have been thinking about what music could be used for the soundtrack, as music production is one of my main hobbies I've started making a few different backing tracks which could be used.

If anyone feels like a listen to my own music then they can check it out at;

http://www.myspace.com/w7f

Feedback is always appreciated.

Whiteboard Animation

2008-10-22T05:18:00.000-07:00

One of the tasks from the two induction days was to create a short animation clip using board markers and a whiteboard, the video below shows the edited version of all of the groups animations;

I was quite pleased with how my groups animation turned out and I don't think it was a bad effort for saying I have never done anything like this before. I was impressed with some of the other groups animations, and from the quality of some of them it was evident that some people have alot of experience in this area.

First Lecture

2008-10-14T05:12:00.000-07:00

Today I had my first lecture of the course, and was something I had been preparing for since I accepted the offer to study Multimedia at Nottingham Trent. It wasn't a great start when I realized I had walked to the wrong building but eventually I made my way to the right place and arrived on time.

During the lecture we were told how to successfully complete the course and we were also given a little information about the essays and things we would be doing this year. It was a fairly interactive lecture which gave us opportunities to walk around and talk to other students and discuss different set questions. This made the lecture a fun and enjoyable experience.

First Week

2008-10-08T03:56:00.000-07:00

What Did I Do On The First Week?

This week I have been exploring different parts of the University and the City. I have been trying to work my way around as many of the 'Welcome Week' events as possible in order to gain an understanding of what University life is all about.

What Do I Want to Get Out of The Course?

Through the Multimedia course I hope to gain a better understanding of certain creative arts. I also hope to be able to bring some of my musical production abilities into my work possibly through the use of soundtracks. Web Design is also something I have always been interested in and I hope through this course I can further my understanding of it and also gain new skills which can be used once the course has been completed.