Friday, September 17, 2010

Monday, September 13, 2010

Sunday, September 12, 2010

Web Design 2 { Competitor Site }

These are the competitor site i found. Although they are not very well designed, but i found that their information is slightly better then JustLife ones.

www.shoporganic.com ^

{Pro}
- Consistent design.
- Balance Execution.

{Con}
- The design is very safe. *looks like those normal e-commerce site*
- Could have more attractive picture.

www.organicfood.com.au ^

{Pro}
- Nice color combination.
- Nice graphic.
- Good choice of type treatment.

{Con}
- The design is very safe. *looks like those normal e-commerce site*
- Hierarchy not that good.

www.naturalgrocery.co.uk ^

{Pro}
- The hierarchy is good.
- Execution is very clean and simple.

{Con}
- Design can be enhance.
- Color choice can be better.

www.countryfarmorganics.com ^

{Pro}
- Hierarchy is good
.
- The design treatment is good *except for the header*
- Clean and neat.

{Con}
- Background color kind of noisy.
- Typo treatment can be better.
- Can have more attractive picture.

Web Design 2 { Just Life }


The Website that given to me is Just Life. An company that sell organic product, food and etc. When i click through the site, i find that the site was actually looks better than i expected. The design was very clean and simple. The only bad thing was the composition, background and the information hierarchy. The background was kind of annoying because it keep on changing when i click through pages, the background was also not so "organic". Next is the menu bar, i could find some link that couldnt be found on the main page. Thats a very big problem, because i dont know where am i. although they do have breadcrumbs...

homepage. ^

Promotion page.^

product page.^

contact us.^

about us.^

Web Design 2 { Tutorial Links }

Here are some useful link

HTML/CSS tutorial links
1. http://sixrevisions.com/tutorials/web-development-tutorials/psdhtml-conversion-elegant-and-simple-css3-web-layout/

2. http://sixrevisions.com/html/bouncing-a-ball-around-with-html5-and-javascript/

3. http://www.csstutorial.net/

4. http://www.w3schools.com/


---------------------------------------------------------------------------------------------------



Design tutorial links
1. http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-detailed-vector-sugar-skull-illustration

2. http://www.blog.spoongraphics.co.uk/tutorials/how-to-create-a-gothic-blackletter-typographic-design

3. http://abduzeedo.com/

4. http://www.pslover.com/

Web Design 2 { Inspired Commercial Website }

www.springhouselaw.com

{ pro }
- Nice Layout
- Background color suits my idea
- simple yet clean

{ con }
- typo treatment can be better

www.sheridanandco.com

{ pro }
- Like the "menu" kind of thing
- like the color too
- simple yet nice!

{ con }
- i think this site is really well done

www.goinghometoroost.com

{ pro }
- The header was very "organic"
- the color is what im looking for

{ con }
- the right part is kind of heavy
- can have more detail icon for FB, twitter

www.chipotle.com/en-US/Default.aspx?type=default

{ pro }
- like the way the present the product
- Composition is very interesting
- they replace the normal icon to their product

{ con }
- color can be more colorful
- not detail enough in term of graphic

work.dorotheu.com

{ pro }
- love the header alot
*inspiration web*

{ con }
- not much information
*but its ok for a portfolio site*

Monday, May 24, 2010

moodboard. flowchart.


moodboard. 1



moodboard 2. Same elements, different layout.



flowchart.

Monday, May 17, 2010

HOW TO _ _ _ . Web Design 1 Project.

HOW TO BE A ROCKER.
1. who i am - a professional and experienced rocker.

2. what is it - learn the attitude of it.

3. what for - to share thoughts of a rocker and the process of being one of it.

4. 1st task:
i) introduction of a rocker.
ii) learn more about rock music and a rocker's life.

5. 2nd task:
i) hair style that suitable for a rocker.
ii) how to dress like a rocker.
iii) the accessories.
iv) make-up.

6. 3rd task:
i) the music.
ii) learn to play electronic guitar.
iii) learn how to scream and shout.
iv) find some stage to gain experience.

7. outcome - transformation.

8.showcase - picture and videos.





HOW TO SAVE A PRINCESS.
1. who i am - a super mario fan.

2. what is it - learn how to save the princess in every mario game.

