Showing posts with label Interactive Design for Web Technology. Show all posts
Showing posts with label Interactive Design for Web Technology. Show all posts

Saturday, October 31, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WEB PAGE ( PROCESS ) 

For this weak I just focus on drawing the image of food that I want to put in my blog. At first I want to draw at the paper but I think it to normal and I want to make it look different. Since my concept for my webpage is elegant therefor I use the plate as my place to draw the food that I have choose. 

I have difficulties in drawing the image because I want to make it look like real especially when I want to draw the roti canai. To get the actual color and also the actual texture for the roti canai is not a easy thing I need to analyse it more before I start draw but I still cannot get the real image of the roti canai 

This is my drawing that I draw on the white plate.






Now I need to edit some picture and put it on my webpage.

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WEB PAGE ( PROCESS ) 

My concept for the the web site template is elegant, I choose this concept because when we talk about food people willing to spent more money on the food. Other than that food will have the different look and taste that make it valuable and its make it more elegant. 

In my web page there will be a image of the famous food in Mantin and also the information about the food and the place that sell the food. From many food in Mantin I choose Nasi Lemak, Kuih pau, nasi ayam, and roti canai. Each of the food represent the race in Mantin such as Nasi Lemak it is from Malays community but now days everyone will eat and find the best Nasi Lemak. Other than that for roti canai it from india community and kuih pau from chines community. 

Beside that I also need to make a list about the other food that sell an the restaurant or food stall that I have choose because I need to put the name and also the image of the restaurant or the food stall in my web page.   

In my web page there will have a home button, menu, place and also the gallery. at the bottom I will put the link to make people know how to contact us and I also put the map so people or audience will know where we at because Mantin is not a popular place and not everyone know about this place. 

Now I need to edit some picture that I will use in my website.  

Friday, October 30, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WEB PAGE ( PROCESS )

We are require to make a research about the template to make a website. I need to find the suitable website template to make my website template. My website template is about the food therefor I need to find the suitable web page that will show the menu, place and also the information about the food. 

In my web page there will be more image about the food that I take from Mantin. Other than that I also put the image of the building and the view at the Mantin town. I have take some image about the food at the Mantin town but some of the image do not have a nice view therefor I decide to draw it.

This is some image of food that I get from Mantin town. 

picture 1 : image of dish from the food stall
picture 2 : image of the dish from the food stall
Picture 3 : image of nasi lemak
Now I need to find the suitable website template and organize it.
  

Thursday, September 17, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

USER EXPERIENCE

User experience involves a person's attitudes and emotions about using a particular product, system or service. User experience includes the practical, experiential, effective, meaningful and valuable aspect of human, computer interaction and product. 

Other than that user experience includes all the user's emotions beliefs, performs, perceptions, physical and psychological responses, behavior and accomplishment that accouter before, during and after use. There is 3 factor that will influence the user experience like the system, user and the context of use.
Beside that user experience also all the aspect of 
  • How people use an interactive product 
  • The way it feels in their hands
  • How well they understand how it works 
  • how they feel about it while they using it
  • How well it serve their purpose 
  • How well it fits into the entire context in which they using it.
A graphical representation showing how all of these areas should be developed around the user to create a great user experience.

USER INTERACTION

User interaction design defines the structure and behavior of interactive product and service and user interactions with those products and service. Good interaction design effectively communicates a system's interactivity and functionality, defines behavior that communicate a system's responses to user interaction, reveals both simple and complex workflows, informs users about system state changes, and prevents user error.

Interaction design is grounded in an understanding of real user ( goals, tasks, experiences, needs and wants ) and balances these needs with business goal and and technological capabilities. Other than that user interaction is a process of designing what happen as a user move through a web application. User interaction also is how the user acts on the system and how the system acts on the user.  Some of the web will have the sound, image and also the video as the interaction to the user.

