Interactive Design for Web Technology

Web analysis

Introduction

            A website is a platform where so many things are targeted to reach the audience. Besides, creativity in designing a web page is a part of a designer’s responsibilities to attract audiences well. The principles of multimedia design are white space, balance, visual weight and perspective, colours, movement, 2/3:1/3 rule, simplicity and consistency. In this case, analysing a webpage is essential according to the multimedia principles. Multimedia design principle is a guideline for designing a website and a tool to measure the effective of a website design.

Task (1)

            By using the multimedia design principles, a requirement of 4 websites to be analysed thoroughly for more understanding on ways to design the website layout. Each analysation need elaboration according to the critic/ analysation stated. Objective of this task is to introduce and to create massive understanding on how to analyse a website/webpage.

First website

Website          :  www.mi.com/my/

Screenshots of the website:

Analysis

screen capture 1 and 2 comparison

This is a website of electronic devices from the brand called Mi. This website is to promote and introduce new devices by the company. Moving on to the design analysation, on this webpage, there are movement and flow/transition images of new products of its company (as shown on the picture above). The movement for this webpage is to introduce new devices especially mobile phones and power bank. Other than that, the transition avoids boredom by looking at the same images. Furthermore, this is for attraction too. This is due to the human psychology on moving things, where we are easily attracted to object and colours when it is transited or moved.

 

screen capture 3

Moving to the next point, white space on this page are balanced. The white space on the page is very clear for the composition and the images from this webpage have equal space.  This avoids the audience to be confused of what they really looking at. This webpage has equal white space too. This is due the accurate size of images and the distance of each object in the page. This provides eye relief because all the images and text are mixed up and not in narrow order.

screen capture 4

            At the bottom right of this webpage, it has a part left over and just an empty space. This causes the imbalance of the website’s composition. This is under the balance principles of marketing. This part should be filled with any images regarding the devices or any link to more devices. Due to this, the webpage doesn’t has a screen harmony.

Opinion/ Suggestion

            This webpage should be repaired so that it provides harmony to the audience. Few other important images/ text, link resized might be useful at the space on the right bottom of the page. It will create a balanced footer for the page and distinguish the visual imbalance.

Second website

Website          : www.nike.com/my/en_gb/

Screenshots of the website:

Analysis

screen capture 5

screen capture  6

            This Nike website is a page of a brand, where its intention to introduce and promote new stuffs of its company. My analysis on this page is about the simplicity. The reason for simplicity on this webpage is because the cleanliness of the webpage which is not full of images. The screenshot above is the header of the webpage and the important materials are shown at the top. The reason of this is because, the latest design of the shoes are the first, big and highlighted image in the website. Other than that, not too much information in the webpage. Unlimited text or information would make the space full of distraction.

screen capture 7

            Moving to my next analysation, this webpage seems to have visual weight in it. This is because, the typo at the top right of the site has the illusion of physical weight so that it can be seen first and the rest after. So, the smaller fonts are important but least important than the bold and big text. The text ‘So fast, it has its own launch pad’ is the technic to describe about the product by not directly describing about it. This is a strategy to influence the audience to read the small typo (text).

Opinion/ Suggestion

          This website is designed in a proper way, this is because the minimal text and visual communications are more in this site. This will avoid the audience feel lazy and jump on to another site which is more interesting. White background to ensure the audience are able to differentiate the colour from the image visualised.

Third Website

Website          : www.marvel.com

Screenshots of the website:

Analysis

screen capture 9 and 10

This Marvel website is a site where all the entertainment programs under Marvel Entertainment Industry. The layout of the website is very clear and understandable because of the white space between the images in the site. Even though the pictures in the site is not similar in colour, the ability on focusing never create a disharmony. Moving onto another is the consistency of the site. Each page of this site are not composed by following the theme. Marvel’s theme is red and the suitable colour to match with it is blue, but the background colour on the featured movies site are fully white. This effect the concentration and would cause confusion to the audience. Confusion such as question in mind either they are looking at the same webpage or different for those who newly introducing to Marvel. The reason for this is, Marvel movies are usually watched by all group of ages. In that case, when children view this with the parental guidance, they will start think that why is the background are not same as the previous one.

