1. The layout
The very first step into designing this site is to decide how should the layout of this site look like. I’ve pondered about the possible layouts and I’ve decided to settle on a 3 columns design. Every web page consists of a header, the body part of the page and also a footer.

Imagine a sandwich, the header of a page is similar to the upper layer of the sandwich, the first slice of bread on the sandwich. The ingredients for the middle layer is really up to you to decide what kind of sandwich you want it to be, be it a tuna, eggs or ham sandwich, it is absolutely up to your desire.

The middle part of the sandwich can be used to describe the body part of a web page, how many columns you want your web page to have depends on what you want to display on it. The last layer of a sandwich is similar to the footer of a web page where your page won’t be complete without it.

2. Putting together the header
I wanted my page to be colorful and bright. That is why the many flower collage. The complete header and graphics are done using Photoshop. The flower motives that I used are cut out from my own pictures and I added some watercolor effects using Photoshop. <--- I deleted the flower motives!

The bamboo background of the header is actually a real bamboo mat, that I used for rolling my sushi . I came up with the idea while browsing through a magazine for home decoration. Sometimes ideas just popped up out of nowhere while you just aren't looking for them. Besides looking colorful, I wanted my page to have a ‘writing a letter or postcards’-feel. So that is why I came up with idea of using some postcards and pictures at the header. Those are real postcards that I received from friends . I scanned them and sized them down a little and voila, the header is almost done!

As for the letters of ‘Mistymaze’, I decided not to have it too fancy, so as not to crowd the header with too many stuffs. For the navigation bar at the header, I used some pins to anchor the sticky notes and the background comes with a pin board look-a-like ‘wall’.

3. Placing the body parts
This is took me the longest to accomplish. I wanted the two columns on the far right side of the body to look as if they are on some stashes of papers being binded together with a paper clip. Everything is completely made in Photoshop with some research on the Internet. However placing the columns wasn’t that easy due to some browser defect.

4. Footer
I decided that the footer should be a complement to the header and some postcards to come with it.

The final result is what you see on this page. If you have some feedback to share, I’ll very much welcome it .