| |
 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.) | |