screen capture 11

          On this website, the balance of composition are well planned. This shows that circle in the screenshot above, is an enlarged image to ensure that no remaining empty space that might bring imbalance to the site. The harmony of the site would be affected when the upper part has more space compared with the below part. 

screen capture 12

          Visual weight for this website composition is very good. According to the visual weight principle, the typo ‘ANT-MAN’ at the page were given in a perfect font size to ensure that not only the icon/ character are can be seen without any description. Moreover, the typo were given big and the other typo in small font. This is regarding the Marvel character shown in the site are connected to the typo.

Opinion/ Suggestion

            This website should have consideration on the consistency principle of multimedia design. This is to ensure that never bring confusion to the viewers and to make all the page in the site harmony in colour. In short, the website should go on the flow with the theme colour of the Marvel or should pick colour according Genre of the specific entertainment programs.

Fourth Website

Website          : www.lenovo.com/my/en/

Screenshots of the website:

Analysis

screen capture 13

For this composition of the Lenovo website is very good on the white space use. The negative space in this site very clearly shows the distance, the subject and the images of the products. This will cause a peaceful mind even though when it is looked over several times.

screen capture 14

Cons on this site is the imbalance of the visualised images. The product of four should be divided two in a row to create harmony in the display of product. Besides, this highlight the empty space of the site. Moreover, the page shows imbalance on the right side too. This is because the text link on the left side of the page. This causes more visual weight on left side of the page and only one part is focused more compared with right side.­­­

screen capture 15

           

Other than that for this webpage, the background colour selection are not a good idea. The reason for this is because, the colour selected contains high contrast. Viewers who sees the page more than 5-8 seconds might have headaches due to the colour. This would cause the viewers to dislike the page and straight away they jump into different website. This two colours are not a soothing colour to be visualised.

Opinion/ Suggestion

The typeface for this website is very dull, it should be highlight the devices according to a specific device with the minimal use of word and colour. Other than that, for excitement instead, the least use of the colour might be more helpful rather than filling a part fully with colours.

Conclusion

            Analysing a website is to evaluate matters and basic consideration before designing our own. This is to avoid designing a boring, bad or complicated page. A successful page are efficiently done according to the multimedia design principles. Design principles are tools that to drag the designer according to what is important in building a website and a guideline on how to evaluate a good or bad site. Analysing website is an experimentation process before beginning the composition process. Analysing a website are easier since understanding the multimedia design principles.

Principles of Marketing

Advertising campaign

An advertising campaign is a specific course of action designed to advertise a company, cause, or product that employs an intentional and carefully coordinated series of marketing tools. This is in order to reach the target audience. The end purpose of any ad campaign is to boost awareness of the subject matter and generate demand. The structure of the advertising campaign will often depend on the nature of the product or cause and the target audience that the campaign had planned to reach.

Importantly, an advertising campaign will come up with some specific goals that must be realized in a given period of time. In the event that the campaign does not reach the goals, the overall approach can be reworked slightly for the remainder of the campaign. Other than that, the information gained on the current campaign would be helpful to create a more effective follow-up advertising campaign strategy. Learning from the experience of past campaigns makes it possible to strengthen upcoming campaigns and move closer to achieving the goals set by the advertiser.

This is my inspirational advertisement campaign. 

video: Coca cola Beep advertisement.

The reason why I selected Coca cola ad is because the strategy that usually this company tries to market is in a different and new way. Other than that, coke has done so many survey and advertising campaign to promote the drink. This is an inspirational for me in how they show their existence in a unique way. This video is an advertisement that trying to be shown that Coca cola is not an ordinary product by the beep tone during scanned.

Mantin

Mantin is a small town in the midway of Nilai and Seremban. It is also called Setul by certain people. This town initially got the name Mine Tin by the English people. Then some used to say Many Tin, this word then changed into Tin Man due to pronunciation problem of the Chinese. This had just going around by the people which use to say the name as they wished til one day it were called Mantin.

