Thursday 20 November 2008

Source material

I have collected together a range of different textures, based on my mind maps and word association and have hosted them on PhotoBucket. I have taken all of these images myself.
The textures will be used as part of my source material for the design of my website but also will be included in the content. I will be updating the variety of textures over the next week or so.

Monday 17 November 2008

Websites and monitor resolution
I have been looking into the different website resolution sizes and looking which one would be best for me to use for my textures website. I found this website whilst browsing for the solution and i came across this one: www.hobo-web.co.uk/tips/25.htm. It shows the different statistics of what size monitor resolutions users use when viewing websites. Theystates that there isnt a specific size to do your website in but it also states ' Optimize for 1024x768, which is currently the most widely used screen size'.

I also think that as my main target audiance is for around 21 - 40 year olds designers, they are more han likely going to have quite a good computer to be able to install the designing programs onto, So i think i should be safe to produce my main website page template to this resolution.

Flash Advertising Templates
I have been looking at the different advertising templates available in flash, we have to include three elements from these templates, which includes one pop up. There are different sizes in these templates available (below)
I have decided to produce my pop up, to the 500x500 size for two reasons. One because the other pop up template is not very big and i want plenty of room to be able to play around with the texture imagery and typography and for two i want the pop up to be right in your face, yeah its probably going to be annoying but its better than the user not really noticing that they have a pop up, and obviouly i want them to notice as i am aveviting something that i want the user to be interested in.

My other two elements on the other hand will be smaller. As i dont want everything given to the user to be completely in their face. So have decided on a skyscraper as according to various webstes such as here because they are great for advertsing and are apparatley good 'attention getters'. (image below). The size i will be using is 160x600. There was the choice between this size and 120x600, i have decided to use the wider option because of the same reason for the pop up, i want to have more freedom with room when design it.
My last element will be a banner. With the size 468x60, i have gone for quite a small and dinky size for this element because the other two elements are quite a lot bigger and i want a smaller element that will fit quite snug into the page.
These are the different elements and sizes for them that i intend to include in my website. When designing i might change them if i decide that they dont look coherent together.

Sunday 16 November 2008

Flash - music and sound

David downes set us another week long exercise in our seminar on tuesday. The task was to produce a website promoting a tribute band for the Pet Shop Boys band called Grocery Shop boys. Our site is to include 3 music video and sounds, with four different main navigation links, About, Contact us, Music tracks and music videos. We were told in seminar that our site didnt specifically have to be based on this band. So instead i decided to do my site based on a tribute band (that i made up)for Evanescence. I first designed some different design ideas for the main design template and the interaction. We also had to include a simple animation at the begining of the site that included a skip button, so i thought up a range of different ideas for this element to. My design ideas are below (notes are written on the design sheets). Excuse the photograph quality, i really need to buy a scanner. :).

This design sheet contains a range of different design ideas, including the different ideas for templates and navigation.This design sheet includes another range of designs, including the interaction the user has with the music and video tracks which will be included on the site.
Thsi design sheet includes different ideas on how the user can interact with the main navigation links and a few ideas on the introduction movie.

This design sheets shows another idea for the initial template and how the user would navigate around it.
Thsi is another design idea for a possible introduction movie.

Thursday 13 November 2008

Fonts

I have decided to also look into a bit of typography for my project, because i think that a nice typography on top of a texture works really well. Here are a few that i have been looking at:

Source: http://www.dafont.com/
Fonts: 28 Days Later
Acid Label
Diffused
Soul Mission
Sniper
Cocaine Nosejob
Trashed

















I have chosen these style of fonts becausei wanted the style of font to be grungy and quite messy on top of the textures. I also want the font to be quite bold because i dont want it to get lost in the textured background, instead i want it to stand out.

The Colour Wheel


Today we spoke about the basics of colour in our seminar unfortunatly this seems to be a subject i struggle with, i can never seem to get a colour scheme right, i can work with pastle colours quite well but not the brighter colours such as yellow and orange. I was once taught though that one way to learn about what colours is 'see what colours are directly opposite each other and these will work well together'.

Image source: http://northlite.net/ps/images/color_wheel.gif

Website Two
Texture King

