Presenting Fauna

Fauna, is the brand new name for this Noscope design.

“A living organism characterized by voluntary movement” – Definition

I felt the design needed a name. I’ve worked on it for so long that it deserves the value a name adds. Furthermore, naming the design makes it easier to refer to.

It has been named “Fauna” for several reasons. First of all, it is not a redesign, it is an adjustment to an existing design; since the beginnings of this design some year ago, it’s been changing over and over again. Thus, it can be referred to as a living organism voluntarily moving forward, just like the definition of Fauna states.

Secondly, the soft warm gray color tone reminds me more of animal life than of, for instance, plant life.

The third reason for the name has to do with future proofing the site. I will, eventually, redesign this website, but due to the form and function of at least the journal aspects of the website, the layout and usability won’t change drastically. Thus, a redesign shouldn’t have to be more than replacing the current stylesheet. If this actually happens to be the case, that would mean I can keep Fauna in a stylesheet switcher, and let the user choose. This brings me to some of the changes that have happened…

Changes

  • New logo
  • The Noscope logo has been redesigned. The “no” shape used to be in a circle, and I never really settled on a font or case for the logotype. Thus, this logo represents a “settled” logo. This is how it looks! I’ve finally made up my mind.

  • Cleaner header graphic
    Since adding a Journal section, I’ve been wanting to sow it together with my Installment section. A header graphic featuring images from the installments archives was a logical choice, but the first iteration of this header graphic suffered from bad usability, cluttered graphics and too much distance to the rest of the design.

    This new header graphic, I feel, connects much better with the rest of the design, and the revamped “prev. image / next image” buttons are much more usable (albeit not perfect). Still to come: an option to view the installment currently selected.

  • Space!
  • The header graphic has been detached from the top of the browser, thus suddenly lightening the whole experience. Where the old design was tight and cramped, the new design adds air and freedom.

  • New navigation
  • The navigation on the old version used to be left aligned, placed in the sidebar. It didn’t work well there, because navigation should be in the top-left corner (at least for non-Arabic speaking nations). This has been resolved by making the navigation horizontal, and top aligned.

  • Background graphic
    A soft shadowed line has been added to the background. It is designed in the same way as the drop shadows on the rest of the website, as such it fits right in.

    Sadly, almost all blogs today looks the same—they’ve got a sidebar, some main content, and it’s all vertically oriented. While Noscope is no different, the new background graphic adds a little bit of horizontal orientation to the website, breaking some of the vertical movement.

  • Subtle changes to the sidebar
  • Highly inspired by how Jason Kottke does it, for some sections of the site (such as the colophon, or the archives), I now present humanly readable information about what page you are looking at—right at the top.

  • Search box placement
  • Because Jakob Nielsen says it’s best that way, I have moved the search box to the top right corner of the page. It’s smaller, less cluttered, and right where it usually is.

  • The vertical scrollbar is now forcefully enabled
  • With the help from Jon Hicks excellent article “Forcing Scrollbars”, I have now implemented the technique on this site. The main purpose of always having the vertical scrollbar enabled, is to prevent the 18-something-pixel jog that happens when going from a page without scrollbars to a page with scrollbars.

  • Firefox users get special treatment
    All users of the excellent browser Mozilla Firefox, get a special—albeit geeky—feature. Namely the ability to switch stylesheets on the fly. Yes, try looking at the bottom left corner, there should be a small palette graphic. Click it, and you can choose between “Basic” and “Fauna” stylesheets. Currently, “Basic” contains nothing, so you can see how the site markup looks without the CSS.

This also serves as a personal development tool for me, since the markup still needs some work.

Remaining Problems

While I feel the design is nearly there, there are still a few things I need to do.

First of all, navigating permanent link locations (unless you’re looking at this page in category view, you should be at such a location right now), there are “previous post | home | next post” navigation links at the top of the page. The problem is the “home” link, which links to the journal index. Only, “home” usually links to the website front page, which in this case would mean the index page. It can probably be solved by a simple rename, but I have no idea what to call it. Suggestions are welcome.

As mentioned earlier, the markup still needs work. As you can see, there are still a few “align” and “style” tags in the markup, and these have to go. Furthermore, all navigation and lists should use UL and LI tags, positioned using CSS.

Afterthoughts

I am really happy about this version 3.5 of the site. Adding air certainly lightened the whole thing, and I feel I can finally move on to other projects. This is good, because I have a few that are long overdue.

With that said, one should never underestimate the power of “not doing what you’re supposed to”, because this very design adjustment was made during my September Installment sessions. I’m sure you know the feeling—you should be working, instead you clean the house, do the laundry, the dishes, etc. Well the point is, sometimes skipping work is good…

