Wednesday, 31 August 2016

Experiential Design


Title        : Experiential Design
Lecturer  : Shamsul Hamimi



Week 1
During week 1, we have assign some task from Mr Shamsul. He asked us to open up a blog page and start research on what is Human Computer Interaction(HCI) by updating in our blog.

So, based on SearchSoftwareQuality, it stated that it was a study on how people have an interaction with computers. However, due to HCI are growing rapidly, there are few factors that the media designer or computer engineering have to take some consideration when the people have an interaction with computers or handheld devices, because different people may have different form of conception about their interaction and they have different ways of learning for their knowledge and skills. So, in order to have an effective user interface design, the computer engineering or media interface designer have to design the certain interface design and the HCI feature are ease to use to the user.

Week 2
We have a lecture on What is HCI with Mr Shamsul. He divide us into 2 groups and we based on our research on week 1 and present what we had understand from Human Computer Interaction in class. 

Week 3
In this week, Mr Shamsul are asking each of us to come out an idea of an unorthodox application. I had listed few idea to Mr Shamsul and he had chosen one of the idea which is finding the nearest clinic, hospital and pharmacy during travel. With this idea, the unorthodox feature that I implement in this application is the user are able to scan their personal information through their own personal unique QR code which had implement in the apps itself. 

Beside that, the user are able to select different payment selection in this apps which pay by insurance or by online payment. Moreover, the translation feature are also implement in this application. The reason of having the translation feature, is to help the user to translate their  personal information which had been input in the apps itself into local language from the country, so that it would ease the user and the staff from the clinic, hospital and pharmacy in communicate each other when the user are request for registration.

Proposal that I had shown to Mr Shamsul in this week:-

Problem Statement

Difficulties getting the nearest treatment when travel.

Purpose

  • To ease everyone during travel

  • The apps eventually show the nearest clinic or pharmacy to seek for immediate treatment.

Objective
Help the traveller to get to the nearest clinic or pharmacy.

Target Audience
Traveller and Society

Features

  • e-card system will implement in neno apps which help settle any billing amount. (acts as like the medical card)

  • Will use GPS to navigate the destination.

  • QR code will be used for transaction and profile details purpose.
    (automatically your profile will appear and it will auto translate based on the country).
  • User able to choose the insurance company details or banking information.



Technology Used



  • GPS
  • QR code
  • Translation
  • Online- payment



Week 4-5

Once my idea get approve by Mr Shamsul, and I continue my further step which I start sketch out the layout design of my design, naming the apps, design the logo, font used and colour used for my apps.



Sketches of Layout design






Logo 
Name : Neno

Inspired : inspired by the sound of ambulance, and it do provide the sense of emergency feel to the user.

Design :
Logo design for Neno apps

I had provide 2 different logo design for my neon apps and I shown to Mr Shamsul to choose which one are more suitable for my mobile apps. And he had decided the right one for my NENO apps logo.

Font Used
  • Avenir Font Family 
  • Lato Font Family
The reason I had chosen this 2 font because they are in the category of san serif, which it ease the user to read compare to serif font. Beside that, this 2 font family are always used in commercial purpose.


Colour Used
3728e6a52d1409e062fa1d5129707f84.jpgacdd1f1e54e98818f166878ccd803697.jpg
The colour selection that shown in the above  will be used in the NENO apps, but I will choose 3-4 colour. The reason that I had chosen this wide selection of green to yellow is because it represent the colour of illness.

Week 6 : Preparation Presentation
In this week, I had prepare our proposal presentation slide about our own unorthodox application. So I had finished up with my presentation slide which had cover about the problem statement, purpose of having this apps, objective, target audience, font use, technology use, downtime failure, colour used, flow chart and references. 

Week 7 : Proposal Presentation
We had a presentation for our unorthodox application, so I had present my own NENO apps in the class which cover all the information needed about this NENO apps. 

The link below are the presentation slide that I had created and present it in this week.


Week 8 : Wireframe
After the presentation, I start create wireframe based on the sketches which include of the splash screen, main function page and navigation page. The image below show the wireframe that I had create for my NENO apps.

Splash Screen: 
splash1.png    splash2.png
Main Feature :
wireframe1.png   wireframe2.png
wireframe3.png
Navigation page: 
wireframe4.png  wireframe5.png
wireframe7.png  wireframe6.png 
wireframe8.png

Usability and Mobile Application II