This town is a town that the belongings are Muslims, Buddhist, Hindu, Cristian, Sikh and orang asli (few). This town is a growing town where construction work are going. Mantin is full of green and healthy plantation. Besides, an estate called Ladang Gombok are allocated here. This area is rich of fruit trees such durian, mangos teen, langsat and rambutan the most. The fruit shops and stall in Mantin are rich of fruit where they get in just in Mantin.

The orchards (dusun) in Mantin, are well cared by hiring a caretaker that does cleaning, pruning and other plantation work too. The better they prune, the nicer the fruits.

Therefore, for the promotion task of Mantin for this semester, orchard and the pruning system are my selected concept that I would like to show it in a game plan. Mantin orchards are mostly owned by the Chinese in Mantin. They truly have the passion in growing trees and fruit then making it into cash. This is an opportunity for me to explore and reveal this to the Lagendarians.

Documentation task in Mantin:

 http://satishvarman.blogspot.com/2015/08/interactive-design-for-web-technology.html

reference: 

(2015) Wisegeek: what is an advertising campaign? [Online] Available on: http://www.wisegeek.com/what-is-an-advertising-campaign.htm [Accessed on 18 August 2015]

Tooley, J. (2015) Quality logo products: the elements of a good advertising campaign. [Online]  Available on: http://www.qualitylogoproducts.com/lib/elements-ofa-good-advertising-campaign.htm#ixzz3jQOHs3JR [Accessed on 18 August 2015]

Lisa, J. (2015) Create hype: the key elements of a successful advertising campaign. [Online] Available on: http://createhype.com/key-elements-successful-advertising-campaign/ [Accessed on 18 August 2015]

Coca cola ad:

https://www.youtube.com/watch?v=vOBgI772Bkc

Principles of Marketing

What to Market?

Subject matter of Project

After reconsidering my topic to run the project. I have selected the plantation system of mantin by focusing to the jackfruit and the durian fruits that grown in Mantin. The reason why i have selected this is because the count of the fruit that is produced in an orchard is in a high state. As for a jackfruit, it can weigh as up to 30 kg and for the durian is about up to 5 kg per fruit. Besides, the jackfruit is not depend on any season compared with the Durian. The jackfruit is a fruit which usually keep grow and grow all the time and produce lots of fruits in 3 months time. 

Below is the photos of my observation for orchards in Mantin:

1) photos of orchard at Taman Tong Seng Mantin (image 1-4)

image 1

image 2

image 3

image 4

2) observation photo near Ladang Gombok Mantin (image 5)

image 5

3) observation photos of orchard at Jalan Lenggeng Mantin (image 6-7)

image 6

image 7

After observing few orchards in Mantin,  it is clear for me to continue and move on to my next step on promoting Mantin with the subject matter of Orchards (Dusun) of Jackfruit and Durian. My next step is to generate ideas on how to symbolise or make a logo for this Topic and by coming up with a suitable title for my topic.



reflection :

From this observation, i have found a way on how to work and how to generate ideas by observing things around that might give idea(s) on what we are focusing.

My Target Audience and Survey

Target Audience and survey of the project Mantin (Car wash).

In this task of promoting Mantin, the target audience that are required to be focused is the Legendarians, which is the students of Lagenda Education Group. In this case, there are many layers of students in Lagenda. There are local students which is from some from different parts of Malaysia and international students as well. There are not all who knows about Mantin much. However, for a convenient transportation, students in Lagenda prefer to have their own transportation either by renting or bringing their own (local student).

cars around the International hostels :

Picture 1 

Picture 2

Picture 3

picture 4 : along the road inside the student hostels.

 

picture 5

picture 6

picture 7

picture 8

This pictures are taken inside of the both Lagendarian local and international student hostels. From this pictures, it indicates the units of cars used in lagenda compound is not in the least state. In each row of apartment, the minimal count of cars are at 15 units. 

