portfolio
- DJRW
- Ready8
- Epicure
- IntProds
- City Life
- Kapai Puku
- Maybank2u
- Electrolight
- Bank Mandiri
- Laurence Poh
- Dezineo Media
- Sonya Veronica
- Melbourne Cares
- Convergence Jam
- AusCert Diamonds
- Adelaide City Living
- Make it Real (to me)
- Jackson Apartments
- Archive of Learning
- Gemstone Brokers
- Penny & Russell
- Massage Works
- notdesign.net
- Voice & Word
- Time dotcom
- AustralisOne
- Fritz Gelato
- BlueHyppo
- Celcom
- Tishé
Ready8 is an online retailer of trendy fashion accessories like scarves and costume jewelery for women.
It was an ecommerce project where I was called upon to design the site as well as develop the ecommerce back-end to handle online transactions.
A 'live' mock-up I did for the client is still available at the link below. It consists of static pages demonstrating the navigation and viewing of the shopping cart. Try clicking on the "Patterns" category.
I would consider this to be one of my best designs to date and am particularly happy with it. It is the distillation of all I've learnt about usability and accessibility, presented in a elegant, minimalist style.
The site is built with to be XHTML 1.0 Strict and CSS 2 compliant. It utilizes CSS layouts and degrades well to older web browsers.
NB: When prompted for login credentials, use the user name "ready8" and the password "radiate".
Epicure is a band hailing from Ballarat, Victoria, and the launch of their new web site coincided with the launch of their 3rd full-length album, The Goodbye Girl.
The album cover artwork had already been competed and was in production, and the web site was created to tie in with the existing style, while extending the established elements used throughout the cover insert booklet.
Almost the entire site's content is contained on the main page itself. The first thing visitors would see is a mock splash page, with navigation links that will scroll down smoothly to the actual content. While having a large index page may seem like a bad idea, it works well in this site as the splash page loads fast, and while the visitor is perusing the sections available, the rest of the page is already being loaded below, and upon clicking on a link, they will be brought immediately to the completed section below.
N.B. This site has been revamped by the client and no longer reflects my design.
Bank Mandiri is one of the largest banks in Indonesia and this mock-up was my submission among 2 other designers in Neuroweb used for pitch.
Fresh from the completion of Maybank2u.com, I had a much clearer understanding of the requirements of an online presence of a financial institution. This comes through as a clean, clear navigation in the middle with descriptions of the main sections of the site, supplemented with dropdowns linking directly to the appropriate page or section. Useful financial info and bank promotions are placed in the columns on either side.
I'm particularly proud of this design despite the fact that we didn't win the contract.
Dezineo Media creates custom-made artwork and provides other design services.
The design for their site is inspired by the square, pixellated "dm" logo, and extending the use of the shapes in forming a grid-like layout.
Random photos (taken by Dezineo Media) on the left bar add variety to an otherwise static site.
Here , I have extensively integrated Gallery to create a seamless transition from static html pages containing information, to the dynamically generated pages containing thumbnails of the samples of artwork available for commission and purchase.
Laurence Poh is an accomplished photographer who's pioneered the technique of 'digiscoping' and this web site is a showcase of his work.
The design and layout conveys a sense of open, airiness which is in line with Laurence's preferred photographic subjects – birds. In the upper right corner, his trademark photograph of a Crested Honey Buzzard overlooks the page.
In revamping this site, I had put in place a php-based photo gallery system called, appropriately enough, Gallery. This allows Laurence to easily upload and organize his photos without having to manually code every page in HTML. Gallery also automatically generates thumbnails and has features for guest comments and hit tracking.
Also to ease maintenance and updating the site, a weblog system called Movable Type is used for some sections of the site as a basic CMS (content management system).
Technologies used in the development of laurencepoh.com: PHP, MySQL, SSI, Cascading Style Sheets, Dreamweaver MX, Photoshop 7.
Site launched 24th February 2003.
Maybank is the largest banking corporation in Malaysia and maybank2u.com, their online banking and financial portal, is the largest project I was involved in while working at Neuroweb.
Working as a junior web designer, and entering the project midway, I was assigned to assist in the design and layout of certain sections of this massive site. This included creating new graphics and converting existing content on the old site to the new layout.
I also took the basic established look-and-feel and applied it as a 'skin' to the secured online banking area of the site.
After this project was completed, I was asked to make mockups for a proposed multilingual versions of the site, specifically Chinese and Bahasa Malaysia, with appropriate 'localization' of the design treatment.
N.B. Site has been updated by the client and no longer reflects the original design.
AusCert is a diamond certification program to get independent quality assurance for the diamonds you purchase.
The web site is modelled after their print catalogue, with a black background for the cover, and a lighter grey and light blue colour scheme for the inside.
This is a fairly simple and easy to navigate web site with the main sections always available on the upper right corner of the page. Subtle fonts and colours make for a pleasant and elegant browsing experience.
Tishe is a jeweller that makes custom made rings and other jewellery.
This site uses the same mock splash-page on the index concept first used on the Epicure site. The difference being that the columns are the same width, and each text block is staggered, to break the monotony.
Voice & Word is the web site of Sandra Baigel, a professional public speaker and master of ceremonies. Here you can contact her for bookings or courses on speech and communication skills.
The look and feel of the site follows that of a newspaper or magazine layout, including the choice of typefaces and colours, while maintaining the minimal and simple look.
N.B. This site has been revamped by the client and no longer reflects my design.
The Archive of Learning is the pet project and personal site of Clarissa Lee. It is a site where she shares her writings as well as links to research articles in a wide variety of topics.
The background for the top navigation is from a photo she took. The background for news blog on the first page is actually part of the same photo.
Due to the restricted capabilities of her web host, I had to make a lot of sacrifices and develop workarounds to the inability to use CGIs and SSI. Perhaps for a future update I would propose to implement Movable Type as a CMS for her to easily update her site content.
The site is built with to be XHTML 1.0 Transitional and CSS 2 compliant. It utilizes CSS for visual formatting and table-less layouts.
notdesign.net is a web host providing affordable web site hosting packages and support.
The design is bold and confident, with the main focus of the index page being that of the 4 boxes outlining the packages. The choice of photographs infer the 'level' of each package.
The same colour scheme, and thumbnails of the same 4 images continue through to the detailed information about the packages available.
AustralisOne provides funding for commercial and professional ventures.
The blue and yellow colour scheme of their logo provides a strong basis for the site design. The duotone photographs in the upper left corner change relevant to the section being viewed.
Celcom is one of Malaysia's 'big-4' cellular telecommunications carriers and this mock-up was for a pitch for their account.
I used their corporate colours as the basis for the colour scheme. The big block in the middle would show a random product or technology offered by Celcom. To the left of that would be scrolling thumbnail links of those products. As part of the pitch was to integrate with a CRM system called ATG, there's a user login form directly on the main page which would present to registered users a customized version of the page tailored to their demographic and potential interests.
The bottom of the page has 3 'wells' which are in preparation for placement of advertising or promotional banners.
Time dotcom is one of the 'big-4' telecommunications carriers. This mock-up was created to propose the benefits of a CRM system, in this case, ATG.
Time dotcom had recently gone though major re-branding involving a change of name, new logo and corporate identity. Learning what I could from that, I applied their corporate typeface extensively, and even used the slant angle of the typeface in the graphic elements for the side and top navigation bar.
The splash graphic and tagline is a play of words and imagery, and the use of photos of fruits and vegetables gives it a 'fresh' look.
BlueHyppo is the portal site of Telekom Malaysia's ISP arm, TMNet. This mock-up is for a proposed revamp to the site.
My impressions of the bluehyppo site at the time was that is was extremely cluttered and difficult to navigate, thus this was my attempt to streamline it by putting the main sections on the top, and the two contents of the navigation boxes on the left (inspired by the 'Stickies' application) changes in context to whichever section it's in.
The big blue hippopotamus which appeared in the lavish launch campaign of the site appears here as a friendly mascot inviting you to log in to your account to access personalized content, and if you've already logged in, a handy search form and links to your favourite pages on the site.
To commemorate the wedding of Penny Millgate and Russell Cunliffe, a web site was asked to be set up for them so that they can share this joyous occasion with their friends across the world.
One idea proposed by the client was to host a live webcam chat during the ceremony so that people could see and 'participate' in the wedding ceremony as it was happening in Sydney, Australia. This proved to be unfeasible.
The solution was to use Flickr to enable posting of photos 'live' via camera mobile phones. A flyer containing instructions on how to send the photos was given to guests upon arrival. The Flickr account was also used to set up a joint album where guests of the party could join and submit their photos.
In addition to photos, an online guestbook provided a space for messages to the newlyweds.
View Site (in a new window) Site now defunct
Sonya is an emerging artist in Melbourne who's decided she needed an online presence so she can showcase her artwork 24/7.
Sonya strongly believes in simplicity and letting the art speak for themselves. Simple keylines and a muted colour scheme form the basis for this design. Close-ups of a few of her favourite pieces became the abstract navigation buttons.
Gallery is used here to allow her to continually add new work as they come to being. MovableType enables her to update the site with news and upcoming exhibitions of hers.
City Life is a new project of the Disability Employment Action Center (DEAC) for young adults to take part in group activities around Melbourne City.
The colour palette for this site was picked up from their existing flyer they had produced for the programme, and from the DEAC logo itself. The client insisted that it had to be bright and bold as to attract the interest of their audience, some of which have various forms of disabilities.
MovableType is used to enable the client to easily update the news postings and also to manage the upcoming event listing.
Adelaide City Living is a quarterly lifestyle feature that's mailed out to affluent households in Adelaide. This website complements it by showcasing the featured advertisers.
The design and layout remains fairly close to the DL-sized booklet, for branding consistency.
As the colour scheme for the booklet changes with the seasons, I built this site with that in mind. When the time comes for updating it for the next issue, I can just change the colour scheme in one CSS file and the whole site would reflect the change.
Jackson Apartments provides backpacker accommodation around St Kilda at affordable long-term rates. They rent out fully furnished and equipped apartments of all sizes to suit different travellers' needs.
The web site is aimed at the increasingly net-savvy traveller who would find out about travel destinations and make bookings online.
A neat and easy to navigate layout provides concise information about what Jackson Apartment offers, and also some highlights of Melbourne and St Kilda. All these interspersed with photos of their properties and the sights around the area.
Melbourne Cares is a Not For Profit organisation set up to form partnerships between corporations and community organisations to encourage Corporate Social Responsibility activity.
A revamp of the Melbourne Cares web site came about as they moved from being an initiative of Committee for Melbourne to an independently constituted organisation. They now have more information to put online, and also wanted to be able to update the site and add new content easily themselves.
Cares Online, their online extranet system for supporter organisations, was also just about to be launched. Cares Online is an existing system in use in the UK. A customised version of Cares Online incorporating Melbourne Cares' branding and colour scheme had been developed, but the layout and major graphic elements could not be changed.
The challenge was to bridge the gap between the look and feel of the first version of the Melbourne Cares web site and Cares Online, while also maintaining the Melbourne Cares branding and visual standards for a consistent experience across the different sites and media.
The end result is a clean, straightforward look with a clear navigation bar on the left which combines elements from both the earlier site and Cares Online. The focus of the home page is the news blog, with supplementary information and content in the adjoining sidebar.
The whole site is powered by WordPress, which allows the client to manage the entire site in a simple interface, but also to add news items and articles easily and regularly.
Massage Works is a massage therapy clinic located in Carlton, Melbourne. The client wanted a web site to market their services to a wider audience.
The decor of the clinic itself has a calming effect the minute you step inside. Earthy colours and touches of detail make for a conducive environment for receiving massage treatment and getting away from the hustle and bustle of the outside world.
This is carried through to the design of the web site and utilising the existing colour palette of their printed marketing materials. This also happens to be the dominant colour scheme of the house/clinic.
Serene photographs of Victoria's national parks and natural attractions from Visions of Victoria, complete the package. This also highlights both the location of the clinic in Melbourne, Victoria, as well as the beautiful sights offered around the state.
International Production Services is a production company based in Melbourne, with a portfolio of several films developed in conjunction with filmmakers in Australia and around the world.
The brief asked for a minimal, elegant interface that allows the visitor to focus on the film imagery. Several web sites of other production houses and even fashion labels were cited as the direction desired for this client's site.
The home page immediately presents a slideshow of stills from films made by IPS. The wide aspect of the images ties-in with the film-making industry. Above that, the site's primary navigation bar depicts the company's portfolio and other services as a row of thumbnail images, analogous of a filmstrip.
Individual movie pages show a slideshow of promo stills from the film, the synopsis, technical detail, promo flyers, trailer downloads and distribution contacts where applicable.
Make it Real (to me) is a production of International Production Services.
The production stills form a key focal point of each page, along with a tag line of a quote or key point from the movie.
It is a simple and straightforward site to promote the film as it makes its way across the international film festival circuit and receiving accolades and awards along the way.
Electrolight is a Lighting Design company based in Melbourne, with a sizeable portfolio of projects both local and international.
The client needed a new web site to showcase their work and promote their skills and services. One of the criteria was that it needed to be easily updated with new portfolio items, as well as a 'news' block on the home page.
As they specialise in lighting spaces, the idea was to make the web site dark, and 'light it up' with subtle graphic elements, typography and photographs.
The site is Wordpress-driven and the client themselves have not only learnt how to use it to update the content of the site, but also modify the templates to adapt to their changing needs.
View electrolight.com.au (in a new window)
N.B. This site's design/layout has been updated by the client.
Convergence Jam is a event where creative minds are put together to 'jam' and network and come up with collaborative ideas for pushing the boundaries of new media.
The last Convergence Jam even was held in 2005 and this is a temporary promo site to help get sponsors and funding to organise the next one coming up in 2007.
Fritz Gelato is a Melbourne-based gelato (Italian-style ice-cream) business. They strive to produce the best quality gelato by using organic ingredients.
The site's look and feel replicates the experience one gets when entering a Fritz Gelato store. Their bold black and white logo, and the faint "Gelato is..." text running across a feature wall.
Bright colours and attractive photos punctuate the pages, making them stand out.
This site is built on WordPress, and the client frequently updates the News section on the home page, as well as adding new flavours to the "Flavour of the Moment" feature and the page containing the full list that they produce.
Kapai Puku
Kapai Puku is Maori for "The Seed of Life", a company founded by a New Zealand couple who have made a special Müesli blend of the same name.
The Kapai Puku logo and packaging design had already been done by Antony Richards of Hunter and Richards. The web site applies the same look and feel that's already established.
The Kapai Puku müesli itself is an interesting and colourful mixture, and a close up showing the seeds and grains are a main feature of the homepage.
The e-commerce engine which allows ordering Kapai Puku on the web site was developed and integrated by another web developer, based on my templates for the other pages.
Gemstone Brokers' Diamond and Gemstone Exchange is an innovative concept in buying and selling diamonds and other precious coloured stones online.
The Diamond and Gemstone Exchange is where one can list a gemstone for sale, or purchase one, all with confidence that the transaction is secure and guaranteed.
As this was a completely new company, I was engaged to design a logo and establish the branding for the company. The logo is a stylised gem with a subtle glow.
The web site itself is clean and clearly defined with bold colour-coded buttons to take you to the main sections of the site. The Exchange itself was a challenge to present a fairly complex table of information in a limited space. Small action icons take you to a 'details' page or place an enquiry on a specific gem.
This site was co-developed with John Ngo using Ruby on Rails. This was chosen on the basis of the client's requirement that The Exchange needed to be easily updated by them, and Ruby on Rails was chosen as the ideal framework for it's rapid development and deployment. In fact, the whole site was constructed and went live in just three days!
DJRW is an Amsterdam-based DJ who performs at clubs and parties around Europe.
The web site is part of an effort to promote himself and get more bookings. He already had a logo of sorts which wasn't particularly attractive, so I designed a new one for him.
It was an accidental discovery that the letter "J" in that specific font looked like a tone-arm of a turntable, when placed above the vinyl record graphic. Further development of that idea resulted in the current DJRW logo which is representative of him and his work.
As for the web site, it is common practice for DJ web sites to rely heavily on Flash, with background dance music and fancy 'high-tech' animations.
I wanted to challenge that and produce something a bit different.
The client plays 'progressive' and 'tribal' styles of dance music, which tend to be a little darker and out of the mainstream. He wanted the web site to reflect that, visually. The choice of photos, which are a little moody, gritty and industrial convey that point. (NB: All photography my own)