New [H]ard|OCP Design [FINAL]

NickTheNut said:
the design looks rad! I just think it's to busy for a news site. But all the new features of it are really exciting! Keep up the good work!
Click to expand...

Right now it is a news site with original editorial and reviews. That is how the current site is presented. Key word there is presented though. That isn't really what [H] is at all. It's a reviews and editorial site before a news site and a major goal of the new design is to drive that new emphasis. Given that, I really don't think it's that much busier than any of it's competitors in the same field. In the end, there must be a specific level of content on the homepage, a specific level of advertising inventory, and a specific level of content priority.

In that sense, the site is exactly what it needs to be. Of course I think there is too much content on the homepage, but there isn't one piece of content that isn't absolutely necessary and required. In fact the only thing I think doesn't absolutely have to be there on the homepage is the quote/blurb at the top right under the tabs, but if we got rid of that it just wouldn't be [H].

As for your other concerns, the site is going to be marked up in pure xHTML and CSS so if you are unhappy with how it looks at work, it wouldn't be that much work to create your own CSS file for your local machine and have it "undo" a lot of the styling and make it more or less text only.
 
unhappy_mage said:
I'm with doh here - I want to see how it will respond to different things I do - resize window, change text size, different browsers, speed of the site, things like that.

Is the "shacknews" section based on an rss feed, or is it direct from the horse's mouth (so to speak)?
Click to expand...


There is nothing to see now. All you're seeing right now is just a big jpg saved out from a photoshop file. Once we have some more design work done, the site will go into full production and then when it launches, you can see how it's marked up. However I can tell you now that nothing will happen when you re-size the window, the only text that will change size when you scale it is the news posts, the latest articles list, and probably the shack headlines. And yes the shack headlines is an rss feed.
 
Looks awesome. I definately like the new changes that you made. Great work everyone!

-MN Scout
 
@ Haiku: nice job on the new design. It's kick-ass! ;)

About the width-issue: if you don't have an idea how to implement a variable width that can be set by each individual user, over @ Anandtech (yeah I know) on the top right corner they have a button that changes the width. Looking at the code it seems they're using .asp and a cookie to set & remember the config of each user. But it would probably be more efficient to just use an alternate .css style with a different width specified. If you already have a solid strategy on this, just disregard my post. :eek:
 
Looks good to me except for the pseudo-'modern' font used on the headlines.
 
haiku said:
Right now it is a news site with original editorial and reviews. That is how the current site is presented. Key word there is presented though. That isn't really what [H] is at all. It's a reviews and editorial site before a news site and a major goal of the new design is to drive that new emphasis. Given that, I really don't think it's that much busier than any of it's competitors in the same field. In the end, there must be a specific level of content on the homepage, a specific level of advertising inventory, and a specific level of content priority.

In that sense, the site is exactly what it needs to be. Of course I think there is too much content on the homepage, but there isn't one piece of content that isn't absolutely necessary and required. In fact the only thing I think doesn't absolutely have to be there on the homepage is the quote/blurb at the top right under the tabs, but if we got rid of that it just wouldn't be [H].

As for your other concerns, the site is going to be marked up in pure xHTML and CSS so if you are unhappy with how it looks at work, it wouldn't be that much work to create your own CSS file for your local machine and have it "undo" a lot of the styling and make it more or less text only.
Click to expand...
point taken :)

and that's good news about the XHTML / CSS. I was concerned that the site might be developed in tables, which is... hideous.

but I must ask: if the desire is there from a significant amount of the userbase (which i have no clue if it is or not), it would seem you've taken a negative attitude towards that. A "do it yourself" attitude can put people off. Sometimes it's the small features like a simple style switcher that win major points.

Before looking into making a 1600x1200 site, i would consider spending some time making it a fluid layout alongside of the fixed width it's at now. or maybe to downsize it into 800x600. It seems odd to go through the work of re-engineering the site for 1600 when you could spend some time engineering it for a fluid layout and kill all "width" issues possible.

I understand a fluid layout is a PAIN in the ass. I've only had luck doing that a few times (and have the result turn out good). But with a site like [H]ard|OCP, i think you can afford to spend that extra time.