3. what for - to share the walk through and thoughts for the game.

4. 1st task:
i) knowing about the game.
ii) go get a version that suitable for you.

5. 2nd task:
i) learn the button.
ii) knowing the character ability.
iii) some tricks and secret.

6. 3rd task:
i) level walkthrough. ( process of the walkthrough )

7. outcome - able to beat the game.

8.showcase - picture and videos.






HOW TO BE A GANGSTER.
1. who i am - a gangster observer.

2. what is it - learn how to conquer your street.

3. what for - to get a thought of how gangster live and what they do.

4. 1st task:
i) introduction.
ii) rules of being a gangster.

5. 2nd task:
i) the dress up.
ii) get a tattoo.
iii) learn the way they talk.

6. 3rd task:
i) learn how to fight.
ii) learn how to get a chick onto your car.
iii) learn how to collect money.
iv) train your workers.

7. outcome - able to be a successful gangster.

8.showcase - gallery.








HOW TO BE A MILLIONAIRE.
1. who i am - a crazy guy that dream to be a millionaire.

2. what is it - learn how to earn money.

3. what for - to be be a millionaire in any way in order to achieve it.

4. 1st task:
i) get yourself ready to humiliate yourself.
ii) rules of being a millionaire the fastest way.

5. 2nd task:
i) gains media attention.
ii) upload your talents.
iii) buy lottery.

6. 3rd task:
i) workaholic.
ii) kidnap some random millionaire's son.
iii) tell the president of your country he need you.
iv) just dream and dont do anything.

7. outcome - able to think that im a millionaire now.

8.showcase - gallery.





HOW TO TRAVEL BACK TO PAST.
1. who i am - a scientist.

2. what is it - travel back to the past.

3. what for - will not regret what i did.

4. 1st task:
i) get yourself a time machine.

5. 2nd task:
i) rules and warnings. ( many warnings )

6. 3rd task:
i) you're done.

7. outcome - im now in the past.

8.showcase - video and pictures.





HOW TO SAVE THE PRINCESS ( another ver. )
1. who i am - a normal human being lived on a small village.

2. what is it - a adventurous story.

3. what for - to earn money that the king's offer.

4. 1st task:
i) know the enemy place.
ii) prepare armor.
iii) weapon.

5. 2nd task:
i) start journey.
ii) random obstacles.

6. 3rd task:
i) finally got to the place.
ii) princess fall for him.
iii) But all the guy want is money.

7. outcome - the guy still love money more than the princess.

8.showcase - gallery.








HOW TO TRAVEL SMART.
1. who i am - a experienced traveler.

2. what is it - travel around the world.

3. what for - to ask traveler to travel smart.

4. 1st task:
i) know where are you going.
ii) research on the place.
iii) wait for promotion.

5. 2nd task:
i) basic knowledge for compass and stuffs.
ii) knowing the weather.
iii) what to prepare during which season.

6. 3rd task:
i) try to merge with their culture.
ii) try on their food besides from restaurants.
iii) make friends with their local citizen.

7. outcome - should be able to know abit more about travel.

8.showcase - mostly pictures.

Saturday, May 15, 2010

Website for WebDesign 1


Website that i think it's cool. XD

1. http://www.cheeseandburger.com/






2.http://www.walkthelinefestival.nl/





3. http://mini-mundi.com/



p.s. this is not a english website. I do not know how to read the language of it, and it also required to register as a member before enter the website. But i found the art is quite nice and interesting so i only manage to screenshot images that FWA put on. =(


4.http://ftdesigner.net/



very cool portfolio.


5.http://riotindustries.com/#glooshaveice


6.http://www.snapshotsofprovence.com/







Tutorials for WebDesign 1


First i will start off with the tutorials.

1. http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-create-eroded-metal-text-with-photoshop/







2. http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-create-an-incredible-typographic-illustration-part-1/
http://psd.tutsplus.com/tutorials/text-effects-tutorials/how-to-create-an-incredible-typographic-illustration-part-2/

3.http://abduzeedo.com/reader-tutorial-arcadia-80s-vhs-style


4. http://abduzeedo.com/sleek-wallpaper-pixelmator




5. http://abduzeedo.com/reader-tutorial-create-vintage-traveler-diary-photoshop