TITLE : DIY

Category: Online Magazine
Title Magazine : DIY
Target Audience : Teenagers to adults
Age ranges: 16 and above
Lecturer: Razif Mohammad
http://themerrythought.com/category/diy/


Week 1:

In week 1, we have been assigned into 4 person in a group which is Ching Ling (Group Leader), Sam and Shin KyeongJu and our task is to create an online magazine. Before we have our brainstorming session, there are few task that our lecturer had assigned us to finish it in this week which is:

  • Create a blog site and sent our blog link to our lecturer
  • Discuss with our group member and decide what type of magazine we want to do.
  • Decide a magazine title and 3 articles in magazine


We have a brainstorming session with each other to discuss which type of online magazine we can do. And soon we had finalised to have a crafting magazine which can be known as Do It Yourself (DIY). Beside that, we also discuss about the target audience for our magazine range will be from teenagers to adults and the age range are approximately in the range of 16 to 50 and above.


However, we haven't finalise the field of category and articles in DIY in in first 3 days, but then we have chosen few category and articles which might be chosen for our DIY magazine. The list below show the list of category and articles which might be chosen as our DIY magazine:-

Category

  • Furniture
  • Home Decoration
  • Accessories
  • Gardening
  • Gifts
  • Fabrics 

Articles:

  • Interview session with expert in crafting or handmade.
  • Tutorial
  • Craft supply(where to get the material? )
  • Editors pick
  • Event (Competition, promotion, exhibition and etc..)
  • Printing service

Reference for DIY categories 







Reference for Magazine cover design






Day 4 to 5, we have finalise our title of magazine which is called DIY and the category that we chosen is home decoration. The reason why we choose home decoration category is because it's suitable for unisex. While for the article of our magazine we choose these 3 :
  • Interview session with expert in crafting or handmade.
  • Tutorial
  • Craft supply
_________________________________________________________________________

Week 2

On 5th September, we have another discussion on our cover design and we start breaking down our content element for each of our articles. At first, we was discuss about cover design. And when it come to DIY, the first thought that come to my mind was a pair of scissors. So we decide to come up with all the craft materials which arrange nicely. So, in order to make the cover of our DIY magazine into much more interesting, we planned to use the stop motion technique in the craft material that listed in our cover magazine. The reason that we choose stop motion technique is because it was suitable in the category of  art and craft. 

Sketches for our cover design and detail break down for our articles

Next, we also try to finalise and break down our content of our articles. Although we had finalise the 3 articles, but then Mr razif had give us some advice on having another extra 1 or 2 articles as our back up plan if any one of them doesn't work well. Here are the list that we have finalise for our articles:-
  • Interview Session
  • Tutorial
  • Editor's Pick(Buying Guideline)
  • Craft Supply
  • Printing Service
  • Event


In addition, we also discuss on what are the typography that should be apply in our DIY e-magazine. So each of us was decide to research on which typography should use and then we share the information in google drive with each other. 

So, based on my research for typography, I plan to have 2 type of typography in our magazine, which is serif and san serif type of typography. For serif type of typography, I would like to apply it as our title of magazine in our cover page design while for the content of the magazine, I would like to have san serif type pf typeface. The reason that I chosen serif type of typeface is because it is a functional choice and it draw the reader attention based on the stroke at the end point of the typeface. Beside that, it always convey a sense of traditionalism and classical style appealing. However, for the san serif typeface, the reason that I chose it was because it does ease the reader to read and it won't give so much pressure compare to serif typeface.

The typeface that I had chosen for our DIY magazine:-

Serif Typeface : Effloresce
Apply at : Title of our magazine


Effloresce - Typeface for the title of our magazine


Serif Typeface : Sexsmith
Apply at : Title of our magazine


Sexsmith -  Typeface for the title of our magazine




San serif Typeface : Avenir
Apply at : Content of our magazine

Avenir - Typeface for the content of our magazine  


San serif Typeface : Roboto
Apply at : Content of our magazine

Roboto - Typeface for the content of our magazine  

Beside the typeface that I had did for the research, Ching Lin, Sam and Kyeong Ju also did some of the typeface. Here are a series of font they did for the research for the typeface. So that we can use max 3 type of typeface in our DIY magazine.

Adamas Regular

Amatic SC regular

Archistico Bold

Cabin Sketch 

Helvetica

LittleLord

Metropolis

Rasanskool

