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.

Design Rationale

From my research in Task One I came to understand that one of the most important aspects of a website is the navigation. The sites I found with the most user-friendly navigation had a strong sense of structure and layout with menus and headings bold and in obvious places (top/bottom horizontal or left verticle). For this reason the two layouts I have fleshed out have these qualities. I also found it was important that the site project the essence of the “look and feel” of their magazine - which influenced my choice of colours (pink and white), as well as what images to use (images from the magazine itself). So, the more imaginary the better - better aesthetics - BUT do not crowd the page - hence strong structure is needed.
Another issue is knowing that you’re at a magazine’s OFFICIAL website. For this reason I want to either have the actual “a cloth-covered button’s” logo or the title large and in the appropriate colours.
I am also hoping to add more “textile” details, such as measuring tape for the example 2 menu.

Look & Feel

WireFrames

Site Map

Task 2

web analysis

A cloth-covered button is a recent magazine birthed in the trendy, fashion-conscious streets of Melbourne, Australia. It has a cute, indie sort of décor, complimenting the intelligent conversion around reviews or tips on current fashion trends, popular culture/lifestyle and design conventions. It also contains impressive art/design pieces and stories, providing an array of material. With only two issues released, a cloth-covered button has made a dynamic entry into the competitive world of magazine publishing and is a personal contribution from creators who endeavoured to make a magazine they would want to read.


a cloth-covered button’s
target audience:

* Ages 18 - 30
* Women and men.
* Those interested in Australian design.
* Intellects interested in reviews or tips on current fashion trends.
* Fashion designers and graphic designers.
* Those interested in the discussion of popular culture and design conventions.


PERSONAS:

Yuki ~

Yuki, 18, is a female Japanese international student starting her first year doing a graphic design degree in Australia. Ai is interested in many aspects of design – illustration, computer-generated imagery, photography and textiles. She would like to know more about the trends in graphic design//fashion in Australia (western culture) as well as familiarise herself with Australian designers. Her English is limited so she partly relies on iconic symbols and general format found on websites. Since she is only starting her first year she has no professional knowledge in design or design technologies.

Emma ~

Emma, 28 [female, fluent in English], is a fashion designer working in the industry with substantial professional experience looking for inspiration. She is interested in the design trends of young people in Australia, as well as up-and-coming designers. She is also generally interested in popular and street culture, and is very familiar with websites and blogging. Intellectual material is stimulating, but she can also admire a lovely piece of visual/fashion design simply for its aesthetic appeal.



Wooden Toy

yuki <3

Positive:
* Yuki is instantly drawn to this website because it displays graphic artwork on its home page – also confirming she has the correct website.
* It is obvious to her to click on the artwork, as they change into colour when the mouse hovers over.
* Getting back to the homepage is not a problem, as most sites use the website icon/title as the link to the home page.
* Yuki likes what she sees and finds it easy to join the mailing list with its prominent submit button.

Negative:
* It takes Yuki a few seconds when she is in a display window to figure out how to view more, as there are no next/previous buttons.
* She sometimes gets confused on which text is clickable and which are just headings.
The moving news banner goes too fast for her to read.


Emma <3

Positive:
* Emma appreciates the lack of scrolling needed to view the whole of a page.
* Emma, who is quite web-literature, actually prefers text icons over symbols, and really likes the neat “newspaper” feel of the layout.
* Once she has found the shop, Emma is satisfied, as she likes to purchase online and enjoys designer merchandise (she probably buys a little too much but we wont tell her that).
* Enjoys the section devoted to up-and-coming designer’s stories.

Negative:
* Emma is used to be being able to slow banners down or click on them.
* The shop icon, because it is located on the far right side took some time to find.
* Emma would like to be able to read one or two of the articles inside the magazines so she has more of an idea of what she is going to get.



Frankie

Yuki <3

Positive:
* The main navigation is obvious in a column down the left-hand side.
* The large homepage is not a problem, as scrolling is a comfortable practice and the page is uncluttered.
* The home page tells you it is an Australian based magazine.
* The site is visually appealing and interactive.

Negative:
* There is no large and official looking Frankie title for the home page, which makes her wonder if she is at their official website.
* Yuki is confused by the some of the titles in the secondary pink navigation system, such as “all sorts”.


Emma <3

Positive:
* Looking at “past issues”, Emma easily navigates using the icons.
* The page is visually appealing and reflects the nature and intent of the magazine.
* The online shop was easy to find and once again Emma is excited about being able to purchase online.
* The site provides information on up-and-coming designers/artists, as well as fashion.

Negative:
* Emma finds the pink tag links to be slightly redundant and confusing.
* Emma would like to purchase their calendar but cannot find it in the link provided. If it is sold out they should say so!



Poster Magazine

Yuki <3

Positive:
* Yuki is told on the homepage that it is Australia based.
* Navigation bar is located on the far left side, a nice obvious choice.
* The large image of the magazine instantly tells you you’ve found the right website.

Negative:
* It is not visually dynamic.
* The “post online” title is not initially apparent as to what it is going to take you to, and for a while she thinks she will not be able to see any of the magazine online.
* The “home” title in navigation bar is not located at the top.
* When trying to join the mailing list Yuki is unsure about the “html/text” drop menu.


Emma <3

Positive:
* Format is neat and all can be seen on the home page without scrolling.
* Emma is pleased by being able to see the main pages of the magazine online in a way that allows her to get a really good glimpse into the magazine and its content.
* Pleased by being able to purchase online.

Negative:
* Emma would like to see more visuals of the magazine while searching through their site.
* The site is not particularly interactive, unique or aesthetically appealing.



Dumbo Feather

Yuki <3

Positive:
* The banner displays the title of the magazine in plain sight.
* Main content is in the centre and slightly to the left – appropriate placement.
* Hyperlinks become underlined when the mouse hovers over.

Negative:
* There are too many navigation bars, and the tag cloud is too overwhelming to even try to decipher and wander through.
* Blog entries are repeated throughout different categories.
* It is not obvious which page you are on.
* The aesthetics are not engaging, there’s too much text, and Yuki does not sign up for the newsletter.


Emma <3

Positive:
* The homepage does give names of some of the designers discussed in the magazine.
* There are a few pages on display from the magazine.

Negative:
* The aesthetics of the pages are quite bland and do not reflect the earthy, organic, photographic feel of the magazine.
* Emma is unsure as to whether the blog entries on the homepage are articles found in the magazine.
* There is hardly any information regarding the designers discussed in the magazine.
* There is an online shop but Emma doesn’t even get that far and leaves the website.