The 3 Turtles

I guess you will find this site useful. Check it out!

http://www.freewebsubmission.com/

Posted by Hang Tran at Saturday, September 23, 2006 | Permalink | Comments

Check it out at http://unix.rmit.edu.vn/~s3096072/dim3 or http://www.hcmcitymap.com

We are looking forward to receiving feedback from you :-)

Thanks a lot.

Posted by Hang Tran at Monday, September 18, 2006 | Permalink | Comments

Hi. Please find below our group project management flowchart.

Posted by Hang Tran at Sunday, August 27, 2006 | Permalink | Comments

J.K.Rowling official site

Below are some other sources of inspirations. You should visit these websites and see how awesome they are.

Shanghai 3D map

Shanghai 3D map (detail)

Ryan Terry's Ry-guy.com

SIMCITY (game)

Posted by Hang Tran at Saturday, August 26, 2006 | Permalink | Comments

The introductory splash screen

Main menu of the website

Site Credits

About

A close-up of some places on the map

Posted by Hang Tran at Saturday, August 26, 2006 | Permalink | Comments

The prototype of the website is now available at http://unix.rmit.edu.vn/~s3096072/dim3. We would greatly appreciate if you can spend a little time to take a look at it and give us some comments and suggestions :-)

Posted by Hang Tran at Thursday, August 17, 2006 | Permalink | Comments

These are just rough sketches of how the pages would look.

Posted by Hang Tran at Thursday, August 03, 2006 | Permalink | Comments

An introductory splash screen is displayed when the site first loads. This page provides a link to the Flash plug-in. In case the user’s browser doesn’t have Flash player 8, he/she can have it auto-detect the plug-in. At this very first page, usually there are options allowing the user to choose either a text-only version or a flash version of the website. However, it is not necessary to create a text-only version of this website to gain accessibility. Since the website is mostly about an interactive map of HCMC showing places that would be of tourist interest, there is no point trying to provide just a standard list of places. The Yellow Pages can do that better.

As soon as the user clicks on “ENTER HERE”, a pop-up opens. If the user is using a pop-up blocker, he/she will get a notice saying that the pop-up has been blocked. In order to view this site correctly, any pop-up blocking software must be switched off and then the user can re-enter the site. A short movie clip (or an animated intro) will be played before it enters the main menu for the site. There is a link under the intro so the user can skip the intro if they want.

The setting is laid in a café along a street in HCMC, where tourists meet. As seen in the above image, there is a table with several items on it. The scene in the background shows the surroundings of the place. Thus, the homepage tries to simulate the experience of a person sitting at a table in some café in HCMC. The table is strewn with a city map, a mobile phone, a digital watch, books, newspapers, a calendar, some pens, a mug of coffee, a spoon, a dish, scrap papers, leaflets, the menu, and a glass of ice cream having a little decorative umbrella on top of it. These are metaphors which help users navigate to different sections of the site. As you mouse over the object, it is animated and a caption is displayed, telling you where it would bring you to if it is clicked. Not all the objects on the table are linked to somewhere on the site, however. Some are just there for fun. Also, random noises can be heard in the background, including passing traffic, people talking, birds chirp, phone rings, and some other sounds. In the bottom right corner of the screen is a “Help?” tab and in the opposite corner is a “Site Credits” tab. These tabs are always there and do not change when passing between links.

In the main menu of the site, there is a link to the map of HCMC. Above is the close-up view of that map. A full view of the map including all the districts of the city is displayed when it is initially opened. There are some tools, located at the bottom right hand side corner of the screen, which help the user to navigate through the map. The zoom-in tool, which looks more like a magnifying glass with a plus sign in its center, is used to zoom in or see a magnified view of the map. The zoom-out tool, which is a magnifying glass with a minus sign in its center, is used to zoom out the map or to come back to its original viewing %. The user can use these two tools to zoom in to get a closer look at some districts on this map or to zoom out to get a wider view. At the maximum zoom-in level, the user can get a general view of one district as in Figure 5. The maximum zoom-out level returns the initial view of the map. Each click can only zoom out or zoom in one level at a time. The zoom-out or zoom-in tool becomes unavailable when the maximum zoom-out or zoom-in level is reached, respectively. There is another tool called the hand tool which is used for panning the map. The user can use this tool to drag in the direction in which he/she wants the map to move. To the right of the map is the legend, which shows what the icons on that map mean.

