Computer Layouts

I thought that it is all well and easy to produce sketches so I thought why not create some designs online to give people a more realistic image. I have used copies of the pixar images however I have only used these as examples, my initial plan is to sketch the images myself and have my drawings as the main content, reasons for this is because like I have probably already said before I want to create the look of how the characters looked in the design process.

I Like having the images on either side, they could be static or even potential banners, maybe banners on one page and static images on other pages. However it may swamp the main content.

This was one of my favourite ideas. I like the way how the characters would be behind the main content, not taking too much attention away yet still obvious to view however a problem that I noticed was where was I going to place my banners? In my opinion I feel that they would look out of place if they were to be placed around the images, leaving no where actually put the banners.

Maybe having the images just overlay the font could be quite effective, would look like its apart of the background. There is potential space for banners in the other corners leaving the center space for the main content, I like this idea and will experiment with this design.

This is only an idea for the main page. I thought that I could incorporate the flash by making each image a button, sounds like a good idea but I need to keep to advertising sizes meaning that it would be quite small and would take up a lot of memory for the website, still nice idea.

Now this one is my favourite, I like the way the characters would be used as button icons but are not the main feature. I could place banners on either side and the main content below the images. This could be my final idea.

Banner designs

Having done design layouts I thought that banner designs were very important so thought I would do some banner designs. At first I found this really difficult having previously thought that it would be easy but from a little help from my Ashley and giving me the address to a banner website (www.bannerblog.com.au) I was suddenly very enthusiastic and full of inspiration as to what I could do for my banners.

What come to my attention was that I was thinking about banners from the web that were just adverts and all that was going through my mind was 'what can I advertise?' but forget that theme I'm sticking to the Pixar theme, the banners will stick to advertising the movies from Pixar, that could include trailers, animation etc below are the sketches that I have thought up with, some are simple but I think would be effective and some are a bit more complicated but you have to work outside your comfort zone to learn.


Left Sketch
Idea: The different Pixar characters would slowly scroll across the banner allowing the audience to view the different characters, a possible idea could be that when the cursor hovers over a character or a character was clicked on a new banner would appear with the trailer, short summary of film or maybe show audience the design process of the film. Other ideas inlude facts of film and profile of character.
Right sketch
Is a brief idea on what the banner would look like once a character has been clicked on.



Left Sketch
The full image is not there so its hard to see but the main idea would be to create a motion tween from the actual final animation to my sketched images or vise versa. The main idea behind this will show the audience where the animation first started, it may even show how different the initial designs were. However I have been looking into this and the tweening to images together looks very complicated, I say more a challenge.
Right sketch
This sketch is landscape so may look a bit weird, just tilt your head sideways and you'll see it. I got this idea from the Dreamweaver tutorial (cafe townsend) so people in my group will understand but for those of you who dont understand there will be a button in the corner that will allow the user to scroll through the different images of the character, maybe with a profile. It will be like an interactive slide show however I will have to change the layout so it doesn't look like the tutorial banner.



Left and right sketch

Now I thought I would change the banner size because what I did not realise was that banners have constraints!!! oh yes just to add a little bit more stress to the project we are stuck with stupid banners sizes. Right for this idea I thought why not make this idea a bit more personal. Only working with ideas here but maybe I could assign a character to each month of the year or birth sign and when the user clicks on their month or sign their assigned character would appear with a description of the film or, maybe an explanation to why they are that character. This could be a potential pop-up idea, problem is that I would have to research as into why the characters would be assigned to the months or signs given, but I like the idea of being personal.



Left side
Landscape again so tilt your head! This idea is working around the interactivity idea. It will be a quiz maybe seeing how good there knowledge is on Pixar films. I could possibly create a scoring system and at the end of the quiz depending on what score they get be it high or low the charatcer that would represent them would appear i.e. a low score would be Dory!
Right side
I got this idea from the bannerblogs website. All it is is a close up of the character, it would be a very slow motion tween moving over the image, the audience will not be able to interact with it only view it. I could have a fade in fade out effect and the image could change, maybe fade out image and fade in film info.