What does it look like?
This website is more visually pleasing, as with absolute background textures they have used a white and grey colour pallette but they have also brought in orange to brighten the page up as to not make it so dull, thi works well because it is more pleasing to the eye. On the index page, the designer has presented the navigation in an unusual way, having block boxes with the name of the link at the top of the box and the amount of textures that link holds. The have done a sort of reversal with colour, on the link they have used white on the darkish grey and the same gray on a whit background for the sections below, this
work because putting light colours on top or dark or vise versa helps them to contrast together and stand out better.

They have also presented the textures in a neat an organised way which helps the user to find exactly what they want with ease.





The colours and the design are consistant throughout the site which is a strong point because failing to do this may cause the user to become lost and confused resulting in them getting bored and leaving the website.








How relevent is the content on the site?

The content of the site is based around textures, photography and Photoshop, all key elements that produce designs. The site also sells their brands promotional products, such as T-Shirts badges and magnets.

How clearly is the website laid out?
This texture website also keeps to quite a simple structure, although the struture is more complex than the absolute textures website, its still clear and easy to find without much animation or fun included. But the site does hold key elements that have to be remembered when designing for example, the logo is in the top hand left corner, this is strong because the humans eye automatically looks from left to right. The text is clear and easy to read. The colours contrast together well, all simple points such as these help to make it easier for users when trying to understand a website.

What would inspire me from this website with my own website?
Using a bright but simple and clear colour scheme and structure. I also like how the designer has seperated the different textures, making them easy to find.

A couple more websites i browsed were:
http://www.cgtextures.com/
http://free-textures.got3d.com/
http://textures.forrest.cz/

With all of the websites i found similarities, they all hold a simple structure, not very busy designs, eveything is all seperated into different section making them organised. The all use a simple colour pallette, sticking to eiter 2 or 3 different colours. They are all also clear and easy to navigate round with easy to read text.

This is sort of long overdue but ive been so busy, but ive done it now. Using the criteria that David gave us. I wanted to do a couple of reviews reguarding the subject of my theme to try and gather inspiration if the different ideas i could play with.

Website One
Absolute background textures archive.

What does it look like?
The design of the website isn't visually pleasing in my opinion. Its quite a standard template, with everything set in a place which enables the users to find what they want at ease. They have used a grey and white colour pallette, with a banner going along the top which looks like it could have been created in paint. Id probably give the design 30/100, could look better but i suppose its one of those website which is just there to serve its purpose.

How easy is it to use?
Its very easy to use, navigation is easily laid out and easy for the user to find, each button goes to its own seperate page, which each display relevant information. It is all straight forward, after looking around the different pages, i found that the user could interact in different way, there is a a wide variety of things you can create yourself on the website

For example you can create and personalise you own buttons, textures and logos's.

This logo was created by me just inputting some information into the fields provided and uploading my own texture (although they do provide textures too). I clicked to submit my options and this logo was generated.
The same with the button above, i imputted the information, textures and colours and the website generated the image. Obviously if your a professional at website design or are working to become a proffessional then you would create your own anyways, but i think it really works well for say, novice computer users, or maybe clan leaders who want to make a site for their clan or a band member who wants to create a site for their band. I like the interactivity included within the website.

How relevant is the content of the website?
First of all, everything is free which is really cool. Second, all of the content on the webpage is related to website design in some way, for example they have the buttons, textures, logos as well as template makers and texture makers, web graphics, fonts, sound effects and you can also request web graphics to be made personally for you. The only thing on the page not relevant is a banner across the top of the page which is probably kust an advertisement from the webserver hosting the website. On thing i did find quite odd that i hadn't seen on another site before was that the designer had split there different types of textures into colours rather than what the texture is.

How clearly is the content laid out?
The layout of the site is simple, it follows a simple grid, with each different section being 'boxed'. Like i said before the design isn't good but the user will easily be able to respond to the design and figure out what to do and how to get about.

There is no flash included on the website but at a guess im guessing that it has been created using javascript or php, im not sure im not too good at any of those at the min.

What would insipre me from this site with my own site?
The only part really that i would include as inspiration for my own site would be the interaction with the user, its made me start to think of all the different methods i could include which would allow me to pull the users in. As textures are use a lot by anyone who designs really, my site needs to be creative yet easily functional as i want the user to be able to find what they have come for.

Monday 10 November 2008

Final Banner Evaluation.

Fireworks Banner

