Magic Egg Productions

A new beginning

Magic Egg Productions are a new company that specialise in making information accessible to the widest audience possible, whether giving advice on website accessibility and/or making things accessible by translating material into British Sign Language (BSL) videos that feature voiceover and subtitles.

The Brief

As of yet the client does not have a large amount of content to show people so they needed a small website that has the flexibility to grow over time. At present they need a few pages that clearly explain who they are and what they do. The website also had to meet WCAG standards of website accessibility.

As the website is comprised of four pages and at the start existing content will not be updated with regular frequency. Therefore, the client and I agreed that having a dynamic website built with Wordpress would be over doing it.

Website Design and Build Process

Part of the brief was for the website to be in two colours, initially black and white and then through the colour switcher the user can change black text and icons into different colours. Therefore, moving elements of the website around was just as easy in wireframes as in Sketch (the app prototype program), which in term sped up the beginning design stages.

For the style of the website I wanted it to be very clear and impactful in order to make for an interesting first impression. I chose the Gobold font which is a tall condensed font with very striking letter forms. The font works well within white space. The font also works with a thick border that goes around the edge of the browser window frames.

The website has a theme colour switch function which when opened allow the user to chose a different colour and that will change the colour of the websites fonts and icons. Each possible theme colour was chosen via the WCAG AAA colour contrast checker to attain the most accessible colour contrasts.

Once the client was happy with the mockups I moved onto developing the site in code. I then built the structure of the website with semantic HTML (the document code of the website) and next I placed in other accessible enhancements. These included: placing title tags on links; alt attribute descriptions on images; and where possible implementing ARIA code ('Accessible Rich Internet Applications'). ARIA code can help users with visual impairments, who require a screen reader.

After the client had thoroughly tested the website on a number of different devices and browsers in a private staging area the site was pushed to a live server.

Logo Design

As Magic Egg is a new company not only did they need a new website but they also needed a new logo. The brief for the logo was similar to the website in that it had to be very clear, flexible and distinct in a range of different sizes and different colours… and it should feature an egg.

With this in mind I spent a long time looking for inspiration amongst egg logos in Google images and Dribbble but it wasn’t until I stubbed across the following image on my Twitter feed that I had a light switch moment.

I fired up a 3D application and began to build a 3D egg shape that I could wrap stripes around. After trying out a few variations I came up with a render that I was happy with and then converted it into a vector graphic that could be shrunk and expanded to any size.

After smoothing out the original render I proceeded to test the logo graphic in many colours, tints, and sizes. I also placed the logo alongside the website font to see if they were suited. Next I presented the designs to the client and explained my reasoning behind the designs.

I think what appealed most to the client was the flexibility of the logo, including that the logo had the flexibility to change colours along with the many different colours of the website was a big plus.