Left side
This idea is completely different to the others, for this banner I would input a movie trailer ideas for this could be that the images below would be links/button to a certain movie trailer, However I will have to talk to someone to see if this is allowed to have one banner linked to other banners.
Right side
For my final idea I thought I could have the images static and when the cursor hovers over them a sound effect will play, it could be clips from the movie or sounds from the characters that they are clicking over, its a simple idea but would be effective (especially a younger audience)

Those are my current ideas that I have done so far, if I think of any more I will sketch and blog them later but my next intentions are to experiment with these on the computer and see what they look like, this will hopefully give me a clearer idea on what will work and what will not.

At the moment I am liking the interactivity ideas because I want my users to be interested but maybe once testing them they won't be my preferred choice.

Web analysis - Dreamworks

Dreamworks being what I personally think a Pixar competition was another example of what I call an animation website so I thought that this would be a good site to analyse. Another reason why I chose this site was because its completely opposite to the Pixar in the sense of it rather then being minimal its quite bold.

What does it look like?

Unlike the plain, clean background that the Pixar uses, Dreamworks have gone completely the opposite and used bright bold colours that is very eye-catching but
what I did notice was that the colour theme has stuck to the theme of the Dreamworks

logo colour, could this be what websites are trying to do? Like Pixar they have used the animations as the main source of imagery but Dreamworks site is a Flash based project and so rather then just a click website there are pop-up buttons, movies, sound etc all that can be very appealing to the a younger target audience as well as the older audience. It gives out a very 'animated' impression to it so I think that it is doing its job.

How easy is it to use?

The site is easy to navigate through clearly showing the pop-up menus. Each page has been clearly labelled telling the users exactly where they are being directed to, what

I like about the pages is that once you have entered the chosen page you have a sub menu which is the same as the main menu but its a bit more clearer however, some may find this confusing and may assume that its a new menu. Everything from telling you how to play a movie has been shown but I found this site very user friendly. A small glitch would be that some pages take some time to load and some file did not load but that may not be the web designers fault or it could just be Flash being complicated and trust me I am one to know about how Flash likes to pop up error messages.

How clearly is the content organised?

Like Pixar the content has been organised in a way that users can navigate easily through pages to find what they want but I've come to notice that the Dreamworks

website has a lot more elements to its site i.e. interactive page with games and widgets, online shop etc. It has everything that the Pixar site has but more, this could be good and bad, good because there are more elements to keep the user interested and bad because maybe having too much would confuse the user, they just want to find what they are looking for and move on.

Having looked at this site I am now drawn towards both sites. I like the simplicity of Pixar however I feel that Dreamworks have made there website a more upbeat and fun

site, adding the interactive elements will maybe keep the user interested. I am going to work with the colours a bit because I am stuck with the minimal look (like Pixar) I need to start thinking 'outside the box' and come up with more ideas and so that is what I intend to do next, colour is my main theme but I would like to try out text maybe create a new Pixar logo.

Web Design - sketches

I'm not sure whether I have already said this before but I have decided to use my sketches as the main imagery for the site. After looking round at different animation sites all I noticed was the finished product so my site will not be the finished animation but sketches, or how I think the animations would be in the early stages, before the use of computers because everything does start on pen and paper.

I have done a few sketches that are below, I enjoyed doing these because it brought back memories from when I was younger and all I use to do was draw, draw, DRAW!! I loved it. The sketches probably look neat however following Simon's advice last year I did not use a rubber and just sketched so to me these sketches are quite rough.



Drawings from 'Monsters Inc' and 'Finding Nemo'