But i'm just holding my bias, since I try to develop my sites for that (though i understand it's incredibly hard. and haven't had much luck w/ it myself).
 
NickTheNut said:
point taken :)

but I must ask: if the desire is there from a significant amount of the userbase (which i have no clue if it is or not), it would seem you've taken a negative attitude towards that. A "do it yourself" attitude can put people off. Sometimes it's the small features like a simple style switcher that win major points.
Click to expand...

In the future we will have more width and "try to please everyone is instead of most of everyone" type options for the site. Kyle has even brought up a no ads/subscription model. However, our main interest is getting a project complete and live. There are many other parts of the site that have to be dealt with and this could drag on for 6-8 months and cost Kyle more than twice what he wants to spend on getting it live. Personally I don't think the fixed width was a compromise, we did it for specific reasons although one of those reasons was more predictable production.

For the record I don't consider relative width sites a pain. Look at what I did with Shacknews. If I could make that work, I could make [H] do it in my sleep. Entire articles could be written on how the masthead for shacknews was done in pure CSS. We found bugs in IE layout that had yet to be documented during that. But we still did it and it works. Shack is a news and comments site though. [H] is an editorial/content site and that changes things.

We want things to be published and displayed in a consistent format. In the future we can revisit different formatting issues, but this is a decision we firmly made and agreed upon. It would have take almost every single comment saying how much they hated fixed width for us to seriously reconsider it. Instead it's been more of a vocal minority. And even then we still want to have a solution for those people in the future. But no, I don't think it's taking a "do it yourself" attitude by suggesting people who dislike it that much just edit their own CSS files for now.
 
NickTheNut said:
Will there be a slimmed down version of the site as well? Perhaps one that makes it a fluid based layout instead of fixed width that would also remove a lot of the fluff? I'm more interested in reading the news posts than anything else, and having a huge clunky site can hinder that.

Also, it would be nice for those of us that browse at work ;) having a slimmed down version looks like something that we could possible pass off as work! Though i work in the "tech" field, and it's understandable that I would read the [H].

Still, a "print" / "low-fi" / "slimmed" down version would be much appreciated!

Regards,
Nick

ps: the design looks rad! I just think it's to busy for a news site. But all the new features of it are really exciting! Keep up the good work!

edit: hopefully this isn't a repeat of any other posts. i noticed the width issue was being discussed above this. Though i think my statement is a wee bit different.
Click to expand...

There will be mobile versions of the site and an ad-free version, but it is highly possible that we will keep those for use in a subscription model.
 
unhappy_mage said:
I'm with doh here - I want to see how it will respond to different things I do - resize window, change text size, different browsers, speed of the site, things like that.

Is the "shacknews" section based on an rss feed, or is it direct from the horse's mouth (so to speak)?

Click to expand...

The site will be in production through the end of October and I would not expect a look "under the hood" until we go live with it.

Shacknews Headlines are RSS.
 
tsuehpsyde said:
I think it looks good Kyle. Solid colors and contrasts. What's the plan with the forums, exactly?
Click to expand...

The forums will stay as is. There will likely be a major VB upgrade soon though.
 
Looks AWESOME, sign me up! Seriously, it looks almost totally new, but still recognizable...good stuff guys!
 
I like the looks but it's way to busy at first glance. Can't you just put the "featured articles" under a category in "latest articles" and highlight them or something? I personally like to see part of the latest hard news at first glance. Also, I like the tabs but they are easy to overlook so you may want to have some way to have them stand out a little more....keep up the good work and improvments!

just my 2 cents worth.... :D
 
haiku said:
In fact the only thing I think doesn't absolutely have to be there on the homepage is the quote/blurb at the top right under the tabs, but if we got rid of that it just wouldn't be [H].
Click to expand...

If that disappeared, I think I would have to take the person responsible for it and skin them alive. I love looking up there to see what different phrase they have put up.

Otherwise, I think most everything looks great. It does seem busy at the top although much better than it was. I won't complain too much about that since I can actually make sense of the content that is there. There are several sites I will not mess with because they cram too much in there and you have to play "Where's Waldo" to find anything in there. I can still glance at this and see what it there.

