DESIGN SYSTEM AND SERVICES

TASK 1

DESIGN SYSTEM AND SERVICES

From this task we need to find the weakness or gap in system that we choose, so that we can amends or create new system from this weakness.

I choose emoticons or emoji. Why? Even though emoticons is a common system that everyone has already use to show their inner emotions and to communicate with people without talking to each other but there are still weakness in the systems where emoticon can be difficult to to interprets and they sometimes could be misunderstanding between users. My focus is in Sarawak.

Emoticons make us better communications. Human are nothing if not social. So much so that we experience significant physical and psychological problems without social interactions. Krystal D'costa of Scientific American says: " As social beings we require consistent and frequent of confirmation of our social placement. This confirmation is vital to the preservations of our network-we need to able gauge the state of our relationship with other."

Another research is made by researchers at Tokyo Denki University, Japan founds that the more graphic the emoticon, the more our brain responds to it. As the emoticon becomes less abstract(or more human like) the brain responds accordingly.

Picture 1: Effect of using graphic emoticons in human brains by researchers at Tokyo Denki University. Taken at: https://dq9ucdqjq6nrk.cloudfront.net/wp-content/uploads/2014/02/Yausa.jpg.

More graphics is the emoticon cause our brain to activate the temporal gyrus which is responsible for recalling biological motions. Humans understands emoticons to be emotional communications, which results of the activation of the right frontal gyrus as seen above.

There another weakness also in this system where elder couldn't communicate with the youngster because in Sarawak most elder couldn't read and with the advance technology that happen in our world they will be left out without modernization. Using emoticon would help them to communicate with the younger generation using symbol because it using images.

My ideas is to create a new emoji using Iban language and Iban motif because it is my language and I want to create something that help my ethnics to communicate with each other more and others races also can learn different language using this emoji.

 Picture 2: Iban motif of frog

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

20TH CENTURY DESIGN

In 20th Century Design, the first group project is about the applying and the usage of Cubism. Cubism is an art movement that created in 20th century. This movement is happen of the idea of paint everything in any perspectives. It either can be explore in multiple perspectives view or single point view.

Picture 1:

This is a example of Cubism Artwork, Nude Descending Staircase by Marcel Duchamp.

Then we are given task to create a short film that we learn from a movie, TIMECODE by Mike Figgis where he experiment the cubism in his film. So we decided to discuss about objects that we can see in many perspectives and single perspectives. In the end we decided to use laptop as our main point. From this point, our group make a brain storming of the different way of laptop usage whether in physical or conceptual/meaning.

Picture 2:

Our Brain storming of laptop

After the brain storming, we divided the usage of laptop in public and private, for the example is like the brand and Instagram can be look as a public view where everyone can look and E-mail and the usage it in office, school, college/university can be look as private. From this brain storming, we decided to use Instagram as our project, where we put picture that we put without editing where we can conclude from the word Insta/Instant that bring meaning of very short time and Instragram is the portmanteau of instant camera and telegram.

Picture 3:

The Topic of Instagram that we decided.

Then, we split the topic that we decided to do in the Instagram. We decided 6 topics of Travel, Sport, Transport, Food and Illness around us especially in Mantin. Then we make a lucky draw, to decided who take pictures about the topic. Mine is about transport in Mantin, because of my phone cannot support to do the video, so I take pictures only and post it in Instagram.

Subj: Digital Design
Task: Task 1: Create a Movie Poster

In this task, we need to pick one movie and create a poster, 12x18'' (vertical) complete with tag line, photo of actors and etc. We also can use the interesting plots/iconic character/symbolism/metaphor to identical the movie.

 So I pick 'MALEFICENT' the new movies created by DISNEY, starring Angelina Jolie, Elle Fanning, Sam Riley, Imelda Stauton, Sharlto Copley, Juno Temple and Lesley Manville.

This story is based from SLEEPING BEAUTY by portraying the antagonist character Maleficent. Maleficent is a strong and powerful fairy that leave in magical forest names Moors near the human kingdom. When she was a young girl, she fall in love with human, Stefan. After long time didn't see each other, Stefan betray her love to fulfill his ambitions to be king by cutting Maleficent wings after drugged her. Devastated, she crowned herself to be Queen of Moors with her companion Diaval, a black crow that can change to whatever shape she want.

Then Diaval inform her that King Stefan is hosting a party to christening her daughter, Princess Aurora and Maleficent crash into the party by cursing her that on her 17th birthday, she will prick her finger with spinning wheel and fall death like sleep but she offer a caveat after the king beg her, that the curse can be broken by true love kiss. The king afraid with Maleficent vengeance sent Aurora to live with three fairy.

Then, Maleficent taking care of the princess because of the negligence fairy, and Aurora call her Fairy Godmother.

