Designing a Designer's Site. Navigation and implementation

ll subpages on kirsanov.com closely follow the front page's layout and design themes.  For example, a page with textual content is divided into two columns of uneven width.  The left one is occupied by the visual at the top (it uses the photo of the clock because the page belongs to the "interested?/we offer" section symbolized by the clock on the front page).  The wide right column contains the page's heading and body text; note that the text is adjacent to the heading and the heading partly overlaps with the visual exactly as they do in the front page's mission statement.  A similar layout, with the visual replaced by a thumbnail, is preserved on all portfolio pages.

The site's navigation machinery is worth a separate discussion.  The twelve links on the front page's navigation panel are organized into four topical sections.  (They are groups rather than branches of a tree, because there are no "root" pages in any of the sections.)  However, not all of these sections are of equal importance.  In fact, only the "portfolio" and "interested?" topics have direct relation to the studio business, while the other two groups link together some supplemental materials (mostly located outside the kirsanov.com domain) on design education and other activities of the site's author.

Thus, I decided to keep on all subpages only the first two topic sections placed in the same relative position at the page bottom.  Additionally, only one of the groups, the one to which the current page belongs, is "expanded" on each page, and the other is represented only by its heading label linked to the first page of the group.  This introduces a strong asymmetry and clearly exhibits the diagonal "power line" stretched from the bunch of textual material on the right of the body text area to the left side of the bottom navigation panel.

The space freed on the right of the bottom panel is not wasted.  At the very least, it can be used for tricing up the bottom logo image and copyright block, as on this page.  On the portfolio pages, the same space is occupied by a linear navigation mechanism for traveling back and forth in the chains of numbered portfolio pages.  A minimum set of navigation in such cases is a pair of links leading to the next and previous pages in the chain; however, much more convenient is providing a row of buttons that would allow jumping from any page in the chain to any other.

Indeed, linear navigation is less common on Web sites than the conventional dendroid (hierarchical) system, and it may not be immediately obvious to some people.  Additionally, in my case the linear navigation system is by necessity an "intruder" encroaching on the estate of the main navigation system that the visitor may already get used to after examining the front page.  Thus, to make the transition from "stepping down the tree" to "leafing through consecutive pages" as seamless as possible, I used various means of accentuating the linear navigation panel (refer to this page for an example):

• For linear navigation elements, I used the bright contrasting logo colors instead of the customary light olive used in the main navigation.

• I moved the logo and copyright block to the left to align it with the shortened main panel, thereby visually stressing the fact that linear navigation is a separate independent element on the page.

• I employed both bright arrow-like buttons and textual "next"/"prev" links to make the system friendly towards users with different levels of "navigation fluency."

• For text-only access, all numbered buttons are provided with alt texts indicating the name of the project shown on the page linked by this button.  Although it's not likely that text-only access devices will be used to view a designer's site, it is always a good practice to remember about accessibility, and there's also a visual bonus to these alt texts: in 4+ version browsers, they appear as "floating tips" on mouseover.

• Last but not least, on the first page of each portfolio section, I explain how you can view the project pages or move on to other sections.  For me, a slightest chance of perplexing the user is much worse than the risk of seeming too verbose!

Finally, a few technical details.  As many other software issues, the issue of selecting the best Web design tool is an apt subject for another "holy war," so I think I'd better refrain from any strong opinions on this topic.  However, there's one strong opinion that I have already put forward and would like to reiterate here: "Photoshop" (or any other bitmap editor) is not a synonym for "graphics," let alone "design."  I don't remember whether I used Photoshop at all in the kirsanov.com project, but chances are I didn't.

Even as a utility for making minute adjustments to GIFs and JPEGs, Photoshop is being rendered more and more redundant by the modern specialized Web graphics software.  As for the primary creativity tool, no bitmap editor is able to serve this function because of the inherent limitations of bitmap approach.  What you need is of course a vector editor offering an essentially higher level of abstraction for graphical data.  Vector's creative freedom is much more important for quality design than the snazziness of drop shadows and other distortions achievable in a bitmap. 

My personal choice in the world of vector graphics is Corel Xara, and if you have either Xara 2.0 or the free Xara viewer plugin installed, you can examine kirsanov.com's Xara file (size 650 Kb) containing the entire design template of the site. (Note: Pages other than the front page are contained in separate layers and are therefore viewable only in Xara itself, not in the plugin.)