RATIONALE

http://uts.universalfavourite.com.au/thu/an_phuong/Home%20Page.html

My website proposal is for CMYK magazine. CMYK is published quarterly and covers many creative fields including art direction, copywriting, design, photography and illustration. The aim of CMYK is to “bridge the gap” between emerging creative artists and industry professionals by welcoming submissions. It provides a place where new artists and design students can showcase their work.

CMYK has an existing website (www.cmykmag.info), but it tends to feel very “busy” and doesn’t have the most attractive look. The intended audience needs a website that displays the magazine in a stylish and informative way, with simple and intuitive navigation system. I have chosen to create a “mini” website which can act as a first point of access for people who want to browse the recent issues of the magazine. A link is included to take them back to the main CMYK website if they wish.

The main features I have included on my mini-site are:

• A link to the CMYK magazine site;
• Covers of the current issue and 8-10 back issues;
• At least three two-page spreads from each issue;
• A “special features” page – basically a gallery of design work;
• A subscription page (web form) for the magazine; and
• A feedback page for people to leave comments about the magazine or website.

My main design features are:

• Black background, which is easy to read and makes images stand out while also having a stylish appearance;
• No text or minimal text visible on every page. Because the mini-site is aimed at designers, I want the look to be as visual as possible and the navigation interactive. Directions appear (in white text on magenta buttons) when the user moves the mouse-pointer over a button to see what it does;
• Option to click on smaller images and thumbnails to see a larger version;
• Reasonably large on-screen format, as most of the target audience has higher resolution monitors.

In putting the website together, I have tried to keep images small (for faster loading) and used thumbnails wherever possible. I have also included alt text options for people with slow browser speeds or browsers that do not support images. The website was built using Dreamweaver.

I asked a number of fellow students to test the website for me. They found the layout appealing and really liked the interactive nature of the buttons and images. They also were happy with the navigation buttons in the “Special Features” section, and told me that the whole site had good usability.

I believe that I have created a successful mini-site that allows users an easy way to discover what CMYK magazine is all about, while allowing them access to the main site if they need to get more information.

Two many emails

Just checked UTS webmail today. So many emails from Web Subject!!! :D

Didn't attend class last week and that's why I have no idea how to upload the whole thing on FTP site. I was trying to "Save to remote Server" but nothing work. I have no idea how I manage to create the empty folder call CMYK under my name and still can't upload all the files online!!! So frustrating!!

I called Adella + Aditya for help but it doesn't help hehe :D

By the way, I will try to email Dave soon to see if I can upload the whole file in class with his help!! T_T Too tired to do anything else now!

About to die :D

Just cleaning everything up today, making final adjustments to screen layout by previewing everything in Firefox. Made sure all the links work, and I tried to remember to add alt text option to everything I could. Checked with Dave and he said everything was basically finished now. I was also pleased to hear that I don’t have to make the web forms actually work (because I still don’t know how>_<)!

But I think the layout is consistent and I’ve managed to match the look of my original design in most places.

User testing
I ask Jaclyn and Adit to see the site. I think the site is quite easy to navigated.
But honestly, my kind of user testing is using self reflect. I'm sure the way I read would be similar to every one else.
...

On going process (part four)

Basically I just copied the page I’d made last week and changed it around for the “Subscribe” page. I think I actually understand forms better now, and I’m able to create the drop-down lists etc. quite easily.


Wow, at the end of today my website is basically finished. There are a few little problems to fix, such as getting rid of links to select the current page etc. But I’m pleased with the minimal text look of everything and personally I find it easy to navigate and understand.

On going process (part three)

Finished the “Special Features” page today and got all of the “rollover image” buttons working. This page is looking good now.


Also I did some reading about web forms (not very helpful!) and struggled a lot with setting up the different kind of buttons in Dreamweaver to basically match my wireframe designs for the “Feedback” page. This is a very slow process and I’m not finished yet. Struggling a lot with forms and also I don’t know how to make them work. Will have to check with Dave about this…but I think the page looks good.

On going process (part two)

While I was playing around with Dreamweaver this week and reading the Help menu, I found out about the “add browser window” option that lets you click on a thumbnail (or any link) and open the full size version in a new pop-up window. You find it in “add behaviour > open browser window”. I added this to each of my cover images, so that users can see the full-size covers and download them if they want to.

I also made the other three “rollover image” buttons today to link with “Special Features”, “Feedback” and “Subscribe” pages of my website. I think these pages will be pretty easy to create, though I’m worried about the two web forms because I don’t really know how to use them.


Last of all today I changed the Template a little bit to create the basic layout of the “Special Features” page. This is just going to be a gallery to display some featured artwork – about five pages in all, I think. Need to download some artwork to display here through the week, and also use Photoshop to create some more magenta buttons – to let users go to the “Previous Image”, “Next Image” and back to the Home Page.

iFrame = in line Frame

I solved the iFrame problem. I didn’t realise that I had to insert a bit of HTML code with the “target” in each link, and also that I needed to give a name to the target iFrame. Once I did this, I was able to get the spreads to load into an iFrame in the right-hand column of my table.

But it’s too difficult to make a frame within a frame to do the separate issues as well, so I guess I’m going to have to create a separate page for each issue and switch between them. So when the Home Page opens, it will display the current issue, with thumbnails for the current issue spreads. If the user wants to go to a previous issue and clicks a thumbnail at the bottom, the link will go to a completely new page. So I need one page for each of the nine issues. This is quite easy to do from my template by cutting and pasting.

So now I have the beginnings of my website and it works quite well. The layout matches my wireframe design, and I’m able to choose between the nine issues with three spreads in each one. The problem is that my images are quite large, and they take a while to load – so I think I’ll take some time through the week to resize them in Photoshop and fix up all the links.

By they way, I need to get the book "Design for Dummy" (if they have one)