nothingtheless

wireframe

2011-01-19T05:52:00.002+08:00

This is the homepage for Papparich Kopitiam website.

The inner page for Papparich Kopitiam website.

Moodboard of Papparich kopitiam's website redesign

2011-01-19T05:39:00.002+08:00

Strategic brief

2011-01-19T05:15:00.002+08:00

Project Definition

-To redesign the papparich kopitiam's website by changing a better interface design, good navigation button and well-arranged info.

Current Site’s Analysis Goals

-Have a better interface design which different style from the competitors.
-Better grid system and info hierarchy.
-Better navigation placement and treatment on it.
-Well arrangement of info.

Client’s Analysis

-A kopitiam with the concept of traditional classic malaysian style.
-Selling coffee and asian delicacies at affordable prices yet the quality is the main factor to attract the customer.
-Embodying the classical feel that you have experienced in the small kopitiam back in the oldies.

Short & Long-term Site Goals

-Letting people to detail info and newest news of the shop.
-Letting people to know their specialties and other food as well.
-Increasing customer by letting them know the nearest location around them.

Target Audience

-People from 19 to 30.

Competitor Analysis

-Better interface design and navigation.
-Info well-arranged.
-Good hierarchy in typo and info.
-Better grid system.

Idea & Concept Implementation

-Using the corporate identity color of papparich which is green to combine with earth color like brown in order to create a harmony and friendly feel for the viewer. Papparich is holding the concept of tradisional malaysian style, so flora pattern like batik will be added in. Follow the graphic from the previous website, the style of the graphic will be used as the background interface and info graphic design. Creating a better navigation and place them at the correct place so that the viewer won't be confused. The specialties will be on the homepage since it is the main product of papparich.

tutorials url & html library

2011-01-09T22:28:00.002+08:00

Some of the photoshop website design tutorials I found.

http://psd.tutsplus.com/tutorials/interface-tutorials/how-to-create-a-grunge-web-design-in-photoshop/

http://www.talk-mania.com/web-layouts/40144-interior-design-layout.html

http://www.hv-designs.co.uk/2008/10/03/personal-portfolio-layout-2/

http://www.viget.com/inspire/how-to-make-the-viget-inspire-background/

Some of the html script library I found.
1. Photo Slider
2. Picture Rollover
3. Image Preview
4. Switching Images

analysis of beautiful commercial websites

2011-01-09T21:21:00.002+08:00

Fo further research, i did find some beautiful and interesting commercial website. These are the screenshots and analysis of them.

Tokyo Illustrator Society

analysis :

- simple yet neat grid system.

- interesting navigation button.

- simple yet harmony and attractive color combination.

- clear typo hierarchy.

Nike Snowboarding

analysis :

- nice and clear typo hierarchy.

- simple and clear grid system.

- nice and interesting image used.

Marie Catrib's

analysis :

- nice color combination.

- beautiful graphic used.

- good and pretty typo hierarchy.

- well organized and labeled.

Cosmic Soda

analysis :

- loud and interesting color used.

- good info graphic used.

- neat and good grid system.

- clear typo hierachy.

analysis of competitor's website

2011-01-09T15:55:00.005+08:00

I have found some kopitiam which are similar Papparich that sell coffee and asian delicacies. And also did the analysis of their website.

Pak Hailam Kopitiam

analysis :

- grid system is not strong but is clear.

- basic typo hierarchy but the info is still quite chunky.

- the navigation button is not obvious and no good treatment on them.

- NO REAL TEXT.

Pak Li Kopitiam

analysis :

- weak grid system.

- the flash for logo seems useless.

- weak typo hierarchy.

- navigation button quite okay.

- interface wise still okay and can be better.

Oldtown Kopitiam

analysis :

- good grid system.

- consistent.

- nice transition and flash.

- good typo hierarchy.

- nice interface design.

- NO REAL TEXT.

Hailam Kopitiam

analysis :

- well organised.

- basic and clear typo hierarchy.

- nice banner but the interface is same for evey pages, should have different background.

- quite user friendly.

- nice grid system.

analysis of papparich kopitiam website

2011-01-09T15:33:00.002+08:00

The client website that I am redesigning is Papparich kopitiam. Papparich kopitian is a coffee shop with the concept of traditional classic malaysian style. They are selling coffee and asian delicacies at affordable prices yet the quality is the main factor to attract the customer. The shop is embodying the classical feel that you have experienced in the small kopitiam back in the oldies.

Analysis of the website :

- weak grid system.

- navigation button bar is at the bottom which the viewer might can't find them.

- plain color background made the website seems boring and unfinished.

- lack of consistency for every page.

- weak typo hierarchy.

- not well-organised.

- weak interface design.

- not user friendly, viewer have to refocus when proceed to another page.

gantt chart & site map

2011-01-06T23:13:00.003+08:00

This is gantt chart for commercial website redesign for papparich kopitiam.

This is the site map for commercial website redesign for papparich kopitiam. Basically the original site map for the previous map is not well arranged while some of the section could be categorized under same thing. So this new site map will be more organized.

