New Prototype

This is our new prototype. Tri has edited it a little bit to make it more gorgeous. Click to download the new one: Link

Intro movie

This is the flash intro Phuong Anh has made for our website. The story is based on the script that Dung and Tri wrote before. All the stuff such as the sky, the trees, the fence, etc was drawn by Tri, while the characters were created by Dung. Phuong Anh was responsible for the animation and sound design. The animation is not kind of hard, but the sound effects are big problems. At 1st, we just thought about the sound effects, not the way to create these sounds. Then Phuong Anh had to design and build several ways to make these sound effects.

Link to download

Prototype

This is our prototype. It's like a sketch how our website will be looking, but the look and feel is almost the same. Tri drew the background and stuff, and Phuong Anh did the animation part and the transitions for our website. It took us several days to discuss, draw and animate things. Please give us some useful comments. Thanks.

Link to download

** Note: this also is posted in Phuong Anh's blog.

Soundtrack for the Intro Flash

This is the soundtrack that Phuong Anh did for the intro flash. It's the scene that the sheep FooFoo walking around his farm and feeling so good. The music is very funky, happy and funny. Moreover, it relates to the countryside atmosphere. Let's enjoy it!

Script for Animation

The first page started with an empty paper (paper filter)
From the viewers’ direction, a lollipop falling down and land right on the right of the scene.
Following the narrows, the hills number ‘1’ and ‘2’ cross through the page and stably stay at the positions. Next, the mountains ‘3’ will move up from below (these mountains should be arranged behind the lollipop while the other hills are in front of the lollipop)
After, the landing is arranged, the fence is then dropping and being nailed up on the ‘1’ hill. Along with it, the thickets and trees are falling from above and landing on mountains and hills (as the wire frame shown).
Fro left to right, cloud will flowing across the scene (this movement is looped until the user reach the new page).
Characters:
Together with the cloud, KooKoo will be flying over back and forth (this is also a loop animation).
At the same time, BooBoo and FooFoo will perform on the ground, in which, FooFoo appear from the left corner of the page ( inside the fence), he looks around as if he’s seeking something. FooFoo’s eyes stop at the thicket as BooBoo jumping out from it and keep running forward to the hill locating the lollipop. Then FooFoo backs to outside the page, and the whole animation of these two characters are repeats.
Finally, when the mouse touches the lollipop, mill wings will appear which are the menu.

From whatever page the previous is, transition to reach this page is as followed:
The top of the lollipop flies up to the sky and play a role as a sun.
The mountains move up from below the page.
Cloud keeps on flying across the scene ( loop).
Characters:
From the left of the page, an airship appears and flows slowly to the middle. Together, KooKoo flies along. These two objects fly together about 5 seconds, within this amount of time, sound effects will be added. After 5 seconds, KooKoo will have to move following the curve to get near the airship and make it broken. Next, the airship, KooKoo and BooBoo will falling down rapidly. When everything is out of the scene, the animation is repeated (loop started since the airship appear).
Finally, when the mouse touches the lollipop, sunshine will appear which are the menu.
The lollipop moves down to the left corner of the page, landing on a branch to become a Sun Flower. At first, the flower is leaning about 15 degrees to the right. Then, KooKoo will land on it, in result, the flower will lean about 45 degrees to the right.
After that, orderly, the hill will move up, from the hill, a tree will grow up to a giant one. Cloud start flowing (loop).
Characters: From left to right, FooFoo and BooBoo playing seek and hide.(loop)
Finally, when the mouse touches the lollipop, petals will appear which are the menu.

Like the first main page, this page is started with an empty paper interface. From the three directions (shown as arrows in the wire frame). The three characters will run to the middle of the page. As they meet each other at a point, from the viewer’s point of view, the lollipop will fall down against them. After 3 seconds of sound effects, users can interact with the lollipop. Everytime the mouse touch the lollipop, the three characters will appear holding boards which are menu.

(*) Note:
Interaction can only applied after all the scene are ready.
Movements should have nice and fun style.

"Don't Click It" website

Phuong Anh has posted an entry about a cool website, named "Don't Click It". You can only use mouse moving instead of mouse clicking when navigating in this website. Here is the link:

http://www.dontclick.it/

You can read more at Phuong Anh's blog.

Characters in 3 dimensions

There are our 3 dimensional views of the characters. It's kind of unfair when we drew more angles for KooKoo, but we think that she's more complex than the rest and she 'has to' fly, so the different views are neccessary! If you have any comments for them, please tell us! Thanks!

Production Schedule

This is our production schedule. The excel version is on Phuong Anh's blog, while this .png version is easy for the clients to view.

Flowchart and Information Architecture

These are our flowchart and information architecture. Please contact us if you think there is something need to be changed.

Flowchart:

Information Architecture:

Mock-ups

We've just finished designing the mock-ups; however, when doing this, the designer had 2 ideas. They're not so much different from each other, but it may affect other elements in the whole design such as the typography, the style, the contrast, etc. We'll show them here in order to get your comments to improve it and go ahead!

Mock-up 1:


Mock-up 2:

AckAck Group's timeline

It's just our draft of the timeline. We'll update it soon.

AckAck Site's sitemap

This is our web site's sitemap. We will have 14 pages with 4 main pages and 10 sub-pages.

• Story: that's where audiences explore about the 3 main characters: KooKoo, FooFoo and BooBoo. We intend to have some interactive games to make more fun!!!
  
