INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WEBPAGE PROCESS

For this week I will focus on designing my webpage and edited some picture that I want to use in the website. I will use website templates from Wix.com and I choose vintage types of website templates.

I face big problem where I cannot open the wix in my pc, so I need to do it using the Mac Lab but I do my best to finish the website.

This the picture that I edited and plans to put it in my websites.

This is my website link http://alexislyndy.wix.com/mantin-interactin

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WEB PAGE PROCESS


TASK 3

In this task we will learn how to create webpage and designing it how we want and it resembles the topic that we take. I want to design a website that telling a story through texture so my website will full of the pictures that I takes from Mantin.

My concept for my website is vintage. Why I choose vintage? It is because the texture that I took from Mantin is come from the building in Mantin town and about 90 percents building in Mantin is old building that built in year 1919, 1920, 1930, and etc. Also because I want to show the interaction between the human and building using the textures that comes from the times that has past in Mantin.

In my webpage, I will put the picture that I take and types some of the information about history of Mantin and also the texture that I take from the Mantin.

So, I need to find a good template that I can use to design my website and also find references of the vintage websites and finding what type of color of vintage and also the vintage typeface that I can choose in my website later.

Below is some of the references I look for my websites:

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

USER EXPERIENCE

User experience (UX) involves a person's emotion and attitudes about using a particular products, systems or service.

User experience includes the practical, experimental affective, meaningful and valuable aspects of human-computer interaction and product ownership. Additionally it includes a person's perceptions of system aspects such as utility, ease of use and efficiency. User experience may be considered subjective in nature to the degree that it about individual systems as well as the wider usage context in which they can be found.

USER INTERACTION

User interaction defines the structures and behaviour of interactive product or service and user interactions with those products and service. Good interaction design effectively communicates systems interactivity and functionality, defines behaviour that communicates systems responses to user interaction, reveals both simple and complex workflows.

Interaction design is grounded in an understanding of real user (goals, tasks, experiences, need and want) and balance these need with business goals and technological capabilities. User Interaction also is how the user act on the system and how the systems acts on the user. Some of the web will have the sounds, images and also the video as the interaction to the user.    

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

INTERACTIVE DESIGN FOR WEB TECHNOLOGY


TASK 1

WEB INTERFACE DESIGN ANALYSIS

INTRODUCTION

In this report we required to do web analysis. Web analysis is about analysing the web interface using the multimedia design principle that consists of white space, balance, simplicity, visual weight and perspective, colours, movement and transitions, the 2/3:1/3 rule, and consistency. Using this principle, we can learn on analysing the web interface so that we will know about which website has the good web interface or the bad interface. After this website analysing, we can create our own website using the same multimedia design principles.

Website interface is important, because it show how you conduct your website so it can be user friendly and when people enter your website they won’t be confuse get head ache by your website interface and information that you put there. The good website will help you guide people in introducing your products and it also influencing the user to your aesthetics in website interface design.

WEB ANALYSING

WEB 1: www.yleo.com.my

The first website that I’m going to analyze is about a company of palm oil products. The famous product of this company is Vesawit. The target audience of this company is into housewives, restaurants and food making companies.

Picture 1

This website page is using one pager interface. All of the information is on one page so if you click into any button it will either scroll up or down to show the information that you want to see. This web interface is has the 2/3:1/3 rule as you can see from picture above. This rule is the important thing in the website layout so the users or audience would focus in the primary area or the secondary area. The navigation button is usually in the secondary area focus. Then in this web page it also bring the element of movement and transitions, this will attracts the attention of the web user when they enters this website. It also has the white space in every section so the balance is there and it make people comfortable with this web page.

Picture 2

In this website, you can the consistency of the font they use in each sections so this helps the user and also an eye relief. This also can be seen in the coloring, where they use three colors that consists of white, red and black as you can see on the website screenshots. You also can navigate easily in this website when you want to find the information that you. For example: the product of this company as you can see in the picture below. You can find any of the products there and just clicks on the button to find further information. This website is also balanced in between picture and typography.

Picture 3