Sitemap of how to be the 21st century youngster

2010-10-08T02:10:00.003+08:00

Moodboard of how to be the 21st century young generation

2010-09-24T04:56:00.001+08:00

My 1st ever mood board. :D

tutorial sites

2010-09-16T23:54:00.003+08:00

AI tutorial sites

noupe AI tutorial

layersmagazine AI tutorial

spoongraphics AI tutorial

abduzeedo

tutsplus PS tutorial

PS tutorial sites

noupe PS tutorial

layersmagazine PS tutorial

spoongraphics PS tutorial

abduzeedo PS tutorial

tutsplus PS tutorial

How to..

2010-09-12T16:41:00.002+08:00

1. How to spend money?

Who am I: consultant

Who are them: poor money management person

What for: create awareness on spending the money wisely

1st Task: decide to buy or not

2nd Task: know that price does matter

3rd Task: ignore your own desire

Outcome: have extra money and saving

Showcase: gallery

2. How to be a 21st century young generation?

Who am I: 21st century youngster

Who are them: young generation

What for: updating with info to be a better person

1st Task: know what happened.

2nd Task: know the language.

3rd Task: know the people.

Outcome: having no problem communicate with each other

Showcase: gallery

3. How to have fun as a kid?

Who am I: happy fellow

Who are them: grown up people

What for: recall childhood memory and happiness

1st Task: wear childlike outfit

2nd Task: find the snack that always be eaten in childhood

3rd Task: talk and act like a kid

4rd Task: get more friends to join you for that day

Outcome: having the fun like a kid back then

Showcase: gallery

Interesting websites

2010-09-12T11:56:00.003+08:00

http://danielleyva.com/#

http://bulletpr.co.uk/

http://www.danviv.net/

http://www.digitalmash.com/

http://www.davorvaneijk.com/

http://www.bootb.com/en/

http://www.stopchildlabour.eu/africatour2008/

Photo editing

2010-02-21T23:28:00.000+08:00

[ This is the spring photo which edited by me. ]

[ Before ]

[ After ]

For my own photo editing, I made the original photo become a instax mini polaroid photo. The color is adjusted to be more vintage. A fingerprint is 'brushed' onto the photo to enhance the feeling.

room sweet room

2010-02-11T05:46:00.005+08:00

Photos above are what i have done for the 1st project for perspective studies. It was an project of ideal room in one point perspective .

Top view, front evaluation and side evaluation must be done before hand. Next, start to draw out the scale and construction lines for everything. This can be considered as the hardest part which mostly of us did it wrong for the 1st time. Lastly, trace the construction lines out on a whole new paper and refine it with proper furniture.

" Stefie, did you shade your room?", I asked.
" I think that is unnecessary and somemore it might makes your artwork dirty.", Stefie answered.
" I 'll never do such annoying troublesome thing to suffer myself too. ", she continued.
" That is just an excuse lorr. Haha. ", I teased.
Stefie just replied me with her famous 'Wohohohohoho' .
That's why I just left my work in neat form without any shading.

But, this can't be the ideal room of mine after all. Because this is just another piece of rushing work which I finished it on the last minute. Well, simplicity makes the work nice. :P

'how to..' assignment

2010-02-10T07:58:00.000+08:00

Well, this is what done by my groupmates and me for the 'How to..' assignment for Visual Communication. In order to complete this assignment, we actually have to draw out or snap down steps to instruct people how to do something. For our group, we decided to teach people how to insert the film into your manual camera since three of us also get involved with lomography. We snap down every steps and then stick those photos onto antique black card which has been made into film strip shape. We made a container that looks like a film roll in the end to put in the film strip with photos. Tadah! It's ready for presentation then.

I'm very happy having Alvin and Audrey as my groupmates for Visual Communication. Hopefully we can corporate even better and do something more amazing for the final assignment. :)

User-testing evaluation

2010-02-02T13:16:00.003+08:00

First of all, I have to thank to everyone that helped me out with the user-testing of my icon design. *90 degree bow*

After the evaluation of the user-testing, I did some changes and enhancement to both set of icon design. Since majority thinks that the color combination is nice and not bad, I just made a little bit of change.

The weakness of my icon sets was some of the icons can't be recognized. But, I think this has been overcame after the changes.

The strength of my icon sets are the overall design and color combination. Majority is satisfied with those elements.

Finally, this assignment has come to an end. I really felt grateful that you all were willing to help me. :)

signage

2010-01-29T17:02:00.004+08:00

For the first visual communication assignment, a signage that related to environment-saving has to be created. What I did for this signage assignment is

asking people to use energy-saving light bulb.

Well, actually it is a rush work which I managed to finish it 2 hours before the class. I feel lucky since it is now chosen to be exhibited on next week. :)

flowchart

2010-01-28T10:01:00.003+08:00

1. Why do you want to use flowchart in your mobile interface design & screen interface design?