The seven stage of interaction 
REFERENCE
  • Alben(1996) all about UX : user experience definitions. Publisher : Wordpress & the atahualph theme [Online] Available from :http://www.allaboutux.org/ux-definitions 
  • https://en.wikipedia.org/wiki/User_experience
  • Any Harvey ( 2013) User experience : What is it and why should I care ? Publisher : USABILITYGEEK [Online] Available from : http://usabilitygeek.com/user-experience/ (Accessed 2 July 2013)
  • Skillcrush (2012) User experience, user interaction, and user interface design. Publisher : Skillcrush [Online] Available from :http://skillcrush.com/2012/09/17/user-experience-user-interaction-and-user-interface-design/ (Accessed: 17-09-2012)
  • Varadesign ( 2010) webdesigning tips : the theory behind user interface design, part one. Publisher : varadesigns [Online] Available from:http://uidesigning.blogspot.my/2010/06/theory-behind-user-interface-design.html ( Accesses on 14-06-2010 ) 

Wednesday, August 19, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY


WEBSITE INTERFACE DESIGN ANALYSIS

 INTRODUCTION

Web site is a place for people to promote or selling something that they want other people to know about it. They create website that is relate to their aim and target. Other than that many website is aim to make money, using one or more business models.
In the website there are many function and can be used in many style or fashion. There is much type of website such as personal website, commercial website, a government website, and non-profit organization website. Each of the website have a difference function such as corporate website, it is use to provide background information about a business, organization or service. Other than that blog also one of the types of website but it is use for post online diaries which may include discussion forums. Mostly blog use for express their idea or anything ranging from politic to religion to video games to parenting.
Website can be divided into two categories one is interactive website and the other one is static website. Static website does not allow the involvement with the audience but the interactive website do. Interactive website is part of the community of sites, and allow for interactivity between the site owner and site visitor. Not all the website is well design some of the website was too crowded and make the audience confuse and lose interest to read goes through the website.
To make a good website there must have the multimedia design principle like the white space, balance, visual weight and perspective, colours, movement and transition, the 2/3 : 1/3 rule, simplicity and consistency.


WEBSITE ANALYSIS
1.    FOSSIL WEBSITE
This website selling accessories that are suitable for men and women who have work at the age from 25 to 35 because the entire thing is exclusive and look branded. There is lack in this webpage it is there is no price for each of the thing that they want to sell.


  WHITE SPACE & COLOUR

As we can see the webpage use the white colour for the theme of the webpage to make the thing look exclusive because white represent the professional and clean. But in this webpage it has many whitespace and the white colour as the theme make it look too simple and not attractive. Other than that as we can see the thing that they want to promote they arrange it nicely and make audience feel comfortable to take a look at the product. Other than that as we can see the menu for this webpage on the right side of the page. It make the page look more organize and it user friendly.





BALANCE

This webpage also one of balance webpage because as we can see the image that they display will have a description on the side of the image. It makes the webpage look balance and consistence. The images that they use also clear and attractive that will make the visitor want to buy it and look it closer.


IMAGE



this is how the home of this webpage look like the image that they use are not intersting and don’t have a power to attract people because the thing that they display does not realate to the thing that they sell. The image they use like a toy may make the audience think that it’s a page for a toy.

SUGESTION
For this webpage they need to put at less two of three color to make it look intersting and not bored. Other than that use a suitable image for the homepage to make the audience not confuse when they open this webpage.  

2   CLARKS WEBSITE
Clarks is a website that sold shoes for everyone from children to adult and have a variety type and also design of shoes. They selling shoes not only in online but also in the shop. The target audience for this webpage is from teenagers 25 to adult 40. This webpage also target to parent who busy with work and want to buy a shoes for the family and their self.


COLOUR



This is how the home page of this webpage, they put a suitable image for this webpage like the shoes. This page actually the image is move and the entire image is about the shoes for children, women, men, and also teenagers. They show the design for each of the categories. As we can see this webpage the menu bar is at the upper of the page and the colour that this webpage use is only white and dark green.



This is the bottom of the home page, from here we can easily select what we want to search because it already has categories it according to the section. It will make audience easy to handle this webpage. Other than that at the bottom of this webpage also provide the information about the shop and also other social media if the customer want to look for other information.   
SIMPLICITY




Besides that, the webpage also simple, they arrange all the item consistently and easy for customer to go through one by one. Other than that this webpage also user friendly because on the side of the webpage there is a list of the type of shoes that we want such as the size, colour, function, and also the prize. It will save our time to take a look at the item that we want. Moreover the information in this webpage also complete, they put all the prize and the look of the shoes from all the side. Other than that the webpage also balance with the text and also the image.