I will agree with others that there is just something about the main font. The first thing I thought of when I saw it was Star Trek. The font itself I have no problem with. It's just that when I first see it, I think of Star Trek. I know the idea is to brand it [H], but I'm not sure how successful that will be. It seems many people share the same thought as me that it looks Trekkie. I think that would be a major hindrance to making it a [H] brand.

 
Probably my favorite improvement is the [H]ard|OCP logo itself, which has a more minimal feel and looks a lot more professional than the existing logo. The new front page layout is definitely "denser" looking, meaning that more information is packed into small spaces, which should prove to be helpful for navigation and quick visits. In all, it remains true to the current site while making good steps forward. I vote a "yay" for the new [H] font as well. It should help with site recognition.
 
xENo said:
It's alright.

One thing I've always disliked about this site is the color scheme. It burns your eyes after being here for more than 10 minutes or so.
Click to expand...

Agreed, can you provide and alternative theme or stylesheet that can give users options for the color scheme?
 
I like the look of the new site. I can't think of any real criticisms. One thing I will say is that I am glad that the background of the site isn't white like 90% of all the web pages out there. I am glad the site is sticking with it's current color scheme.
 
not to make it sound nitpicky...but heres a few things that jump out me real quick just from glancing...

i think that the tab for the forums, should be on the top most portion of tabs, not in the middle with the archives, and search functions..the way its presented now makes me feel that the forums arent that important...i understand while it may not be a sub site like the consumer, and enthusiast, etc...i think its one of the strongest portions of the [H] moniker and should be represented as a strong point..

also i think the Latest headline font needs to be bumped up a couple pixels, or font size..because just from glancing over the page i barely notice the headlines, the articles stand out far more than the headlines, i think if there is a large shift from those 2 fonts, that the headline quicklinks wouldnt be as utilized....

my 3 cents...
 
i made a quick mock up just to see what the new format would look like if you doubled up the news column to make it wider, not sure if i like it but i thought i might as well share

hardocp2k62copy0fl.jpg
 
I don't like the last example near as much. Maybe at home on my 20.3" LCD I might, where I can run at 1600x1200, but at work, that's not going to happen. Plus the site doesn't seem as clean and easy to navigate with dual collums.
 
That looks pretty sweet. The only thing that kind of bothers me is the grey text on the black background in the titles for the "Latest Articles". I think it would show up a little bit better as a white or a lighter grey. Might be able to fix it by bolding it too? Dunno. Everything looks really good to me except that. Can't wait to see it in use.
 
I like the new design, it's much more consistant and focused. I'm not fond of scrolling so the less I have to do the happeir I am.

I also like having the reviews up top and split into categories rather than having to scroll through the pages looking for them.

To the staff of [H], it looks great!
 
haiku said:
Right now it is a news site with original editorial and reviews. That is how the current site is presented. Key word there is presented though. That isn't really what [H] is at all. It's a reviews and editorial site before a news site and a major goal of the new design is to drive that new emphasis. Given that, I really don't think it's that much busier than any of it's competitors in the same field.
Click to expand...
IMHO the design is too busy. If you want to change the emphasis then make the main page nothing but reviews and editorials. Put the news on a separate page that has it's own focus. Personally, I'm put off by sites that try to put too much information on one page at a time.

I've been an avid [H] reader for years...since before the refrigeration system for the Dual Celeron 300A system! :) The site may not have always had the best looking designs but the designs were always functional and the information was always very accessible.

There are a few things I do like, however. I like the fixed width. Designing for 1024 width should not be a problem for the intended audience. I also like that the news posts are going to have their own date/time for each item instead of the current editions. A comment system for news items--maybe tied to the vB forum--would also be nice but I don't know how doable that is with the CMS used by [H].

One last opinion. I know you designed both...but I think the design looks a little too close to the ShackNews site. That's my personal opinion, though.
 
haiku said:
Hi again everyone!

After a week of feedback and a few rounds of revision, today's final round of revisions has yielded what Kyle and I have decided is the final new [H] design. yays!

