layouts;© xiaoqi

"web design is my first love ♥"

I first discovered the joys of web design at the beginning of my blogging days. To me, blogging and design are just like sneakers and socks, one cannot do without the other (for who ever wears sneakers without socks?). I started out with the all humble paint found in every computer, and html editors in geocities. Even in the early days I had a decided preference for layouts with white backgrounds, and throughout the years, as I have slowly graduated from using paint to adobe photoshop, from html editors provided by free webhosts to dreamweaver and now to notepad.. white as a backdrop has always been my key to simplicity in the design. It is my motto to keep layout designs simple.

Below is a selection of web layouts I have done, spanning from the first in year 2002 to the latest in 2007. Some were designed for my sites, others for friends. Please note that bigger screen shots are available only for some designs. Just click on the pictures and it will lead you to a full page version of the layout.

Please do not steal, thank you. Frankly, I don't mind slight imitations, but I do not accept downright copy and paste of graphics and layouts. That's just plain disrespect for my copyrights.

♥ ♥ ♥

#24 death be not proud
after a baffling episode of trying to figure out livejournal's html codes, i gave up on designing a layout for my lj. months later, i decided to try again, and happily enough i finally managed to decipher lj's secret language. i particularly love the caged heart graphic in this layout. the asymmetry of the wings makes it seem like the heart is struggling to flee its captivity. inspiration for this graphic: a hollow birdcage silhouette necklace that i have, and the winged heart necklaces that are rampant almost everywhere.

♥ ♥ ♥

#23 vanity, or not
my current favourite of ALL favourites was designed after a one year hiatus. in its original form, the picture of the lady taking off her jeans would have been pornographic. i wanted to strip the picture of that association, so i threshold-ed the photograph, and highlighted the jeans in denim blue, leaving the rest in monochrome. all the brushes used here were self-made. those on the lady's back i coloured beige, for a tattoo effect, inverting skin and tattoo colour. the other funky brushes, like the skull with eyes, and the cassette tapes, were added to give it an artistic touch. rather than focus on sleaze and sex, i shifted the idea of the picture to vanity; this can also be found in the subtle touch of embroidery of the words 'vanity' (using the pencil tool) on the label of the jeans.

♥ ♥ ♥

#22 *kiss me.
the first layout at the blogger account, this design is also the first to feature a couple, and quite honestly this is the mirror of a real-life ongoing event :) based on a lacoste advertisement, this design does not boast any complicated jaw-dropping graphic editing, just a couple of self-made smudge brushes, image extracting, the use of multi-colours, and the newly-learnt method of recolourising. to differentiate this from the usual people-featured layouts, text inserted into the graphic is transformed into a wavy arch cutting across the couple.

p/s the thumbnail doesn't do it any justice.

♥ ♥ ♥

#21 v o i /c h e /s a p e t e
named after an aria of mozart's opera the marriage of figaro, translated loosely in english it means 'tell me what love is'. this layout is personally one of my favourites, it features a personalized complete and real image scrollbar (not just consisting of arrows but also the slider that you drag up and down). the flowers are drawn freehand with the lasso tool and cut out from a picture of lee hyori in one of her anycall commercials. navigation is found in the 'street directory' on the top right, a short description of the supposed garden represented by the flowers, with highlighted words (bearing an exclamation mark) in the paragraph indicating links to other areas on the site. the directory is one whole rollover image.

♥ ♥ ♥

#20 PAINT MY LOVE.
a layout for the official michael learns to rock fanlisting, which i think has since turned into an abandoned project, with the least priority on my list. an emphasis on colour recurred throughout the music video of mltr's most popular ballad, paint my love, so i thought i would give it due weight in the design, and voila! the splotch of colourful paint is made up of the band's various album covers. the site is navigated through a bar of musical notes near the bottom of the page, which uses iframes. one of my favourites.

♥ ♥ ♥

#19 KALEIDOSCOPE! {___________a photo gallery}
this template has proved to be the most viewer friendly of all layout templates i have designed. it consists of a sidebar at the left, which includes eight 50by50 thumbnails, a small description of the site below, and a column of links in dark grey boxes. main content goes to the right, and occupies most of the page. this makes viewing and navigating the site very, very easy, and yet at the same time doesn't compromise on the aesthetics of the design. great for informative and photo sites.

♥ ♥ ♥



#18 ../ B e _ W h o _ Y O U _ A r e
the first template for my site at http://dazed.mezza-9.net, hosted by ivy, this is a first foray into the art of extracting images and planting them in new territories. the annotations of lee hyori are links, where these links lead to are flashed in the little barcode beside the picture. the linked pages house a different design, shown by the popup version (2nd picture).

♥ ♥ ♥

#17 /retrospection[.]
especially for lingy, this was co-designed with another close friend, juannie =) it is not difficult to see that lingy is a diehard fan of 5566's tony sun. to prove that point, we stamped her name over him. so he is now lingy's. however our dear friend does not know this is only a 'threshold' version of him xD the self-discovery of the history brush and its uses on juan's part led to lots of fun trying to repaint xie zhi. a customised select option link box is found at the bottom of the page.

♥ ♥ ♥

#16 Effervescence
my brother requested me to give his blog a new look, and this was born. champagne and words flow out from an upturned wine bottle, collecting into a column of even more words, his blog content.

♥ ♥ ♥

