Online Magazine v3

look very nice but I think few of changes can make this design speaking which is basically in regards to the color scheme and a bit about content placement.

Attached a screenshot with some revisons in your layout.

I think you should try to use subtle tone of he colors to match with the rest theme of your design.

I like this, it says magazine much better than the last iteration.

Some major and minor usability issues will pop up though:

A) "Our Stories this Week" looks a lot like the actual stories links, I thought there were 4 articles when I saw it.

B) No functional site here, so I can't tell for sure, but I presume the "Articles" menu at the top is a drop down. If so it looks like you'll be covering up your stories links as well as the title of the site. You don't ever want to cover real content with a drop down!

C) You should have more definition for a footer on a site like this. It's the kind of site that you are hoping people will browse top to bottom, so make sure you give them something to do when they get there. The footer blends in a little bit I almost missed it. Might be as simple as moving it down a bit to put some space between, but I would probably try to echo the header design a bit with the white/brown.

D) What do the "read more" links and speech bubble with numbers in mean (in the header area)? To me they look like comments, but they appear to relate more to the items themselves. If they mean the same thing as the "More >>" above the images you are being a bit redundant.

I might simplify your color scheme a little too. Looks like you are using 7 different yellows/greens 1 - HW title back 2 - Inactive header stories 3 - Active header stories 4 - Sidebar headers 5 - Pagination Links 6 - Active Page 7 - Arrows under screencasts

That's probably a bit too many (and that doesn't even include your links and comment colors or the background colors. I would probably make 5/6 the same as 2/3 and 7 the same as 1.

A few alignment issues as well: your header bars in the sidebar don't appear to line up with the advertising/RSS/Twitter on the left and there should be some kind of alignment there. The text, headers, and speech bubbles should probably line up with the left side of the images in the top area as well.

Looking good!

This is nice and clean but the only issue i have is the first page image - the close up image (of Red-Indian) is way too big.. however, i loved the way the space is being used on the 4th concept image (the farm image) - nicely balanced page that is.. may be we need something similar on the 1st page sample- let it blend.

Dear Serina,

It's getting better and better I must say :) but I'm still not happy with usability issues:

1. New visitors need to know what it is. Please introduce visible tagline somewhere at the top. (Please refer to my mockup)

2. Acronym HW should be explained and at the moment Humanities on the web look as a separate entity not connected with the HW - I would suggest moving it up and incorporating into logo.

3. Simplify top menu - IMHO the is no need for About (you can have it in the footer) because tagline will explain the concept, and Screencast should be a part of tutorials, not a separate section.

4. Search box should be bigger and easily accommodate at least 27 characters (average length of the search). I would move it lower so there is more space for bigger menu links.

5. one story of the week should be enough, otherwise it's getting complicated. Not mentioning someone will have to write 3 big stories every week :)

6. Read more should look like a button and be closer to the title of the article of the month so there is connection by proximity in users' mind

7. Section titles should be big and visible.

8. I would get rid of those balloons with numbers inside which are not clear - people will not understand what it is.

9. I would cut in half amount of intro text in each of the articles on the homepage. This 1-2 sentences should be also be written as a Standfirst (this should explain better: http://bit.ly/9pq7jH)

10. Aren't categoires the same what tags nowadays? I would get rid of them unless you have a very clear need to keep both.

11. Screencast can go :) - IHMO they should become a part of Tutorials as a lot of people will not understand the difference - I don't :)

12. I would also consider introducing buttons a links in Read more under each Section (Articles). You want to make it more than obvious for the first time users.

Hope this helps. Keep up the good work :)

Cheers!

Michael (user experience designer & strategist)

Hi Serina,

This is looking really great.

I love your bravery with the yellow - the arrow headlines work as great calls to action.

Tagline I think Humanities on the web is great - I prefer the position of the tagline where you've put it to the position which Michael suggests - having it at the top above the navigation I think it starts to fight with the navigation and both clammer for attention at the same time. The position you have it here below the HW feels better in terms of hierarchy and 'clean-ness' of design. Maybe if you get a lot of feedback that people are confused as to what it's all about then put another smaller tagline below Humanities on the Web in the same green box just in smaller copy.

Read More What is this read more story related to? Is it to do with the native american pic? Is it connected to one or all of the headline arrowed stories?

The Recent Articles font and the one used in the footer This looks to me like Kabel and feels one font too many. I'd stick to the nice strong condensed caps font and use that again for Recent Articles and then keep the Georgia for the story headlines as you have now.

Length of stories These I agree with Michael could be cut so there is more teaser on the home page and a more... to click through to. More like the home page of a big newspaper.

Colours The green on the Most Read, Commented on etc is a different green to the Humanities on the web right at the top. There is the blue and the yellow - I'd use the same green for the Most Read and Commented on straps as you've used at the top left to keep the colours down to three.

It really is looking lovely so far though. :)

header can be much better

I really like this design, i like the way you have used a large image in the background that splits the nav and body content.

The thing that catches my eye a lot is the amount of text in the posts area. These really need to be shorter. Maybe try cutting them down to the height of the image. If not then maybe have the text wrap the image. It just seems the sample post has too much text on it which could make the user not feel the need to click to read more of the post.

Overall a really nice design witch some good idea. Good work.

I think the pic at the top could be smaller so you could get more meat higher up on the page.

Also not sure why "Preserving Our Native Languages" is gray at the top when the restof the arrows are yellow.

Maybe a blurb somewhere on the page about what this site is?

Most Read/Commented on, etc. could be in a widget with tabs instead of having to scroll for each, just tab to the one you wnt.

I really like the date tabs to the left of the articles. I also like the color combo of yellow, gray, and green. And the image is gorgeous, I just think it takes up too much real estate.

Good job… looking nice

Serina… hmm... I think you are almost about to accomplish the goal of this website, however, few of things which I think have room of improvement.

• I think this design need to have a better color combination which should appreciate each other. Colors are not appreciating each other you need to try simplify the colors and try to use the same tone ( bright green, yellow, subtle brown colors used in background not appreciating these link, also can you try to use a image which will be more likely to use on this website or if this type of image will be used then try to use a white light shade of gray which should be almost close to white )

• Can you try to elaborate on these links (OUR STORIES THIS WEEK, PRESERVING OUR NATIVE LANGUAGES…. GOGH ONLINE) a bit more as I am not sure on the arrangement of these link, maybe there could be a better alternative arrangement for these link

• Bottom half seem like a blog theme design I think a lot can be happen on the content management on this page so sharing few link which I think may help you: http://demo.rockettheme.com/jan09/, http://demo.rockettheme.com/may10/ , http://www.gabfirethemes.com/demos/transcript/, I personally would recommend to use “Juxta” theme which seems very clean and uncluttered, however, you can take the inspiration for the content arrangement for both Juxta and Mixmag designs.

• Fonts selection should be consistent thorough out the website which will make it more easy to maintain using the CSS/ a bit help of decreasing the page and CSS load time which will help in overall website performance

Hope this helps

Thanks, Haider

I love this one.

I will add a screenshot with the 2 small changes that I suggest.

the changes are: 1. the navigation for the "Our Stories this week", it's just a suggestion. 2. arrows from the "Latest Screencasts"