Noscope Pangea

pangea

It makes me proud to finally unveil what has been a labor of love for me. Codenamed “Pangea” (Greek for “all lands”), the purpose was to unite sections of Noscope that had drifted apart.

When I started pondering this redesign (press Shift F5 or click out of your feedreader if you don’t see anything new), it quickly became clear to me that I wanted to focus more on the structure and the functionality behind the scenes, than the look itself. I’ve spent years learning that if you simplify and optimize your work processes, your productivity will increase. This might sound like a no-brainer, but it’s not as easy as it sounds.

While design came secondly, I still wanted the visuals to be intertwined with the structure. Having had a design that was intentionally secondary to its contents for a very long time, it was crushingly clear to me that this one had be able to stand on its own. I wanted a design that was tight, clean, and felt thought-through. That was the master-plan.

Results

When I actually embarked on this redesign, I set myself a few minimum goals to achieve in order for this so-called “Pangea” not to be a crushing failure:

  1. Highlight orphaned sections
  2. Redesign primary navigation for simplicity
  3. Highlight worthwhile content from ages past
  4. Simplify the administrative updating of all sections
  5. Simplify writing and interlinking and, as such, inter-archival relationships (you heard me!)
  6. Allow for monthly rebranding
  7. More space and less scrolling

In order to fullfill #1, I have decided to adjust the Noscope homepage to hold a digest of all sections. This is not rocket science, and it’s been done before, but in my case not as extensively as now. This further allowed me to clean out quite a lot of clutter and cruft from the section most of you are likely to be reading: the journal.

