Concept Creation Process
This process was not so difficult as it may be for some sites. Earth Chronicle is at heart a history website. It is a public domain library of digital texts. Taking these two concepts as a starting point, the idea of doing something along the lines of a book came pretty quickly. But that doesn't minimize the process. We started with the topic and purpose of our website, then started considering the limitations (real world references, usability, accessibility, etc.) and ideas generated by them; form follows function. So we started considering the function of the website and basically it's a library. Old books have always held a special attraction for me. The hundred year old Latin texts I bought from Powell's Books in Portland, Oregon while attending Portland St. The illuminated manuscripts I've read from Medieval Europe either in books or museum displays. As I played with that idea however, it became hard to conceptualize how a book would really fit any reasonable design.
The "Old Book" Design
Presenting a book might be easy onscreen, but figuring out how to present content within that design was immediately daunting. Using a fully opened book, while gorgeous, instantly posed the problem of how to deal with the trough between the pages, called the gutter in printing terminology. Having a massive dark line running down the middle of the screen was not attractive or functional. I also considered attempting a "one page" design where the book would be open, but the gutter would occur on the extreme margin of the design, as if you were reading one page. However, the concept felt fundamentally lacking in unity, there is a missing page in the design and it's just off screen where you can never see it. This was not necessarily a major problem; I jotted this down as a possibility, but it was not one I especially liked. I kept looking for other avenues. In the various permutations I considered, one I liked better is pictured here. Here the gutter serves as the visual division between the content area and the internal page navigation. Something the gutter does provide is an extra area of white space to either side of the line. I frequently struggle to find white space in my design, especially for content rich pages. You'll notice I also thought of the idea of adding drop caps like an illuminated manuscript. Not a major idea, or anything brilliant, but one of those nice touches that help pull a design together. It also, by it's malproportions serves the typical purpose of all drop caps, helping the reader find the beginning of the text through emphasis.
1. Old Book design
A book design also presented another problem, While an open book has pretty reasonable length and width onscreen, I prefer the behavior of fluid layouts. In a fluid layout, this would look good, only if the amount of content kept the bottom of the page onscreen, i.e. extremely small pages would look fine, but on a page with more content you would start scrolling to read the rest of the page. When the page length seemed to portray a book 10x as tall as it was wide... it would start to seem like a very strangely proportioned book indeed. It's possible to work around this by making the words scroll on a fixed page, but that's a very unnatural behavior to see in a book. It's also counterintuitive and therefore bad from a user interface standpoint; not to mention I've never seen a fixed element that really behaved. If a user scrolls quickly, the browser seethes with turmoil, and the fixed elements bounce up and down in a herky-jerky motion. It corrects when you stop scrolling, but all these points were the design liabilities the “Old Book” faced and I was looking for alternatives.
The "Ancient Scroll" Design
2. Ancient Scroll design
This is when I realized that books, while certainly old are not the only formats for communicating information before the advent of the internet. In fact, books are a relatively recent invention in most cultures. The three earliest forms of writing material were the clay tablets of the ancient Sumerians, the papyrus scrolls of the ancient Egyptians, and the bamboo scrolls of the ancient Chinese. Clay tablets would be clunky looking and unattractive and bamboo scrolls are too busy looking. They form a series of stripes light bands of bamboo with writing and almost equally wide bands of space in between them. These gaps are created by the pieces of multi-colored string which tie the bamboo strips together and create a colorful grid-like effect that would be much too distracting for a web design. A papyrus scroll on the other hand immediately presented possibilities. At first, I envisioned the scroll looking fairly traditional, a vertical tube shape of rolled paper on the left, paired with another on the right. The text of the website would be written between these two cylinders. However, this left me with the same basic book "shape" and the same basic problems as before. A fixed layout would look good, but be jumpy when scrolled and the text would appear to move unnaturally on the page. A fluid layout would look out of proportion except for pages with an extremely small amount of content. It's interesting, it's different; but it's a new dance to the same old tune.
The "Medieval Scroll" Design
3. Medieval Scroll design
What solved the problem for me was research and considering the functions and real world equivalents of what I was building. While a web design is exciting because it has different limitations and can break old boundaries, a design is there to enhance not detract from content. A design that's too radical is a distraction; I wanted my electronic painting to feel organic and familiar. So, I naturally started thinking about how the scroll works. The primary action of a scroll is when you unroll it to read it's content. The Ancient Scroll design is problematic because it moves horizontally and horizontal scrolling doesn't work well on a computer. That was my problem. Onscreen, people can scroll vertically very easy, but horizontal scrolling is a !@#$^#@$. It was a short hop to useless wishing that the scroll could move vertically, but the Ancient scroll was turned the wrong direction. That led to the not so useless thought that “Who am I hurting if I did that? What if I flipped the whole design?” That's what broke the user interface open for me.
While not as old, the image of a Medieval or Disney / fantasy scroll has become a common and well known shape that's comfortably familiar to many people. This scroll is not wound around a pair of vertical spindles, but simply rolled horizontally into a curved tube shape. Ideally, it's tied with a piece of ribbon or string to keep it "closed" until the knot is untied and the scroll is unrolled with the horizontal tube shape of curled paper at top and bottom. This layout would conform to the shape and length of the content on the page naturally. A fluid layout would not seem unusual if extensive content made the scroll appear ten times as long as it's width; the design looks natural with any length you want. In fact, comedies frequently employ the the Christmas list (or list of complaints) which looks normal by width but when the end is unrolled, it hits the ground and rolls across the floor. The Medieval scroll also lends itself to textures that were more visually useful to me. I wanted to give the page a realistic aged look, but true papyrus has a very obtrusive texture; the grain consists of heavy fibers and intermediate tissue that turn different colors as it ages, exaggerating the already heavy grain. Medieval scrolls have an old fashioned feel, but more modern surfaces. Paper or parchment are less visually distracting while still distinctively aged and authentic.
You can see how I derived this. I started with the purpose of the site and considered how it functions. I used these ideas to work back and forth between site requirements and real world studies that could serve as a basis for the design. I used these mental models and the principles of usability and accessibility to narrow and guide me towards finding a more functional, more interesting, and more attractive design. It's a process of combining the fruits of research and experience with challenges and limitations; the liabilities of your models are just as, if not more informative, as their strengths in leading you in the right direction. For me, design is literally the act of putting a puzzle together, where the first step is having to hunt down and find all the pieces. Each piece reveals a little more of the picture and gives you clues as to where to find more pieces. Once they're all together, that's when you see how it works and you can start to put the pieces of the puzzle into place.