Coconut Kizomba Club - My first real project

My client needed a website to promote the opening of his new Kizomba dance club, and its opening event in Croydon. Code for this website can be found here.

The Design - My Client's needs

The challenges I had to face were:

  • Promoting the opening of the new event
  • Communicating the vision of the club and it's charitable activities
  • To produce a clean and clutter free website
  • To emotionally connect the client with his audience

I let the client handle the design of the website which in hindsight, I should have taken control of as the design of the website changed a few times.

I was able to find solutions for various challenges coding the website. It was the first time I really used third party javascript plugins to speed up development.

The website was coded with vanilla HTML, Sass, Jekyll for templating, with a few JS third party plugins.

Promoting the opening of the new event

Assets were already provided by my client in the form of image files that were used for print to promote the event. The images were very large in size so by using GIMP I optimised them by:

  • Reducing the quality of the photos by 50%
  • Keeping the dimensions of the images large for high density pixel displays (this keeps the detail in the image)
  • Converting the JPEG files to Progressive JPEGs (Progressive JPEGs render faster. I tend to think of it as progressively displaying the full image from the start, whereas normal JPGs render top to bottom in full resolution, increasing time to display).

All I had to do is to display the images in an attractive way. I decided to use floating cards as it gives the images some depth and is a nice subtle way of making the images stand out. I achieved this by:

.img-card {
    border: solid 5px white;
    -webkit-box-shadow: 0 2px 5px #ccc;
    box-shadow: 0 2px 5px #ccc; }

Adding a small border to the photo, and using a box-shadow to give its three dimensional affect. Very simple.

Communicating the vision of the club

One of the great things about meeting clients in person is the non-verbal communication that you can pick up during your meeting. It was very clear that my client had a great vision of what the client wanted to achieve. I needed to communicate his passion throughout the site.

How I would achieve this is primarily through images and by being measured in the content (text) throughout the site.

The client already supplied me with great images which ended up in the gallery section being displayed by the awesome plugin Flickity by Metafizzy. I used Flickity as I needed to have a responsive gallery that was touch friendly and easy to set up, and easy to style!

Clean and clutter free website

I had to peel a lot of content from the originals that was provided to me. The content needed to be concise, and deliver the clients' message in a succinct way. I was able to achieve this by reminding the client that some of their superfluous content would not help to communicate their message to their would-be customer.

In addition, the site would need a lot of white space to help draw a readers eyes into the content. I kept the vibrant pink minimum by using it as an accent to the content. I did not want the website to appeal to younger females, as that isn't the typical demograph of Kizomba dancers.

Lastly, my font choice was OpenSans a minimalistic sans serif font with good readability at lighter font weights, which helps with the large whitespace I wanted to achieve with this website.

Emotionally connect client to his audience

My client has an initiative to help third world countries with the proceeds that they will make with the dance lessons, thus the client felt that they needed to connect to their audience on an emotional level. We achieved through the content in the website. The client wanted his audience to know him, thus I used an old picture of him in his childhood.

Also, we used first person language to connect with this audience, and the use of styling important statements with quotes that really gain the readers attention.

The Code

I used various front-end languages for this project. They were:

Development Environment

I developed using Jekyll via Ruby on Windows. There is an awesome guide of how to do it here: Run Jekyll on Windows.

HTML

The HTML was compiled using Jekyll; my preferred way of coding as it allows me to code in a modular way, without needed to repeat code for repeating sections of web-pages, such at headers and footers.

CSS

The CSS was written in SASS, a pre-processor to CSS and my current favourite way to code CSS. It allows me to code faster as I do not need to use curly braces, colons or semi-colons. In addition, it enables me to use a whole load of other functions, although I have yet to delve into it.

JS

I used Flickity for the image gallery as I needed a responsive, touch enabled gallery for mobile users and I cannot recommend this plugin enough. It got the job done and as so much customisation options. Custom styling was easy enough when I dived into its CCS code. I opted for the jQuery version of this plugin as it was easier to understand and at this point my JavaScript knowledge isn't great..

Final Thoughts

I'm pretty pleased how this project turned out with the experience and level of knowledge and skill I have in coding and design and a great learning experience. I did have a few sticking points as well as challenges with the design being changed midway through.

Thanks for reading.

Until next time.