At this stage, the user can only see a vague image of the streets and their name, and the icons of the places but cannot click on any of them to see more information. In order to do so, the user needs to click on the district from the bottom box corresponding to where they want to go to. That particular district will be attractively presented and important places are clearly identified. All icons are replaced with clickable 3D-like objects to represent physical places. As the user mouses over the object, it is animated and a caption is displayed, telling him/her what the place is and its address. Again, the user can always use the zoom tools and the hand tool to navigate around the district. Or he/she can activate rollovers for the entire navigation. What that means is the user will explore the district by pointing the cursor where he/she wants it to go. If the user wants to know more about a certain place, he/she can click on it and then a pop-up window filled with details on the selected place is displayed as in the below figure. A link for “More Info” is also presented, which redirects the user to the website of the place (if it is available).

The legend, the navigation tools, and the list of all districts are always there when moving from place to place within the map.

Posted by Hang Tran at Thursday, August 03, 2006 | Permalink | Comments

As seen in the above figure, files of the same type are put in the same folder. It is easy to figure out which folder contains what.

Posted by Hang Tran at Thursday, August 03, 2006 | Permalink | Comments

There are links to six different sections in the main menu of the site.

• About: what the website is all about, what its goals and purposes are, who intended users are, how the site was created or implemented.
• Interactive map: detailed explanation can be found in the section about “Wireframes of Each Page Type”.
• Advertising: the map currently provides some, but not all, of recognizable places of HCMC. People who want to put their business on the map are encouraged to advertise on our site. They will be charged a fee.
• Contact: this page is for questions, comments, inquiries, and whatever else. The users can use the form on this page to get in contact with us.
• Site credits: who created the website, individual responsibilities for the project, copyright issues, where the information comes from.
• Help: instructions on how to navigate through the website.

Posted by Hang Tran at Thursday, August 03, 2006 | Permalink | Comments

So, this is week 5. Everything is on its way. What we have been doing so far is basically sketching and designing the skeleton pages (i.e. homepage, 1st tier and 2nd tier pages), and the structure of the whole website. I’m also in charge of researching and looking for some examples of some of the effects that can be achieved with advanced ActionScript.

There are some issues that we need to take into account. A map might need to contain hundreds of different places in HCMC. It would be very time-consuming to go around the city to take pictures of those places. One possible approach to this problem that we could adopt is that we will narrow the number of places to be put on the map down to 30-50 only. That would save us a lot of time. However, the map wouldn’t be informative enough as a large number of places have been left out. We will try to get done with the initial number of places added to the map ahead of time so that we can have time to add more places to it. More importantly, we can see the potential of this project and we surely don’t want it to be a one-semester project. What I mean by that is we mean to publish this website and popularize it among HCMC inhabitants and tourists. Although there are several directory pages available on the Internet, all of them are lacking user interaction. The interface is traditionally boring and the information is not up-to-date and is not well-organized, which makes it difficult to spot out the desired information. Therefore, the ultimate goal of this project is to provide a “smart” map which is purely interactive, more visually interesting, and coherently structured. In fact, the site must be functional, aesthetically pleasing, and thoroughly original.

Luckily, there is no conflict among teammates. Everyone gets along quite well. Each of us is contributing actively towards group work. Hopefully, everything will work out well for us.

Posted by Hang Tran at Wednesday, July 26, 2006 | Permalink | Comments

After carefully considering 3 different topics, we have decided to work on the project "Interactive Map of HCMC". Below are some initial details of the project.

Creative Team:

