Rationale.

A cloth-covered button is a local Melbourne magazine of the indie variety which concerns itself with both the fun and intellectual sides of fashion and design. So far only two editions have been released, which on one hand limits the amount of material I have to work with quite substantially, but which on the other hand allows for the opportunity to design without clutter or an overwhelming amount of information.

The most important aspect of web design which I realised through the original research project on websites was the importance of instant site recognition – that the site reflects in every aspect of its design the magazine. The other was the importance of being clean in your layout and allowing for breathing space. This I have tried to implement through my navigation, colour scheme, choice of images and layout.

The current site which exists for a cloth-covered button has minimal options and reflects the blog more than a website. That site includes the commenting function, however from my observations of this function very few use the commenting function and tend only to ask about purchasing the magazine or even abusing the creators of the magazine. Therefore I have decided to include a mailing list function for those who want to keep updated, and the facebook option which would allow readers to contact the creators.

:
In the end I have deviated slightly from my original wireframe – I have included the “artists” page in “contributors”, and have spread “magazine articles” around “issues” and “contributors – writers”. I felt some of the menu options were redundant and so decided to cull them down. I have since reduced the number of menu options, however since in the start of this project I had almost a dozen options I decided to use a vertical menu for practical reasons. The hover effect is just a nice way to telling folks they can click on the link.
Instead of using scroll bars I decided to use icons which represented “previous” and “next” for navigating within a page. This is because I find the aesthetics pleasing, but also I find most people dislike having to scroll unnecessarily. The paperdoll speech bubble images in the right side of the header are there to tell the viewer in which page they are so they don’t get confused when going back and forth.
There is also a “search” option underneath the “sign up to mailing list”.

:
Quite simply I chose my colour scheme based on the four primarily colours used in the magazine: pink, white, grey and black. I wanted neutral colours so that images wouldn’t clash and the pages begin to look too busy.

:
The logo for a cloth-covered button is the most important and prominent feature of the page, located in the top left-hand corner and surronded by white space. The magazine also uses a LOT of white space, so I wanted to recreate this look. I wanted the site quite compact and able to be read either without scrolling or with a minimal amount of scrolling. Some websites can be confusing, and so given the age range of my audience (18-30s) I stayed with the basic layout of having a header, footer and column menu.
Within the maincontent of the pages I used a rounded box image for the backgrounds to separate the information. If more information were needed to be posted I would create a “next” link to a new page.

:
I created all of my images. The header is a combination of the two available editions of the magazine. The second edition uses cut-outs of animals, so I created some of my own based on their design, and the paperdoll speech bubble headings are taken from both the contents pages of the first edition and the second edition. I wanted to reflect the indie culture, as well as keeping the site sophisticated and clean.
I really like the effect of the lightbox, the way it creates the shadow over the rest of the site, so I used the effect for almost all my images. Unfortunately I was unable to get the first edition of the magazine, which is why there are no images of the spreads within.