Redesigning the main navigation (#2) was fairly easy. I added tabs, relegated Colophon and Archives to be secondary to the Journal, and removed the search button in favor of simply pressing “Enter”. The latter was purely decorative, as the usable thing would be to leave the button there. Yeah well if I don’t want to follow Jakob Nielsen’s recommendations based on statistical analysis, I don’t have to, so there.

With regards to #3 and #5, I’ve finally followed the visionary bloggers and joined the tagging train. So much in fact, that I’ve thrown out categories for all but structure. This new voodoo will hopefully help people find truly related content, quickly, and quite possibly allow people to click on things that interest them to see if maybe I wrote some fantastic piece on it in the past. That, and I’ll be adding links to really noteworthy past articles on the homepage, in the bottom right corner.

I spent the better part of a month working on #4. That means updating and simplifying my installments section. The end result is, probably, what makes me most warm and fuzzy inside about this redesign. For instance, open my latest installment (June) in a tab and notice the two new features: “scale to fit”, and “older installment”. Combined, I think they help out quite a bit with exploring the archives.

Adding space (#7) has been in my mind all through the actual design phase. Armed with De Bono’s Simplicity Principles, I have fiercely tried to remove clutter and focus on what’s relevant. This, not only visually, but structurally and semantically as well. In removing clutter, I also decided to add icons, something I’ve usually been too lazy to do:

Feed Icon Comments Icon Permalink Icon Folder Icon Quote Comment Icon Tags Icon Warning Icon Edit Icon
Feed Comments Permalink Folder Quote Tag Notice Edit

While not 12Γ—12 works of pixel perfectness, I think they work well for what they need to do: replace text with generic symbols and concepts.

When it came to allowing for monthly mini-redesigns (#6), I had spent so much time creating a tight and stand-alone design that I’m afraid this is one area I over-looked (i.e. failed miserably in). We’ll see what happens when the dust settles.

Conclusions

More than anything, I’m happy to have kicked this screaming baby out of the door. Okay so it has a few bruises here and there (as of this writing, wallpapers and photography sections still need love, and Internet Explorer… well… [Update: Now with IE7 support]), but they will heal in time.

Equally important is the fact that I am once again excited about having a homepage. It doesn’t look like an abandoned mess, and it has that special “new car” smell. I’m confident this will get me posting snacksized portions of pointless stuff again, for several weeks or even longer.

Visually, I feel the design stands up quite well compared to your typical LiveJournal, MySpace or feed reader layout, and that’s not bad considering their respective popularity. I might not win the war with it, but this day I fought. But seriously.

Essentially, I feel like I’ve done what I set out to do, which was to create a clean, tight layout that provided me with the tools and features I wanted and presented the information in a viable way. I might not have unified continents that drifted apart in the Mesozoic era, but it’s not half bad either.

32 thoughts on “Noscope Pangea”

  1. May I be the first to congratulate you on Pangea! It really does take good care of your sites whole ecosystem, while being so clear and effective it positively hurts! It’s nice to have a useful homepage, the installment box in particular is a great feature. For the rest, great aligning, fantastic whitespace – not that we expect anything less of course πŸ™‚

    The attention to detail is pretty darn good too. Even the X to close the comment-formatting-box has a highlight state! And to my surprise the wee bite you’ve taken out of the top-right of the boxes break up the boxxyness enough – eventhough they’re really small bites.

    Solid design, and I can’t wait what colours you’ll inject with one of your (semi)-monthly redesigns.

  2. brendan says:

    Very very nice.

    I see you managed to achieve the ‘chopped corner’ you were after.. and it does add just the right kind of finesse to soften an otherwise sharp set of corners.

    One question however – why have you chosen to ‘indent’ short entries? You’ve gone to the trouble of standardising the layout, including using some classy icons (famfamfam?) however any block quote within a short entry is quite visually jarring as it’s not [vertically] in-line with full entry block quotes.

    This is something I have struggled with as well.. it’s not that easy to present shorts mixed in with full entries – overall however, I do very much like this design.

  3. Dylan says:

    Mmm, nice job on the simplification, you’ve certainly succeeded there. Perhaps even a little too much in cases. I still like it though.

    As a sidenote, the type in the logo looks a little scraggly to me. In places it seems it doesn’t blend with the background colour very well and the ‘N’ appears a little lopsided to me. Overall, it just doesn’t look quite right to me. Could just be my monitor or eyes though.

    Edit (unusual feature for blog comments!): The comment count on the main page is telling me there are 4 comments for this entry, when I can see only 3…?

  4. Dylan says:

    Scratch that edit…I guess I was just a little eager to use such a useful yet rarely included feature, I realize the fourth comment is that trackback up there. Oops.

  5. This is very nice indeed, and very Joenish (a good thing). I love the cleanliness of the markup and the no-nonsense.

    I noticed that there is an indentation a few entries down on the Journal frontpage, I can’t quite see the pattern in it, I’m guessing it’s an error of some sort? Also, pump up the number of names in the latest comments to at least 4, you’ve got the space for it πŸ™‚

    I’d like to the see the typography be a bit more ‘tight’ in the Leave a Comment section. The headlines and spacing is a bit on the lose side.

  6. Stephane says:

    Very nice, the colors are right right on target. Simple but in a way unique. The choice of fonts is perfect! I have been using the same sized Arial at my blog and have found it to be the most readable conformation (for standard web-fonts). I also find it interesting that you’ve given an equal importance to comments as they are often diminished by smaller font sizes and less prominent colors.

    For now the only part that seems in need of attention is the photography section. The zenphoto theme fits right in, but seems a bit too exteneded and spaced out. The album view just doesn’t shout “look at all my pretty pictures!”.

  7. Joen says:

    First of all, thank you all for the feedback, I really appreciate it.

    James AkaXakA said:

    The attention to detail is pretty darn good too. Even the X to close the comment-formatting-box has a highlight state!

    Glad you noticed it. Since most of the design is rather simple, I wanted extra attention to details.

    And to my surprise the wee bite you?ve taken out of the top-right of the boxes break up the boxxyness enough – eventhough they?re really small bites.

    Does that mean I was right in arrogantly expecting that YOU would like it? πŸ™‚

    Solid design, and I can?t wait what colours you?ll inject with one of your (semi)-monthly redesigns.

    Actually… the colors are pretty much there. Of course there’s going to be the small adjustment here and there, but honestly I don’t plan on making many a mini-redesign anymore.

    brendan said:

    One question however – why have you chosen to ?indent? short entries?

    This is generally an area where the theme looks different when applied to actual content than what it did on my localhost. As such, I hope to polish it. With regards to the actual indentation, my reasoning was visual distinction, without changing font size. I may have to reconsider.

    You?ve gone to the trouble of standardising the layout, including using some classy icons (famfamfam?) however any block quote within a short entry is quite visually jarring as it?s not [vertically] in-line with full entry block quotes.

    The icons, while very similar to the really good looking Silk icon set from famfamfam are actually drawn bottom up by yours truly. If nothing else, then for the learning process.

    I sort of agree with your indented blockquote criticism and will polish it.

    Dylan said:

    Mmm, nice job on the simplification, you?ve certainly succeeded there. Perhaps even a little too much in cases. I still like it though.

    As a sidenote, the type in the logo looks a little scraggly to me. In places it seems it doesn?t blend with the background colour very well and the ?N? appears a little lopsided to me. Overall, it just doesn?t look quite right to me. Could just be my monitor or eyes though.

    Edit (unusual feature for blog comments!): The comment count on the main page is telling me there are 4 comments for this entry, when I can see only 3…?

    Dylan said:

    As a sidenote, the type in the logo looks a little scraggly to me. In places it seems it doesn?t blend with the background colour very well and the ?N? appears a little lopsided to me. Overall, it just doesn?t look quite right to me. Could just be my monitor or eyes though.

    I change the font ever so slightly, and the logotype is now thinner than it u sed to be.

    I see what you mean though, especially on the rollover.

    Michael Heilemann said:

    This is very nice indeed, and very Joenish (a good thing). I love the cleanliness of the markup and the no-nonsense.

    I very much take that as a compliment.

    I noticed that there is an indentation a few entries down on the Journal frontpage, I can?t quite see the pattern in it, I?m guessing it?s an error of some sort?

    I’m thinking you’re actually noticing the slightly different layout of “sidenotes”, or as most people call them, “Asides”. As mentioned earlier, I think I’ll have to rethink these and polish them. I’m confident that they’ll work, eventually.

    Also, pump up the number of names in the latest comments to at least 4, you?ve got the space for it πŸ™‚

    Done. But only in the sidebar. Too much content on the homepage will look jarring. Which brings me to, that random photo in the bottom is actually supposed to have a “random wallpaper” counterpart, so it’s not supposed to be so side. Right now it’s in limbo due to technicalities, though.

    I?d like to the see the typography be a bit more ?tight? in the Leave a Comment section. The headlines and spacing is a bit on the lose side.

    My first thought when I saw this live also. Again, I’ve learned that what looks great on localhost might look very different when applied to real content. Suffice to say that’ll be adjusted.

  8. Joen says:

    Stephane said:

    Very nice, the colors are right right on target. Simple but in a way unique. The choice of fonts is perfect! I have been using the same sized Arial at my blog and have found it to be the most readable conformation (for standard web-fonts). I also find it interesting that you?ve given an equal importance to comments as they are often diminished by smaller font sizes and less prominent colors.

    With regards to the Arial, I did indeed choose it for the readability. I am, however, unsure whether it actually is more readable than a smaller say, Verdana. I have already now tweaked the p margin a bit to add space between paragraphs, and I might relax margins a bit further even.

    As for comments, it’s been my experience in the past that they were actually often more interesting than my post content in itself, so that’s entirely on purpose.

    For now the only part that seems in need of attention is the photography section. The zenphoto theme fits right in, but seems a bit too exteneded and spaced out. The album view just doesn?t shout ?look at all my pretty pictures!?.

    Indeed. Unfortunately I was unable to set up ZenPhoto on my local dev server, so I was unable to tweak the theme to fit. So yes, this is definitely an area that needs work.

  9. Rob Mientjes says:

    Oh yes. Congratulations. I love this! It’s better than what you showed in previews and… so much of an improvement that it’s hard to compare it to Fauna.

    This is… what I’d want for my site. Damn.

  10. Jonas Rabbe says:

    Very nice design. I’ll have to browse around and see all the finesses ? and knowing you there’s bound to be a lot ? before passing final judgement, but as I’ve said before, this is damned nice.

  11. bramick says:

    Question for you Joen,

    I’m confused about the main index of the journal. Look at the left alignment of the different posts. Some are indented more then others.. And at this point I can’t tell what what the convention on how far they are indented is.

    For ex:

    Why is “Hulk To Be Remade?” indented farther then “June Installment Synthetics”. Then “Google Browser Sync” is lined up with the “Hulk”. Below that “Noscope Pangea: June 15th” jumps back over to left…

    Comments are also in different locations. Is there an order to the madness? I like how the comments are seperated by the containment div when you view a specific post. However the seperation between posts on the main index is a bit confusing. Once I scroll down past “June Installment” I get confused and lost. Maybe a horizonal rule or alternating backgrounds on the posts. It seems like a pretty interesting new skin, but still might need some tweaks.

  12. Dustin says:

    I’ve been checking your site out recently because of all the useful bits of knowledge you share. I really like the new design; well done!

  13. bramick says:

    Ah ha! It’s Sidenotes and Noteworthy (I think)…. some discinction on this page would help.

    http://www.noscope.com/journal/

  14. Joen says:

    Rob Mientjes said:

    Oh yes. Congratulations. I love this! It?s better than what you showed in previews and… so much of an improvement that it?s hard to compare it to Fauna.

    This is… what I?d want for my site. Damn.

    Thank you. By the way, I’d be proud if this inspired you, not that you need inspiration.

    Jonas Rabbe said:

    Very nice design. I?ll have to browse around and see all the finesses ? and knowing you there?s bound to be a lot ? before passing final judgement, but as I?ve said before, this is damned nice.

    I’m glad you’ll be looking in the details. Specifically, you were the driving force that pushed me into actuall building the “scale-to-fit” function for the installments.

    bramick said:

    Question for you Joen,

    I?m confused about the main index of the journal. Look at the left alignment of the different posts. Some are indented more then others.. And at this point I can?t tell what what the convention on how far they are indented is.

    Having launched this, it has become clear to me that that specific area needs more work.

    What you are boggling at is actually “correct” behaviour. Fact is, I want to visually distinguish importance of posts, and as such, main posts get more space than stray thoughts, a.k.a. sidenotes or asides. Concretely, “Hulk to be Remade” is a sidenote, while “Noscope Pangea: June 15th” is a “regular” post.

    Expect further work on this. As noted before, I’m confident that I can make it work.

    Dustin said:

    I?ve been checking your site out recently because of all the useful bits of knowledge you share. I really like the new design; well done!

    Thank you! And please, don’t be a stranger.

  15. Bilal says:

    It’s nice and simple! Love it. πŸ™‚

  16. Omar says:

    Excellent redesign. You’ve inspired me.

  17. khaled says:

    First off just wanted to say that I’ve been waiting for this since you announced it all those moons ago. I really like it, and like Michael said, it is very Joeney :). I could spot your style a mile away. It’s got this subtle attention to detail that you don’t really notice upon looking at it for the first time. It kind of creeps on you a little while later and you go ‘ Oooh that’s pretty clever’. Really like the icons you’ve created (especially the quote icon).

    One thing stuck out as an odd location was the google ads placement, doesn’t really fit there me thinks :).

  18. Joen says:

    Thanks, Khaled, I appreciate it.

    khaled said:

    One thing stuck out as an odd location was the google ads placement, doesn?t really fit there me thinks :).

    Do they really fit anywhere?

    Fact is, I’m making enough for it to pay for my servers at the moment (but not many a cent more), which is a pretty good deal, so I’m reluctant to pull them altogether.

    On the other hand, I’d like to try new placements, that – while looking less intrusive – generate the same trickle of revenue. I’ll have to leave them there for a while to see if that’s the case with their current placement.

  19. I will not continue the ongoing praise above – although I agree, great work Joen – I think his ego may be in jeopardy of exploding! πŸ™‚

    To counteract, I will supply a small recommendation (and stand on shoulders of a giant!), change the position of “Formatting your Comment” with “Change”. It will seem more intiutive. I did say it was a small recommendation!

    On a content note, love your poetry!

    I might not win the war with it, but this day I fought.

    Its brilliant, simply brilliant!!!

  20. Joen says:

    Nielsen, Anders V. said:

    Its brilliant, simply brilliant!!!

    See that’s what friends are for. Thanks Anders, you just earned yourself a brew.

    Edit: P.S. That “this day” comment is actually from Lord of the Rings πŸ™‚

  21. Edit: P.S. That “this day” comment is actually from Lord of the Rings πŸ™‚

    Then I take back my brilliant comment! Well just the brilliant part, not the actual comment, although it was also brilliant! LOL.

    Anyway, I know you wanted to highlight old content, but 36 years? Frontpage links to your journal dates your blogs 36 years and 5 month old lol.

  22. Joen says:

    Nielsen, Anders V. said:

    Anyway, I know you wanted to highlight old content, but 36 years? Frontpage links to your journal dates your blogs 36 years and 5 month old lol.

    Gah, that’s a bug with the “time since” plugin I’m using. I thought that bug had been fixed 36 years ago.

  23. khaled says:

    Hmm, no definitely not saying to remove the google ads, I guess maybe blend them in a little more? Also maybe enclose it in it’s own little box with advert at the top or something like that, just that it looks a bit odd without any more slickness if you see what I mean. Potentially even have the little indent box as well?

  24. anouke says:

    Simply “woohaaaa!” =D

  25. Joen says:

    First of all, I’ve done some changes since the launch version, pretty much all based on the feedback here.

    • I have tried to improve the way asides look compared to regular posts.
    • Wallpapers & Photography sections, while not entirely there, are closer to being there.
    • Archives page has been spiffied up.
    • Page navigation has been added to the bottom of pages also (as opposed to only the top right part of the sidebar before).
    • Edit: Forgot to mention, tweaked the layout, sizes and colors of main headlines as to distinguish better between asides and posts.
    • Edit again: Found a great “Time Since” alternative, which doesn’t say my posts are 36 years old: Relative Dates.

    Overall I think it does help out quite a bit.

    khaled said:

    Hmm, no definitely not saying to remove the google ads, I guess maybe blend them in a little more? Also maybe enclose it in it?s own little box with advert at the top or something like that, just that it looks a bit odd without any more slickness if you see what I mean. Potentially even have the little indent box as well?

    Good points. I think I’ll try and give the ads a noscope branded box, and make the border google border white, for starters.

    anouke said:

    Simply ?woohaaaa!? =D

    I guess that means it’s good, thanks πŸ™‚

  26. Del says:

    Excellent redesign, I’ve been thinking about redesigning my blog for a while now but every time I think I have a good idea, I see someone elses redesign and realise that what I thought would be good is a bit shit really. I think that reads as a compliment πŸ™‚

  27. Joen says:

    Del said:

    Excellent redesign, I?ve been thinking about redesigning my blog for a while now but every time I think I have a good idea, I see someone elses redesign and realise that what I thought would be good is a bit shit really. I think that reads as a compliment πŸ™‚

    Thank you. Yet, I don’t think you should scrap ideas for redesigns based on mine or others redesigns. If nothing else, practice makes perfect.

  28. Joen, found your site through James and I must say, “very inspiring!” Like you it seems, I love clean and simple designs. In many aspects I think that you take this to the next level. I love how you split up the sections and I really like the fluid layout. I’m working on improving my skills with fluid layouts, so it was awesome for me to see what you were able to accomplish. Keep up the great work.

  29. Joen says:

    Matthew,

    Thanks a lot for your kind comments, I appreciate it. You mean this james ? Yep, he’s a good friend.

    With regards to fluid layouts, yes, I like them too, and they’re not as hard as they’re made out to be. Before jumping in, though, I can recommend reading Doug Bowmans thoughts on the topic.

    Good luck.

  30. Florian says:

    Wow! Stunning redesign! Interesting how your idea of monthly mini-redesigns correlate with Shaun Inmans 30000+ stylesheets for his site… something seems to be in the air.

  31. Joen says:

    Wow! Stunning redesign! Interesting how your idea of monthly mini-redesigns correlate with Shaun Inmans 30000+ stylesheets for his site… something seems to be in the air.

    Thanks Florian, I appreciate it.

    I read about Shauns 30000+ stylesheets and I hope for his sake that they’re auto-generated. That’s how I’d do it. A novel idea, nonetheless.

Comments are closed.