For my banner i wanted my key audience to be of a wide variety of people, i wanted it to target everybody, because everybody whether in a family or not, uses fireworks and need to be aware of the safety issues.

The message that i wanted to get across was that there are a lot of safety precautions to make before, during and after using fireworks.

I decided to produce a quiz for my final design, merging 2 of my design ideas together (design idea 2 and design idea 5). When on Facebook i noticed that a lot of people take the quizzes, someimes more than 500 people take one quiz, so i thought that this would be a good idea for my final design as it would appeal to a large variety of people. I also stuck with the quiz idea as i knew i had the skills to produce it in Flash.

I have spoken about my different design ideas here. I have also discussed how the interaction for the designs will work here.

The main interation for the users with my final idea is obviously answering the questions, the user clicks on the answer they think is right and the Flash code works out how many questions are right and displays their score on the final screen. I think that the interaction would increase the ability to communicate the intended question as like myself when i do a quiz, i like to get the answers right and stick at it until i do get it right.

The quiz its self succeeded, the user is able to click on an answer and the program will calculate how many questions the user has got right and wrong. Unfortunatley i had a few problems with the last two questions when the user goes to click on the first two questions, the hand curser appears, but when going to click on the third question the text curser appeared and the arrow curser appeared on the last question. I couldnt figure out why this was happening, i tried deleting the answers and creating new movie clips for them but this still didn't work, I also found that the font changed too, although it was the same in Flash.

I would have liked to include end screens, saying 'well done' with fireworks going off and a 'you'll have to try harder screen, but i just couldnt figure out how to do this in the space of time i had to do it in.

I was quite pleased with the begining animation with the fireworks going off and the information scrolling up the screen, although i thought that this should have been slower or i maybe should have faded the answers in and out of the screen in turn because when i tried to read the information, i found i had to read really fast.

I would have like to produce my 4th design idea but i knew i would have no work to produce in the end because i knew i wouldn't be able to do it.

Sunday 9 November 2008

Flash - Firework Safety

For this exercise i first went onto the websites that david had suggested for some useful background information. The website that i found to most helpful was Firework Service
I found that all the websites pretty much talked about the same issues anyway. From here i devised a list of firework safety issuse that i could include within my designs. My list included:


  • The BS 7114 British Standards warning and to make sure that fireworks you buy have this warning on the box.

  • Keep children safe - Dont give sparklers to childern under 5 sparklers.

  • Always supervise your children.

  • Protect your animals - Keep them inside.

  • It is illegal to sell fireworks to anyone under 18.

  • Dispose of fireworks correctly - NEVER put them into the bonfire after use.

  • Some fireworks require a professional, leave the job to them.

  • More children than adults get injured by fireworks.
I then came up with a number of designs for my advertisement.

Design idea 1:
This idea will target any person who intends to use fireworks. This design basically is about the distance you should keep when lighting fireworks. The user will drag and drop the person on the screen to light the firework, if he is a good distance away then the fireworks go off ok and the user gets a well done screen. If they put him too close then they get a big bold red STOP flashing at them, they are given a screenshot of the scene and then they are given a screen that tells them about fireworks and the distance to keep. The information will fade onto the screen after the screenshot has faded off.

Design idea 2:
This idea would target any person/s who intend to use fireworks. This idea was going to just be a banner that expressed all of the dangers that come with fireworks, the warning would come on the screen, the writing would be red to express the warning factor. In the background would be a number of images randomising which would relate to the piece of information being given.

Design idea 3:

This idea would target shop owners/assistants and young people. This idea was to be an animation but at the moment i am unsure how to put it together using AS3. Basically what would happen in this idea is, 2 young boys would walk into a shop and ask to buy some firewrks, the shop assistant (which is you) asks if they hav any d, the boys say no but they are 19 and the user will choose whether to sell the boys the fireworks or not, If you say no you get a well done screen and a warning is put on the screen saying 'Dont sell fireworks to under 18's' If you decide to sell the boys the fireworks then, the screen goes onto an image of you sat there with the obituary in your hands and the boys photographs on the front. Then there is an animation of the coppers coming and shutting your shop down. The again the warning of not selling fireworks to under 18's comes onto the screen.