Picture 1: The Original Poster

Then, I create new poster that minimal the plot using a symbol of spinning needle and a hand on the upper side with blood.

Picture 2: The poster that I created

The head of spinning needle resemble the whole of spinning wheel and the hand resemble the princess of that been curse and the blood resembles the she prick her hand on the spinning wheel. 

CRITICAL THINKING

Subj: Critical Thinking
Task: Task 1: Think Hard

In this task we are inform to learn about anatomy of alphabet and create by using A2 size of paper or card without any mark making (pen, pencil, paints and etc). We only allowed to die-cut, cut or fold to create full set of alphabets. Experiment using light, shadow or other color paper/card.

For this task I been experimenting using materials and shape that would help me to create the final projects about this task. For this task, I also need to find a word that resemble me and create the word in A2 size paper. After choosing word ADAPT, I try to create many example of alphabet in different shape and using different materials.

ADAPT : To adjust to new condition or change to become comfortable or try to fit in with the new environment.

ADAPT : Resembles me much, where I come from different environment and easily fit in or be comfortable with new environment.

First I try to using cut and fold but it turn out to be messy and unorganized. I try it in color paper. Then I try by using a symbol type of alphabet by using a rectangle shape but it look strange.

Picture 1: Cut and Fold

Picture 2 : Using a different shape

 Second I try to cut it using triangle shape but didn't die cut it and fold to make it like 3D but I think it wasting a time. I make the small triangle in a many shape ruler and a cutter using different materials this time that is plastic cover.

Picture 3: Using triangle shape and different material

Lastly, I create a word using triangle shape. People usually using triangle to create a symbol but never a words or sentences. So I try using the triangle to creating the word using cut technique after seeing a UP symbol in the boxes. it turn out to be this.

Picture 4: Using a Triangle to creating a word.

But I face a problem in spacing and  the adjustment between the words and the paper size. Then, tutor help to create the ADAPT word using the correct spacing and the adjustment. Then after it finish, I decorate it with water color using spatter technique with different colors in each alphabets and stroke the color at the edge of the alphabets.

Picture 5: The Final Project and Idea Development That I choose.

OVERVIEW

Why I create this word using triangle shape? I always see people using triangle in symbolizing the direction like UP, DOWN, LEFT, RIGHT and etc but people never use triangle to create a word. So I use this shape to create the word ADAPT, to try to adapting it in my chosen word. That why this shape and symbol is my references in solving this task. 

METHOD OF INVESTIGATION

Subj: Method of investigation
Task 1: Method of Investigation Peer Reviews

Yesterday we doing presentation about Method of Investigation. This is about the peer reviews in our presentation yesterday that I get.

1. Satish = Research Methodolgy and Quanti/Quali

2. Budu = Ethnography and literature Review

3. Alexis/Me = Formative/Summative Research and Observational Research

4. Jeffry = Demographic

5. Hatmi = Psycho graphic
6. Aisyah = Primary/Secondary Research and Visual Anthropology

In Research Methodology and Quantity/Quality Research , I understand that research methodology is important in people life especially in field that need a references. Research methodology is a process of collecting information and data for purpose of making business decision. The methodology may include in publication, interview, survey and etc.

In Quality and Quantity is something that use in researching building proportion and something that countable and not countable but as a designer we always use non countable method in doing research.

For Ethnography and Literature review is, Ethnography is a research that need in observation and interacting with the people in that place. as a example, how to go green, we need to travel to know what other countries do to dispose their rubbish.

In Literature Reviews, is we research what other people has research and take it as a reference. For an example, if we decided a research about Malaysia, so we need to read every book that has research about Malaysia.

Formative and Summative research is a main research method. Formative is something that countable and summative is something that not countable. The method that in formative research is literature Review, Visual Anthropology, Surveys and Questionnaires, Demographic and etc. Method that in Summative Research is Observation, Web analytic, Interviews and etc.

Observational research is a research that conduct by observing a certain behavior in the subject without influencing the by interacting. observation can be conduct by going out and observe the subject from far or by an artificial lab but it has a disadvantage especially when using hidden camera that interrupt with subject personal life.

Demographic is a research that conduct by observing the product that they made according to gender, age, income, size, social class and etc.

Psycho graphic is research that conduct by observing personalities, opinions, attitudes, interest and etc. It's different from demographic research.

For the last peer reviews is about primary and Secondary Research. Primary research is something that we conduct as our original research and sources without other people influences. Secondary Research is a research that conduct after primary research by referencing other research about the same subject.

Visual Anthropology is a research about a study of human aspect and behavior that will be keep in picture, video and film.

This is my power point for the method of investigation task.
OBSERVATIONAL RESEARCH
FORMATIVE AND SUMMATIVE RESEARCH

