MoodBoard

Well, this is the mood board for showing the feeling, color and the mood of the website i wanted to create at my final project. Also decide what type font we want to use at the same time. Using the cut and paste from the references.

Project "How to..."

Idea 1: How to make a scarf

1. What is it - A scarf
2. What for - Birthday present
3. 1st task - Choose color of the scarf
4. 2nd task - Prepare material
5. 3rd task - Start knitting
6. Theme - Sewing theme

Idea 2: How to perfectly wrap a present

1. What is it - A present
2. What for - Christmas's birthday
3. 1st task - Preparing material
4. 2nd task - Measuring width and length
5. 3rd task - Start wraping
6. Theme - Christmas theme

Idea 3: How to relax and recharge

1. What is it - Ways to relax and recharge
2. What for - Reduce stress
3. 1st task - Identify the sources of stress
4. 2nd task - How you overcome it
5. 3rd task - Healthy ways to relax and recharge
6. Theme - Hot spring theme


Beautiful websites:

- Use special type face as header and serif typeface as sub header.
- Good hierarchy.




- The theme match with the website name.
- Use the bold serif typeface as the header to grab attention.
- The rest of the typeface are using san-serif to show the consistency.
- Using limited color for a clean website.

- Using san-serif typeface to show the relax feeling.
- Overall is clean but show the direct message.

- Big special typeface to grab the visitor attention.
- Good hierarchy.

Some photoshop & illustrator tutorial websites:

http://sixrevisions.com/graphics-design/50-excellent-icon-design-tutorials/
http://www.graphicmania.net/48-useful-free-icons-tutorials/
http://psd.tutsplus.com/articles/web/40-quality-photoshop-ui-design-tutorials/
http://www.hongkiat.com/blog/40-greatest-web-interface-design-tutorials-photoshop-tutorial/

Final Outcome of Beautiful Information

And yah! This is my final outcome of the project Beautiful Information. Thanks to everyone who help me a lot! I think I done my presentation pretty well today, and still can be improve. This is the first sharing season which I didn't trembling :p Info graphic is an interesting area, I will continue to explore more in it. I had fun with this project XDD

Survey of Beautiful Information

Hi guys, this time I am doing the infographics survey for my project. We require using maximum 4 flat colours. In my design include the type of clouds and the height of them. Your every comments and feedback are a big help to me, thx for your time =)

1. How do you feel about the arrangement? (Please give a reason)
 
2. Which colour do you like the most from above?

3. Do you think the typo (text font) is suitable for this design?

4. Can you understand the information in this design?

5. What kind of information you would like to know and I didnt put in?

6. Do you have a better understanding about the cloud types now?

Thank you

Photo Editing

Last lesson, we learned about the photo editing in photoshop. Include how to apply texture on the photo, how to use masking and different brushes, how to adjust colour levels, colour balance, hue and blend tools. We got a tutorial in class and this is what we created.

Here go the original photo.

And we also need to create another version of this photo and the outcome is like this XD

Lastly, we need to edit our own photo. Here is me~ before the edit version.

And this is after, edit the colour mood, add the frame and make my hair short :p

I have a lot of fun with these assignments~

Pixel and Vector Icon Practice

This time is pixel and vector icon practice for our project. I created this little pixel icon in Photoshop as my class assignment. The title is buddy, all of us create each other in class. Lecture said mine one forget to add the detail of hair. Need to remember next time.

And another practice in class is vector icon, created in Illustrator. Learning to play with the different type of effects to create the 3D feelings. =)

Web Safe Area

Last lesson, we learned about web safe area. Saying about how much the size need to be when designing a website to prevent too big or too small while display on the screen. So here are some of my experiments result.

First, is the 800 x 600 screen resolution on Google Chrome browser, and I got the result of 784 x 493 at the black area which we called as web safe area.

While other browser results:
- Firefox 4 (784 x 469)
- Internet Explorer 9 (784 x 501)
- Safari (784 x 474)

Then, is the 1024 x 768 screen resolution, and the result is 1009 x 677. I got a bigger size for website area if compare to the lecture's example, 975 x 570. Hmm... seem like there is no different at the jpeg file... Wait, there got, the task bar become smaller =p

Other browser result of 1024 x 768:
- Firefox 4 (1008 x 634
- Internet Explorer 9 (1007 x 684)
- Safari (1007 x 658)

At the last, we come to the 1366 x 768 screen resolution, and the result is 1348 x 668. Wao, that is a wide screen =O. While my computer only until 1024 x 768, so I using my sister computer to done this. Too sad both of our computers don't have 1344 x 756 screen resolution that recommend by lecture =(

Other browser result of 1366 x 768:
- Firefox 4 (1348 x 610)
- Internet Explorer 8 ( 1348 x 531)

This is a nice experiment on the screen resolution. It lets me know the different resolution will show the different result of my desktop, windows and website display. And that's all for this time =)