So, this is an opportunity to pull them and to promote what is essential for their drives which is the car wash in Mantin. The problem now in Lagenda, a car wash in Lagenda is available, but the operation hours are unknown and not stated anywhere around the area. Moving to the project, to promote Mantin’s car wash, documentation and analysation about the existing car wash in Mantin are to be held very soon. Observation for this stage are personally taken charge.

3D Character and Environment Design for Animation

Task 1

What is 3D Character and Environment Design? 

First of all for this module, analysing an animated movie is very helpful. As this module is about 3D, a 3D animation instructed to be analysed in order to know the important plots that should be covered.

We are required to watch a 3D animation film, then a short analysis should be done. The contents of the analysis requires genre, synopsis, character and background, shot of the scene and color, audio and moral of the story.

For this task, I have selected the animated movie entitled ' Big Buck Bunny '.

Synopsis of the movie :

A big bunny lived lonely but never felt unhappy and love nature watching. Bunny loves enjoying the environment by walking around the forest and never harm any living thing in his whole life. There are three squirrels always watches on this big buck bunny and always distract the bunny from enjoying the nature. After those squirrels unbearable acts, one day the bunny plans to teach the squirrels. Finally a lesson were thought for those squirrels.

Character design and background :
-Big buck Bunny and Squirrels - digitally designed , perfect rendering
-Environment background as in woods (digitally designed background according to real environment)
-Digitally designed characters, total (5).


Shot, Scene, Color
Shot based on story flow, medium duration of scene.

Cool colors and soft colors for characters and background.

Audio
The audio of this movie is just simple funny and neutral level of music on background with no dialogues. Audio according to every shot and scene.

Moral of the story
Never harm any living thing and appreciate mother nature. Since the big bunny never harm any of this nature living, it's a message for all the audience and viewer not to do things which has no moral value.

For this task, a simple infographic are required to be designed, this is to pick important plots and part in the short movie including the skills on how to talk about an animated short movie.

This is the movie :  Big Buck Bunny

Principles of Marketing

Task 1
Post 2

picture 1

This was my logo for my Marketing of Car wash and service centre in Mantin. After some feedback and observation, the scope that concentrate to promote about Mantin is only the car wash service.

After consideration on what exactly to promote, car wash is the only topic that I’ve selected to continue. Concentrating on the logo, the previous one is to straight forward on what it is about. Simplification on logo is essential here.

Other than the logo, the title of my work = (MACC) is similar to a brand of cosmetic products. The intention in giving a title is to show that it is linked with automotive, and it has to be a catchy one. So, for now, the title is still under consideration.  On observation or survey, I have to go and experience all the car washes that is operating in Mantin.

Observation have to be on price, services, convenient, time of service (washing duration) and special services or promotions such as= wash 5 times and get 1 free wash service. After selecting a specific car wash, have to make a map to guide the Lagendarian to get there. All these are the most important basic elements.

For the promoting process, an exhibition is required. Therefore, print-out and short clips will be exhibited in the exhibition booth. Additionally, the game that will be another way of promoting car wash of Mantin.Focused points that will be exhibited is the price, services, convenient, time of service (washing duration) and special services or promotions.

Title ideation of my topic = MaCD (Mantin Clean Drive)

Principles of Marketing

Week 1

Trademark of Mantin

How to promote Mantin.

Introduction

In Mantin, there is about 7 car washes operating daily from 9am to 8pm. Each car wash centre in Mantin has the least count at 8 units of vehicles to be washed in a day. Not only that, Mantin has up to 10 automobile service centre and it has the least count at 8 units of cars to be serviced in a week. All this is because, the increment of owning a car by the public in Mantin. More importantly, the count of students of Lagenda has increased in using a rental or own transportation.

So, to promote Mantin to Lagenda group, I had decided to focus on car wash and automobile service centres. The reason for my idea is, since the statistic of students who use personal transportation has increased, this could be helpful for them to keep their rides clean and shine.

In a way of promoting Mantin according to my idea, this is a start-up of my logo. 

It is just an initial idea on my logo, changes might take place after feedback.

Picture 1(Logo)

The logo is designed in Adobe Illustrator. These are the screen shot of the progress,

