1. Introduction
2. Site organization
   1. Contents
   2. Structure and hierarchy
3. The interface
   1. The book interface
   2. The forms
   3. The graphics
   4. Links
   5. Map

Generally web sites are structured in order to give information like "all about.."; on the contrary, we aimed to create a site able to give an overview about many different objects linked together only by a leit-motiv, in this case black and white.

Why did we choose a subject like black and white?

Well, first of all because we like it. Then, because simple black and white color schemes jump out from a more complicated colorful world as a refined, romantic world apart.

Besides the homepage, there are five main sections in Blanc et Noir, plus three "meta-sections", in which we give (or ask, as in the case of feedback) information about the site.

The five plus three sections are:

1. A MATTER OF COLOR - Although race biologically doesn't exist, people have discriminated through the times human beings according to the color of their skin. In this section, as the title suggests, we discuss about racism and its origins;
2. ZOOLAND - There are many black and white animals like orcas, turtle doves, and so on, but the more famous are with no doubt pandas, zebras and penguins. We also talked about dalmatians and siameses cats;
3. GAME CORNER - Chess, checkers and crosswords are thought to be (as they are, actually) a game for smart people: we told their history observing their still-rising fame; another game, another subject: Juventus F.C., an Italian soccer team from Turin is also the protagonist of this section;
4. VISUAL LAB - Information about the birth and the growth of cinema, television, photography, printing and comics (especially in Italy);
5. POTPOURRI - This section is a melting-pot of something that concerns black and white but didn't find its space in the other sections since it isn't semantically related to them; in particular, we made a page for piano, Pierrot, taoism, M.C. Escher and black and white cake recipes;
6. INFO - A small section regarding the site and its authors;
7. MAP - A graphical overview of the site to help users not to get lost;
8. FEEDBACK - A complete questionary to fill-up to give us suggestions to improve the site.

From the homepage, which is at level 1, we can arrive to each section's table of contents, which is at level 2. Then, from a particular table of contents, for example that of Zooland, it is possible to reach all the related sub-sections, which are Pandas, Penguins, Siameses, Dalmatians, Zebras and Related links. All these pages are at level 3.

From every page at level 2 (sections) and 3 (sub-sections) it is possible to reach the homepage, and the other sections at level 2. Instead, from a particular page at level 3 (which is the deeper) it is possible to reach all the other sub-sections in the same section.

Let's do an example.

At level 1, the homepage, we choose Zooland.
From level 2, Zooland, we can return home, go to the other sections at level 2 (Visual Lab, A Matter of Color, Game Corner, Potpourri, Info, Map and Feedback) or choose one of the six Zooland subsections (level 3).
Suppose we choose Pandas.
At level 3, Pandas, we can return home, go to all the sections at level 2 (including Zooland - which can be chosen clicking on the "Table of Contents" image) or choose one of the other five Zooland subsections.

Although the information stated in level 2 pages is redundant - we propose a mere index with a small hyperlinked description of the subsections - we decided not to link directly level 1 to a particular page at level 3, because, since all the subsections are at the same level, proposing one of them instead of another as the first page seen when entering a particular section would have made it a "more important page".

If, for example, clicking on Zooland from the homepage we'd get Pandas instead of Zooland Table of Contents, according to us, it would be more irrating for the user searching for, i.e., Penguins: the number of clicks, in fact, is the same (Homepage > Pandas > Penguins, Homepage > Table of Contents > Penguins), but in the second case the user can choose which page to visualize first. The only advantage of the first solution would be if the users were searching for Pandas, as in that case they would do only one click (Homepage > Pandas).

We said that level 3 is the deeper. However, this is not really true. In some cases, in fact (depending on the subject) there can be also level 4. In the case of Piano, for instance, there are other two sub-sub-sections: Chopin and Liszt. These two pages can be reached by the Potpourri's Table of Contents (which, as all the other tables of contents, is an index of all the information - apart from pictures and sounds - available under a certain section), and by following links in the Piano page. When visualizing one of these two pages, thus, for example, that of Liszt, it is possible to return to the hierarchically previous page (Piano), by clicking the Piano button up in the page, or by following the links spread in the document. Shortly, there is no button for Chopin or Liszt (only textual links are available) as doing this would have implied creating another button level; this however would have made the pages too complex.

