Final Application

Concept Board

Concept Board Art

Application Progress - Changing Design and Making Characters

Designing little human characters that represent 3 main races in Malaysia.

Application Progress: Layout, Button and Contents Part 1

First idealization that I want to make in my application is to make roll over effect across the subjects. Each subjects considered as buttons that make the users access to other part of contents (sub-contents).

In this case, since my subject is about buildings, I decided to draw the outlined image of chosen buildings from Penang. Then, the drawn image will become as a selection that will bring new contents that consist of information about the particular building. All of these will be put as main navigation section.

So, now I decided to experiment with this and make an early (Alpha) stage of development.
Here is how the navigation section looks like:





















Here you can see Suffolk House building in digital outline drawing. Notice there's a button image at the right side. It will bring to the next building in roll over effect. For example, clicking it will take you to the next building....























...which is Khoo Kongsi.
For now, there are 2 buildings available. As I'm progress, 2 buildings will be added in this navigation section.

Also, each buildings has a button below them. That is where it will take a new section about the information of the buildings. Once clicked, the users can now see the real contents of the building, such as information, images, location, etc...

Here is the example:




















This section has at least 4 navigation buttons:
Info
- The information about the buildings
Location
- Location of the building. Might provided some map and exact location of nearest place
Images
- Real image gallery of the buildings. Each image can be opened in bigger size.
Go Back
- Back to the main navigation menu

Application Progress: Creating Main Title Screen

Nothing special about the title screen. For me, the title sreen should included at least information section, about the application itself or info about the creator.

Image below is an alpha stage of my main title screen for my application. Notice there's a button at the lower right screen. That's the information button. Not to mention about the 'Start' button to start viewing the main contents.

Below is what the information is all about, after clicking the info button.





















*The design will be change over time

Application Progress: Image Gallery

One of my attempt for my application is to make a fluid image gallery interaction.
In my application, I may provide the image gallery section for users to check the images that I took from Penang Trip.

Each of the images may contain any necessary information. This image gallery provide interaction to users to scroll/move the image smoothly, kinda like Mac program


Screenshot of example:














As you can see, the images in the gallery can be scrolled left and right respectively. Each of the images also contain the title and information as well, but what is in the picture above is just an early design and example.






















This is another example of image gallery with information detail section. Each picture will provide better detail of the image, like the name of building, origins, location and date. The sub-image (small image at the information section might be provided to give accurate details of the particular building

Ideation / Sketch

These are some of ideas/concepts of the application. These includes the layouts of application to determine the position of buttons, images, and texts.






















Basic Layout
This is considered as one of my basic and simple layout ideas for my application. Basically,
the buttons to access to the certain section of the application are located on the left side. On the right side will be the main part for information according to the section contents, like images and descriptions.






















Radial Menu Ideas
One of main ideas for application is to create the radial interactive menu. The interactive button will be separated in a radial button and divided into at least 4 sections. The buttons will linked to another section that provides information.

























Architecture/Building Scrolled Style Menu
One of the unique design/idea that I can think is to make a scrolled interactive designs that involved building shape as a button. Users can scroll through the building and click any one of it to make the information box pop up. The box may contains any necessary info and images of the buildings.























One of the screen examples of the section after the user interact with building. The building graphic will be zoom in to give the nice detail of the drawing and on the right side will be the information the building. Any part of the building can be click to make a picture pop up and give the close-up of the building image.
























Second version of Building Interactive Menu
The concept/idea is based on one of famous landmark in Penang, Komtar tower. Each part of the tower contains the interactive button for any section.

Rough Sketch/Ideas

Precedence Studies

An example of HDR toned picture of temple in Penang. This style of picture edit will be used in my application to enhance the color of my own photos. So, most of my visuakl representation might be edited to give more eye-candy visual to the viewers
Source: http://jejakvicky.wordpress.com














A great interactive web from HBO. The interactive style of the webpage might inspires me to do something similar to my application.
Source: http://www.hbo.com














Another great dynamic interactive looking website. The effect is just astonishing. If I have a chance, I would learn to do something like this and applied it to my application.
Source: http://www.creaktif.com/














Again, another great effect for interactive website.
Source: http://www.agencynet.com/

Research - Photos Gallery

These are some images that have been taken from Penang Trip. More will come...
These images will be in a part of apllication development

Sketches

Proposal & Concept

Proposal

To make an interactive application about Penang “Culture and Heritage”: Heritage Building, Architecture and Environment.

Concepts

The interactive application will provide lots of detail about the architecture of the building in Penang with a simple click. Each section of the application gives the information of the popular and historical building in Penang.

The metaphor is from the building/architecture in Penang, that shows the origins of the culture and heritage.

The title for the application (subject may be changed later): There Is No Place Like Home

Target Audience

Tourists or foreigners (outside of Malaysia)

Other info
Software that needed to made the application includes:
-Adobe Flash
-Adobe Photoshop
-Paint.NET
-Autoplay Menu Builder
-Audacity

Gantt Chart







Click on the picture for a larger image size

Penang Trip Schedule

15th July 2011 :

7.30 am - Depart from mmu

2 - 3 pm - Arrival & check in apartment

3 - 5 pm - Visit inner city of georgetown : colonial buildings at beach street , etc

5 - 7 pm - Jalan Air Itam: Suffolk House Digital Art Exhibition at Digital Art & Culture (DA+C) Festival 2011 & dinner

8-11pm - Digital Art & Culture (DA+C) Festival 2011 Opening

16th July 2011 :

8am - 12.30pm - Breakfast , The heritage zone of Chinese clan area: , Khoo Kongsi ,

Cheong Fatt Tze or Blue mansion , Loo Pun Hong @ Carpenter’s Guild ,

Chinese Straits Shophouses, Little India & Lunch

2pm – 4.00pm - The Street of Harmony (Jalan Kapitan Keling) , Kapitan Keling Mosque ,

Sri Mahamariamman temple , Kuan Yin Goddess of Mercy temple , St. George

Church

5pm - 11pm - Malay Fishing villages , Batu Maung, Permatang Damar Laut and Teluk Tempoyak

17th July 2011 :

8-12pm - Checkout from apartment Breakfast & go to Museum and Gallery of Tunku Fauziah USM (Peranakan Museum)

7pm - Estimated arrival at mmu campus .