screenshot 1

screenshot 2

screenshot 3

screenshot 4

screenshot 5

screenshot 6

screenshot 7

screenshot 8

screenshot 9

screenshot 10

Shapes for the logo in illustrator designed by using pen tool.

In my logo, I would like to highlight that it is about automobile (car), then about the subject that I would like to promote about Mantin. In this case, I have decided to place a car in my logo with some simple icons to represent car wash and service centre. The hose pipe in my logo is to show about car wash and a spanner tool as to represent the service centres in Mantin.

The title that I have selected is MACC.

M= Mantin, A= automobile, C= clean and, C= Care

The black and white is the only colour I prefer is because to make it bold in sight and easier to be focused. For this task as my initial observation and effort, there are no references yet. 

3D Character and Environment Design for Animation

Inforgraphic

After watching and analysing important plots of this 3D animated short film, we are required to design a simple infographic for the film. The requirement is regarding the genre, synopsis, character and background, shot of the scene and colour, audio and moral of the story. 

My idea

According to my ideation, the infographic layout contains figures of the character and description of the genre, synopsis, character and background, shot of the scene and colour, audio and moral of the story. The background of my infographic is white. This is because, a white background is the best platform to present any type of font and image.

Infographic Progress:

 

screenshot 1

screenshot 2

To place characters into my infographic, the images of the characters are attached in Photoshop and cropped by using the Lasso tool. After cropping the character, the file is saved as Pds format so that it is attachable in Illustrator too. The same methods used for the other characters too.

screenshot 3

After finish cropping process, the characters are brought into the Illustrator and arranged on portrait orientated layout. The same process and methods goes to the other characters. The screen shot above is the process of placing the main character on the composition. Other than that, the images attached not directly place, it is scaled to preserve space for other details.

screenshot 4

To add the title of the movie, the typography ‘Big Buck Bunny’ were made by using pen tool. Then the typography were place aligned to be at the centre of the layout.

screenshot 5 

Moving on to next process is the making squares with typeface of a selected font. It contains the details such as genre, synopsis, character and background, shot of the scene and colour, audio and moral value of the short movie.

screenshot 6

After placing and scaling all the details in the layout, a final readjustment were done. This to make sure no important context and details are left.

screenshot of the layout

JPEG file of the infographic:

Reflection:

This task is to understand the movie flow and every single plot. Other than that, it is a practice of using all this plots to represent it with simplicity but with efficient information in it. Besides, this task is helpful for ideation of 3D character in upcoming task.

Mantin

Journey to Mantin

A visit to Mantin town were organised by SOMAD for the design students. Here, we are required to document, photograph, record, or sketch what we found in Mantin. The place which is focused is from the Caltex to the Hakka Village of Mantin.

The first place we started to see colours is the Wet Market, there were so many things such as vegetables, fishes, meat, anchovies and other kitchen needs. The market are also seems to be a busy place in the town of Mantin.

picture 1

picture 2

picture 3

 In this journey of documentation, I've found so many interesting things in Mantin even when i stayed here for more than 20 years. The transportation system in Mantin is very safe and it has a perfect perspective when observed from a certain angle. The reason why it is said so is because the long straight road in the town gives a central point at the end of the road lines when it is imaged.

picture 4

This is a picture of the road in Mantin which has perspective value in it. The perspective lines for the road in this picture is the road line in the picture. Other than all this, Mantin has textures and and colours that is attractive. This is because the different colour of the architecture and the different shape of it. For the texture part, a single wall can give an extra ordinary texture that can be used to be a background for a photography session.

Moving to the architecture part of Mantin, the are lots of shops in the town. There are architecture that is built according to culture and most of them are since the early 1930's and some even older than that.

picture 5

Reflection :

 From this task of documentation about Mantin, I learnt about Mantin more in the angle of texture, architecture, colours, roads, transportation and the system of why it can be called as a town. Mantin is a wonderful small town that can speak lots of story when discovered. I have not satisfied in imaging the town as i will continue snapping more about Mantin.

*All the picture were taken by mobile phone