Sometime the webpage also put some advertisement about their web or their contest to attract the customer to come again to the webpage and enjoy the gift that they provide for the lucky customer. This is one of the attractive webpage that have a connection between the customer and the site owner.
  
3.   KFC WEBSITE
KFC was a restaurant that sell food base on chicken. They have many branch and they also have a webpage for customer to take a look what the restaurant have. The target audience for this webpage is person who cares about the product and the nutrition of the food, it is at range of 25 to 40 years old.


COLOUR



This webpage use only two colour as the theme colour for this product it is red and white. They use the red colour because it is suitable colour for promoting the food. Other than that red also is an appetite and eye catching colour. From the research also when a restaurant put the table in the restaurant in red colour it will make the customer eat a lot. Other than that using the white and red colour also will make the restaurant look exclusive and can attract people to come inside.    

 IMAGE
They use a delisios image that will make the customer or the audience who see this webpage will feel like want to try some of the menu because they use the suitable colour for food and the good quality of image. But this webpage lack of information and the typo for this webpage they use grey colour and it not suitable with the backgroud of the page. Maybe they can use the black colour for the font and provide more information In  this webpage.





MOVEMENT & TRANSITION



In this page we can see the movement of the image. It will make people want to look what the thing that they want to diliver to the audience. Other than that at the top of the page we can see the categorise of food that people can easily choose acording to what they want and all the set that they display will have the nutrition calculation. Beside that this webpage also can be improve by put the menu bar because in this page it will make audience confuce where to click to get inside of the webpage.


4.    FOKUS POINT WEBSITE.
This side is a about the shop that sell spectacle for all the age of people but this page the target audience are the people who wear the spectacle in the same time they also promote the fancy spectacle  for men or women at the age of 25 to 35.


IMAGE





This is how the home page of this website look like. At the home page they only put the image of the shop from difference outlet and make it move to make the audience see were the other brance of this shop. As we can see this webpage not follow the rule 2/3 : 1/3 rule that is the webpage must put some information or text in the site to make people get the information about what the website about. Other than that this website the menu bar is at the top of the page. It will make  audience easy to go somewhere that they want to.



In other page they put the information about the brand that the audience can get from their shop and they also put the logo of the brand to make people know about it. From the page also we can see the webpage is balnce and consistency in using of color and text.

COLOUR
They use the same color to every page it is black and red and they make it as their trademark as when we go to other page we still can see the colour of red and also black. As we can see they also use the same color in their branding and their shop.

CONCLUSION
Each of the webpage has their own weakness and also the strength. To make the good website we must know our target audience and also the suitable colour for the website. Other than that understanding about the multimedia design principle also can make you create a good and informative website that is suitable with the target audience.
In a web there should be not more than 3 colour use because if there is too many colour it will make the webpage look too crowded and messy. Other than that one webpage must have a theme colour so that when the audience go through the webpage they know that they still at the same web because it have the same colour.  
  



REFERENCE


Wednesday, August 5, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

DISCOVERY IN MANTIN

Yesterday we went for a journey to mantin that is organize by SOMAD for design student. At mantin I find a lot of interesting place and interesting view that I never expected such as the view of empty space look nice if we explore it. 

On this journey I need to record, document, photograph and sketch all the thing that can inspire me in my assignment. Our journey started from caltex to hakka village in mantin. For the first place I went to wet market from there I can see a lot of color  and fresh thing  there. All the vegetable look very fresh and also the  fish, meat and the chicken.

Picture 1 : The environment in wet market

Picture 2: The image of vegetable in the wet market

Picture 3: Image of the fresh fish in wet market

Picture 4 : Image of the variety type of fish cake in wet market 

Other than that I also saw how chicken are process step by step it is very exiting. At the wet market also I can smell the fresh fish, the chicken and also I saw the process to make coconut milk. At wet market also I notice that only the old lady or a mother went there and I not saw young lady there and there is so much noise. In the middle of the noisy people I saw one uncle sit peacefully and reading a news paper maybe want to make himself update with the latest news. 