Since the multidisciplinarity of this site, we thought that making it looking as a book, or better, like a small encyclopedia, would be suitable.
There are actually two backgrounds, one for the real pages (showing the right page) and another for meta-sections, such as this one, in which a left page is shown.

For this reason, we also used very common fonts for icons and texts, which can be frequently retrieved in press, such as Arial for section titles, Courier new for icons (both the small ones in the top of every document and the bigger ones used in table of contents) and Times New Roman, which is the default for Netscape, for the body.
Particularly, due to table alignments, the small icons look like as they were typed with a not-well-operating typewriter. This reminds, once again, the press.

Forms are used in three occasions: in the Feedback page, at the bottom of every page (except for the homepage and feedback page) and as search fields at the end of Related Links sections.

For the last two cases, as there is only one field, we chose the implicit undo instead of the explicit one (used in the Feedback page) as this implies, at least for those who use the mouse, the same number of actions as clicking on a reset button: Select All the Text vs. Click.
On the contrary, in the Feedback page a reset button is almost compulsory, as there are many fields.

The idea of the users' contest came to us to give an incentive to read: the contest question, in fact, will derive always from level 4 pages.

Moreover, we give users the possibility to register each page (except, once again, for the feedback and the homepage, since this one, due to the counter, is constantly updated) in order to receive an e-mail when that page will be updated. This is a free service brought by Netmind , and it is used, for instance, also at W3C - The World Wide Web Consortium .

It's not possible to create a perfect web page for all the resolutions and number of displayable colors available, as there would be however at least one user who sees the text too large or too small and not well aligned.
For this reason, we chose the most common resolution, 640x480. The background width, however, is around 800: users having a better resolution (up to 800 pixels in width) will see a larger red (or white, depending on what background is shown) stripe. From 801th pixel on, however, the background will be repeated.

Alignment is made possible by tables; text appears aligned in the middle of the page which emerges from the background.

We tried to keep image sizes low. Icons and titles are always 16-colors images; however, photos are almost all at a higher resolution, 16-millions colors, as reducing their color depth would have meant a too high quality loss. 16-millions colors images, moreover, take advantage of the JPEG compression.

Although sometimes there are many links in a single page pointing to a same resource (page), whereas in other cases the number is minor, this can be due to the fact that those pages were created by two different minds, the two of us.

We tried to avoid links such as click here to see.., making them, instead, part of the context. That kind of links, in fact, in our opinion are not semantically related with the contents at which they point.
In example, click here to read the journal (with click here being the link) concentrates the attention on the action (which can be easily implied) instead of on the subject of the link itself.

As for Related Links sections, the list of remote links provided in those pages comes from a selection of the first 50 queries of Altavista and Infoseek . The names provided are the same of that of the search engines queries; we eliminated commercial links and for the rest we verified only their existence, without focusing on the real quality of the information.
As for the keywords from which these lists derive, we tried to use common inclusive keywords for different, but related, subjects: for instance, as in the case of Visual Lab's Related Links, we searched for history of mass media and for comics: the first keyword can be seen as a container of television, photography, printing and cinema, but not so easily of comics, and that's why we made a separated search for this topic, as we did for some other cases.

The site map we created represents a helpful tool for users not to get lost.

The clickable map is structured in a way that the Homepage results peripheric, as it is only an index to each section's table of contents. Also for this reason the color of the Homepage writing is not so shiny.

The most important objects the users to focus on are sections and subsections: that's why they occupy the central part of the map image and have shiner colors.

While creating the map, we considered just level 3- and 4-titles avoiding to add the paragraphs' titles (subsections of the SAME page) for everyone of those pages, as this would have made the map too complex and not easy to read.