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)

On going process

Spent a busy week downloading images from CMYK for the site – mostly covers of about ten issues, plus some sample spreads. First thing I did today was to paste the cover images into the footer section of my template.

Next I used Photoshop to create the two different images for the magenta square logo. One is just a blank magenta square, and the other is the same with a white version of the CMYK logo inside. I’ve never used Dreamweaver before, but the “Rollover Image” feature was really easy. My original idea was to have a home page with minimal text, so the directions for each button or feature will only appear when the mouse goes over them. It was easy to add a link to the CMYK main page as well – and when I tested the page in Firefox, it actually worked.

Finally today I used the Template to create a working version of my Home Page, and saved it in the “CMYK” folder.


The main problem I’m having at this stage is that I want to have two lots of content to load on each page – the front cover (by selecting a thumbnail in the footer) and three spreads (by selecting thumbnails in the far-right column). I don’t know how to get Dreamweaver to do both on a single page! I’ve tried using iFrames without success, because I can’t get them to work properly. I may have to go back to my “HTML for Dummies” book and read about them.

Time to start from nothing

My first time using Dreamweaver without Dave's instruction, but I found the basic page layout fairly easy. I used Dreamweaver to create a “New Site”, which I called “CMYK”. Inside the site folder, I created a few sub-folders for Current Issue, Back Images and Images, because hopefully this will keep the content in order.

Because I know that quite a few of my pages are going to share similar features, I spent most of my time today trying to create a Template in Dreamweaver.

One of the frustrating things is that Dreamweaver gives you quite a lot of choices for different types of layout – 1, 2 or 3 column, with or without header and footer, fixed layout etc. I went back to the wireframes I’d done last week and tried to choose the one that fitted best with my original design. So after a bit of experimenting I finished up with the “Three column, fixed, centered” layout with a header and footer.

The header will contain the magenta square with the CMYK logo (which will be common to all pages). I’ll have to do this next week with Photoshop, because I don’t have time today. The footer will contain thumbnail images of the CMYK magazine covers, based on my wireframe. And I set up a 1 row x 2 column table in the main body of the template, to contain the cover picture and sample spreads.

If I get any time this week, I’ll use it to start downloading some content from the CMYK website.

I love (*´ー`)

Image taken from this link

（*´▽｀*） (・-・*)
(｡･_･｡) (^-^*) (o^^o)
(*´ー`) (\_/)

Don't you think they are adorable ^^

Wikipedia has quite a good entry overview about them.
ヽ( ´ー)ノ Link

Submission 2: Site Map & Visual Roughs

I submitted Task 2 today. I'm very please with the design. I think it very simple but affective. Got an Distinction for last submission. I hope this one is as good (^O^)／ hehe

Basically, I find the CMYK website is very busy with a lot of information already. So I want to create a seperate site for them just for the sake of promotional. They can treat my mini site as a tool to refresh their "brand".

Context
The CMYK management team wants to create a seperate site/blog for advertising the look of CMYK with:
- Images of the cover of each issue,
- Small thumbnails of CMYK spreads,
- Very brief section of past issues,
- Big section of current issue,
- Future issues.

What we are trying to achieve
The idea is to create a stronger focus on the CMYK identity as a “packaging presentation”.

Audience
Long-term readers
Collectors of the magazine
Subscribed readers
New readers who may want to collect every issue.

Brand Overview
CMYK provides a place where new artists and design students can showcase their talents to creative
directors, agency principals and art buyers who read the maga¬zine/website.

Unique Selling Point
An open, healthy and supportive forum for both creative new talents and creative professionals.

A few snapshot from my pdf submission

First time with Dreamweaver

First time ever I use Dreamweaver.
This is what I wrote under Dave's instruction in class.
It's quite cool to see the result as you're writing.
YAY! A big fat cow. OMG Web Design!! hehe

Favourite Design Sites

To me, www.notcot.org is a design feast site. I love the layout, the style and all the news about latest design trends.

Another one of my favourite site about typography is: www.ilovetypography.com A witty and nicely design blog featuring all the current news in type and typographer. It's far more than just a blog though.

That's all for now.

Submission 1: Competitor Analysis

For this assessment task, I have chosen CMYK Magazine. CMYK is published quarterly and sells approximately 70,000 copies of each issue. They currently have a website at www.cmykmag.info. CMYK covers many creative fields, including art direction, copywriting, design, photography and illustration. While it is published in the USA, CMYK welcomes submissions from around the world.

The aim of CMYK is to “bridge the gap” between emerging creative artists and industry professionals:

• It provides a place where new artists and design students can show their talents to creative directors, agency principals and art buyers who read the magazine/website.

• By featuring the work of both professionals and peers, it provides inspiration and support for young creative people.

I studies four website as part of my site competitors: Noise, EMPTY, Creative and Monster Children.

A good way to learn Web Design

is to create your own blog.

I first learnt about web design from creating my own blog. At that time, I only know a few functions of a blog which is new entry, publish post, edit and delete. I don't even know that they have the function call "Edit Html" in every post.

And from tried out "edit html", I learnt about html.

The rest is history :) The good old day with blogging and a few childish html.

Young designer can be so naive! (Speaking from my own point of view)