The design and the launch

Liberta Design Screenshot

After two months of planning, reading, researching, sharpening up my PHP, XHTML and CSS skills, and catching up with the latest trends in web design, the Liberta Design website is finally done.

This is a quick article about the website, and to thank all the people who contributed.

My goal was to create a site that would make anyone visiting think exclusive, professional, quality, and attention to detail. I will wait for the feedback and see if I was successful.

To encourage repeat visits I decided on two types of dynamic content – an “articles” section (what you’re reading now), and a photo gallery. I’ve always wanted my own spot to document software development and design tricks I discover, so watch this space.

I wanted everything to look simple, logical, and easy to understand. I used a fixed navigation menu in the left-pane that appears on each page, so that the browsing experience feels consistent throughout, and a highlight of the current page/section’s menu item, so the user knows where he is at all times.

For the text I chose a large font to ensure readability. The color contrast of the font against the gray background is just a little less than it should be, but I feel that the size makes up for it. The large sections of whitespace should also help to make the text feel easier to read.

Coffee Beans

The background image started out as a picture of some coffee beans. This went through a series of transformations (stretching, grayscale-conversion, light & color overlays, blurring and pixelation) before it arrived at what you’re seeing now.

I deliberately used a grayscale color-scheme for the background and most of the text, with brightly colored images and inserts placed at places where I want the readers attention to be drawn first.

The striking effect that is created by such high-contrast designs is one of my favorites, although it does make things more tricky, because you have to choose the spots for dashing color well, and design your images very carefully.

Quite a lot of my time went into optimizing the site for search engine indexing. The page names, title tags and page descriptions were carefully chosen, and I used as many keywords in the information pages as is possible without making the sentences sound strange. At the time of writing this article, the site is at least appearing on the first page of Google for search terms like graphic design ballito, web design ballito and photography ballito

Finally, some credits. I used WordPress 2.5.1 as a CMS for the articles, and SFPG for the photo albums. My only gripe with SFPG is that it is not currently XHTML compliant.

A special thank-you goes to coda for his excellent design, which was the inspiration for several things on this website (like the fading background, semi-transparent form fields, and minimalistic footer). Another special thank-you goes to tekenaar – for all the testing.

Tags: , , , ,

  1. Chetan

    Hi Francois,

    I love it, excellent. The colour scheme sets a subtle mood for relaxed reading. I like the simplicity, and at the same time it reduces page load times. There are also no flash animations that distract the reader. Great job.

Add a Comment