So, for your comparison:

Here is where we originally were.

Here is where we are.

What changed? I'll tell you!
  • Fixed width went from 955px to 972px. This allowed for more space between individual elements.
  • Latest Headlines got moved over to the right and was allowed a wider treatment because of this.
  • Shack Headlines get to divide the two ads on the left, and they received a different treatment.
  • The tabs were significantly adjusted to have a more interesting display that wouldn't keep them looking dropped back and wouldn't make them over-take the current News tab either.
  • [H]ard|OCP is now a registered trademark. No more TM! The days of the circle R have arrived! What a dumb change to list!
  • News divider line has a more consistent tapered fade treatment.
  • The Planet's logo placement and treatment was finalized.
  • The announcements section was treated and placed in the mockup for evaluation
  • The main section headers were slightly altered
  • This is getting boring. Just open both in a tab and flip between them and make a game out of spotting the differences. Call it the haiku sucks game.
And there you go!
Click to expand...
haiku-

While I liked the old one, I think this is even better! I had the feeling with the first revision that it was good, but seemed unfinished, and unfortunately I don't have the experience or the eye to tell you what it was, but with the final revision, everything seems just 'right'.
 
Ah, after putting them side by side, it was the tabs that did it for me. Much better on the new one. Also, lightening the grey border around hardocp logo helped. Just right...
 
My humble opinions...

Three cardinal sins:
1) Fixed-width.
2) Navigation broken into multiple places.
3) Seldom-changing content getting prime real-estate.

My viewing of your site is confined to a very short period of time. Consequently, I want to scroll through content as quickly as possible to find things that may be of interest to me. On my monitor, the new site takes up only a small portion of the available width, yet the content I'm looking for takes up less than half the screen when the page initially loads.

The Shacknews feed, Latest Headlines, Featured Articles, and Latest Articles sections will be eternally ignored after the first view. Thus, of my 1680x1050 screen, you're only hitting me with 660x300 on page load that contains anything I want to see. Of the 5 ads on the page, only the very top of the Thermaltake one is in my view.

That said, I do like that the Featured Articles section is smaller, but it SCREAMS for a date to be added to the article title to say when it was added.

Scrap the Latest Headlines box altogether and move the Latest Articles over in its place to give your primo content more primo real-estate.

My $0.03.
 
1. Is there a reason that some of the white writing is brighter? For instance the Latest Articles is darker (text) than the Latest Headlines. Any reason for this? Not a problem just something I noticed.

2. Could the top tabs be a little bigger vertically? They seem small and clicking on them rather than on the address bar (or worse on a bookmark link if you have the bookmark toolbar) might be hard to do in a hurry.

3. Can I ask what the bottom is going to look like? For a long while I had wished there was a HardOCP link on the top tool bar of the forums. Its there now but I used to have to scroll down to switch to it. I think you should put the tabs (News, Enthutiast, etc) on the bottom too. Scrooling all the way up after getting to the bottom is a pain. Do it on todays frontpage of HardOCP. It takes me 9 spins of the mouse wheel (not 9 complete turns but 9 finger flips) to get from top to bottom or vice versa. With those tabs (or even generic text links) on the bottom its would be much easier for navigation.

4. I don't know how to explain it but it seems that the text in the HardNews section is blurry. I mean its clear to the eye that the text in the feature articles is clearer. It might be how the file is saved (compression) but it deffiently is blurry.

5. This is minor but the ads should line up with the background. This is obvious with the CompUSA ad. On the bottom if it was moved a bit to the right (and the crucial one a bit to the left) it would line up with the border. It just seems weird. Or you could make the border narrower on the left side. It does this in the latest headlines section too in the top right.

6. Is there a reason for this change in background texture? MS Paint loses it in the compression but look at the big pic in that spot and you'll see it.
backgroundchange.jpg
 
Saecrious said:
My humble opinions...

Three cardinal sins:
1) Fixed-width.
2) Navigation broken into multiple places.
3) Seldom-changing content getting prime real-estate.