Flowchart is a way that can show the process of creating the design in a proper system. Through step by step, I can show out the functions of the design. I can identify the problem encountered. The solution can be found and enhancement can be done through the flow chart as well. This is the simplest logical way to get to the aim.

2. How will it help your user to meet the interactive goals?

First of all. the answer for flowchart is usually either 'yes' or 'no'. these simple yet concrete answer won't make the user confuse or hard to follow up the interaction. It is user-friendly while helping the user to understand the whole thing more easily.

user-testing on my icon sets

2010-01-27T00:11:00.005+08:00

The picture above is the final outcome of my vector icons and pixel icons. A user-testing has to carry out in order to improve those icons more. So, please feel free to complete the questionnaire and give comment on this. I will gladly accept everything. Thanks a lot.

Q0. What are you major in(no matter working or studying) ?
________________

Q1. What do you think the icons above are representing?
a. home, music, gallery
b. contact, music, gallery
c. home, contact, music
d. others...(please specify)

Q2. What do you feel about the color combination?
a. nice
b. not bad
c. under average
d. awful

Q3. Can the color combination brings out the vintage mood?
a. yes, obviously
b. yes, but not that much
c. no, not at all (please state the reason)

Q4. Which theme I used for my icons set?
a. cute
b. button
c. sewing
d. colorful

Q5. Do you feel that both sets of the icons look consistent?
a. yes
b. no (please state the reason)

Q6. Which icon(s) you think is/are harder to be recognized?
(Vector icon from left to right I, II,III)
(Pixel icon from left to right 1, 2, 3)
Please state the reason

Q7. Any other relevant comment regarding to my icons?
________________________________________

The answer of the questionnaire can be left at the comment. If you can't do so, you may leave at the chatbox as well. I feel thankful on your help. :)

Class studies

2010-01-18T23:58:00.000+08:00

It's already the third week for this semester. I have been exposed to things that I never get in touch before. Even for AI, I learned more skill to do vector design.

This the pixel buddy icon I did for my friend. He complained his skin color in the icon was too dark after all. :P

This the icon class practice I did in class. i never try to make an icon with so much details before. Learned how to manage gradient in order to get the effect.

Red stripe on my neck

2010-01-12T03:06:00.005+08:00

Mostly of my friends knew that I am a person that likes to take photos. By December of 2009, I receive a Canon 450D as my christmas present. Well, I'm still not familiar with all of those setting yet. Mr. Monitor-Albert, I know you do read this and you better teach me everything you know as fast as possible.

But, what I want share you all here is LOMOGRAPHY that I get in touch at the early middle of 2009. My first lomo camera is black slim devil from ultra wide & slim series. Here comes some photos snapped with it.

After a certain period, I have put my eyes on the black bird, fly camera and I got 1 which is in yellow color using the money I get from secondary school due to the good SPM result. Although using this camera requires some skills and not so easy, but I'm enjoy using it. Photos time.

These are just a part of photos that I took before. If you all wish to have look at the others, you can visit these links below which will lead you to my facebook account. I already arrange them by the kind of slide I used for shooting.
Black slim devil 1st try using normal film
1st EBX
Velvia
2nd EBX
Provia
BBF 1st try using normal film

My dear fellow classmates, you come to me if you wish to know more about lomography. I would love to share everything I know. Don't let the manual camera being whipped out. :)

Well, I usually purchase the camera from this site, Galagalastore.

10 things that describe me

2010-01-06T04:26:00.000+08:00

Now, I will review the 10 things that fit me well or suitable to describe me. Suppose *scratching head*...

I AM A SPEAKER.
- My voice is loud as I am speaking through a speaker. When I go to karaoke with friends, I can sing louder than those with mic on hand.

I AM A DUCK.
- My singing is sucks. I sing just like a duck quacking around.

I AM AN ANT.
- Well, I love most of the sweet things. Especially chocolate, ice-cream, cakes and lots more.

I AM A CAMERA.
- My eyes love to look at anywhere and everywhere(scenery, object, animal, people...) if there is free time. In fact, I'm bringing a camera with me all the time.

I AM A PIECE OF BEAN CURD(tofu/tauhu).
- I am a person that easily get hurt. Not mentally, but physically.

I AM A KOALA BEAR.
- I don't like to exercise or moving around too much. It's quite rarely to see me goes down to the field. If you saw that, I might having mental disruption or you saw some mirage at that time.

I AM A PANDA.
- I have deep eyebags around my eyes just like the panda. I also have a big and round tummy.

I AM A CUPBOARD.
- I loves to read and there are a lot of books no matter novel or comis are well-arranged in my mind.

I AM A PIG.
- Sleeping is one of my hobby. The longest record of my sleeping time is about 17 hours.

I AM A SMILEY.
- Smile is something keep appearing on my face throughout the days.

Pheeewww.. I think that's all about me. :)

first entry

2010-01-05T22:38:00.006+08:00

Well, blogging is not something new for me since I became a blogger at year 2008. But, i decided to open a whole new blog for academic uses. What can I say, another blog is too personal for letting my new lecturer and friends to read at it *blush* .