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.

Up and running.

I'm so hopeless with computers I dont even know how to take a screen grab on a PC...*ahem*...so this is the look I've devised for my site. Lots of emphasis on the logo hehe. I've just tried adding some structured details (like the white hearts) and the borders in the menu are dashed (to look like stitching, hehe). The menu is a simple roll-over, where the background changes colour so the viewer knows to click. There are "next" and "previous" buttons at the bottom for more "news". I'm really trying to go for a minimal effect

For most it's probably not a big deal but I am really proud of myself - I was able to activate the "original" lightbox in my site completely by myself. HOORAH! It looks really cool ^_^
I've included as many of the pretty pictures from the magazine articles as possible.
NB: the bright circle in the background is just my lamp...

I had really, really wanted to incorporate a "tab" menu from the scriptaculous library website as part of the "contributors" page (i.e. a tab each for illustrators, photographers and editors). Unfortunately I spent a whole day trying to get it to work, and even asked a class peer for help, and neither of us could get it working. So unfortunately, at the moment, it looks like that isn't going to happen.

First attempt.

^ my first attempt at the website...yes my menu was in a table (boo) and it was all looking pretty boring (to me at least). I wanted the logo prominent and in either the top left or right hand corner. You can see me trying to implement my awesome animal cut-out masthead. I wanted the container to be mostly white (like the magazine).

Just a journal entry.

Unfortunately, despite my determination to take up a computer-central subject, I am in fact hopeless with computers, or technology for that matter. Even the smallest effects on websites impress me.

But enough of that. Since "a cloth-covered button"'s audience ranges greatly in age I didn't want too many special effects; the magazine is not flashy or showy, but personal and self-published. The creators pride themselves on not including any advertising, therefore there is no need to have any on the website either. It is evident to me that my clients would want to maintain a close connection with their readers, not wanting to alienate or alter their image in any way.

It is my intention that minimal scrolling is necessary.

When we took a look at the javascript libraries online I was truly amazed at what was available without having to use flash. My favourite was a puzzle demo on the scriptaculous library. I had always thought you'd need programs like flash to do things like that (see, I know nothing).

I also don't really surf the internet much...(I know, what am I doing here?)...but I really like the T2 website and Frankie website. They're my current inspiration for my design (a kind of combination of the two), with Frankie's indie, pastel feel and T2's structured, square look.

<3.

oh yes, the blog.

After my initial "feel and look" designs I decided I really wanted some cute illustrations to provide the overall...look and feel of the site, as well as being part of the frame/structure, as "a cloth-covered button" seems to concern itself with quite a bit of aussie illustration. It is important to me that the website reflects the magazine not only in its content but its feel so that viewers instantly know they are looking a the magazine's official website (hypothetically speaking) = emphasis on the logo.

Here's a few of the illustrations I did to start off:

These are to accompany each page's name so you know where you are on the site, i.e. "home", "contact us", "contributors" etc. The first edition, which I'm unable to get, had illustrations of paper dolls on its contents page, so I thought it would make sense to draw up some of my own and plop them in somewhere.

The second edition has material textured animal cut outs on its contents page, so for the "masthead" I made this:

Every aspect reflects the magazine. The main colours I'm going to use are the logo pink, black, white and grey, the four main colours used in the magazine. The magazine also uses a lot of white space - providing a neat look, but also some more personal features such as speech bubbles.

Since only two editions have been published so far, there isn't a horde of material to work with, therefore I have been combining many elements from the two editions available. Above I have taken the paper dolls from the contents page in the first edition, and the logo-pink speech bubble from the contents page of the second edition and morphed them into each page's heading.