Redesign 2004: Synopsis

April 19, 2004 | View Comments (36) | Category: Whitespace

Summary: The new design is up because I like to get back to writing and I just could not do it with the old design. Welcome to the 2004 remix.

Enough of the redesign is complete that I feel comfortable having it up while I finish tweaking it in "real-time" so to speak (no bug reports yet please). I have been documenting the whole process that I have gone through for this redesign and you might think that it really hasn't changed that much. After you witness everything that I went through you might possibly change your mind. Once the redesign is completely finished and all the bugs are squashed I will put the process down into coherent form and share it with you.

Even though I wasn't gone for long I found myself wishing to get back to writing. However, I promised myself I would get something done with this site before I added another entry. It mostly worked.

The Many Stages

None of these designs are completely finished, but you kind of know if you are heading in the right direction when you look at a design. There were times where I felt I was going in the right place, but getting there never happened. Feel free to use them for your own pleasures.

As you can see I was going all over the place and each one of the stages will be described in greater detail later. The process description will show you how not to go about doing design with your clients and probably how not to go about any design in general. Unfortunately, I don't think the process description will show you how to do anything the right way. Maybe that is a good thing after all.

Every designer has their own process. Some characteristics are similar, but each process is unique to that designer. When it comes to my personal sites, I found that my process was the equivalent of chaos. I learned a lot about myself by focusing on my thought process throughout and by doing this I think I established my creative identity even further.

I learned two things: 1) If it ain't broke, don't fix it and 2) No design is ever finished.

Trackback URL: http://9rules.com/cgi-bin/mt/mt-tb.cgi/210

Comments

#1

If anyone could throw some ideas at me for icons that I could place in the "Categories" list that would be really cool. I can't think of any images that give me that categories feel.