Desiign idea 4:
This idea is based on the British standards warning and would target all firework users, it is wo warn them to check for the BS 7114 Warning before using a firework as it could have its concequences. What will happen within this animation is, the user will first be presented with a screen which is offering cheap fireworks, the user will be told to click on the firework/s that they would like to buy. Once the user has chosen then they are taken to another screen which will be a 3D perspective of the box/es of fireworks, the user will be able to move the box around so they are capable of viewing all sides of the box. They are asked to give their opinion on whether they think the fireworks are safe or not, and are presented with a YES or No option. f the click yes the animation will go to a sreen where the user can create their own firework display, the dragand drop the fireworks they choose into the display, If they had chosen that they thought the fireworks were safe then the firework display would go crazy and all over the place. If the user chooses that they think the fireworks arn't safe then they are shown a page saying 'Why whats missing' they are given a multiple of answers, if they choose the right answer then they are given a page where they again create their own display by draging and dropping the fireworks, but these fireworks go off properly, if the choose the wrong answer then it goes to the screen where the fireworks go crazy. At the end the are given a page which explains the safety of checking the boxes and why.

Design idea 5:

This idea would also target all firework users, It is bassically a quiz whch the user can do to see if they are safe and capable of handling fireworks. On the first screen are given a btton to enter the quiz, then the user will be given a variety of questions to answer, they are then given their score at the end. If the user gets so many right then it goes to a screen that has fireworks going off in the correct manner and are told 'Well Done', but if the user gets so many questions wrong then they are presented with a screen with fireworks going crazy and told that they need to practice their firework safety.

Friday 7 November 2008

To help me to come up with a variety of ideas and suggestions, i decided to produce a mind map and word association diagram based around textures (the choice for my project). These will also help me when im gathering up more photographs for my project.

I produced the mind first and then working from the words i gathered here, i expanded them with the word association.

Sunday 2 November 2008

Three page website project.

I have chosen to base my website on textures, I will create a free textures website, As i already enjoy designing with textures, i have quite a collection of textures. I will be looking at taking inspiration from Jason beam and trying the textures and images layered upon each other to create an outstandng design hopefully.

An image that speaks to me.

Ref: http://chinnifrood.wordpress.com/

I have chosen this image, its not any famouse painting or anything like that, i took it off google (but have referenced it). The reason i chose this image is because, when jools set us the task it instantly took me back to when i was a kid. In our living room on the wall used to be a photograph in a frame very similar to this, And i used to get lost in it, id look at it and imagine that i was inside the picture and how nice it would be to be in that surrounding with all that water around me, with the beautiful sunset and being sat in that boat where it was nice and peacefull, with birds singing, it was my 'get away' picture if you like, and looking into the image and imagining i was there always made me feel better. If im honest that is the only picture that has truely spoken to me and stuck in my head.



What does it look like?
Very bright and in your face. But i think that the design is smart but fun looking at the same time. Its nice and bright which helps it not look so boring. The characters and the levels that you go to throughout the game remind me a bit of a a computer like the xbox or playstation.
How easy to use is it?
Very easy because it pretty much gives you different options to choose from when playing the game.
How relevent is the content to the site?
The content on the site relates to the game itself.
How clearly is the content organised?
Its organised well, it sort of reminds me a bit of the sims. The site is easy to use and not at all cluttered.
Flash Elements?
Yes the website is on a game called dork dodge, where the computer takes you along levels and you have to avoid all these dorks who are in love with you, when you run into another character, a video pops up, with a real life person talking to you, then that closes and you have a list of choices to choose from as to what you want to do. They used an effective way of flash.
Overall i thought this site was alright but it was only fun for the first five minutes, it got boring and soon lost its touch. But i do like the way that theyhave the videos included in the website, i like the idea of this. Its a bit similar to the 626 website that Katie spoke about, that website also played videos through the game, I think it work really well, and helps to draw a user into playing on the website.