'Rataouille' and 'Cars' (I shamefully haven't seen this film that will be put on my to do list)



'Wall-E'(love the film) and 'The Incredibles'



I plan to do a few more sketches and a few more different characters to add to my site but I just wanted to give people an idea of what I meant by sketched images. My intentions for these drawings will be to scan them onto my computer and work with colour on them. I know I just said I wanted sketches but, I still feel that a bit of computer manipulation will work.

Working with colour and making them stand out will be my main priority, I want them to be more 2D rather then 3D bring back the good old times when cartoons/animations were flat, doing this may even give Pixar the different look that I was intending to do. Maybe even a different look to the logo? you'll have to read on to my next blogs to see if I do or not.

Web analysis - Pixar

As I could possibly be redesigning or keeping to the general theme of Pixar I thought that this would be a good place to start my research. The reason why I picked Pixar as a starting point was because like I have probably said in many of my other blogs I will be applying for internships and Pixar was one of the first sites I looked at, liked and wanted to apply for.

What does it look like?


When the site is first opened you are greeted to a very slick design with minimal imagery. There is alot of white space but having this has already drawn the users eyes towards the main content. All of the pages have kept to the same layout and from what I can see they have tried to mainly focus on the imagery (animation) which is the main hub of the company which I think is a good idea because when users open the website that is the content that they want to see. From when I look at the site I get the impression that they are trying to give out the feeling of a pixar film itself, from the whole layout.
A very small problem that I could point out is that even though I personally like the white open space some people may not like it as much and see it more as a waste of space.


How easy is it to use?


From entering the website you can clearly see where to find the main content that users need i.e. careers, feature films etc what I like is that they have put their most recent work (wall-e) as the main image also giving it a seperate link to the movie website. They have inputted a bit of Flash content to add a bit of animation making it interesting.
The buttons have been clearly labeled however what I came to realise is that even it looks like its all simple to navigate however when I clicked onto the 'company info' I greeted to many different links and when you click on each link you are faced with a lot of information, so overall when you research more into the site its not so clean.

How clearly is the content organised?


Overall I found the content was organised in a successful way. What I noticed is that they have actually arranged the buttons from shall I say from the end process right back to the start. For example the first button is labelled 'Home' but it is followed by 'feature film' to 'short features' and so on until it get to the information on the artists. I never thought of doing it like that but when you look at it it makes good sense arranging it that way.


From looking at this site I think that I am going to take some of these ideas to work with my ideas but from looking at the site I feel that I would like to go do a more artist approach i.e. sketches.

Design Exercise 3 - design work

Brief

Create a FLASH website for a new band called 'The Grocery Shop Boys'. The site must include 3 videos and 3 music tracks. The site must also include a simple animated introduction with a skip button. Sections that must be included on the site must be:
- who are the 'grocery shop boys'
- see us perform
- sample tracks
- contact information


I found this project quite enjoyable to do because it was bringing back everything that I learnt from my first year. Looking at my finished site now there are some improvements that I would like to make. I would definately change the layout of the pages, I was aiming to go for simple look because that is one of my ideas for my main project and I'm pleased with the outcome of the main front page because it is simple, to the point and not packed with lots of imagery.

The majority of the animation was through motion tweening which I am really getting the hang of now but like always I 'm always practicing. What I found difficult was trying to get an idea out of my head and create something completely different. I couldn't get the word 'grocery' out of my head and so any ideas that I thought of would have a grocery theme. So I looked at other band sites to try and get some inspiration.

Below are my sketches that I first created before developing my drawings into computer designs.









As you can see my above designs are all to do with groceries, this is one of my weaknesses that I need to keep trying to avoid and so if you look blow I have created some designs that do not relate to a grocery but more a band website.





And finally my computer design images I did not use any of these but I wanted to experiment on different types of media.





My final idea I will upload with my other exercise work but I am still trying to work out how to upload links to the work. As for the project itself I enjoyed it mainly because I learnt quite a few definitions i.e. variables and I am slowly starting to learn coding, I know I am still a long long way from fully understanding but I comming to terms with it. I found uploading the mp3's the toughest thing to do but after researching the internet (and with help from Ashley) found a website full of simple tutorials that breaks down the code, explaining each piece. I did use this code but the main thing is that I understand it.

Maybe I could add this in my main project? who knows.

The start of the design!!

Well I'm not going to lie its taken me time to get back into the swing of things or, shall I say uni life. But I am back and have started creating many ideas for the first major project. It is only design paper work but thats where I always start off and I am not going to change that.

The idea for my web site is quite random but I am happy with it. As I have been looking into internships and Pixar was a strong candidate so, with some advice given to me it came to the conclusion that creating a Pixar website would be the ideal project. However I will not be redesigning the actual website, I have decided to create a website of my animations and how I would interpret pixar animations if I had not seen pixars designs.

Below are some of my initial designs that I have experimented with. I found it quite hard because I was trying to be more open minded about my designs and be more experimented.



I started off by mind mapping ideas or things to consider when thinking of pixar. Most of these ideas were based around the pixar website (I will be blogging about my findings) from these I was able to pick up ideas that I felt could be enhanced further.




One of my first ideas was from the the pixar website, well the theme and layout. I have kept to the theme of the film reel however pixar did not use the reel to frame the work. I also decided to design Polaroid photos the idea behind this would be for potential new animators be able to upload their work in the frames for the public to view. I thought that this would be a good idea because I feel that there needs to be more sites that promote new animators, get people to actually see their work.


For this design it was more trying to promote my work. The intended idea would be for my sketches to be the interaction when the character is clicked on it could either show a pop up or be a link to another page, so now thinking about it it could potentially be an idea for my main page, however the only thing I worry about this design is that it maybe to 'in your face' so I could tone it down a little.



I'm going to be honest, this was not my best idea but I thought it so I may as well show it. Keeping to the theme above about trying to enhance/promote potential new animators I thought why not create a forum/faq page, somewhere where people can ask questions about the subject animation. If I had to describe it I would say like facebook but for the arty people. However after talking to people I get the feeling that this could be very difficult and time consuming and with the skills that I have I may not have enough time.

Now that I have started making ideas I thought I would attempt the minimal look, but not too minimal I don't want it to look plain so these next four sketches are pretty similar but I like them. What I am starting to think is what would look good throughout the whole project site, because the first ideas I felt were good but where would they lead on to? how would they link to the other pages? Looking at these designs I feel that these ones could be the ones that I could improve and make further designs for.



Each image would fall out into a drop down menu, could be one of my widgets.



The main imagery on either side of the main content. This would keep the users focused on the main piece however it looks quite overcrowed with all of the imagery. And so thats why I decided to reverse it.



I prefer this idea, having the animation peak from behind the main content, keeps the audiences eyes to the center of the page and also I feel would give a 3D look to it. But like I said I am going to redesign these or try and improve the idea.

These last two images are not my best but as I was told to blog everything I thought that I would show them, they are only quick sketches sticking to my ideas above so I don't really need to explain them again but I've done the work so I may as well show it.






I am going to carry on sketching because this is how I get my better ideas, I have also done some research into different websitea, mainly focusing on the animation theme so I could compare my ideas to others. So until next time enjoy the work.

Interaction Design - evaluation

After finishing my final banner I felt that my final design was a successful design following the brief to the requirements. I felt that the design work helped me get to the final stage because my end outcome consisted of my sketched ideas combined together . Having done this helped me meet the requirements needed in the brief.

I think this was a successful piece of work for me as I actually self taught myself how to create a basic firework animation. This was a combination of motion tweening, movie clips and different slides. Having taught myself this allowed me to expand this idea to the sparkler enhancing the animation. As for the interaction I decided that a simple button click would be a good interaction as I know from experience users lose interest very quickly so I thought that using a button click was to the point and simple for the users to work and so I felt that the whole design succeeded in my opinion.

However looking back at the final outcome I felt that the design work could be improved on. I feel that I could have made my fireworks look a bit more realistic as with the sparkler. But I feel that this is just a case of me having to keep practicing and do more tutorials to get the results that I really want. I would also like each page to flow into each other easier, when I look at it now all I feel that it looks very rigid, maybe a simple fade effect would help this.

Overall I am happy with the results that I did. It fits the brief and also shows what I can do on flash, I am still working on flash but in time I belief that my skills will improve.

Interaction Design - firework banner task

Create a simple FLASH animation that promotes safety and should consist of between 6-8 separate flash sections that include animation and some interaction.

I tried to aim my banner for all ages. Mainly aiming it at families. With the interaction, animation and imagery that I used I managed to design a simple banner that is eye-catching yet gives out some standard firework safety facts. I hope the the animation would attract the audience at first with the 'click' word popping up and, as they click through the banner they are greeted with other interactive parts that are simple, quick and to the point, as I've come to relise that people can lose interest very quickly and so that is why mine was intended to be a quick advert.

Before I chose my final design I designed a few different ideas that I thought would work for a firework safety banner.



An image of a fire engine where the user/audience can click on a certain part of the truck and either a safety fact or story would appear. However I did not included animation with this.



Trying to focus more on the animal welfare when it comes to firework safety. The users would click on the animal a speech bubble would appear, like the fire engine stating a safety fact. What I would have liked to do though was for the animal to change when the cursor moved away from the animal however only know how to do a change once.



A simple animation where the fireworks would pop up as well as the safety firework code. The firework code would pop up and fizzle out like a firework, good animation but little interaction.



A simple image of a child/teenager and when the user would highlight over certain piece it would quote a fact, very much like the fire engine ida though.



Image of a bonfire (animated) and then instead of the sparks flying out we would have the fireworks facts and code flying out good interaction with a bit of animation could have been a possible idea.



A simple kids comic book each with an image demonstrating fire safety, however there is animation but stronger interaction.

Once having done the sketches I thought I would try out a few on photoshop to get a more computer feel to the designs and maybe help me finalise my idea. below are the images that I designed:







Once designed all of these images I thought that it would be a good idea to maybe link a few of the ideas together so it would involve interaction, animation and stick to the brief. I will create a link for this shortly.

Artist Critique

I chose this image becauase having been to New York and I remember taking the same type of shots but never managed to get a powerful shot like this image presented here.

The main part of the image that caught my eye has to be the contrast. With such a powerful contrast the photographer has given the image a clear look bringing all of the small detail more visible. However with more black and white tones used and very little grey tones can give the image a more 2D effect rather then the 3D look that I guess the photographer was trying to achieve. The viewers eyes are immediately drawn towards the center of the page following the path and the shadows before viewing the rest of the image.

What I did think was that the photographer was trying to make the two people in the image the main focal point however I do nor think this was successful because of how strong the contrast and composition is, instead the poeple are absorbed into the image and become part of the image rather then a focal point. I feel that the main focal point of this image was more the patterns created from the bridge itself and the shadowing. They are very varied and give alot of detail for the audience to see.

This is a typical New York photo that everyday 'tourists' would try and capture but the its the strong contrast that captures my eye but the more I study this image the more I wonder whether it has computer edited to get this effect. As I see most New York photos in black and white I'm guessing that the photographer was trying to keep to this theme, I feel that this was a conscious descion as this makes what the image.

Its Started!!!

Now heading into November I was starting to panic about what my potential ideas would be for my project and after a chat with shaun I now know what I'm doing. I have been talking to quite a few people about my plans to apply for summer internships, Pixar being a choice and this was one of my ideas, once shown what my ideas were Shaun told me it was clearly the best option because when I think about it, it could help my chances.

Having the past day starting brainstorming ideas for the website I can't stop thinking of possible ideas that could help me, some I feel are a bit tricky but some I think could really work. The main idea that I am trying to get away from is sticking to 'Pixar' imagery so that is where the idea came up of how I myself would interpret the characters that have been seen in these films.

I have looked through the Pixar website and came across how they produce a film, maybe I could pitch an idea via my project but a very basic one as we do not have as much time as these animators had. I thought if I could mix my skills that I have learnt through sketching, photoshop and over the past year I think I have something to work on.

Other ideas that I could think of are things that are based in everyday websites but I would interpret into my own site. Like FAQ page where potential undergraduate computer programmers/animators could ask questions on how to get into the business. Another idea like the FAQ it could be a forum where undergraduate students can talk to each other and maybe give each other other.

I'm still coming up with ideas but I shall past them later when I have produced more ideas.