Rotulona

Sketch Block


After a series of different typeface we had decide to have Metropolis and Effloresce. The reason to have 2 different type of typeface is because we haven't finalise the color palette. So once we were done with the prototype, we will try to apply this 2 and see which one of them give them best outcome for our cover page of our book. Moreover, the content of our e-magazine, we decide to have the family of Helvetica and Avenir font family.  


Breakdown content of our Articles



Interview Session
Based on what we have discuss earlier for this part of interview session, we were plan to featuring some expert in craft by have some interview session with him or her. So, I had found 1 expert who was master in clay. His name is Khing Chan and he is from Penang. 




Tutorial
Tutorial will be provided in our magazine. We had plan to provide maximum 3 different type of home decoration tutorial with video and picture provided to the reader. 

Editor's Pick(Buying Guideline)
The editor's pick will be basically some recommendation from the editors of the craft material. For example, where to get the cheapest craft materials, best quality of craft materials, famous brand of craft tools, pricing and others. These articles will basically cover the material for entire of DIY category. Due to it's basically are discuss about the material, so to avoid any confusion, we will highlight that this material are suite in which category of DIY. 

Craft Supply
This articles probably will provide a series of place to get all the material from the nearest craft supply with the address. For example : MR DIY, Popular, Kinokuniya and others. 

Printing Service
This session will list down the shop which provide printing and binding service like what are the type of printing service that had provided from the shop. This will come along with the address and the contact from each of the particular printing service shop. Beside that, we will list down what kind of printing service they have provided from their shop.

Event
For the Event, in our list of articles, it was basically list down the upcoming event that hosting for a DIY competition(any category), exhibition, wholesales crafting material and others will be show up in this category of the articles.

Link provided : http://www.instructables.com/contest/


Competition



Referencing
21 Stunning Serif Fonts for the Modern Website. 2016. 21 Stunning Serif Fonts for the Modern Website. [ONLINE] Available at: http://www.dtelepathy.com/blog/design/21-stunning-serif-fonts-websites. [Accessed 11 September 2016].


Week 3
On 14th September, we get to have a consultation with Mr Razif. Ching Lin, KyeongJu and me show our layout design to Mr Razif. The reason that we show him our layout design is because we want to get some professional review from e-magazine. Here are the sketches of layout design from me, Ching lin and Kyeong ju.



Sketches from Kyeong Ju

Sketches from Ching Lin



Sketches from me

After showing our sketches of our layout design to Mr Razif, he had comment on my sketches. He give us an idea of by listing down our articles of editor pick in tutorial section. The reason is to help the reader have a nice flow on reading it. So, once the reader finish the DIY tutorial, if they were interest on the products, they can scroll down and have a look on where to get the material from Buying guideline section. Beside that, we also decide to use my sketches of layout design for our e-magazine.

Furthermore, we also propose an idea of stop-motion feature for our cover design to Mr Razif. The Image below show the cover design of our e-magazine with the feature of stop-motion feature. In our cover design, we plan to use an idea of an empty glass with star. This idea was actually come up from Phang Rong jin. So the basic flow of our stop-motion will be start with an empty glass without any text at background, then the next motion of it will be a star fill up the empty glass until it full, then the glass jar will shown the movement of shake with some simple text such as "Touch me", so that the reader are able to have an interaction with our e-magazine. After the reader touch the screen, the jar will explode with full of star. At the same time, the title of our magazine and the text will be appear as our background.
Cover design Idea


In addition, Mr Razif also suggest us to change our original title of our magazine which is DIY. He comment that our title of our magazine are too common, so he was asking us to come up something new and creative to our magazine so that it would give the reader have a new fresh look of DIY magazine. After receiving the comment from Mr Razif for our title name of our magazine, we have another discussion by distributing few task among the group. So, Sam and Kyeong Ju were figuring about the title of our cover magazine; while me and Ching Lin were deciding which tutorial we should apply it in our magazine.

Sam and Kyeongju propose few name for our title of our magazine. The listing below show that the naming of out title magazine from Sam and Kyeongju:-

Sam:
1. Meringue
2. Pavlova

Reason:
"It give a delightful, tranquility and harmony feel."
"we want the reader to feel fresh, pleasant and uplifting when reading a diy magazine, same like seeing and eating a dessert"

KyeongJu:
1. Atelier
2. My worktable

Reason:
"It give a feeling that the magazine can be the work space of people"