24 thoughts on “Presenting Fauna”

  1. Joen, I could never fault the previous version. Fauna is simply improving on what was, for myself at least, an already sublime design.

    I am therefore glad that Fauna represents a subtle refactoring rather than an full-on redesign. I congratulate you on your restraint and for the fact that you’ve pulled it off so successfully.

    Naming your designs is essential if you want to document the evolution of your website. I always name my designs for just that reason.

    The header works really well and your logo is fantastic. I love the way the characters flow together.

    The problem is the ?home? link, which links to the journal index. Only, ?home? usually links to the website front page, which in this case would mean the index page. It can probably be solved by a simple rename, but I have no idea what to call it.

    Some possible titles:

    Journal

    Journal Home

    Root

    Main

    Index

    Latest

    Obviously permutations could also be used, “Journal Root” for example.

  2. Joen says:

    Glad you like it, thanks! I’ve been working on it in my mind for a long time, and had several other solutions, all fairly complex—then suddenly it hit me: “keep it simple”, so that’s what I did.

    About naming the designs—I had actually never thought about the aspect of keeping track of the designs, but it’s a very good reason indeed! For instance, my noscope design from 2001 is simply labelled “Noscope 2001″—clever eh?

    Journal Root or Journal Home are good suggestions… or maybe Journal Main—it would work with either…

  3. I like “Journal Root” but, whilst you and I might understand “root”, the average visitor will probably not.

    Unfortunately “Journal Home” is probably the more viable of the two from a usability perspective.

  4. Daniel says:

    Now that’s not half bad. 🙂

    It was great before as well, but it looks more unified now.

    Since I don’t want to be an echo of that other guy, I’ll leave it at that..

    One thing I’ve noticed though, and I’m not sure if it’s just me for some reason.. On the front page, the last Journal Entry (currently ‘All your SWFs are belong to open-source’) appears slightly under the lower border of the white ‘box’..

    This in Firefox 0.9.3

  5. Joen says:

    Daniel that’s right, it’s a “known” bug if you may—I’ve just not fixed it yet. Up until just recently, it just showed a random amount of entries, some times more, some times less than the 7 lines there’s room for. That is, until I hardcoded a loop that stops after presenting 7 entries. The remaining bug is because “About WordPress Usability and Open Source Development” spans two lines, thus requireing 8 lines in total. The solution is of course to crop off the text after a number of letters, just like in the comments. I just haven’t gotten around to doing this yet.

  6. Michael says:

    Joen, I really like it.

    As with Jonathan, I loved the last design, and this one improves on that, worsening nothing.

    As for Jakob Nielsen… While I think he’s right to a certain extend in regards to the search box, I wouldn’t follow most of his advice blindly (Jesus, look at his website!). The search box’s background, a white box, does look a bit disproportionate perhaps. I’ve sent you a screenshot on Safari.

    Also, I would like to see a bit more whitespace on the left side of the main column. Perhaps double what it is now. Just a thought.

    Another thought which I’m going to implement on my own site, as soon as I find a Textile / XHTML previewer, is to move the preview div on top of the textarea. I think that might be a better solution, pushing the written text upwards, not downwards. But it might not work, might push the textarea down under the window instead of the other way around…

    Jonathan Ive, the designer of the iPod and the new iMac – and thus obviously one of my personal hero’s within industrial design – has on several occasions said something to the effect of: “Evolve a solution until it becomes completely inevitable.”

    That’s what I’ve tried to with my site (though right now, there’s a bit of design-rot to take care of), and you’re once again a great example of that as well.

    Of all the things, I think moving the menu was the best choice.

    As for ‘Home’. I vote for keeping it a one-word. I’d go for ‘Journal’.

  7. Jina says:

    This is very beautiful. 🙂

  8. Joen says:

    Michael, thanks for our comments. Coming from a much superior blogger than myself, I am of course, humbled.

    As for following Jakobs advice blindly, I am detecting a certain inherent negativity towards him, healthy of course. I was there myself, but allow me to say that “I know better” now:

    True, his website is a terrible example, but if you look at his advice objectively, it’s very hard to argue with. One of the strongest arguments is that he doesn’t preach (bear with me): he usually only presents results of various analyses. He then presents statistics. For instance, the search box placement issue was more of a gray area than I present it as (it must be top right). Usually he presents statistics as to how often a feature has this or that placement, and then crossrefers this as to how often that same feature was used.

    Some of the main guidelines of that analysis was that the search box is commonly in the top right corner, it should have a white background (people scan the page for a white box), and it should be WIDE to encourage lots of search keywords. Here’s an article on the search box.

    The bottomline is, while his usability guidelines can seem strict and almost religious at times, they are always based in thorough studies, and are really just guidelines: “If you do this, you’ll succeed, if you do that, our studies say it’s likely that you won’t succeed”. Such arguments are hard to argue with. With that said, I am breaking some of these very guidelines: a) box is not wide enough, b) box is CSS styled and doesn’t use the default “chiseled” style.

    … Which brings me to your Safari comment. Please do send a screenshot, I would appreciate it!

    As for more whitespace, do you mean a greater margin towards the sidebar? I’m all ears.

    The preview div annoys me as well—how about providing a fixed initial size for it, and once that is used, let it grow downwards from there? I think if the textbox you wrote in suddenly moved downwards it would annoy more than having to scroll.

    A one word solution: Journal. That does sound right. It would have the same name and function as that of the navigation, that’s good usability! I think Journal is what it’s going to be.

    Thanks for your comments.

    Jina,

    Thanks so much.

  9. Michael says:

    Don’t me wrong Joen, I think JN has a lot of sensible things to say. But I have also seen him post things that were IMO not too sensible (too lazy / too little time, to find examples).

    And I quite honestly have a hard time following his advice, simply because he fails to lead by example. useit.com (I presume this is his primary site?), is usability hell! 100 links, none of them seem more important than any of the others…

    Design can’t live without proper usability, no doubt. But Usability sure doesn’t work too well without a proper design either.

    But for the search form, I agree, it should be at the top right, it makes perfect sense 🙂

  10. fernando says:

    i think it is the most beautiful thing i have ever seen.

    but tell us, please, how did you manage to get Kubrick to not fall apart in IE5?

    nothing short of begging for the secret, i would not stop.

    please?

  11. Rob Mientjes says:

    Pretty great design dude. May I call this a flash of inspiration? 😀

    The colors are great and I really like the layout of this all. Keep on truckin’.

  12. Joen says:

    Michael,

    You’re absolutely right that JN should be a champion of the internet himself, and to be honest, my complete belief in almost anything he says comes from reading Designing Web Usability, and Homepage Usability, 50 Websites Deconstructed. Both nothing short of fantastic books, I read them from the first word to the last. The latter of these two books have been lying casually on my desk for a while, so much that I’m being taunted and called “JN”. Even so, the books have my warmest recommendations to ANY and ALL web designers. ALL web designers. And now you don’t get me wrong either—I can’t put a finger on any usability issues in what I’ve seen on your site or in Kubrick.

    fernando,

    Thanks so much!

    As for kubrick not falling apart in IE5, I am not entirely sure what you are referring to. First of all, while many design elements in this site are similar to those found in the Kubrick template, this site is not using that template. My markup is far too primitive and cluttered to have been anything near the pearl that is Kubrick. As for not falling apart in IE5—does that mean THIS website works in IE5? If so, woo! I have done nothing to optimize for that browser.

    Rob,

    Thanks! Proud to be of inspiration.

  13. fernando says:

    Joen:

    indeed, it works beautifully in IE5 (the tedious and heart wrenching bottom line)

    good work, “Woo” indeed.

  14. Joen says:

    Fantastic! … and with no extra work. That’s a rarity.

    Do you use IE5? If not, how can you test sites in that browser? I’ve been looking for a way.

  15. fernando says:

    I use Safari, and check my work (and work i admire) in IE5, Firefox, Mozilla, and Netscape.

    It’s the IE5 users who always seem to complain. I can understand, and usually guide them to an upgrade, or a better browser in general. But the sad truth is that most people use IE, and most people are nowhere near up to date…

    The standard issue IE for Mac os 9 and X is IE 5.2 (still.)

    I think that newer, more casual Mac users choose IE because it’s similar to what they know from the PC they use at work, or school.

    How can you get a copy?

    It’s usually included in all Mac Os X installs.

    And i presume you can get an archival version for PC from Microsoft.

    it’s not much fun to use, but whenever i discover a design i love, i check it there before i give it high praise.

    good work!

  16. Joen says:

    Oh, I thought you were referring to IE5 Windows. Don’t get me wrong, I’d love to have the site work in both browsers—the reason I ask is because it’s impossible to have more than one IE browser installed on Windows.

  17. Nik says:

    Um… not if you run standalone versions. (But then they don’t work 100%) I’m just being picky! 😀

  18. Joen says:

    Standalone versions? If it’s possible to get a standalone version of IE5, please tell me now! 🙂

  19. Joen says:

    Oh my! That’s not bad!

    Just tried it, and this site works, but looks like a mess, and is totally left aligned.

  20. Seneka says:

    hi joen,

    is it possible to have this template…

    May I download from any website or from your website…?

    I like it too much, and so, I’d like to build a website, or better, my own journal/blog with this fabulous theme…

    thanks a lot

    Seneka

  21. Joen says:

    Seneka,

    Yes, you can have this theme. It’s been released open-source over at http://www.noscope.com/fauna/

    It’s also available on wordpress.com if you want a blog there.

    Good luck.

  22. I have used Fauna on my wordpress blog, however I wish there was an update I could use for it. Add some widgets possibly or the ability to change the colors of it? Or header?

  23. Joen says:

    Hi Cristina Marie,

    I hope that once Fauna is final, that WordPress.com will update the theme. I know that I will pledge to work with them if any further changes are necessary.

    I hope Fauna will be done within a few months.

Comments are closed.