Picture 5 : Image of the coconut shell 

Picture 6 : Image of the little dog find something to eat inside of the bag

Picture 7 : Image of the chicken in the wet market

Picture 8 : Image of the uncle reading the newspaper 
      
After that I continue my journey to the shop near by and I saw a lot of delicious food at the shop and all are traditional food in mantin. It look spicy and have a nice color that will make who look at it feel hungry and want to eat. When I'm went inside of the shop I can feel like at the village because of the  decoration in the shop. 

Picture 9 : Image of the dish in the one of the stall in mantin

Picture 10 : Image of the dish in the one of the stall in mantin

Picture 11 : Image of the dish in the one of the stall in mantin

Picture 12 : The arrangement on the wall inside of the stall in Mantin 

Picture 13 : The look from the in front of the stall

After that I went to another place that is the empty space. Yes it match with the name empty space because when I step my feet at there I can feel the empty there. There is nothing there only the broken house and the space. But I saw from the empty space a nice structure of building and the texture of the building. It is very beautiful and you cannot find it if you go there by car, you need to walk and feel yourself how the villagers in mantin live. 

Picture 14 : Image of the building in Mantin

Picture 15 : Image of the side of the building

Picture 16 : Image of the side building in Mantin

Picture 17 : Image of the empty space in Mantin

Picture 18 : Image of the toilet from the empty space in mantin

Lastly, I went to hakka village and I can feel the loneliness and abandon. Most of the house there was empty and if you went there you can see the traditional house and the  arrangement of all the house also seem different. At hakka village I feel new experience that I was chasing by the buffalo and if you want to go there beware of the dog. Hakka village if you see from outside it look like a abandon place but  if you go inside of the village you can feel something that you only can get the feeling at there. At hakka village I didn't take much photo because I was enjoying the environment at there it feel very calm. 

Picture 19: Image of the abandon house in Hakka village 

Picture 20 : Another image of the abandon house in Hakka village 

Picture 21 : Image of the piece of the door that is a words love on it.

For who want to know mantin more deep you need to come here and see by yourself and feel it. Mantin have much things that is beautiful and peace, you can feel the nature thing in here. 

Tuesday, July 28, 2015

INTERACTIVE DESIGN FOR WEB TECHNOLOGY

WARM-UP EXERCISE

We need to choose one web side and try to analyse the web according to the multimedia design principle.

The web page that I choose to analyse in this activity is a Food Network Asia.
Link :  http://www.foodnetworkasia.com/about-us

The web tell us about the food around the Asia and we can search all kind of food in Asia in this web page. Other than that this webpage also provide a recipe that we can  refer if we want to make the food. This webpage also tell us about the tv show, host, and video that we can take a look if we want to see how to make the food.

Picture 1: Screen shot of the web page 

This is how the web look like. They use a suitable color for food that when we look at the web we will think about food. The image of the food also make the audience feel hungry and want to look more to the  webpage.

Picture 2: Screen shot of the web page 

Beside that this webpage also have header and footer. This  webpage follow the 2/3:1/3 rule as we can see they put the image and the logo of the webpage at the top of the page and only use 1/3 of the page and it is consider as secondary area of focus mean it is the second importance part in the page. Other 2/3 area was full with information text about the webpage.


When we click at recipe the page will look like the picture 3. As we can see there is a research button that we can search all the recipe that we want to know it is user friendly.  When we look at the page we can see the page are balance. They use four column for this page and make it easy for audience to look and compare what the need.


In this page also we can see the use of white space. It make the audience feel comfortable to look at the page and people willing to spent more time and enjoy reading the page. Other than that they put all the interesting image of food that is look delicious and make the people feel like want to try some of it. Beside that they also use the difference type of words as we see they bold the name of the food and the description they put in the normal type. When the audience see the page their eye will capture the bold part fist and then will continue to other part.

REFLECTION
To analyse the webpage we need to know the principle of multimedia design. It will make our work easier and we can analyse more detail about the webpage. For me this webpage are the good example of webpage because I feel interested to know more and want to explore more on the webpage. It also use the suitable color for food and good image. The webpage also user friendly.