Welcome to the MacNN Forums.

Lateralus · Mar 16, 2005, 01:51 AM

I say bring back the pinstripes. The top seems too naked without them.

Mar 16, 2005, 01:53 AM

Well everyone, : Pin stripes or no?

Xeo · Mar 16, 2005, 02:14 AM

Originally posted by Nick:
Well everyone, : Pin stripes or no?

I kinda like 'em. Gives it a bit more character. I agree they look a bit naked without 'em.

Randman · Mar 16, 2005, 02:20 AM

Considering how many people de-pinstrip Aqua, I'd say no. Better to be minimal and readable than try and do too much and fail the readability test.

Stradlater · Mar 16, 2005, 02:27 AM

The header looks good, but I agree with effgee, that the text below needs wider white margins for legibility. Also, any reason for "Apple Stock Quote:" instead of "AAPL"?

Oh, and stripes or no-stripes is fine with me, but I think simple is better, so no-stripes might be the way to go.

Steve · Mar 16, 2005, 02:33 AM

Originally posted by Nick:
Well everyone, : Pin stripes or no?

Resounding YES.

Demonhood · Mar 16, 2005, 02:42 AM

Originally posted by Superchicken:
As well for the forums... can we PLEASE have a cleaner look? And perhaps better smilies? ...
To be honest though... I actually consider MacNN's forum to be one of the ugliest I've regulared.. it's not terribly pretty.

i've always thought these forums had the simplest design out of all the ones i've visited. not a lot of gratuitous graphics or distracting elements. so i'm not sure what you mean by "cleaner".

as for the smilies, i'm keeping the ones on this board until i find better ones. once again, i like the simplicity of them. the first thing i did to vb3 was delete the smilies it came with. U G L Y.

nate_02 · Mar 16, 2005, 02:44 AM

Originally posted by Xeo:
I kinda like 'em. Gives it a bit more character. I agree they look a bit naked without 'em.

no, pin stripes on a mac are so early OS X

Stradlater · Mar 16, 2005, 02:44 AM

Originally posted by Demonhood:
i've always thought these forums had the simplest design out of all the ones i've visited. not a lot of gratuitous graphics or distracting elements. so i'm not sure what you mean by "cleaner".

I agree. MacNN is the only forum I frequent, and I think it's because it's simple enough to navigate, read, etc.

CaseCom · Mar 16, 2005, 02:52 AM

Originally posted by Demonhood:
i've always thought these forums had the simplest design out of all the ones i've visited. not a lot of gratuitous graphics or distracting elements. so i'm not sure what you mean by "cleaner".

as for the smilies, i'm keeping the ones on this board until i find better ones. once again, i like the simplicity of them. the first thing i did to vb3 was delete the smilies it came with. U G L Y.

Are we going to get new stars? The current ones are looking a bit long in the tooth.

Zimphire · Mar 16, 2005, 08:13 AM

Originally posted by Nick:
Well everyone, : Pin stripes or no?

No pinstripes. Pinstripes are so 2000. And it's true, people are de-striping Aqua right and left. There is a reason for that.

If you want something different there, do something OTHER than pinstripes.

There are other designs you know.

Not that you have to listen to anything I say...

Randman · Mar 16, 2005, 08:19 AM

Apple's even de-striped stuff. Look at how much cleaner .Mac is.

Zimphire · Mar 16, 2005, 08:24 AM