After the discussion, we decide to use "Atelier" as our title of our e-magazine. Next, we also confirm our articles after the consultation with Mr razif. And in a mean time, we had plan to have 4 articles which is
  • Interview session
  • Tutorial + Buying Guideline
  • Craft Supply (Place of interest)
  • Event.
(The breakdown articles can refer to Week 2.)

On the other side, Me and Ching Lin have pick 3 products that we gonna to DIY it ourselves in tutorial section. The image below show that those 3 DIY products that we selected in home decoration category.


Wall decoration made from Toilet paper Rolls


Home decoration made from balloon and yarn

Vase decoration made from a steel can and rope

Once we finalise our 3 products that we gonna to DIY it ourselves, Ching Lin and me start to go get the ingredients from IPC. We brought a yarn and a rope. Moreover, we also collect lot the empty tissue rolls, cans and glasses during this week.

Can

Glass

Empty tissue Rolls

Furthermore, I personally did a timeline planning and task for each member in our group. The reason for having a timeline and task planning is that each of us can keep tracking on our work in weeks and we can do our part separately in future. The image below show the timeline planning with a gantt chart and task activity will be shown in a table form.

Timeline planning in Gantt Chart

Task activity 






Week 4
This week we have to present our proposal to Mr Razif. So, we have prepare all the slide in Google drive and the content of our slide will be include of the magazine title, reason of why we use Atelier as our magazine title, table content, breaking down our articles, cover design, layout design, editorial board, back cover design splash screen and what kind of effect or effect that will be implement in our Atelier e-magazine.

Here is the link for our presentation slide:

After we have done our presentation, we do receive few comment from Mr Razif which he ask us to come out a 
  • New title name for out Tutorial and guideline. 
  • Have some change for our editorial board.
  • Come out with a back cover layout design.
Once we received the comment, we start to have a discussion for come out a name for replacing our "Tutorial & Buying guideline". So we had come out "Your atelier" as our title for our articles of "Tutorial & Buying guideline", while for the subtitle itself, we use back the same name in our article which is  "Tutorial and Buying guideline ".

Beside that, we also updated our layout design into wirefrhame. Kyeong Ju, doing the wireframe for our Atelier magazine while me and Ching Lin were preparing for the content of the slide. The image below will be show the wireframe of our Atelier magazine.


Wireframe of Table Content

Wireframe of interview slash screen

Wireframe of interview-feauturing interviewee

Wireframe of interview - Question

Wireframe of interview - product create by the interviewee

Wireframe of Event splash screen

Wireframe of Event - Sales

Wireframe for event

Wireframe for tutorial splash screen


Wireframe for tutorial - instruction + buying guideline with hover effect
when user click on the product

Wireframe for Craft Supplies splash screen

Wireframe for craft supply

Wireframe for craft supply


Wireframe of Editorial Board

Wireframe of our Back Cover Design





References 

Pinterest. 2016. 25 DIY Gifts You Can Make in Under an Hour | Easy Diy Crafts, DIY gifts and DIY and home improvement. [ONLINE] Available at: https://www.pinterest.com/pin/503488433322369430/. [Accessed 16 September 2016].
Pinterest. 2016. Don’t Throw Out Those Paper Towel and Toilet Paper Rolls! Here Are 17 Brilliant Ways to Reuse Them! | Paper Towels and Toilet Paper Rolls. [ONLINE] Available at: https://www.pinterest.com/pin/420734790171122093/. [Accessed 16 September 2016].


Pinterest. 2016. 20 DIY Yarn Projects for this Winter | Yarn Ball, Yarns and Yarn Crafts. [ONLINE] Available at: https://www.pinterest.com/pin/406379566359156763/. [Accessed 16 September 2016].


Week 5
In this week, we have a video shooting for our 3 tutorial and cover design which is on 29th September. So before the shooting day, Me and Ching Lin start to do the prototype of our tutorial which is tissue roll, yarn ball and vase. The reason that we start to do with the prototype first is to save our time on shooting, so that we can replace the finishing  prototype to the final product that we use to film or shot on that day itself. 

Prototype for DIY empty Tissue roll 

Material need: Empty tissue rolls, Ruler, Blade, White Glue, Paper Clip, White Spray


        


Prototype for DIY Yarn ball

Material need: Balloon, Yarn, White glue, Brush, Cup


