Pangea is the title of the upcoming design for Noscope. The purpose is to unite sections of the whole that have drifted apart.
Here’s a teaser.
Embarking on a Redesign
Sometimes, a restructuring is necessary. Throw out all the old, and bring in the new.
When To Redesign
There is no finite formulae that when used to crunch numbers while wearing white lab coats can tell you exactly when you need to redesign.
On one side there’s the hot-air department who says: “Redesign every sixth month! Next time we need taxonomic navigation!”. On the other side there are the designs that just work and have done so for a long time.
Yet, when combining the idea of a refresh with the experiences of a tried and proven design, we might end up with a third option. No, not a re-align, a redesign based on purpose, past experiences and the need to move forward. What should we call this? I’d like to call it a redesign done well.
In the end, there’s nothing wrong with moving forwards, and so it essentially comes down to two things: do you want to, and can you make it better.
Before embarking on a redesign, it is a good idea to deal with these two issues, before you lift a pen.
Let’s say you want to redesign, and you think you can make it better. Let’s first note that making it better rarely means improving the visuals. After all, we’re doing the christmas-tree here, not the decoration. Still, a christmas-tree is in itself a proven design—can we improve this?
Focus! Identify Goals To Achieve
If you’re one of the lucky ones, you signed up for Google Analytics when they were still accepting signups and you later on read Mr. Cabanillas review of Analytics Overlay. If this is the case, take a look, and see where people click:
Ahh. Where people click. As you’ll notice, most of the links shown here are actually being visited. Some are visited more than others. Particularly orphaned sections seem to be Installments, Photography, Wallpapers and Noteworthy entries / illustrations.
One could say this is understandable since those sections are more static and less organic than the journal you’re reading now. Even so, I would like to drive more clicks to those sections. As such, this in itself could be identified as a goal, whether this means improving usability or something else.
You’ll notice that the Archives and Colophon sections are fairly equally visited. Those are sections that serve very specific purposes and there’s no sense in driving more traffic to them. Maybe they don’t deserve to be primary navigation?
Ah, two goals already. Now how about some numbers; Analytics tells me that I get approx. 2 pageviews per every single user. Whether that means the RSS feed and a single article of interest, or if it’s the journal and the comments for a single entry, it’s ever so slightly disappointing. Showing more points of interest may be a goal, or maybe it’s just goal #1 restated?
Three goals for improving the end-user experience. But what about my personal experience? Making it easier for myself always increases my productivity.
- The practical issues of uploading an installment should be easier for me.
This probably means automating various aspects of the process. - Writing and interlinking should be easier.
Lots of things to do here, but some of the actionpoints could be improving the post display, readability, page navigation and search. - Monthly rebranding should be possible.
A while back, I asked my visitors whether a monthly rebranding was a nuisance to them or not. Essentially it wasn’t, as long as the main branding of the site shone through. - I want more space and less scrolling.
Does that mean liquid width design? - Make it possible to move good content bubbles to the top, even if they’re old bubbles.
Name It!
Add value to your work. Give it a name that sums up the core values of your redesign. If a new idea pops into your head during the design phase, hold it up to its name and see if it fits.
Seeing as I need to unite sections of the whole that have drifted apart, I call it Pangea;
Pangaea (Greek for “all lands”) is the supercontinent that existed during the Mesozoic era, before the process of plate tectonics separated the component continents.
Sporkle! New And Improved
Our pet project, Sporkle, has gotten a major facelift and overhaul. All the games are now free, and do not require log in. Go on, try out Bounce – The Game Where You Bounce A Ball™.
Thoughts on Monthly (Mini) Redesigns
It all started with a harmless idea. What if I made a mini-redesign, every month, to co-incide with the release of an installment of themed pictures? Maybe that would garner some attention to the installments section at the heart of Noscope.
By mini-redesign, I mean adjust backgrounds, colours and possibly layout to quickly update the look. So far I’ve done no less than three of these mini-redesigns (they’re all available in the preferences section), and now I’m starting to think it wasn’t such a good idea in the first place.
It’s not so much the look / design of these alternate styles that cause the problems. It’s the fact that the biggest challenge for anyone designing for the web is to make clear to the viewer: where one is, why one is there, what’s been seen already and what remains to be seen.
Now a set of new clothes doesn’t necessarily make a completely new person, but web-users are fleeting and impatient and if confused, they can always surf right past you to Digg. Like all human beings, they fear change, even if it’s just a small change.
Think of any re-branding you’ve seen in a company. Adobe acquires Macromedia. Quark get’s a new logo (again). These efforts are always accompanied by a huge campaign elaborating and explaining all aspect of the transition. Essentially they’re saying “don’t be afraid, we’re still pretty much the same, love us”.
As a weblogger who cares, you should approach a redesign in the same way. Warn your users a redesign is forthcoming. Don’t do a “live redesign”. Once the day arrives, explain, elaborate and in big bold letters say “this is still home, don’t be afraid, keep spending your time here”.
Alternatively you could not do a redesign, and simply improve on what you have. Make tiny changes, structural changes, navigational changes… changes that users might not notice right away, changes that when noticed, will feel like “improvements to what’s there”.
The urge to throw out the old and bring in the new can be great. When it happens, you have to ask yourself: do I care? Personally, I thought I didn’t.
Style: Exotic Fauna
Mold has been growin on Noscope! It came out of no-where, and slowly infested this place. The hull was all rotten to the core! I barely poked at the surface and the lot fell apart. I knew then that a regular paint-job wouldn’t do.
So I secretly gathered ingredients whose names I had forgotten and whose contents no longer mattered and concocted a potion so sweet that not even a squishee made up entirely of syrup would compare. You’d spit it out you would!
I call it: Exotic Fauna!
2006
In a few hours I will be leaving for Malaysia, specifically Singapore and Tioman island, to spend the holidays there. I feel privileged to be able to end my year like this, and I dare say I think it’ll be good for me.
Quickly, before the year ends, here’s a madly short look back at the past year.
2005
- Worked on “Shuttle“
- Got Fauna out the door
- New installments
Khaled‘s brain-child Shuttle is a new backend for WordPress. It’s been a very interesting project, because it’s been molded by a number of highly clever people. The end result is much better than the current WordPress backend, and part of Shuttle will be included in WordPress 2.0 once that’s launched sometime soon.
My open-source theme for WordPress, “Fauna“, had been on the shelf for quite a while. It’s nice to have it out of the door.
2005 was a good year for my monthly installments. Possibly the best year yet. I’m proud to have made such installments as Arboretum, Stagecraft, Surr?alisme Recut, and Undergrowth.
2006
- Noscope redesign
- Relaxation & health
- Fauna final
- More installments
I have early sketches done, and plenty of reasons for this. Noscope will see a redesign sometime in 2006. The focus will be to simplify things, remove text, increase transparency of content, and highlight sub-sections.
I plan to focus on getting and staying as healthy as possible, next year. What this entails, I have yet to plan.
A number of bugs have surfaced for Fauna, and I plan to fix these quickly and be done with it.
My installments are the best things I’ve done with my website, and they keep getting more interesting, challenging and surprisingly, fun to make. The no-demands-to-myself feel of them and the randomness with which they are devised every month have kept making me proud. So I see no reason to stop.
Have a happy holiday and a great new year.
Fauna 1.5
Introducing the latest evolution of the Noscope design. This latest version has a few tweaks, changes and improvements.
New Features
- Plain Fauna is default again
- New, relevant meta information style
- Inline Textile / WordPress comment formatting help
- New background image
- Less images
An on and off style, “Plain” Fauna is once again the default, light, style for Noscope. Preferences can still be adjusted if you prefer Nocturnal Fauna.
The main page has meta information such as date, link to comments and category presented in context with the post. For permanent post locations, this information is tucked away in the sidebar.
Go to a single post, click “Formatting your comment”, and voila, it opens right there.
In an attempt to break the verticality, I’ve added a more personal and wide background image.
In an effort to simplify future re-designs, I’ve minimized the amount of “needed images”. One image sacrificed was the shadow for the previous style of meta information.
Future Plans
This is the final version of Fauna, for Noscope. I expect to make no further visual changes to the site, until the time comes when I do an actual redesign. While Fauna has its cons, I’m fairly satisfied with the looks of it. It is for the same reason that it’s been the de-facto Noscope design for more than a year now.
Some of the cons include the fact that there’s the same huge header image on all pages. While this has been a conscious decision on my part, it does become redundant and illogical on archive pages and the likes. Another problem is the verticality that all weblogs seem to suffer from in one form or another (except shining examples such as Joshuaink and Broken Kode). In a redesign, these would issues I would want to address.
For now, I’ll let Fauna stay here for a while more. What happens next, is up in the air.
Nocturnal Fauna
Nocturnal Fauna is a quick re-draping of Noscope.
“belonging to or active during the night; “nocturnal animals are active at night”
Source
A Quick Re-draping
Fauna has served me well for almost a year. More than a year, if you count the early movings that would one day become Fauna.
Still, things can become stale after a while, and I needed change. Unfortunately, my plans do not allow for a complete redesign at this time, so a quick re-draping such as Nocturnal Fauna, seemed like a good solution.
This iteration is not permanent. Nothing is. But for the plans I have ahead of me, it’ll do just fine. As for the surprise revelation of this design, no, Nocturnal Fauna is not the surprise I talked about a while ago. That one is still to come, in time.
Nocturnal Fauna
A long time ago, when my good friend Brian was still at Titoonic, I walked up and asked why he had dimmed his system colours to dark grays. He replied that this way, the monitor emits less light, thus causing less eye-strain. I have to agree with him on that. For Nocturnal Fauna, I’ve tried to do just that: turn off the lights.
Fauna was the name of my previous design. It was a decorative name that at the same time represented the process it had gone through to become what it was: namely “a living organism characterized by voluntary movement”. Since Nocturnal Fauna is not a complete redesign, but only a quick re-draping, I figured I needed a decorative name that had a connection to the previous iteration. Since I’ve become rather nocturnal myself lately, and because the design is dark, “Nocturnal Fauna” was an obvious choice.
A few Usability Sacrifices, a few Improvements
In order to dim the lights, I’ve had to sacrifice some usability. The most glaring example is the fact that input boxes and push buttons have been slightly tinted. As any usability aficionado should know, one should _always_ use default GUI widgets.
Yet, in the spirit of The Matrix: some rules can be bent, some rules can be broken. The key is, to know the rules and the consequences. In the case of tinted input boxes and push buttons, this means people will have a harder time finding the search box, or the comment box.
So why the sacrifice? Because this is a personal website. It is mine, not yours. In this space, I am faithful to no-one but myself, and there’s no way that changes.
On the other hand, I’ve fixed, repaired and cleaned up more cruft than you can shake a lemon at. Among things that have changed, most of them have been that way for a while without your knowing, others will be invisible to you:
- Even more relaxed margins
Comments, entries, paragraphs and headers have more relaxed margins. - Track- & Pingbacks have their own box
Entry and comments have been separated further. - Sidenotes are now simpler
Powered by WordPress Asides, Coldforged Style (Thanks Steve), I’ve been able to turn 50 lines of code into 5. Things are _much_ easier to work with now. - “Previous Entries”
At the bottom of the frontpage, you’ll now be able to seamlessly travel back in time using the “Previous Entries”. I’ve been wanting to do this for a while. Turns out it was a bug. On the upside, this forced me to clean up a lot of code. - XML Feeds in many flavors
Grab a quick gander at my XML Feeds page, to learn that the main Noscope feed is now available in both RSS 2, Atom and RSS 0.92. Well, it was before, but only RSS 2.0 filtered out my Sidenotes. This has changed now, due a simple hack. Edit @wp-rss2.php@, @wp-rss.php@ or @wp-atom.php@ and insert the following code in the top of the document. @x@ is the ID of the category you want to filter out:
if (!empty($_GET['category_name'])) {
$cat ="-x";
}
- Global Footer
The footer on this page used to be present only on the main index. To keep things simpler for all parties, it’s now available everywhere. - WordPress 1.5.1 and Subscribe to Comments 2.0
I’ve upgraded to the latest WordPress which fixes a few bugs. Additionally, this allows me to use one of the best WordPress plugins available: Subscribe to Comments 2.0. This plugin is the pinnacle of plugin greatness. It is easy to use, and it works better than any charm. Expect to see a “Subscribe without Commenting” feature on this page as well, when time allows for it.
User Preference
As for the essence of Nocturnal Fauna, it’s basically just a stylesheet containing the colour. When time allows for it (as usual), I will find and implement a Stylesheet switcher, that allows you to store your preference of flavor. When that happens, I may re-consider which one I want to be default.
For now, dim down the lights and squint. You may be able to spot a few nocturnal creatures.