The client contacted me about creating a site for their apartment sales business. They were looking for something promotional, but were also interested in accepting bookings online.

The Design

I was given a brief that included the following requirements:

• Palm trees
• Sunsets

I love briefs like these as they give me something to work with without being too prescriptive. For example, it suggests a colour scheme built around greens and oranges, but it doesn’t restrict me to specific greens and oranges.

I started out like I always do by sketching some rough ideas on whatever paper happens to be lying around. This time it was my Tazmanian Devil notebook, but I’m not beyond using the backs of receipts or the corners of maps. If it’s blank and it’s nearby when inspiration hits, it’s likely to get doodled on.

It was quite clear even from these rough sketches that I wanted to use the silhouette idea and I thought that the foliage would provide an interesting linking image between the oranges of the header and the eventual black of the body content.

After I’d got some rough ideas, I grabbed a few images of plants with leaves that I liked the shape of, together with photos that we’ve taken as part of our Never Ending Voyage, and started drafting up some paths.

I do my drawings in Illustrator and then import them into Photoshop. I absolutely love using Smart Objects in Photoshop - the ability to use Photoshop effects and filters together with Illustrators powerful drawing tools is a killer combination.

If you’re interested in how I created the hill, I’ve got a tutorial on creating a grassy hill in Illustrator using the Crystallize tool.

Once I’d finished up the illustrations, I opened up Photoshop to start working on the layouts. I like to do as much of the design in Photoshop as possible and get as many of the details in place as I can. Once I start doing the HTML and CSS, I find it’s a totally different mindset to creating the design elements. I don’t like getting half way through coding just to find that I need to go back and design some header icons or form elements.

I reused the foliage illustration minus the palm trees to tie the footer back to the header. There are actually two footers in this site, one like the above with a black illustration and a widgetised area and one with no widget area and a green foliage illustration. Both the header and footer illustrations are designed to repeat seamlessly if a user happens to have a really wide screen.

The Development

The client had requested an availability calendar for each of the rooms and integration with PayPal so that they could accept payments for deposits online.

They wanted support for different seasons (low, mid and high) with separate pricing, and a marker to show whether or not the room was available.They also wanted to offer price breaks - users get a discount if they book for more than a week and a further discount if they book for more than four weeks.

The first thing I did was to create the administration panels in WordPress using the new Custom Post Type functionality of WordPress 3. Each of these posts has a calendar where the client can set availability dates and seasons, and a form where they can fill out the prices for each season and each price point within that season.

The calendar is a custom built PHP Class that works using AJAX where available, falling back to using GET variables to navigate if the user has JavaScript disabled or if their browser doesn’t support it.

This means that all users get the same basic functionality, but those with more advanced browsers get a better experience - the essence of Progressive Enhancement.

To get it integrated with PayPal, I needed to work with the PayPal API. As each user’s requirements were going to be different, we couldn’t just create an individual button through the regular PayPal interface - it would need to be created on the fly depending on the client’s needs. The API allowed me to set the prices and descriptions programmatically.

The Bookings Page allows a user to select a room and then it displays the prices and availability for that room. The user can select the dates they want and the form then checks to make sure that the dates are available, that they aren’t in the past or too far in the future and then, if everything’s OK, it works out the full price based on the season the want to visit. It then calculates 35% of this price and creates a PayPal button, inviting the user to confirm their booking with the payment of the deposit.

Working with the PayPal API was a new challenge for me, but it has opened so much possibility.

The Response

The client was very pleased with the site and provided me with a lovely testimonial:

When we launched our new business we knew we needed a powerful website but had not the faintest idea how to achieve it or even how we aquired a domain name thingy. We didn’t know how it should look, how we could take payments, how visitors could move through the site. Simon at Line In Web Design has helped us from the very beginning.

Simon has added his flair to our ideas whilst showing patience as we constantly changed our minds. We have felt involved and consulted, we have loved viewing the test pages and seeing our own website evolve. We now have a professional website of a standard we never thought possible on our budget. We feel truly proud of the website. Thank you

Steve and Joan Shore

You can see the finished site at Goa Stay.

If you would like a site, plugin or widget designed or developed, please get in touch.