• Hang, Tran Thanh - Project Leader
• Dong, Le Hai - Visual Designer
• Thang, Nguyen Tat - Information Architect

Team Name: The 3 Turtles

Project Type: A flash website

Topic: Interactive Map of HCMC

The Scope: 10 to 15 pages

Objectives/Goals of Project:

• A map of HCMC showing places that would be of tourist interest (basically, this is what the website is all about).
• For each place, there will be a picture, contact details, and a short description of that place accompanied. Visitors who look for more detailed information could go to the place’s website to learn more about it or contact them directly.
• A short movie clip about HCMC will be played when the site first loads, giving the visitors a tour around some recognizable places in HCMC.

Audience

• Foreigners
• Overseas Vietnamese
• People living outside HCMC
• Those who have been living in HCMC for a long time

Technical Requirements

• Use of Flash, ActionScript, JavaScript, PHP, CSS, and XHTML
• Graphic tools: Photoshop, Illustrator, Flash, Dreamweaver, Sound Forge, Vegas Video, etc.
• Language support: English
• Platforms: Windows and Macintosh OS
• Browsers: Internet Explorer 4.0+, Mozilla Firefox 1.0+, Safari 1.0+, Netscape Navigator 6.2+, 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

Posted by Hang Tran at Tuesday, July 18, 2006 | Permalink | Comments

Below is our group's project schedule. It's not a finalized one yet. We will update it frequently as we go along.

Week 1, 2: Team Selection and Project Ideas

• Form a group of 3 (create a questionnaire to give to potential teammates)
• Think of a name for the project team
• Decide who will be Project Leader, Visual Designer, and Information Architect
• Decide on a type, a category, and a theme/topic for the project
• Assignment due: Individual - Teammate Selection due on July 3

Week 3, 4, 5: Researching, Brainstorming & Gathering Information

• Storyboarding
• Developing ideas for the project
• Narrowing the project's topic down to something doable
• Brainstorming and researching extensively
• Sketching and designing the overall look/structure of the piece
• Getting detailed planning for the project (setting the project's milestones, drawing gantt charts and timelines, etc.)
• Describing roles and allocating tasks of each team member
• Assignments due:
• Progress Report 1: Individual due on July 20
• Group Project Proposals (10 % ) due on July 27

Week 6, 7, 8, 9, 10: Project Implementation

• Scripting
• Collecting materials and managing resources needed for the project (borrowing cameras, booking AV studio, software and hardware required, budgeting, etc.)
• Taking photographs, filming, and interviewing
• Designing and building the whole project
• Editing movie, sound
• Coding
• Building Flash
• Testing and debugging
• Producing a beta version of the project
• Assignments due:
• Assignment 2: Group - Project Management Flowchart and Gantt Chart due on August 3
• Assignment 3 : Group - Usability Testing of Prototype due on August 8
• Group Mid-Project Presentations (10%) to be due on August 10
• Assigment 4: Individual - Feedback on Mid-Project Milestone of another Team due on August 14
• Progress Report 2: Individual due on August 17
• Individual Research Presentations (20%)

Week 11, 12, 13: Project Presentation, Evaluation, and Final Submission

• Presenting the project to other students and the instructor
• Getting feedback from them
• Troubleshooting and making any changes if needed
• Submitting the final product (hooray!!!) ;-)
• Assignments due:
• Individual Research Presentations continued
• Final Project Deliverables due on September 7
• Final Project Presentations (10%)
• Final Individual Assessment (by teammate 5%, by instructor 5%) due on September 14
• Final Project Evaluations (10% another group, 20% instructor) due on September 21

(...to be updated)

Posted by Hang Tran at Tuesday, July 11, 2006 | Permalink | Comments

I have a huge collection of really amazing sites that I want to share with you guys. I think I don’t need to tell you much about just how cool these sites are as you might as well just check it out. You're gonna be stunned, I promise! ;-)