A lighting effect gradient would turn that plain blue (Which doesn't look bad by itself at all) into something a bit more flashy without using stripes.

Randman · Mar 16, 2005, 09:12 AM

Originally posted by Zimphire:
A lighting effect gradient would turn that plain blue (Which doesn't look bad by itself at all) into something a bit more flashy without using stripes.

Yep that would be good, though there's always a chance that the gradient looks horrrible.

fireside · Mar 16, 2005, 09:59 AM

Originally posted by Stradlater:
I agree. MacNN is the only forum I frequent, and I think it's because it's simple enough to navigate, read, etc.

no, its cause the sigs are limited to 200x50px. if you design the cleanest, best forum design ever, and then let everyone go crazy with avatars and sigs, its all worthless.

i don't like the design, but i never actually go to the front page, so it doesn't really matter that much to me.

effgee · 11:23 AM

Okiedokie,

took a good hour this afternoon to whip up a version of the design that incorporates most (all?) of the issues mentioned in my previous post. If I had started this design from scratch, I'm not entirely sure I would have chosen a "blog-like" centered container to hold all of the page elements. But then again, I don't know much - if anything - about the thinking behind the current design, so I don't really have a final opinion yet on whether or not this is the right approach. It certainly does work within the context provided so far.

Here's a couple of comments ...

logo

Less generic looking font for the word mark
(Re-) added the tag line because it makes sense for a news site, everybody knows what its secondary meaning is and creates a nice contextual arch to the "world of Macs". Thus, it is good branding - context and high level of recognition.
Gave the logo mark (magnifying glass) more detail so it looks a tad bit more unique and less like the application icon without completely ignoring its roots.

header

Changed the visual appearance so the header background has a bit of texture and lighting effects to it - there's even the faintest hint of pinstripes without being too old-fashioned (OS X 10.0). The horizontal texturing actually works pretty well because it emphasizes the shape of the header and helps holding it together.
Made the header taller so it gives the logo more room to breathe - doesn't look as cramped.

primary navigation

Cleaned up the navbar (so I didn't have to guess, I used the nav items that currently appear on the news page) and emphasized its unique function (navigation, duh!) through a distinctive appearance - improves usability, leaves the branding area (header) intact and helps the visual transition from the (relatively) dark blue of the header into the light (white) content area. This header can be created entirely in CSS using 4 tiny GIFs + text for the links.
Moved the Apple stock quote from "free-floating in the header" to the right corner of the nav bar - changing the font from bold (nav items) to regular (quote) provides a sufficiently strong visual clue so users won't confuse it with one of the other navigation items.

right column

Re-structured the right column to make a clearer distinction between functional elements and gave each of them its own box with a descriptive header - works fine for the ads as well

main content area

Cleaned up the textual contents to improve content structure so the user can more easily distinguish between meta information (date, last updated, comments, print, etc.) and "real" content which consists of headline + article.

page background

Added a slight gradient that not only makes the background look a bit more interesting but also adds a 1% improvement in usability by providing a directional guide (top > bottom) for the users' eyes.

Click the image or this link for the full-size version.

Usual disclaimer - this is a 1 1/2 hour whip-up. There's still quite a few items that need improvement (color palette, branding, etc.) but without sufficient knowledge of what you guys have defined as the goals for this project it would be a moot point to "just assume" and throw something together for the hell of it.

Mar 16, 2005, 11:25 AM

I like what you did with the side bar. Very Apple-like and nice.

Our readers are very specific about the news body, so I'm not sure if your ideas there would work. People seem to want the most compact thing possible.

I like what you did with the logo. I'll experiment with that, since it looks nice. What does everyone think?

The button bar is interesting, but perhaps a bit heavy. Thoughts?

The lighting effects are nice. I'll try to do that. It seems like msot people dont want the pin stripes though.

Oisín · Mar 16, 2005, 11:41 AM

Originally posted by Nick:
The button bar is interesting, but perhaps a bit heavy. Thoughts?

I agree, a little heavy...

It seems like msot people dont want the pin stripes though.

If they're done properly and 'obscurely', so ones attention isn't actually directed towards the fact that they're there, then they're a good way of giving a sense of size and distance (well, as much as you can incorporate that into a logo).

One thing I think is missing in effgee's mockup, though: Some kind of separator between the various 'entries' in the news block. It's kind of hard to tell where one ends and another begins as it is there.

Mar 16, 2005, 11:52 AM

BTW, effgee, if you're serious about your mockup and you're gonna make further changes, keep in mind that while the banner may be big, it has to be the size used in my version. No flexibillity there.

Mar 16, 2005, 12:17 PM

I've used some of the suggestions, but not all. Just seeing how things look. Thoughts? What does everyone like betther?

Oisín · Mar 16, 2005, 12:34 PM

I still agree with effgee that there needs to be more space around the text - and between the text as well. Maybe if, in addition to increasing the line height, you also reduce the text size a point or two, that will look better. And justifying the text might help to prevent it looking like it's trying to 'run away'. Incorporating the blue into the text (for headlines and links, as in effgee's mock-up) is also a good idea, it gives a red (or blue) thread to run through the design.

And to be quite honest, I like the floating navigation bar better - it also rids you of the problem with the rounded corners at the bottom, which doesn't look so good, by simply letting the blue box continue into the 'main' box, and letting the navigation bar deal with the internal rounded corners.

Lateralus · Mar 16, 2005, 12:56 PM

I like effgee's mockup more than anything else proposed. It really is just about perfect.

xi_hyperon · Mar 16, 2005, 01:01 PM

Originally posted by Nick:
I've used some of the suggestions, but not all. Just seeing how things look. Thoughts? What does everyone like betther?

I would definitely prefer the blue titles for the content as opposed to the black. Not enough separation otherwise. I also prefer the larger leading. I think blocks of tight text on a webpage are not the easiest thing to read, especially at the low resolution of our current screens.

Also, just my $.02 on the top navigation. I think the blue navbar is in danger of being lost in the mix, and that is just based on results of user testing I've conducted for my company website, which has a similar, integrated bar. We are changing it this year to stand out and look more like navigation, and less like part of the top graphic. I was surprised how many customers, during our testing, never even noticed the links at the top!

Scifience · Mar 16, 2005, 01:21 PM

Originally posted by Nick:
BTW, effgee, if you're serious about your mockup and you're gonna make further changes, keep in mind that while the banner may be big, it has to be the size used in my version. No flexibillity there.

I really do like effgee's design the best out of all the ones presented here. Very clean, easy to follow, and pretty to look at. It also fits in well with the style that Apple is heading towards in 10.4.

As far as the ad banner goes, a "less than optimal" but acceptable solution would be to put it above the content of the page, much like is done on the forums now. I own a number of sites that earn their keep based on advertising revenue, so I know how hard it can be to integrate ads into a site design while still keeping things looking nice. It has become even more difficult recently, as ad banners become bigger and bigger, flashier and more colorful, while still not paying as much as the 468x60s (which are very easy to integrate into a design when compared with the newer 728x90 size) did in 1999/2000. </endrant>

Nebagakid · Mar 16, 2005, 01:39 PM

I think the direction the page is moving in is good...
effgee's mockup is incredible, but looks too much like a personal blog for some reason rather than a news site.

Some super combo of all the ideas would be the best.

ThinkInsane · Mar 16, 2005, 01:39 PM

I also like effgee's design over the other's presented. I really think that's the direction you should go with the front page. It's a nice clean design. Nice job Eff.

Lateralus · Mar 16, 2005, 02:04 PM

It'd be nice to see the same type of design we use for the front page used for the forums, especially if it is effgee's.

Diggory Laycock · Mar 16, 2005, 02:05 PM

effgee++

effgee · Mar 16, 2005, 02:09 PM

Navigation too heavy? Ad too small? Too much space around the text? Pah, no problem.

Keep in mind though, as xi_hyperion had mentioned that completely integrating the primary navigation into the header (color-wise) is usually not a good idea. And while your target audience is most likely a bit more web-savvy than the folks xi_hyperion and I have tested (I have seen the same result in testing at least 3 sites), matching the navigation too closely to the header is a negative influence on usability and branding.

The HFA (huge fscking ad) actually has its good sides as well - allowed me to make the right column wider so its contents don't look so cramped. And another plus is the fact that the ads in the right column integrate better into the design now that they're surrounded by a bit gray which helps keeping the whole thing together.

Consistency is always good.

Preview:

Click the image or (as always) this link.

Scifience · Mar 16, 2005, 02:13 PM

Originally posted by effgee:
Navigation too heavy? Ad too small? Too much space around the text? Pah, no problem.

Keep in mind though, as xi_hyperion had mentioned that completely integrating the primary navigation into the header (color-wise) is usually not a good idea. And while your target audience is most likely a bit more web-savvy than the folks xi_hyperion and I have tested (I have seen the same result in testing at least 3 sites), matching the navigation too closely to the header is a negative influence on usability and branding.

The HFA (huge fscking ad) actually has its good sides as well - allowed me to make the right column wider so its contents don't look so cramped. And another plus is the fact that the ads in the right column integrate better into the design now that they're surrounded by a bit gray which helps keeping the whole thing together.

Consistency is always good.

Preview:

Click the image or (as always) this link.

^?

Edit: The ? was supposed to be an infinity sign.

effgee · Mar 16, 2005, 02:14 PM

Originally posted by Nebagakid:
... but looks too much like a personal blog for some reason rather than a news site. ...

That's why in my first two posts I mentioned that I'm not sure I would have chosen the "centered primary" container to hold all the page elements.

But you should also keep in mind that the "bloggy" appearance, which is created by the container element described above, can be a good thing as well - it gives the site a "fresher" (not as in "new" but as in "fast", "flexible", "grassroots", etc.) and less corporate feel.

If that was the initial intention (I have no idea whether or not that was the case), then the current base layout hits it on the head.

Krypton · Mar 16, 2005, 02:16 PM

^^ I love this one, but the Nav bar needs a very slight shadow, like the first mock up but less extreme.

Go effgee!

Oneota · Mar 16, 2005, 02:25 PM

Originally posted by effgee:

Use this. No further work is necessary. Seriously.

I'm gonna venture a guess and say that the two letters your nickname allude to actually stand for "F'n gorgeous", 'cause that's what all the work you produce seems to be.

I love the gradient-with-pinstripe top logo, the nav bar...everything. Woe, that I only have two thumbs to point in an upward direction.

JohnSmithXTREME · Mar 16, 2005, 02:39 PM

If you could somehow implement something as classy as "teh wheel" then I would be happy.

Also, it needs some Flash.

Goldfinger · Mar 16, 2005, 02:51 PM

Originally posted by Ois�n:
I still agree with effgee that there needs to be more space around the text - and between the text as well.

I'll add my vote to this. We need more "air" around the text.
effgee's design is good for me

Jim Paradise · Mar 16, 2005, 02:51 PM

Originally posted by effgee:
this link.

That looks really great; I'd enjoy that as MacNN's new homepage. Very nice work!

My only suggestion would be to use a bit of yellow as I've always been fond of MacNN's blue/slight yellow colour scheme.

effgee · Mar 16, 2005, 03:04 PM

Of course, there's layout alternatives to the "bloggy" style that don't necessarily look bad, either ...

For comparison, the first two again ...

Lateralus · Mar 16, 2005, 03:07 PM

*Creams self*

awaspaas · Mar 16, 2005, 03:12 PM

effgee, you're hired!

Astro-Creep · Mar 16, 2005, 03:14 PM

Originally posted by effgee:

Click the image or this link for the full-size version.

BADASSSSSSSS

We have a winner. I like that. A lot.

Apple Pro Underwear · Mar 16, 2005, 03:16 PM

me likes

the feel is more pro now. which i think is good since i still visit maccentral.com. haha

Oneota · Mar 16, 2005, 03:18 PM

Originally posted by effgee:

Of the alternatives you mentioned, I like this one the best. Perhaps even a bit more than the one I lauded earlier.

Oisín · Mar 16, 2005, 03:19 PM

Effgee, out of concern for your physical well-being, I'm not going to say anything positive about you - I fear I might be contributing to a severe case of explodingheaditis. I shall only say that any such case, albeit highly lamentable, would be perfectly justified and well-deserved.

But I'm still missing something (even if just a little extra space) to separate the individual news entries. Obviously, a whole horizontal line wouldn't fit the design at all, but perhaps something a little more subtle, yet something that still clearly gives the message of separating two unrelated articles/entries...

Randman · Mar 16, 2005, 03:20 PM

Effgee, your work is truly amazing. And I don't say that often (ask the people I work with). Though you did leave the Forum out of the links.

Scifience · Mar 16, 2005, 03:20 PM

Originally posted by effgee:

New favorite!

Mar 16, 2005, 03:21 PM

effgee: can I reach you on AIM?

budster101 · Mar 16, 2005, 03:31 PM

Very nice work!

This is the result of my 5 minutes of suffrage... I know, it looks it. ;D
It's my U2 edition.

Cadaver · Mar 16, 2005, 03:32 PM

Originally posted by Scifience:
New favorite!

paul w · Mar 16, 2005, 03:41 PM

Seriously guys you could've opened this thing up to us loyal members. It'd have been fun. Sure effgee's would have been the best, or at least one of the top designs, but who knows what we all could've come up with?

Otherwise keep the design ideas coming, should there be more. I like this stuff.

Oneota · Mar 16, 2005, 03:43 PM

Originally posted by paul w:
Seriously guys you could've opened this thing up to us loyal members. It'd have been fun. Sure effgee's would have been the best, or at least one of the top designs, but who knows what we all could've come up with?

Who's saying you can't propose your own ideas?