My viewing of your site is confined to a very short period of time. Consequently, I want to scroll through content as quickly as possible to find things that may be of interest to me. On my monitor, the new site takes up only a small portion of the available width, yet the content I'm looking for takes up less than half the screen when the page initially loads.

The Shacknews feed, Latest Headlines, Featured Articles, and Latest Articles sections will be eternally ignored after the first view. Thus, of my 1680x1050 screen, you're only hitting me with 660x300 on page load that contains anything I want to see. Of the 5 ads on the page, only the very top of the Thermaltake one is in my view.

That said, I do like that the Featured Articles section is smaller, but it SCREAMS for a date to be added to the article title to say when it was added.

Scrap the Latest Headlines box altogether and move the Latest Articles over in its place to give your primo content more primo real-estate.

My $0.03.
Click to expand...
We'll be adding so much new content it'll make your head spin. How's at least one new system evaluation a week just from my team alone?
 
Morley said:
We'll be adding so much new content it'll make your head spin. How's at least one new system evaluation a week just from my team alone?
Click to expand...


mmhmm. This was actually a concern of mine in talking to Kyle. The fact of the matter is that no one really gets where things are going because it remains to be seen yet. But there is going to be such an extreme saturation of new content between the new properties from a day to day basis that I actually feel the [H] homepage doesn't do enough to present or promote it.

