Thursday, 20 November 2008
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'.
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
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
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.
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
Labels: colour pallette, colour wheels, Colours, contrasting
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.
Labels: Colour pallete, Content, Grid, Structure, Textures
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.
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.
Labels: Designing, Interaction, Textures, Websites
Monday, 10 November 2008
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
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.
Design idea 1:
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.
Labels: animations, Fireworks, Flash, Interaction, 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.
Sunday, 2 November 2008
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.
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.
Labels: Images, Inspiration, Personaliy
Labels: Flash, online gaming, visual and audio
Labels: Design, Fashion, Flash, Ineractivity
All of the information included is about this particular design company.
Labels: Colours, Companies, Design, User needs.