This website is simple and you doesn’t have any problem in finding any info in this website and the hierarchy in his website is seen clearly. The visual weight is balanced where you can see the bold word and normal word with it different sizes of font.

Picture 4

WEB 2: www.nestle.com

Picture 5

Second web is about Nestle website. This website is about any information of any products of Nestle and this products for any people that wants to know more about Nestle products. This website interface has the white space and this provide the eye relief to the audience. As you can see it also has 2/3:1/3 rule as it interface layout. The homepage also has the transitions and movement of pictures that attracts the people. It also has the balance in between typography and picture and it give the harmony to the web design.

Picture 6

As you can see in the picture above, this website use many colors because it according to the products they have and they still maintain the blue color as the main theme. This website is also a little bit crowded because they put all of the information there. This website still has it consistency in the type font they use and also you can see the visual weight in this website. So, this website achieve its own balance.

WEB 3: www.swatch.com

This third website analysis is about famous watch company that targeting young adults in all gender.

Picture 7

This website also has the 2/3:1/3 rule interface layout. This website home also has the flow and transitions on the pictures of the event they held and also the menu button, where they will expand out when you scroll on each and this lead to an easy navigation around the website. This website has the balance and it really harmonize this website and make people comfortably scroll on it webpage. It has balanced white space as an eye relief and this web page has the hierarchy the simplicity that make people comfortable with it as you can see in the picture below.

Picture 8

Picture 9

This website has colorful pictures of new watch but the main color use in this website is black white and red and this color symbolize the Swatch brand itself. You also can see the consistency between the types of font they use and also the balanced visual weight in this. This consistency can also be seen in the flow of the navigation of this website and this will help people to understand about the information in the website.

WEB 4: www.emcosmetics.com

This last website is about a cosmetics brand that targeting young women and also the fan of this cosmetic creator.

Picture 10

In this last website analysis, we can also the 2/3:1/3 rule interface layout because this layout is the importance thing that need in designing layout of website. When you enter the home page, you can see the transition and the flow they use in the picture and also it help us to scroll around in the navigation area because of the expand navigation as it shown in the picture above.

Picture 11

In this website we can see the simplicity or perhaps too simple because the information doesn’t overwhelm the website and it has the clear hierarchy of the important information first to the less information. It also has the consistency in using the typeface and also where put the labeling, placement and the color as they use white, black and pink in this website. You also can see the white space they use in this website.

Picture 12

You also can see the balanced between the picture and also the words they use in this website. They use different typeface in each sections for example the price fonts, the sub-heading, the products name and the information about the products but it helps people to identify which of it and it make people easy reading the info. In this website also you can see the visual weight in the website and this help this website achieve it balance.

CONCLUSION

From this website analyzing, I learn that even website has its own layout and rule before it can be perfect website that can be used by users and attract your target audiences. You also need to know what kind of theme and the selling points of your products before you can create the website. You also need to look in the color scheme and also the typeface that you want to use and also the picture that relevant towards of what you want in the website. This web analyzing will help you to improvise you aesthetics value your website interface design and will also help you to interact with people comfortably.

REFERENCES

• www.yleo.com.my
• www.nestle.com
• www.swatch.com
• www.emcosmetics.com

Principle of Marketing

Principal of Marketing

Blog post 1;

The topic that I choose to promoting Mantin for Legendarian is about Historical Building. First, I want to promote history about Mantin but then I change my scope because of the communication problem between me and the older people of the village for the language gap. So, in this topic I, need to take picture about the old building or abandoned building. So in our journey to Mantin I take this opportunity to find the pictures that I need.

This the example of pictures of building that I take:

Picture 1

Picture 2

Picture 3

Picture 4

Picture 5

Picture 6

Picture 7

Picture 8

Picture 9

Picture 10

Picture 11

Picture 12

But I need to go to Mantin again to research more and take another pictures in another different perspectives s so that the Legendarians can see the different of pictures that take in 1 perspectives. This is the right side of Mantin. Mostly the old building is on the right side.

The historical building that I know in Mantin is Hakk Village age 120 years, Aloysius Church also 120 years and also Gudwara for Sikh people to pray but I didn't has the picture yet.