Final Mock Ups



index layout

about layout


projects layout

project page

contact layoutd


Minor changes have been made such as text color but layout is the same.


Browser Test Report

Tested in Firefox 29.0.1 on Mac OS X 10.9.2

Screen Shot 2014-06-13 at 10.57.34 amScreen Shot 2014-06-13 at 11.22.35 am

Tested on Google Chrome version 35.0.1916.114 on Mac OS X 10.9.2

Screen Shot 2014-06-13 at 11.27.47 am

Screen Shot 2014-06-13 at 11.28.58 am


The major difference between browsers that I have is that my image carousel only works on Safari because I had to remove the browser specific animation instructions in order for the code to validate. It’s not a huge problem because it doesn’t break the page or anything, it is just a nice feature. Aside from this the colors display brighter in chrome, and the font renders slightly smaller (although that could just be me trying to spot a difference). Neither of this affects the layout either.

Concept Statement

The client for my assignment is Debbie Lamb who is an independent Stampin’ Up! Demonstrator – she creates greeting cards and craft projects that are ideal to display online. The site I created was a business page for her, as well as a hub for her to display her projects to inspire and inform potential clients. The website is not one that I intend the audience to regularly visit, rather a source of information for the business and for craft projects. The target audience for the site is stampers, predominantly females 18 – 50 years. I wanted to create a site that was very easy to navigate and not overcrowded with information.


The focus of the site is on the pictures so I wanted to make sure they were easy to view in all browser sizes which I have done by placing all of the objects within the page relative to browser size. I created a maximum width of 1800px to ensure that the header images were not over stretched at larger widths. I chose this size because the average screen size is 1366×768 according to TechCrunch so the majority of visitors would see the full screen, fluid web page. Those that have screens larger than 1800px see the page fixed in the middle with an unintrusive, slightly patterned white background which I chose to not distract the user from the main page.


I chose the color scheme of the website to complement colors within the images, so that it did not clash. I used tints and shades of green and pink for most items, including headers, body text and background colors. Pink tends to represent females and so I thought it was appropriate for a predominantly female audience, while including a large amount of green to not overpower the visitor.


I used three major fonts for the website – a bold, uppercase font for page titles within the header image which demands attention (complimented by a handwritten font on the index page), a cursive font to make up the site logo (Pacifico), and a plain, sans serif font (ABeeZee). I chose a variety of fonts because that is a characteristic of craft websites, as craft projects and greeting cards tend to be quite typography focused so it makes sense for the website to reflect this. I ensured adequate font size, line spacing and padding was added to text so that all viewers could read it with ease.


I placed the page titles on header pictures, within shapes as a ‘funky’ website characteristic. Like the header images they are unique to each page to also reflect the different types of visuals that can be done on craft projects and greeting cards. I also utilised borders to separate text and information throughout the site.