• Gallery: we put some comics and movies here to let audiences know more about the relationships between these characters, and some normal activities of them as well.
  
• Store: this page is used for indicating where the store(s) is(are) located. It also has a sub-page named "Feedback" to get contact with us.
  
• Download: in this page, audiences will have a chance to download a variety of stuff such as 'Color Me!', 'Wallpaper', 'Avatars'.

The 4 main wireframes

We decided to make something look dynamic and fun, but it also needs to be cute and clean to be the navigation. We were considering between candy and flower. After my research of lollipop, we chose it as our main navigation. But we don't want it to look too usual so we will add some effective elements to make it more different from what a lollipop is ^^

This is the Homepage of AckAck site. The navigation become a funny and colorful mill, but it doesn't show its wings (the options) until users move the mouse over it. Moreover, we also add the animation of FooFoo chasing BooBoo, looping over and over again. Besides that, KooKoo is flying over the sky continuously. Hopefully, by doing this, our site will look more dynamic and interesting to interact with.

Whenever the user clicks the second page, the screen will fly upon the sky and now the navigation is the Sun, of which the sun lights are the options. Then the airship carrying BooBoo and FooFoo while KooKoo is flying along next to them. As BB and FF laugh at KK, KK breaks the balloon, then, BB and FF will be falling down. That scenes will be looped until the user reaches the next page




















When users move to the next page, the sun will become a flower. Next, the user can only interactive with the main navigation once BB stays on it. Other actions such as FF and BB running over the hill will be looped again and again until the users click to the next page.



















Lastly, BB, KK and FF will run from 3 different parts of the screen to the center. Then the candy from somewhere else weighed down on the three and everything will stop here. Later, whenever the users mve the mouse over the candy, 3 character will appear as the illustration and bring out the menu. While the user doesn’t interact with the candy, there will be some visual sounds from behind.such as: “help us”, “ay ya”... to attract the attention.

* Note: the 4 wireframes are taken from Dung's blog with some modifications.

Ack Ack Logo ^^

As I said last week, we will post an illustrated logo in this week. You can easily that the three characters are not too different from the draft, except the sheep has a new colored fur :p It's surprising that we had to discuss a lot about the sheep's fur. Because our 3 main colors are black, brown and yellow so at 1st, everyone wanted it to be black or something. Then Dung thought that the sheep needed to be different from other sheep, so she made it blue. Therefore, it took is time to consider which color brings the best contrast and harmony.

Other stuff like the sunflower and the pattern above the weasel are all simply the decoration as well as plays a role in the stories between 3 main characters.

++ Characters' look ++

This is our logo designed by Dung:


The main theme is something related to Asian countries, so we decided to choose 3 colors: black, brown and yellow for our template and logo also. The Asian pattern will be added clearly in the Illustrator version later.

- KooKoo:

- FooFoo:

- BooBoo:

* Note:
- Phuong Anh has posted several cool websites, so view them and comment which style do you like and what technical aspects you want our website is gonna be.
- Dung has posted some sketches of characters and some nice websites that inspires her. Comment and suggest her your ideas if you think the changes are needed to improve things.

++ About Ack Ack Group ++

We are Ack Ack group, including:

- Huynh Nguyen Phuong Anh (Project Leader- s3131319)
- Luong Tu Dung (Graphics Design- s31313122)
- Lam Minh Tri (Information Architect- s3038496)

We will be using this blog to discuss project ideas, project progression, and any decisions made during the semester, while we are working on our project.

Tu Dung is good at sketching ideas, color arrangement as well as drawing stuff in Photoshop and Illustrator. That's why she's assigned to be the graphics designer of our group. Besides that, Tri has gained enormous amount of experiences in working with Illustrator, Flash and HTML; therefore he will do the job of Information Architect. I have a capacity of setting plans and following it carefully to get the good result; moreover, I'm good at writing and researching skill so I will assume to do these kinds of work for the group and also help others whenever they need. In addition, the three of us will share the role of Programmer to make the best piece of work.

1- The concept:

Actually, we create our own characters first, these are: KooKoo, FooFoo and BooBoo. KooKoo is an intelligent but cold-blooded owl, always alight on a sprig of sunflower; while FooFoo, her best friend, is a very silly sheep though she's very kind and want to help others whenever she can. The last character, BooBoo is an extremely naughty weasel, he like to turn everything into a mess. Therefore, our website has the cartoon style to promote our character as well as support the retailers. Another goal we want to gain is the big investment from potential investors so it must be attractive to the audiences and become popular as much as possible.
The website's name is "Ack Ack", which is very popular and familiar to Vietnamese young people. It is usually used when someone needs to express his/her surprise or shock, this kind of feeling, etc. Therefore, we think the target audiences will easily get involved in this term and feel curious about our site.

2- Intended audiences:

This kind of website and stuff are suitable for teenagers, especially girls who love cute things. So we decided that teenagers are the first and biggest audience group of our website. The second group that we're considering is the children from 3 to 12, who also like to play this kind of toy. And the last group is the collectors of cartoon style, we chose this group because they're fond of cartoon stuff and may help us to gain the prestige throughout the market.

3- Scopes:

• Graphic tools: Illustrator, Flash, Dreamweaver, Sound Forge, Garage Band, etc
• Platforms: Windows and Macintosh OS
• Browsers: Internet Explorer 6.0, Mozilla Firefox 2.0, Safari 1.0 and Opera (Adobe Flash Player plug-in must be installed on these browsers)
• Screen resolution: 800x600 or higher
• No registration required to access the website