LATEST ENTRY

DESIGN | Noah Brier

New Design (3.0)

An explanation of the third design of NoahBrier.com.

May 31, 2005 | RSS | EMAIL | PRINT | 17 COMMENTS

Well ladies and gentleman, I have finally completed my redesign. Thanks to everyone for being so patient. Now, as one last piece, please allow me to explain my thinking. (For those reading on an RSS reader, please take the time and check out the site. I put a lot of work into it and would love to hear your feedback.) I really tried to follow my own advice and design for my content, not against it.

Let me start out by pointing you to a few sites that I was inspired by:

1. Kottke.org: In my opinion, this is about as good as a blog can get. I love how clean it is and how well laid out (except for how hard it is to get to the search bar).
2. GarrettDimon.com: Again, I love how clean this site is and how well thought through every piece is. It's simplicity at it's best.
3. SimpleBits: When it comes to CSS and design, this site is pretty much the cream of the crop in my opinion. Only shared with . . .
4. StopDesign: Maybe I should just change the name of my site to something that starts with the letter 'S'.

The inspiration included a lot more pages than that, but I think those are probably the big four. (I would also include Richard MacManus's article Web 2.0 For Designers and Tom Coates' Plasticbag.org. Anyway, let me explain some of my thinking.

The Basic Structure

The goal with everything was simple, simple, simple. The only thing that travels from page to page is the top bar you see at the top, which includes a link back to the homepage and a search bar. When I really broke everything down it seemed to me that the site didn't need any universal navigation beyond that. Each page carries with it some other form of navigation as well. For example, the home page has a small paragraph at the bottom with links to helpful parts of the site and individual entries all have a little section to the right I call "vitals." That section includes date, author, category (a new addition) and location within the archives.

The Archives

I think regular old plain archives are a little outdated. How often do you actually read through the archives that way? That's why I gave equal billing to the archive entries and to the archive nav which includes some random entry fun, as well as recommended entries and browse by date OR category.

The Extras

Hmmm . . . if you haven't noticed yet the comment/permalink button (now merged) is huge. The comment form looks pretty (in Firefox and Safari at least -- by the way, that HTML was mostly stolen from GarrettDimon.com). Another new nifty feature is the little entry description (known as a dek in "the industry"). Truth is, it's nothing more than some extended entry text (which is why old pages don't have them).

I think that's about it. I worked quite hard on the page and I'm pretty damn proud of it, so any feedback is greatly appreciated (even negative). I really think that it's well thought through and usable and I hope you feel the same way. Of course it looks best on Firefox/Safari (thank goodness for standards). If anyone runs across any issues in other browsers please let me know.

Finally, for those interested, here are the Movable Type plugins I used in creating this page:

- Archive Date Header: Handy little plugin that allows me to organize the archives by year and month.
- FilterCategories: Man did I search around a while for this one. This is what helps me create a Recommended Reading section by filtering out the recommended category whenever it appears (at least in theory).
- GetXML: Finally I'm displaying my del.icio.us bookmarks without javascript. All rejoice!
- MTEntryIfComments: This is how I keep the comment number centered in the big orange button. I have two different CSS classes depending on whether it's below 10 comments or above. Couldn't do it without it.
- MTSwtich: Quite possibly leave the best for last. This allows you to create an if/then statement for almost any attribute. That's why my comment boxes look different and also why "Recommended Reading" is it's own section.

I think that about covers. Hope you enjoy the new site and don't hesitate to let me know how you feel.

Update (6/1/05): Stupid me just realized GetXML only refreshes my bookmarks when I rebuild the site. Oops . . . Guess it's back to the drawing board, gonna have to find another answer to my displaying del.icio.us bookmarks problem.

PREVIOUS ENTRY | NEXT ENTRY

SORRY, COMMENTS ARE CLOSED

COMMENTS

1Kenneth Verburg

On my site I was using the solution provided at http://www.movableblog.com/archives/2004/04/16/yummy-magpie, until I found a way to have a daily del.icio.us summary on my website via http://www.commoncraft.com/archives/001028.html

June 1, 2005

2Richard MacManus

Looks cool! I'm guessing you like green... :-) I'd maybe suggest introducing some more colours, but I'm no great graphic designer. It's clean and definitely very usable, well done!!

June 1, 2005

3Peter Caputa

The site is very use-able, Noah. I like the simplicity. Not a huge fan of the colors, though.

June 1, 2005

4Noah Brier

I am a fan of green. Not quite sure why, just a preference thing. I'm pretty sure the colors are set, I like them and I think they break up everything nicely. Glad you guys all like the site and Kenneth, thanks a bunch for the tip, I'll check it out.

June 1, 2005

5jeff

I think the site actually looks pretty awesome. I have no idea what any of it means, but it's one of the cooler looking sites I've seen.

June 1, 2005

6Amanda

Hi Noah,

First let me say that I enjoy reading your site. Most of your topics are interesting to me and I think your writing is clear, concise and entertaining. I have to admit, though, I am not a big fan of your new design. In fact, I liked your old design MUCH more. I have a couple suggestions/comments that I hope you find useful.
First, I think the comments button is FAR too big. I understand the need to make it apparent to the user/reader, but the size you have is distracting. I think it can be a lot smaller. The fact that it's a button now and an orange color will help to make it stand out on the page, you don't have to make it so giant.
Second, I think you need a means of separating your different entries from one another. Something as simple as a line would be sufficient. I see that the title is large and formatted differently at the beginning of each entry and that does help to set them off from one another, but I think a line or some other separator between each entry is needed.
A third and final suggestion is this: I think you should make the font color for the subtitle on each entry a little bit darker. This also applies to the hyperlinks in each of your entries and the external links along the side of the page. I think the light color results in this text getting lost on the page.
I have one observation also. I'm not sure how/why this happens, but when you click on the comments button, on the resulting page, the subtitle of the entry you're commenting on ends up at the end of the entry in plain text. So for instance, at the end of this entry located just above where the comments start is the text "An explanation of the third design of NoahBrier.com." Odd, no?
I hope this was helpful. I also hope I'm not coming off as too critical. You've done a far better job with this than I could ever dream of doing. One of my main responsibilities here at work is critiquing website design, though, so I thought maybe some of my experience may prove to be helpful to you.
Hope all is well! Talk to you later!

June 2, 2005

7Noah Brier

Wow. Lots of great stuff in there, thanks a bunch Amanda. I don't really have time to go through everything right now, but I will go through it all and answer each question.

Just so you know, though, I just fixed your subtitle problem, thanks for noticing that, I certainly hadn't.

June 2, 2005

8Noah Brier

Went ahead and added a seperator between entries on the front page. Not sure what the final version of that seperator will look like, but I definitely agree with that comment, it's really just something that slipped my mind when I was designing everything.

Like I said, I'm addressing things as I get the time, will adress some of your other comments later today I hope.

June 3, 2005

9Barbara

Just going on record to agree with Amanda about the font color on the deks -- thru my old eyes, it fades out.

June 3, 2005

10Noah Brier

I purposely wanted it to recede behind the title, rather than competing with it. I could change it to the same color as the date . . . maybe I'll give that a try.

June 3, 2005

11Amanda

I had a realization last night about why I didn't like the fact that the comments button was so large.

In making it one of the largest things on the page, it seems as though you are putting more emphasis and importance on the comments made rather than on what you have written. While the opinions of others are important and do result in interesting conversation, this is YOUR site and therefore emphasis should be placed on what you have written rather than on what others have to say about what you have written.

That is all.

:)

June 3, 2005

12Noah Brier

Fair enough, but I do want to make it very evident that this is supposed to be an interactive experience. I very much want to encourage people to comment and I'm not afraid to take emphasis off my own words if that means someone will feel more invited to do so. That was actually one of the goals of the comment buttons, they should grab you and make you want to click them and, in turn, want to speak up.

They may be too big, but that was very much on purpose. I'm not sure I'm ready to change those yet.

June 3, 2005

13Barbara

Like the new dek color MUCH better :)

June 3, 2005

14Jarrett

I really like the new design esp the comment buttons. they got my attention and i wanted to click them. i think the new design is very user friendly which i love being that im not really down on the whole blog thing.

June 6, 2005

15Noah Brier

Thanks, I really appreciate it.

June 6, 2005

16Richard MacManus

Is it my imagination, or have you introduced more colours since I made my previous comment? (eg the blue subheaders) If so, then it looks extremely good! Or maybe it's the nice background colours in the comments (plus the orange) that makes everything look so colourful. In any case, the site looks great!

June 14, 2005

17Noah Brier

Not your imagination. I added a darker blue to the subheaders. I also just added the little green bar next to the comments (which really is to fix up the blockquotes on the main page, but it appears to have cascaded down to the comments and I kind of like it. I'm really glad you appreciate it, I definitely reworked it with some of the comments from your's and Joshua's article in mind.

June 15, 2005