H&M - I have chosen to analyse H&M, a fashion company.
What does it look like?
The design looks very original and creative in my opinion. I like how everything is all placed in its own place on the page but it all still fits together. I was very impressed once actually going to the links from the home page because the background is set in a real life setting and the clothing outfits are on dummies and look 3D, i thought that this was a very effective feature. They use a simple colour scheme relevent to their company which is white and red.
How easy is it to use?
To be honest at first i was a bit confused about how to find selections of the shopping available but i think this is put down to the fact there links arn't your usually names like 'whats new' or 'shop' which i suppose makes the site unique in itself. Afer using the website for a while i managed to get the hang of where things were.
How relevent is the contect of the site?
Obvioulsy like all businesses selling online, they provide relevent information to their company, such as press releases, their cothing, jobs available in their stores and a store locator.
How clearly is the content laid out?
I felt that the design is clearly laid out in an efficient way to suit users needs. Every different bits of information has its own seperate space from the other bits of information. The links are clear and easy to use. The page is easily cleared out and not cluttered.
Flash elements?
There is some really funky flash elements included in the website, such as when moving away from the index page, the red shapes move around, i know it insn't that hard to do in flash really but the part of flash that i found most impressive was that you can dress up a woman with the clothing that they offer, you can also add your own face to the figure, so you can see what you'd look like in the clothes. There was also a section where you could shop for your clothing which were on 3D maniquins. You could also read the magazine page by page on the website.
Overall i was very impressed with this website, i found that it was very unique, creative and effective. Obviously this company took a great deal of interest in there target audience and what they could offer to them.

Apple.


What does it look like?
Clean and sophisticated. It uses a clear grid, with everything spaced out, the main information section is the largest section to the design, this is a good point as the website is used for advertising and selling their product and the grid they have used makes it user friendly, it uses a simple colour pallette (mainly grey and white). I like this website as it does what it has to, when you enter it, it looks like a business website and that is what it is.

Is it easy to use?
I think that it is fairly easy to use but i think to a novice computer user, it might prove more diffcult for them to use as there is a lot of information and they would probably get lost quite quick. As the website uses pretty much the same template through out it, it would beome easy for them to get used to it. The links are a good size and easy to see as soon as you enter the page, this is a strong point as i think that once a user knows where the links are they sort of feel safe of where to go.

How relevent is the content of the site?
The website consists of the different products and services that apple provide.
How clearly is the content organised?
As i have already mentioned, the grid, this provides a way of seperating the content of the website making it easier for the reader to obtain and read. Everything is seperated by subheading and different colour bars behind them to make it more obvious that each of the different parts of information are different.

Sony.











What does it look like?
I didn't like this website as much as i did the apple site. Althought the design is comfortable to use, i found the apple website more appealing tho te eye. It uses a simple colour pallete of grey and blue which again is strong as it is simple and easy to look at. The links are clear and easy to find and again like with apple, the information is seperated under seperate headings. I did like the flash used on the site too.

How easy is it to use?
I found it easy to use, and could easily find items i was looking for.

How relevent is the content of the site?
As with Apple, Sony advertises the different products and services that Sony have to offer.

How clearly is the content organised?
I think that the content is organised pretty well, similar to Apple they use the sub headings to seperate the different information. I didn't find myself getting confused or lost.

IDEO.









What does it look like?
It looks very funky and bright. The designers have used an interesting approach by displaying work that they have created previous for clients on the initial design template. I didn't get on with this though, I found it to be quite an eye sore. I do like the way they have designed the display of the links at the bottom of the page but i dont like where there placed.

How easy is it to use?
I really didn't get on with ths site, i found that i got confused a lot with it, the links are at the very bottom of the page which i think is a bad point as the users have to look for them, then when i clicked on the links, the pages that they sent me to were completely different, at one point i wernt sure if i was still on the same website.

How relevent is the content of the site?
All of the information included is about this particular design company.

How clearly is the content organised?
Not very well at all, in my opinion everything seems to be a bit all over the place.

The NOW.

What does it look like?
I think it looks a bit boring and bland, it lacks the effect to pull me in and make me want to get to learn how to use it. I think one thing that was used on the VLP was images to spice it up a bit wereas there isnt any on the NOW.

How easy is it to use?
I haven't come across any problems when using the website such as difficulty in navigating around. At the end of the day the site is there to serve a purpose for us students and i htink it does a good job of this even if it is a bit plain.

How relevent is the content of the site?
All content displayed is relevent to us students, It displays all of the information that we require to know. It also displays useful resources that could be helpful to us. It also included a very interesting tool which was the library search engine, I think i will find this extremely helpful.

How well is the content organised?
It is organised well, usig a simpliar approach again to the Apple and Sony websites, it uses sub sections, which seperate all of the information sections, making it easier to navigate around.