Web Design 2 - Online Website

Click here to see the online site of my redesigned Fullhouse website.

This project is only for college purpose :)

Web Design 2 - Prototype User Testing

Splash Page

Main Page

Cafe

Petit Four

About Us

Events

Store & Shop

Contact Us

Here is the user testing form:



*All of the pictures and designs above are for educational purposes only, not for commercial purpose.

Web Design 2 - Inspirative Commercial Websites

Some Inspirative websites:

1.Big Cartel (Art and craft online shop provider service):














Analysis:

(+)

• Simple yet beautiful
  
• Neat typography treatment and layout hiearchy
• Consitent
• Information is direct, and friendly to the user's eye.
  

(-)

• Adding a favicon would be better
  

2.Gucci (Leather bags, fashion and accesories):

Analysis:

(+)

• Simple and artistic.
  
• The branding is relevant to its product
  
• Consitent on layout and navigation
  
• Interesting menu navigatin

3.Wacom (Pen tablet provider):

Analysis:

(+)

• Simple, which direct the user to the content.
  
• Neat typography treatment and layout hiearchy
• Random background color according to its logo color.
  

(-)

• Adding the graphical logo besides the text logo on the top left side will be much better.
  

4.Pocari Sweat (Isotonic drink):

Analysis:

(+)

• Interesting navigation
  
• Interesting content, supported with the good typo handling.
  
• Simple, attractive and have a great branding
• Simple rollover effects, but it is effective
  

5.Quiksilver (Clothin,Gear for sports):

Analysis:

(+)

• Good use of color
  
• Neat finishing of images for a grungy site.
  

(-)

• Layout can be neater even if it is grungy website.
  

Tutorials:

HTML / CSS / Javasript		Design tutorials
	How to make an animated scrolling text		Psychedelic Tutorial
	Java Script navigational scripts		Ornate typographic illustration
	Pop-open list Links		Vector folk building
	Coding a clean web 2.0 Style		Vivid themed hand-drawn illustration

User Testing - Web Design 1

Splash Page (The initial page before you are going to enter)



Home Page



Contact Page


DIY - Materials Page



DIY - Choosing Steps


DIY - Step 1



Garden (It's where you upload your designs and downloads wallpapers

About page & more page coming soon! :)

Web Design 1 - Prototype

Im bored till dead doing this prototype... haha


Splash Page















Homepage















Steps - Materials


Steps - Choosing steps
(a pop out will appear when you click the image)


Garden - Uploader & Downloads

Cs&Cs PLS! :)

Web Design 1 - Mood Board & Sitemap *updated

So here is my mood board for Web Design 1:


*sorry for the mistypes :S

Sitemap:

Web Design 1 - Researches & Ideas

How To's Ideas:

How to create your own miniature aquarium:

1.Who am I? - Author
2.What is it? - Small Aquarium
3.What For? - Decorations
4.1st task - Plannings and gathering the materials
5.2nd task - Step by step making ofs
6.3rd task - Snap it and share on the web
7.Outcome - Liven up your room!
8.Share it - Upload your snap and compare with the others
9.Contacts - Information

How to create your own earth savior:

1.Who am I? - Designer
2.What is it? - Vinyl toys with a plant on it
3.What For? - Fight global warming XP
4.1st task - Buy materials & Making ofs
5.2nd task - Seed it
6.3rd task - Share it
7.Outcome - Go green :)
8.Showcase - Gallery / Download Wallpaper
9.Contacts - Information

How to create your playing cards:
1.Who am I? - Designer
2.What is it? - Playing cards
3.What For? - Collections
4.1st task - Sketching
5.2nd task - Designing
6.3rd task - Printing & Packaging
7.Outcome - Play it together with friends
8.Showcase - Gallery of illustrations / W.I.P / Products
9.Contacts - Information

---

Interesting Websites:

foodincmovie.com



sushiandrobots.com



mikematas.com



lineage2.co.id/index.php



orangelabel.com



hypefortype.com



gavincastleton.com

---

Photoshop tutorials:

• Fix lighting in a montaged image



• Cool neon effects



• Create imaginative painted montage scene



• Creating a steam punk illustration in PSD



• Composing an HDR image through photos you have captured

---

Tutorial websites:

• How to customise your own vinyl toy



• How to make speakers out of a vinyl toy



• How to make an aquarium out of a light bulb



• How to spice up nature