Eleventh Heaven


In February 2014, I was commissioned to create a website that showcases the fantastic work of Eleventh Heaven, a small boutique that creates bespoke Swarovski jewellery. This project commenced February 2014, and completed March 2014.

The Brief

To create a website that will showcase the work of Eleventh Heaven and act as a point of contact for potential clients, and to create a logo befitting of the Eleventh Heaven brand. The site should be clean, simple and appeal to the client's target audience, adult females looking to purchase jewellery for their wedding day.

The Role

I designed & developed the website, along with a new logo for Eleventh Heaven.

The Colour Palette


The Technology Stack

HTML5, LESS CSS, JQuery, Bootstrap Framework, Grunt task-runner and the Bower Package Manager.

The Software

Adobe Photoshop CS6, Adobe Illustrator CS6, Sublime Text 3, Mac OS X Terminal

The Design

I took this project on as an independent freelance Web designer and developer. This was my first project as a professional freelancer, and it was definitely a steep learning curve. I started this project by thinking about the logo design. My first task was to create a mood-board that would help me to start generating some ideas. Using the mood-board, I began thinking about colour schemes and font-families. I wanted a colour scheme that was sophisticated and reserved. I experimented with a few colours and settled on a scheme made up of dark greys and blues.

Once I had the colour scheme, I then matched the colour scheme with some fonts to carry an image of high-quality, simplicity and sophistication. Eleventh Heaven is a brand created by Ann Mckavney; I decided to use this name in my branding designs, making the logo feel more personal and also s little more 'high-end'. I abstracted the initials AM from Ann Mckavney and applied some strong serif fonts to them, my first instincts were to use fonts such as Didot, Garamond or Bookman Old Style. After trialling some serif fonts, I settled on Didot; an elegant, yet strong typeface. Using Adobe Illustrator I then decided to remove the vertical lines of the typeface, creating a logo that relies heavily on negative space.

Once I was happy with the AM, I began working on a style for the Eleventh Heaven, part of the logo. For this, I opted for a sans-serif typeface, again, I wanted something minimal, but strong. For this, I experimented with fonts such as Open Sans, Bebas Neue and Clear sans. Once, I was happy with the design, I presented the concept to the client. I received a lot of positive feedback, and commenced work on designing the website, using this logo concept as a starting point. Unfortunately, when this project completed, the client opted to not use this logo and instead requested a logo that had a much lighter weight, for this logo I used a font called Quicksand, paired with a clean and simple Open Sans on the 'by Ann Mckavney'. This is the logo that is used on the live site today.

Using the logo designs as a point of origin, I began designing the website, this was a fairly simple process and in no time at all, a website was starting to take shape. I decided to create an index page that would introduce the brand and link to all of the individual product pages. I decided to design the site with a large hero image underlined by the site's main navigation. I also added the two most important links to the top left and right of the page, these navigate to the Eleventh Heaven facebook page and Contact page respectively. Underneath the introductory text, there is a larger navigation section containing extra information about the types of products Eleventh Heaven offer.

One feature of this site design I am particularly proud of is the two-tier footer that contains a contact form. As this website is only a portfolio-style website, it is important that users can very easily find a way to contact Eleventh Heaven. When it came to the product pages, I decided to create these as a simple grid-based photo-gallery. Users can find more information about the products by hovering over each one, and they can see each item in more detail by clicking on the product. I will talk more about the technical task of creating these pages in the Development section. Once I was happy with the designs, I sent them to the client, who was very happy them, minus a few minor changes. Through constant communication I worked with the client to make all changes necessary and began development on the site.

The site received a Google PageSpeed insights UX score of 98 / 100, only losing points on the sizing of text-link tap targets.

The Development

When I took this project on, I had just left my first job as a Junior Web Developer in February, as I felt the rate at which I was learning new technical skills had plummeted. I had, however, learnt a great deal of new design skills. Since leaving, one month prior to starting this project, I had taught myself Responsive Web Design, the LESS CSS pre-processor and the use of of my first framework, Bootstrap.

Eleventh Heaven was written using basic HTML5 and CSS3. Being the first truly responsive site I'd written, and also using a range of technologies that were new to me, the site took a little trial and error to get right. Working solidly for almost a month, I found myself quickly picking up pace and once I'd completed the index page, the rest of the site was (relatively) straight forward.

The section of the site I encountered the biggest issues with, was the product pages. Originally I had planned to have a single product page that would have all of the different product categories load in via AJAX. Unfortunately, at the time, I didn't have the knowledge to pull off such a feat, and with the deadline for the site looming, I decided to create separate .php files for each product category, within which, the head, footer and product category nav were included via PHP.

Once I had devised a way to display each product category, I set out creating thumbnails to be used on the site, an incredibly time-consuming task. I acquried as many product images from the client as I could and set out importing them into Photoshop, resizing the images and then saving the out as web-safe thumbnail JPGs, and full-resolution web-safe images for use in the photo gallery.

To create the thumbnail overlays, I applied the text label to a div's :before pseudo-element, and the black background overlay to the div's :after pseudo-element. Each pseudo-element became visible by changing the pseudo-element's opacity attribute from 0 to 1.

As a much more experienced developer (thanks mainly to having been given this commission), I am now much more aware of page speed factors and how much page speeds can have adverse affects on the user's experience. Given the chance, the first change I would make to the project would be to compress all of the many images that make up this website.