Sun Kiss Tan

Software Photoshop iconWAMP icon
Sun Kiss Tan thumbnail

It seems that around the end of my tenure at this job I was able to do some more creative projects. This was one of those where I got to handle a majority of it from start to end. By majority, I mean that I didn't have to answer to many people on this one, and was able to design and develop some stuff without the worry of having to please all the cooks in the kitchen.

This was done for my boss's ex-wife's tanning salon. It was a welcome change of pace from all the dentistry related content. I mean c'mon, what would you rather look at? Peoples mouths, or people in swimsuits?

To start off this redesign. I wanted to come up with the logo first and develop the new site around it. I created a sheet utilizing different fonts with the text that the logo had to contain. I got some opinions about what people liked and cobbled together the logo.

Sun Kiss Tan logo fonts

Sun Kiss Tan logo options 01

Sun Kiss Tan logo options 02

I then created two mock-ups for the homepage of the website. One had a cooler ocean feel and the other had a warmer beach feel.

Sun Kiss Tan color option 01

Sun Kiss Tan color option 02

After I got approval on the homepage I continued mocking up the rest of the site.

Sun Kiss Tan drop-down menu

Sun Kiss Tan pop-up

Sun Kiss Tan social media

This was another WordPress site so I created a custom config menu page, and a custom plugin that'd allow the user to upload and edit an image that could be used for the banner of each page.

Sun Kiss Tan custom menus

Sun Kiss Tan general info

Sun Kiss Tan banner images

For the Custom Banner Images the user first uploads an image.

Sun Kiss Tan banner image uploader

After the image is uploaded it will appear in the module below the uploader. This module shows the original image and the cropped image (or the image to be used for the banner). When an image is first uploaded, nothing will appear in the Cropped Image column. The user must click on Edit which will open a pop-up where they can grab the image to frame it within the given frame, then use the Scale slider on the right to scale the image to their liking. This is all done without any Flash plugins so it works in browsers that support Javascript.

Sun Kiss Tan banner image editor

Once the image is cropped, they can then go to a Page and there's a module on the right side that allows the user to assign a specific image per page. There is a default image that is used for every page if one has not been selected.

Sun Kiss Tan banner image selector