Wednesday, 23 March 2011
Artefact 4
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.
This is my first design;
I will now make two more designs and then put these online with a survey to see peoples opinions.
Tuesday, 22 March 2011
Artefact 3 Evaluation
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.
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.
Thursday, 10 March 2011
Artefact 3 Results
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.
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.
Wednesday, 9 March 2011
Transparent Text Box Client
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.
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
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.
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
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.
The current homepage can be found here.
Bluebell Slideshow
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.
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
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
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.
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.
Thursday, 3 March 2011
Event Display For Client
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.
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
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.
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.
Subscribe to:
Posts (Atom)