The Monday Rip
One complaint or suggestion if you will, is the lack of effort I believe you put into the top navigation bar or the choice you made, of course. The black a:hover on a dark red background is really not pleasant to the human eye. The font also, is not a success. Certainly, you can come up with a more effective combination of elements. A somewhat graphical navigation bar could not hurt, as the rest of the site is clean and crisp.
So let’s open it up to everyone. What do you think the navigation could use? Might as well ask what else the site can use besides graphical flair. It’s Monday, so let’s rip into Scrivs’ site.
Related reading:
I don’t mind the simplicity, but the color comment is right on.
By Greg on May 23, 2005 12:58 am
hmm. I use your site for the information you provide. To be honest I’ve never used the navigation or really paid much attention to the design.
If anything the black hover is eye burning. Maybe just keep them white but underline them on hover.
Love the site. Great Resource.
By Scott on May 23, 2005 1:04 am
One comment that I’d like to make is that the nav links aren’t centered in their boxes – they’re left-aligned, which isn’t what most people are used to (for example, if your cursor is two pixels to the left of “Archives”, you’ll end up selecting “About”).
That aside, for a:hover why not have the box turn a lighter shade of red (and keep the link text white), so it looks like a translucent white overlay? I think that would look pleasant, although it’d take some effort to look nice on the “Whitespace—A 9Rules Site” links.
By Sage on May 23, 2005 1:18 am
I had a similar problem as my site used the same color scheme (red, black and white). In my frustration, not being a designer, I switched to a different color scheme.
How about the light shade of grey used in the comment backgrounds or from the dotted borders? Just a bit more subtle touch.
Have you taken a look at your site on windows? In Mozilla, the M in May is so squished it looks like a U. In IE the dateline is almost as large as the headline.
By Selvin on May 23, 2005 2:00 am
Try a black background colour, same white text for the a:hover. Clean, crisp, keeps the same colour scheme, and very simple solution to make the hover more readable.
Or, keep the white text, but play around with border hovers (e.g. right and left borders, but not top and bottom; or only top border; or only bottom, etc.) in white or grey.
By Lea on May 23, 2005 2:07 am
The site needs more design essentials. For all the talk about branding here, I see next to none. I mean, you can’t just throw up a red bar and call it a day. That’s what Unix admins do.
(by the way, I normally keep these things to myself, but you said it was Rip On Scrivs Day)
By Mike D. on May 23, 2005 2:28 am
You change designs every few weeks anyway, so why bother? ;)
By KevinN on May 23, 2005 2:39 am
I can duplicate the bug mentioned by Sage (#3).
As for the nav color/font, I’ve viewed this site on a couple of displays. Here are my conclusions:
On a CRT, the red pixels tend to spill a bit into the white, and the white pixels into the red, until the text becomes nearly unreadable. However, on an LCD, things look great. My CRT is neither old nor blurry; this problem is a technical one.
CRT pixels overflow into each other (halo effect). The brighter the pixel, the worse it spills. LCDs have a polarizing filter running behind the transistor matrix. Translation: light can’t end up where it shouldn’t be. Pixels are on or off, crisp, and unaffected by neighboring pixels.
Further, anyone in TV/Broadcasting can verify that red will bleed on almost any “tube” display. LCDs are also excluded from this problem.
So as a graphic artist, I’ve decided to leave the art direction out of this one. You won’t hear me say anything like “red always jumps to the foreground”. No, nothing like that.
Red + White + Black = Problem for adjacent pixels.
Good luck with this. I actually do like the current look of this site. If this is the only “problem” anyone “suggests” a solution for, you’re doing okay. Really.
By Bradley on May 23, 2005 2:49 am
Red text on the red background, and move them around a bit so we have to hunt around. The thrill of seeing the pointer change to a hand always overcomes any initial frustration.
/sarcasm
By Daniel on May 23, 2005 3:13 am
More cowbell, perhaps?
The only changes I’d make is to:
1) center the link text so the clickable area is to the left and right of it
2) Change a:hover so the background changes with the text.
Introducing graphics would change the tradition of whitespace being a graphically lightweight site. Then again, how married are you to that tradition?
Personally, I like the design on this site (but I click straight through to entries from bloglines).
By Jack on May 23, 2005 3:17 am
I mean, you can’t just throw up a red bar and call it a day. That’s what Unix admins do.
If only admins could make things look so nice. Every ‘admin only’ screen I’ve ever seen has been roughly 7million times uglier than this page.
By Mat on May 23, 2005 4:53 am
I really don’t care what you do with the navigation bar. I come here for the content. Actually, I pull the content to me via RSS, but you get the picture.
If I want a visually pleasing design to look at, I’ll surf on over to Zen Garden. Otherwise, just keep on writing great articles and leave the design alone.
However, if I didn’t already know about your site and I visited it for the first time, I might get a little put off if I perceived your visual design as “amateurish” and therefore disregard whatever nuget of wisdom you are trying to dispense that day. So it might be worthwhile to make the design more “designy” for the newbies.
By Graham on May 23, 2005 8:52 am
I agree :)
You can always take the microsoft route and apply a nice background color and a colored border :)
By Bryan on May 23, 2005 9:24 am
You’ve got enough space between each element in the nav that (for most people - that’s called a hedge) you probably don’t need a hover state.
Let the “poke” icon do the work for you.
By Matthew Oliphant on May 23, 2005 10:29 am
How about some nice beveled buttons, circa 1996?
Actually, I had recently found your site a few weeks ago and enjoyed the previous design better. I’m all for simplicity, but I was kind of disappointed when I came back one day and the site had changed.
By Mike A. on May 23, 2005 10:54 am
Why not just a black bottom border (not an underline)?
By Gordon on May 23, 2005 11:11 am
Flash. More flash.
By Pierce on May 23, 2005 11:33 am
Try this color as a substitution of black:
#7A0000
By Anton on May 23, 2005 12:49 pm
#17 LOL :D
But as some says, this site is great in it’s content and the design doesn’t matter as long as it is not somehow disturbbing… I even don’t use the navigation - just click in my feed reader :)
By JK on May 23, 2005 12:51 pm
Why not just invert the nav? Background #fff and color #900… I think it would be quite consistent with your design. Oh, yeah and I would bump the font size up to 10px at least… 9 is really small… IMHO.
By Joshua on May 23, 2005 1:31 pm
why isn’t it in one horizontal level? in firefox on windows, the nav is taking up 2 vertical lines, it’d be cleaner if it was all horizontal, no vertical tiling….
By Brian b on May 23, 2005 1:34 pm
Well, if you have already chosen to use a black background for the ul#navigation li a:hover, then at least set a width of about 300px to the #navigation element so the links don’t break the horizontal line.
By Adam Bouskila on May 23, 2005 1:48 pm
I don’t think I have to convince you about how much I like the current design of your web page if I show you mine.
Yes, they are not the same, but I just love simple, minimalist designs with strong contrast and vivid colors. More than ever white, black and red.
HYPERGURU Loves White Red Black and Strong contrasts
By HYPERGURU on May 23, 2005 1:50 pm
something subtle like Simplebits green nav bar would be good … not a lot of images to mess with, but enough “design” to make it look appealing …
just a thought
By chuck on May 23, 2005 1:52 pm
I guess I’m the only one who doesn’t mind the nav. Black on red is not that bad people :) Now if it were blue on red, then we’d have a problem.
If I were to change it, I’d enlarge the clickable area and maybe bump up the text 1pt. Also, I did like Lea’s idea of just modifying the left and right borders on hover, that could be cool if you used a subtle gray.
Ah, I see you’ve already change the hover background to black. Sorry, but that makes your design look like everyone else’s. It lost it’s originality. Plus, I don’t really like how it looks, to me it’s visually disturbing. Well at least now that I’ve noticed that I really do get to rip on you!
Also, you’re site is no longer remembering my personal info, and it’s not my browser settings.
By Joe Clay on May 23, 2005 2:03 pm
I didn’t read the comments, so excuse this if this has already been said.
I don’t mind the color to much, or the layout, but I think you’ve pulled it too far back. There is nothing, and I mean, nothing, to solidly identify this site visually.
Where is the brand?
It looks great and is pretty easy to read and all that, but I think it needs something that will call it out as “Whitespace” or make it unique.
Then again you redesign once a week so who cares?
By Keith on May 23, 2005 2:33 pm
Just get rid of that bar at the top. Leave some space. And tuck your shirt in.
Anyway, who cares?
By Britt on May 23, 2005 3:15 pm
Forget the aesthetics, how about get the correct link for The Elements of Typographic Style book under your Essential Books entry. :p
By Amit on May 23, 2005 5:17 pm
Your corporation has a Chief Design Officer, why don’t you let him apply his skills and worry over this? ;)
The red is cool, but it doesn’t match your light blue browser icon. The active hover state for “contact” obstructs “about” in FireFox, making it look pretty sloppy.
By Mark on May 23, 2005 6:43 pm
Be cool… Remove all navigation and be done with the whole debate. Right before you do that, though, fix the code that writes the URL attribution links in the comments. All URLs have a closing parens tacked on the end, making most web servers choke trying to serve up a page/directory called “)”.
By jtnt on May 23, 2005 7:13 pm
View this screen grab to see what I feel the major issue is.
This shot was taken in firefox/windows at a resolution of 1280*1024 and the browser set to full screen. The navigation elements don’t all fit on one line, and the boxes overlap (which shows when hovered.)
By Scott on May 23, 2005 8:45 pm
Weird… I thought the navigation was awesome! The font you used was perfect, don’t change it.
By Alex on May 23, 2005 10:15 pm
I don’t have any beef with the current design, everything looks good to me. However, I agree with some of the other comments in that I liked the old design better.
By Brody on May 23, 2005 11:25 pm
I have the same problem Scott (31) does.
As for the design.. doesn’t do anything for me. It’s generic, boring, and goes beyond your usual minimalist into the realm of blah. It looks like you were trying to come up with a header, were hung over at the time, said “eh, screw it” and threw this out in 30 seconds without giving it any real thought.
The footer’s just a copy/paste from the old one, so no comments there, it was fine before and it’s fine now. As for the rest, hell, there’s nothing else there to comment on.
By JC on May 24, 2005 11:13 am
Does the design need to do “anything” for you though? You have been to this site for 2 years now. Not sure what “anything” I can bring for you.
By Scrivs on May 24, 2005 11:58 am
It should still make me think “man, scrivs rocks” or at least “hey, this doesn’t suck”
Of all the iterations of whitespace, and even Pseudo Design (have you been there lately btw? LOL… wonderfully self-contradictory flash intro, cheezy PHP-nuke template… your former employers really are, uh, impressive without you. heh.), I think this one is probably the one I like the least.
And it’s all the header.
Maybe you should give us a screeshot of what it looks like to you, because from here, it looks really bad (IE and Firefox both)… line breaks where they shouldn’t be, uneven spacing, boxes waaay too big for the text they’re highlighting, and they overlap the other text… mismatching highlights between left and right side…
Maybe you just used a font that isn’t common and picked a bad second choice?
By JC on May 24, 2005 5:42 pm
Well I have to crack open the windows lappy tonight/tomorrow to make the final changes. On OS X it should look halfway decent I think.
By Scrivs on May 24, 2005 8:29 pm
You got it somehow wrong, what I got in Firefox is not the single line of navigation. But rather two lines with Contact button below (not centered) three other elements and when I hover over About and go little below, it suddenly hovers on Contact. SO it sucks a bit. Also the other part with network is split into two lines/rows.
By dusoft on May 26, 2005 8:24 am
I agree, pretty much, with the quote. The font is too small, and the red/black is a bit harsh, in my opinion. And yeah, I have the same problems as JC and Scott.
By David House on June 1, 2005 12:08 pm
I’ll agree with the color issue, it’s a bit startling in the context of your content. If you strive to provide commentary on design, such simple oversights as blood/clot on the color wheel should be remedied.
It is, however, the most minor of details in an otherwise quite aesthetically pleasing page. For that, you should be commended.
Besides which, you’ve got that whole… you know… CONTENT… thing going for you. Heaven forbid you misstep on the design tip.
By itazura on June 19, 2005 8:34 pm
The simplicity and colours are fine but I do think a “Whitespace” title would be helpful somewhere are the top of the page.
By Paul Watson on July 22, 2005 7:26 am