Scrivs (http://www.9rules.com/whitespace/)

#2

This is a really nice design. Not sure about the layout for these individual pages with comments, but the front page layout is very appealing and makes sense.

What happens when you have three years of Monthly archives or 30 active discussions? (unlikely, but I'd like to know)

pixelkitty (http://pixelkitty.net)

#3

sorry for the second comment, but in relation to the category icon - how about the little white cards you get as dividers in library drawers?

havent explained that too well, have I?

pixelkitty (http://pixelkitty.net)

#4

I sympathize my friend. Having just gone through a redesign of my own site I have realised that "self" is the most difficult client to please, the hardest to motivate and the most critical when one makes a mistake or goes in the wrong direction.

I'm mostly happy with mine now. Yours seems to be on the track and it sure is good to have you writing again.

DarkBlue (http://urbanmainframe.com/)

#5

I like phase 8 and 9.

Andy Budd (http://www.andybudd.com/)

#6

Yup, I like 8 too.

Patrick (http://i.never.nu)

#7

Phase 9 looks great, reminds me of ALA somewhat. Thanks for posting these phases, really shows your mindset and the gradual flow from the initial design to this one.

Look forward to reading (in detail) the redesign process.

kartooner (http://www.kartooner.com)

#8

"I like phase 8 and 9."

"Yup, I like 8 too."

In terms of UI (see the previous post) - Andy, how have you effectively communicated to anyone which two are your preferences when none of the thumbnails are labeled, and Patrick, how can you be in agreement when it's not clear whether Andy counted row to row or column to column?

Mark Fusco (http://www.lightpierce.com/ltshdw)

#9

The anti-aliased text of the logo words look blurry enough to mess with my head on the crappy monitor my work has. It probably looks great on higher quality screens, but maybe tone down the anti-alias a little?

Dave (http://www.davextreme.com)

#10

Mark,

Either it's #5 if you're counting by column or #9 if by row. I see what you're saying though and it boils down to personal perception and choice.

For me, I typically count by row and rarely by column.

kartooner (http://www.kartooner.com)

#11

haha, its like the equivalent of spring-cleaning with everyone redesigning. i'm going to wait until you post more about the process and the changes you made. the site still feels like it's Whitespace. you stayed with the same colors and fonts - so when i stopped by i knew i was at the right site. that's a plus. i'm definitely tempted to go post up my tossed-away mockups now.

eris (http://www.erisfree.com)

#12

Thanks for the comments so far everyone. I would label the phases starting from row and going to column (haha, like I could go anywhere else after row).

Yes, I know that there is a gap above the nav bar on all the individual entry pages.

pixelkitty: I know the library cards you are talking about. Now I have to figure out how do I depict those in a 12x12 sized box :-)

Scrivs (http://www.9rules.com/whitespace/)

#13

WOW, those big red blocks are freakin' sweet. Do phase 4 with the red coloring you introduced a little later, and I just might visit your site more than once a month!

If you don't want to do that, maybe have that as an alternate stylesheet??

The top navigation right now has a crazy margin-top in Safari.

Mike (http://phark.typepad.com)

#14

oh yeah, folder icons are pretty standard with depicting categories. you could play around with that.

eris (http://www.erisfree.com)

#15

Mike, I figured I would let you stick with the red block thing for now :-P

Eris, ahhhhhhhh, genius. Collaboration is a beautiful thing.

Scrivs (http://www.9rules.com/whitespace/)

#16

Kartooner -

My comment was in general terms - not specifically this page - speaking to how people assume things in design.

If you consider the table on this page as buttons on an interface, and I said to you "push button 4 first and then number 8, otherwise we'll have a disaster" would you, at least for a moment, have to double guess or at least confirm which button I was directing you to push?

In terms of UI, would've it have been far better to frame it as "4th thumbnail down, right column" rather than #8?

Again, this is in general terms, because the thumbnails were not originally presented by Paul in a pick one as your favorite scenario.

Mark Fusco (http://www.lightpierce.com/ltshdw)

#17

woohoo. the milbertus effect in full swing... might wanna fix that, Paul... disappearing text left and right here. :-)

JC (http://thelionsweb.com/weblog)

#18

"In terms of UI (see the previous post) - Andy, how have you effectively communicated to anyone which two are your preferences when none of the thumbnails are labeled"

Mark --
File names. Read 'em. Not the best, but it is pretty clear which one's he's referring to.

JC (http://thelionsweb.com/weblog)

#19

JC -

You've proven my point. In addition to there be a couple of different ways to count (row x row or column x column) the file names indicate a third way. There are 2 files titled "3", phase 4 is listed (left to right) as the 6th thumbnail...

I am now further confused as to what Andy and Patrick refer to as thumbnail 8.

Again, forget this specific page - look at it in the bigger context that picking #8 correctly had some value or importance to it.

Mark Fusco (http://www.lightpierce.com/ltshdw)

#20

Oh, I understand your point. But he didn't say thumbnail 8. He said "phase 8." Seems perfectly clear to me. Yeah, it'd be easier if there were labels... but he didn't just say #8.

JC (http://thelionsweb.com/weblog)

#21

I understand where you're coming from Mark. I've often thought about how the Japanese read from right to left, which would mean if a row of graphics were displayed like so:

Graphic 1, Graphic 2, Graphic 3, Graphic 4

And they were not numbered nor were they labeled, I would label them left to right (1, 2, 3, 4) but a friend in Japan might label them right to left, in this case his number 1 would be my number 4.

It's these thoughts that make us either sane or insane. Not sure which at this point.

kartooner (http://www.kartooner.com)

#22

Thumbnail / Phase - agreed.

My point is that it is not visually nor immediatley clear what (x value)8 is.

Mark Fusco (http://www.lightpierce.com/ltshdw)

#23

I really like phase 8 (phase8.gif), but phase 9 seems a little off-balance - there's so much contrast with the red, but it's not highlighting anything, whereas in phase 8, that contrast really plays up the title nicely.

I'm not sure why orange is so popular right now. Just a fad? I do like the orange and blue combination, though, but that might just be because I grew up a Fighting Illini fan.

Looking forward to seeing the site when you're done tweaking. I'm afraid I'm feeling slightly adrift right now without the old borders.

Jennifer Grucza (http://jennifergrucza.com)

#24

Well the lack of borders on this page could be balanced by some more color, but the lack of borders does serve a purpose that I was looking for.

Orange was a color I really wanted to go with, but I think I burnt myself out with the brightness and the darker ones led me to think I was on Firewheel or Zeldman.

Scrivs (http://www.9rules.com/whitespace/)

#25

Aww, you got rid of the bigger text. You seriously need to increase the comment text size. Were I but a few years older, I'm sure I'd find myself pressing ctrl++...

David House

#26

I am surprised it took 25 comments before the text issue came out. Really I was just waiting to see if it bothered anyone and if it did then I was going to bump it back up to normal size. So here ya go David. From going through the vault I have found that many designers like to use small fonts, but many readers like to be able to read the site :)

Scrivs (http://www.9rules.com/whitespace/)

#27

The stroke on your logo is too thick - it's overpowering that whole space and makes it look more like your site should be named whitesquare instead of whitespace.

Just my unnecessary $.02

Mark Fusco (http://www.lightpierce.com/ltshdw)

#28

It's the all-powerful death-defying square that you will remember buddy. You will...you will.

Scrivs (http://www.9rules.com/whitespace/)

#29

Yeh - I'm sure I'll remember it pahdnah.

Mark Fusco (http://www.lightpierce.com/ltshdw)

#30

Scrivs -
the blue one is giving a 404 error when I click it.
re: your logo... I wonder how it would look a bit more stylized, like with a brush stroke rather than a solid thick uniform line... like an oriental character or something.

JC (http://thelionsweb.com/weblog)

#31

The link should be fixed now. Sorry about that.

There are a lot of possibilities with the logo. Hell Didier told me he hated it so much he made up one for me. I admit to putting about 5 seconds thought into it as my patience wears thin when it comes to this stuff. And my patience gets worse as every day goes by.

Scrivs (http://www.9rules.com/whitespace/)

#32

I still like the ones Mark modeled after your old 9rules one best, I think, even if they do look like "a cement company with ideas above its station"

JC (http://thelionsweb.com/weblog)

#33

Actually JC, I was just goofin on a branding idea based on the logo that Paul had at one time for the site. In all honesty, I would agree with whoever posted the "cement company" thoughts.

If I were to design a real brand for 9 Rules, I would focus less on the lteral interpretation of "9" and more on the abstract interpretation of "rules" and what it means to Paul. I would get rid of the blocks. Having said that, however, I think the white block works (albiet with a 75% thinner outline) for Whitespace.

Mark Fusco (http://www.lightpierce.com/ltshdw)

#34

eh, I think it had a great deal of merit. but what the hell do I know? I work for a multibillion dollar company that spent $$$$$ for some big design firm to come up with an updated version of our logo, and ended up with the same logo, with a very *very* slight increase in the amount of padding around two letters... and they thought it was money well spent.

JC (http://thelionsweb.com/weblog)

#35

Yeh, most agencies begin their rates (here in Texas) at $2500.00 and go up from there. The client will get 2 or 3 comps for that and then the hourly charging by the hour starts for refinements and changes.

Here, I gave Paul a whole series of logos and even provided a change based on your input for free. I swear, the kid has no idea how kind I am to him. ;)

Mark Fusco (http://www.lightpierce.com/ltshdw)

#36

It must be those video games that rot the damn kid's mind :) I appreciate all the feedback. Its just a lot to digest all at one moment guys. Give me some time to let it settle and I will come up with something one day that will please one person and piss everyone else off :-)

Scrivs (http://9rules.com/whitespace/)

Keep track of comments to all entries with the Comments Feed

Post a comment










Remember personal info?