CRITICAL THINKING

Subj: Critical Thinking

Task 1: Anatomy of Typography

Yesterday we are learning about ANATOMY OF TYPOGRAPHY in group work by brain storming. This is what we get.

Anatomy of Typography is a study of structure of typeface or describing graphic elements that make up printed letters in typeface. Origin of typography is from Greek root from the words TYPOS= Impressions and GRAPHIA= Writing Anatomy of Typography is also about the learning about the structure of typeface such as ear, hand, arm and shoulder. Each part of this structure in typo is important in each letters just like the human body structure.

There are many types of anatomy of typography.

i. Counter

ii. Diacritics

iii. Glyph

iv. Initial

v. Kerning

vi. Letter-Spacing

vii. Ligature

viii. Subscript and Superscript

x. Swash

xi. Text Figures

xii. Titles

The elements in anatomy :

I. MEASUREMENT :

    i. mean line/x-height

   ii. cap line

  iii. ascent line

  iv. descent line

   v. bare line

II. PART: Consist 9 basis element : Ascender, Descender, Serif, San-Serif, Spur, Stem, Crossbar, Counter and Ligature.

Anatomy of Typography also has character such as Bold, Italic, Underline  and etc.

Typography also contain the readability and legibility. Readability is a primary concern of the typographer and information designer. Legibility is primary the concern of the typeface designer, to ensure that each character or glyph is distinguishable from other characters in font.   

This our brain storming and presentation photo

METHOD OF INVESTIGATION

Subj: Method of Investigation

Task 1: Research Terminologies

1: Formative Research.

   Meaning: Formative is something that we cannot count such as picture or visual. That mean formative research is the basis for developing effective strategies and implementing design. It is a research that focus on details of content or performance. It is a contrast with summative research.

2: Summative Research

   Meaning: Summative is something that we can count such as web analytic, data count and etc. Summative research is evaluation technique in instructional design. It also use to identify any areas of weakness. Method that been use in summative research is 

  i. Questionnaires

 ii. Surveys

iii. Interviews

iv. Observations

 v. Testing

vi. Project

3. Observational Research

   Meaning: Observational research is a method from summative research that conduct by writing a data after conducting a test or observational data. For example, a researcher conduct a test in logo design.

Task 1: Academic Skill

Task 1: Reflective practice : Student are required to write an essay about individual creative practice and plagiarism with supporting material. The essay should be 750 words.

     The individual creative practice is something that been made by the individual itself by theirs own skill and idea. this can be seen or approve by their own sketchbook that show their own idea and the original sketching. The individual creative play an important in publishing the idea to others and to interpret the message to the audience and show the process to make some of the artwork. 

    Practice is part of improving and implore the skill and to explore the work that been made. It also help us by creating our own  design and not by taking the original idea from any of other person. I also believe that by practicing our own skill and design we can improve and then explore our own artwork. I also believe by individual creative we can decide which one that we need to improve and explore on our own.

     Plagiarism is same with copying other people work. Copying other people may lead to pure plagiarism and this will create so much problem in other artwork and our own design and skill. Plagiarism will lead to dishonest working skill and if this is happen continuously it will lead to disaster in our life. To avoid plagiarism we must has our own idea and keep it in your safe book like your work diary.

     Copying other people work will not helping to improve your skill and your artwork will not acknowledge by other because you are actually taking other people idea and design. By plagiarizing cannot interpret and elaborate the idea to other people because doesn't know what their doing because they only copying from other people. Duplicating is also known as plagiarism. For example, duplicating any note in the internet, book, magazine, journal or any other material can give credit to the authority to arrest in term of drastic plagiarism.

   In conclusion, the individual creative practice must be in the individual itself to avoid plagiarism in idea, design and artwork. This also help them to improvise, explore,interpret and elaborate teir own artwork to the audience.

Task 1 ( Writing for Designer)

Task 1 : Describe 10 peoples that you know.

1. Priscilla Carol Law = She is like a pigeon. A little bit shy but not easy to approach.

2. Mohd. Hatmi = He is like ocean waves. He just flow around the people.

3. Low Pei En = She is like sun. so energetic and fun every day and night.

4. Elci Amika = She is like cat. she like to lay and sleep at afternoon.

5. Mathew Changkuk = He is like puppy. Can be a little funny and energetic and active.

6. Zippora = She is like an open world. She accept people and befriend with them.

7. Lily Yong = She is like a flower. Easy to bloom a smile even she is tired.

8. Dorothy = She is like kitten. Playful but easy to strike with her claws.

9. Azlina = She is like a big black holes. she cannot easily to read about.

10. Eva = She like a grass. She just sway around and doesn't stand straight.