1. osmanDinc. interactive media designer
2. TAZO Tea
3. 255 Design Studio - Portfolio of New Media Designer Kai Reusser
4. MAP
5. PIXEL PEACH::strange beautiful
6. The Official Website of George & Ira Gershwin - Site Design by Pinwheel(www.pinwheel.tv)
7. Netshock Web Area: web design, visual communication, rebranding
8. Orisinal: Morning Sunshine
9. ANDY TITUS
10. E.G.G.
11. J.K.Rowling Official Site - Harry Potter and more
12. amaztype
13. Deft Creative - Innovative Flash Design
14. Pixel Gasoline
15. KNI
16. TOPSHELF GRAPHICS
17. wireframe studio::conductors of multimedia::cape town::south africa
18. 1000PIS
19. CRYSTAL PLANETS
20. Smell The Glove
21. http://www.dontclick.it/
22. Britney Spears ~ The Official Site
23. EYE4U active media
24. yugop.com
25. AXIO::CREATING WORTH through brand realization
26. Aardman Animations
27. http://www.easybit.it/
28. http://www.syrupnyc.com/
29. http://www.dubko.com/
30. http://www.albertocerriteno.com/
31. http://www.markokon.com
32. http://www.mocafusion.com/
33. http://www.incomplet.org/
34. http://www.taylorjames.com/
35. http://www.angel-speak.com/
36. http://www.feeldesign.co.uk/
37. http://www.plast-team.pl/
38. http://www.2advanced.com/
39. http://www.crank-design.net/
40. http://www.imagedive.co.jp/
41. http://www.albert.art.pl/
42. http://www.web.tiscal.it/novecento.ed/
43. http://www.feremone.com/
44. http://www.hinaiqbal.com/
45. http://www.adolfovirdis.com/
46. http://www.youjinoh.com/
47. http://www.nelziskateramps.it/
48. http://www.fadeproof.net/
49. http://www.nagafuji.jp/
50. http://www.coroflot.com/
51. http://www.samuelmatito.com/
52. http://www.students.olin.edu/2008/aroldan.portfolio/
53. http://www.impresariat-iti.pl/home.html/
54. http://www.creativehotlist.com/
55. http://www.portfoliocenter.com/
56. http://www.sendal.ro/
57. http://leoburnett.ca/
58. http://okaydave.com/
59. http://www.kamikadze.sk/flash.html
60. http://www.glaceau.com/
61. http://www.kinetic.com.sg/
62. http://www.stephaneguillot.com/
63. http://www.digitaldelight.org/
64. http://www.fabianofiorin.it/
65. http://www.mw2designs.com/
66. http://www.bio-bak.nl/
67. http://designerxartist.com/
68. http://www.cristinare.com/
69. http://getwebdesigner.com/get_web_designer.html
70. http://www.ellyhodges.com/

Posted by Hang Tran at Tuesday, July 11, 2006 | Permalink | Comments

Hello,

We are the 3 Turtles. 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.

Our group includes:

• Hang, Tran Thanh - Project Leader
• Dong, Le Hai - Visual Designer
• Thang, Nguyen Tat - Information Architect

Dong is really good at illustration, programming, and flash. That’s why he is assigned to be the Visual Designer of the team. Thang has some experience of sound production and storyboarding. Therefore, he would be a capable Information Architect. And I am the Project Leader, who will keep track of the time and manage resources for the project to be completed on time.

For this semester's group-based project, our group intend to produce an interactive multimedia flash site/CD-ROM about either:

• Vietnamese contemporary art (Hang's idea) or
• Lacquer paintings (Dong's idea) or
• HCMC Map for tourists visiting HCMC (Thang's idea)

We will need to choose one topic for the project. The most likely topic that we're considering to work on is a map of HCMC which introduces restaurants, theatres, museums, sport centers, and some other interesting places in HCMC to tourists who come to HCMC. This is a quite big topic for us to do within a semester, so we first need to narrow it down and do some brainstorming and research before we could get down to detailed planning for the project.

Posted by Hang Tran at Tuesday, July 11, 2006 | Permalink | Comments