#15 O . R . A . N . G . E _ S . H . E . R . B . E . T
this is the layout of orange sherbet, the shinhwa yaoi fanlisting. most compatible in 1024x768 screen resolution, it shows the korean band angled at 90 degrees toward the main content text, and to give it a kawaii touch, arrows point to and fro between the members, with emoticons, question marks, exclamation marks etc to indicate the supposed relationship of yaoi couplehood xD

♥ ♥ ♥

#14 |> Un.ruled by Love_
after i declared myself a fan of the beauty of hot korean singer lee hyori, i set to work on a layout that showcased the 'world's most beautiful woman'. the result was this. the content box makes no use of the usual scrollbars, instead personalised arrows guide the movement of the blog content it holds within. my favourite feature in this layout is the fade-in fade-out effect of the descriptive words regarding each link when the mouse hovers over them in turn.

♥ ♥ ♥

#13 i adore you.
featuring junjin from shinhwa, the design assembles cut out extracts of parts of different garments he modelled for a fashion house, each in their different colours to colour up the page. a wet brush was employed to add texture to the graphic. the main highlight of this layout is the movable sliding menu at the side which follows the page as you scroll up and down.

♥ ♥ ♥

#12 l o v e. m e. i n. y e a r s. t o. c o m e.
because of the lotr craze that gripped me after watching the last instalment of the trilogy, i designed this template of aragorn and arwen. blending of several images was involved in the process, and notice the layout is without a white background. this was one of the times when white did not work well with the design. the status bar relates an extract from the tale of the lovers in the lotr appendix. as there had been previous complaints about the inaccessibility of my guestbook, i specially created a shimmering link for it, that twinkles like a star. all in all, a dream-like effect is achieved with this layout, and i thought it reflected very well what the relationship between the two stood for -- a romantic fantasy out of place in the real world, our world.

♥ ♥ ♥

#11 dream_a Little dream:]
singaporean singer stephanie sun graces this layout designed for qi'en with her dazzling smiles. the template is very alike that of ::Nocturne in [E]_flat::.'s (see below), except that it is in shades of greens and blacks. for variety, i used different font faces for each word in the cluster of words at the base of the graphic.

♥ ♥ ♥

#10 mr. tOnNnEEeee~
by request of kayleigh, i designed this layout of her idol xie zhi. as you can see, the graphic is heavily brushed and exceedingly pink. but what you can't see, is how i have, for the first time, confined both the graphic and the blog content (one on top of the other) to the same width, and border both with the same vertical lines that run continuously.

♥ ♥ ♥

#9 + (-0X ChEckbOx. X0-) +
boxes form the backbone in this guestbook design, and it ultimately led to the idea behind ../ B e _ W h o _ Y O U _ A r e (see above). colours used, black-grey-white-dark red, is my ideal colour combination. best viewed in IE4.

♥ ♥ ♥

#8 One in a MiLLion____(1 / 1 000 000) _
features lee minwoo of shinhwa. in this design, i ventured into the area of abstract art and chose to highlight, with shocking colours, different parts of his almost topless body. i wasn't very pleased with the outcome, thinking that i had clumsily transformed minwoo into a dinosaur.

♥ ♥ ♥

#7 {X - P R E S S ion______________}
if you are observant enough, you may notice the 'i <3 u' on brian joo's (fly to the sky) right cheek, with an arrow over the heart. this was done by erasing away relevant parts of the brush layer over his face. dark reds, my favourite colour, play an important role in this design of my first ever collective site.

♥ ♥ ♥

#6 ::Nocturne in [E]_flat::.
a mistake of the smudge button gave rise to an artwork :) till today this remains one of my all-time favourite designs, despite the many layouts and new sophisticated skills picked up after its making. the cover boy is my favourite korean singer-composer kang ta.

♥ ♥ ♥

#5 BUBBLEGUM-oh!
lots of typical brushes and the like. nothing special, though at that time i was quite proud of it. how everything changes with relativity. this design was among my first few experiments with the brush tool. it centers around shinhwa's shin hyesung and lee minwoo.

♥ ♥ ♥

#4 W[ON]BIN W_ORLD.WIDE WEBL>OG.:
ahhh.. red!! this was a layout for siew theng. back then i had no knowledge of the skill of extracting images, and because the original picture of wonbin had a red background, i duplicated the background over the entire page, adding brushes across it to dim the boundaries between real and fake.

♥ ♥ ♥

#3 pink smoothie
another of the initial try-outs of the brush tool, and the filter options. notice the smoothie in the picture is slightly distorted, that was the filter effects. also note that this layout is very simliar to BUBBLEGUM-oh!.. when i first started out i stuck to the same template. designed for yan qi.

♥ ♥ ♥

#2 wHiskEd away with wOnb!N
as the name and the design suggest, i was once a devoted fan of korean actor wonbin. i did not have photoshop, so i relied on simplicity, html skills (filtered opacity of diary text content box to show part of wonbin picture below), and words ('heaven is one step away in your eyes') to lift the layout up into the acceptable range. in my eyes this design lends testimony to the saying 'simple is nice', and it has always been an all-time favourite of mine.

♥ ♥ ♥

#1 :: compLicated hEart ::
my very first design is made up of words and more words. because i had yet to learn how to upload pictures onto the net, i decided that i would use words to beautify my online diary. i used extracts of lyrics from the song 'the rose', soundtrack from a movie of the same title, different extracts for different pages. very, very simple.

♥ ♥ ♥





.this portfolio since 2007.
webmistress: xiaoqi.
design © xiaoqi.
hosted by diaryland! ♥
best viewed in mozilla firefox.