Prototype for DIY Vase with Wine glass & Rope

Material need: Wine glass/Glass container, Rope, Hot glue gun



While me and Ching Lin were busy with our prototype itself, both of us also discuss about our storyboard for our 3 tutorials and 1 cover design. And I had assigned each of us do one storyboard for tutorial and Cover design. 

So for me and Ching Lin, we share one storyboard which is for the tutorial 1(DIY empty tissue rolls). So, I plan out with our storyboard in text, and Ching Lin draw out the storyboard digitally. While for Sam, he will be doing the storyboard of Vase tutorial and cover design. On the other side, daisy were doing the storyboard for the yarn ball.

Storyboard in Text (My part)

Scene 1: End Products of the things
Scene 2: Showing the material.
Scene 3: Measure 2cm on top of the empty tissue rolls, draw the line and cut.
Scene 4: Flatten the tissues roll that had cut into pieces.
Scene 5: Show the amount of pieces of the cutted tissue roll. (Maybe 20??)
Scene 6: Arrange the position with the pieces of tissues rolls to get the final shape of the products.
Scene 7: Glue it (Show one- 2 pieces)
Scene 8: Glue it (Connect with another pieces in order to form the shape)
Scene 9: Glue the last pieces of the tissue rolls to the almost final stage of the products.
Scene 10: Introduce a white spray or any spay(extra), and start spray all over.
Scene 11: Add an accessories on top of the final product. (Flower)
Scene 12: Hang the final product on the wall. (Extra scene)

Storyboard in Digital drawing (Ching Lin Part)



Storyboard of Cover Design in Digital Drawing (Sam)

Material Used: Empty glass, paper star
Animation Used : Stop-motion




Storyboard of Vase tutorial in Digital Drawing

Material Used: Empty glass/Wine Glass, hot glue gun, rope

Storyboard of Yarn ball in Digital Drawing (KyeongJu)

Material Used: Yarn, ballon, white glue, brush




Week 6 & 7
In this 2 weeks, we had start to do our prototype. So, I had assigned the task for doing the prototype according based on the Task activity table. 


So for my part, I had made some little changes at the design part of my prototyping compare to our wireframe, due to because the theme and the products of the clay that created by Mr Khing are different based on our original concept of minimalistic design. The Image below will show the part that I have done for my splash screen of our cover Interview, Content of Interview and Back cover page of my prototype.

Splash Page:


Interview Page:

Page 1 : Introduction of Mr Khing


Page 2 : Survey Question (Interview)

Page 3 : Mr Khing Artwork 

Back Cover :



Week 8 : Presentation of Prototype
In this week, we have a presentation for our prototype with Mr Razif. So all our file which was created from Ai and Ps file have to convert into MIB file format so that we are able to present it through iPad. However, we also received few comment and suggestion from Mr Razif. So for my part, he had commented about the inconsistency design which some part are lack of somethings and the design element that I had applied on that page doesn't have any related with the content. Beside that, he commented that my part lack of page number for the reader.

Week 9: Fix prototype
After received the comment and suggestion from Mr Razif, I had make some few changes on my prototyping page-Interview. I had added on with the page number and fixed few part of my design which will show be shown below of the following picture:-




Week 10: Editing Tutorial-Video & Animate Splash Screen(Interview) in Ae
This week, I had done video editing with one of our tutorial video - DIY yarn ball and I also  animate my interview splash screen in After Effect.

Tutorial Video Editing - Yarn ball



Interview Splash Screen editing :

Week 11-14
In this weeks, I had done the production of our magazine with different software such as InDesign, Edge Animate and After Effect. The part which I had done in our Atelier Magazine are the entire category of interview part, every splash page which include event, craft supply and tutorial splash page and back cover design. Beside that, I also helped on rendering the video from craft supply part which had done by Ching Lin due to the animation can't load in mp4 format when I fast preview to the iPad, so I had help Ching Lin on export her file format to m4v file.

InDesign production for interview part and all the splash screen:



Production in Indesign-Interview part (pg1-3)

Production in Indesign- BackCover

Production in Indesign-Interview Splash

Production in Indesign-Event Splash

Production in Indesign-Tutorial Splash

Production in Indesign-Craft Supply Splash


Final outcome of splash screen:




In addition, Daisy and me are compiling with all the other part from our Atelier Magazine. She was doing the template of the table content for our Atelier Magazine while I was link up all the file together with jump link.