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.