But in the interest of meeting the second design goal objectives (Don't forget our roots), we scaled back how much we wanted to present so we could give the front page news a strong enough emphasis.
 
Will respond to a few more specific comments:

nmX.Memnoch said:
One last opinion. I know you designed both...but I think the design looks a little too close to the ShackNews site. That's my personal opinion, though.
Click to expand...

Going back and digging up an email from Kyle sent to me From January 2004 when he approached me with the project, he mentioned that he liked what I did with shack. Took the old shack, gave it a modern spin to keep it fresh. However I really didn't borrow any styling queues for shack when working on [H]. I think there are some graphic treatment similarities for sure, and then when you factor a black background, the use of a tech font, and the use of a pixel font, you could make even more comparisons. They are there for sure, but I don't really think the sites have any similarity in over all identity or layout.

ninethreeeleven said:
1. Is there a reason that some of the white writing is brighter? For instance the Latest Articles is darker (text) than the Latest Headlines. Any reason for this? Not a problem just something I noticed.

2. Could the top tabs be a little bigger vertically? They seem small and clicking on them rather than on the address bar (or worse on a bookmark link if you have the bookmark toolbar) might be hard to do in a hurry.

3. Can I ask what the bottom is going to look like? For a long while I had wished there was a HardOCP link on the top tool bar of the forums. Its there now but I used to have to scroll down to switch to it. I think you should put the tabs (News, Enthutiast, etc) on the bottom too. Scrooling all the way up after getting to the bottom is a pain. Do it on todays frontpage of HardOCP. It takes me 9 spins of the mouse wheel (not 9 complete turns but 9 finger flips) to get from top to bottom or vice versa. With those tabs (or even generic text links) on the bottom its would be much easier for navigation.

4. I don't know how to explain it but it seems that the text in the HardNews section is blurry. I mean its clear to the eye that the text in the feature articles is clearer. It might be how the file is saved (compression) but it deffiently is blurry.

5. This is minor but the ads should line up with the background. This is obvious with the CompUSA ad. On the bottom if it was moved a bit to the right (and the crucial one a bit to the left) it would line up with the border. It just seems weird. Or you could make the border narrower on the left side. It does this in the latest headlines section too in the top right.

6. Is there a reason for this change in background texture? MS Paint loses it in the compression but look at the big pic in that spot and you'll see it.
Click to expand...

1. The four latest articles list uses a light shade of grey for the text. The section is high priority but we didn't want it to look too saturated. The color of that text will change again I am sure. For now though, in mockup form, it is darker than other text on the page.

2. On hovering the tabs they will actually pop up a few pixels and display their hover treatment. Their static presentational size will remain the same. And don't worry the clickable area for them will be very large, I am sure you won't miss them by accident. Unless you're drunk.

3. The footer isn't designed, but it will be very comprehensive with redundant navigation and a nice treatment. It's really one of those things that I do last once the page is produced. I've always done it that way for some reason. But yeah it will have smaller versions of the tabs and other quick links and such. Even a link to the forums down there.

4. Mostly jpeg issue and photoshop anti-aliasing settings. Once the text is rendered through flash it will be a bit more crisp.

5. It's overlayed on purpose. But yes the crucial ad is supposed to be over a few pixels (though to the right). I dropped those in there very fast. There will also be shadowing coming off them (very subtle though) to assist in the overlay effect.

6. That was just a mistake. One layer over another that shouldn't be there. Won't be there in production though.
 
Morley said:
We'll be adding so much new content it'll make your head spin. How's at least one new system evaluation a week just from my team alone?
Click to expand...

Fine and dandy, but stuff that only changes once a week is peripheral fluff, IMO. Once I've seen it, it's wasting space - especially if there's ads near it... those ads won't even be near my line of sight. It's the stuff that's "new" since I visited yesterday or two hours ago that I want to fill my screen up with.
 
Ultra Wide said:
Agreed, can you provide and alternative theme or stylesheet that can give users options for the color scheme?
Click to expand...

I'll join on this bandwagon. I've always hated the white on black. It blurs together too much and gets painful quick.

Other than that, it looks good. I like the layout, the tabs, and such.
 
Saecrious said:
Fine and dandy, but stuff that only changes once a week is peripheral fluff, IMO. Once I've seen it, it's wasting space - especially if there's ads near it... those ads won't even be near my line of sight. It's the stuff that's "new" since I visited yesterday or two hours ago that I want to fill my screen up with.
Click to expand...
Ditto.
 
I'm another loooong time [H] reader -

* Good - you've brightened it a little and given more contrast to the upper section tabs.

* I don't think the Forums/Archives etc buttons are given enough priority - these should smaller tabs set with the main section tabs. These can then change to suit different functions on each section's main page.

* At the moment the Newegg ad simply gets in the way - either put all the section tabs (including the forum/archive ones) underneath it, or put all the tabs above it. With the tabs above it, they will be lost immediately as the reader scrolls down to read the days news.

Any of Akiba's pages like this one are good examples, with the title level with navigation, followed by the ad, and then content.


* The newegg ad spot is very sensitive to colour and contrast as its right in the navigation area - I know its there so the reader can't avoid it, but it will break up your page badly if its bright and flashing - a darker advert scheme will be more successful here. Western aesthetic preferences should be given more weight (ie more muted colours, less rampant blinky-text and so on) :p
 
My only comment (worth $.02), to contradict one of the design moves for the news sections-

I happen to like the "editions" that have been present since I started frequenting the [H]. At a glance, I'm able to see if there's new news or not because the title above each grouping has changed. I think the "goof-ups" that occur from time to time in the titles gives the site its own attitude that would be lost without them.

</end old stickler that doesn't like change rant>
 
gathagan said:
I'm assuming that this will allow you to address some of the concerns voiced regarding how the [H]Enthusiast page is laid out, as opposed to the [H]News, etc..


For that matter, what about using a different logo on the portal site ( [H]News, [H] Sites) ? You could encorporate a larger [H] in that logo.

You could then use the [H]ard|OCP on the [H]Enthusiast page without distancing other target demographics.

As to the overall layout, I like the changes.

I had a suggestion about limiting the content of the "Latest Articles" section of each page with its respective content (enthusiast articles in the [H]Enthusiast page), as opposed to listing all of them, but I realized that we're looking at a mockup of what will be the busiest page of them all.

Others have mentioned how busy it looks. I suspect that the specialized pages will be less so.

I don't know where you folks are at in the design of the specialized pages, but it might answer a lot of viewers questions/concerns if we can see a JPG from one or all of those.
Click to expand...

I appreciate your thoughts but that does not keep with the consistant branding we want to flow across the sites.
 
Ultra Wide said:
Agreed, can you provide and alternative theme or stylesheet that can give users options for the color scheme?
Click to expand...

This is something that we are thinking of putting into action down the line for our Enthusiast and News pages. WIll not happen at launch.
 
You must log in or register to reply here.
Back
Top