Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Book People

This is the documentation for the course “Visualizing Cultural Collections” with Professor Marian Dörk in winter semester 17/18.

The purpose of the course was to create and evaluate visualisations that open novel perspectives on cultural collections. During the lectures we learned different kinds visualisations, including design processes as well as basics of the data visualisation.

1. Introduction

Our group chose „The Bookseller Portraits“- project funded by the German Research Foundation (DFG) included the development and digitisation of a hitherto unknown collection. It originates from the library of the Börsenverein der Deutschen Buchhändler Leipzig and is now preserved in the German Book and Writing Museum. The goal of the project was the development and digitisation of more than 3,400 prints of booksellers, publishers and printers, dating from the 16th to the 20th century.

We think cultural collections have a lot of potential, that unfortunately often is underused in a digital environment. Interactive visualisations provide a possibility to observe the collection from whole new perspectives, make it more interesting for broader audiences to explore, and specific information more accessible to find. Our previous experience in web design, data visualisation and cultural projects enable us to work together in a compact team to create an informative and engaging visualisation. We find this collection especially interesting, because of the possibility to enlighten the stories of historical characters by utilising the temporal and spatial aspects of the data.

After a long term of discussions during the course, looking closer at the collection, we started to concentrate on our main research question „How did portraits of book people change over time?“ and how we can visualise all this big data.

2. Related work

The whole interface was created to make this collection more explorable online. As pointed out in the introduction to the course, there should be an overview of all the images, a detailed view for more information and something to create curiosity to explore the collection more. Therefore we started working with the current platforms for these images, which were an art and architechture archive Bildindex and the German National Library’s online database.

On the DNB’s database you couldn’t even see an overview of the images, just the information on a list and a detailed view of the image and more data by clicking it. A good feature was the possibility to organize them chronologically, but it wasn’t very helpful when the overview was missing. On the Bildindex instead, you could get an overview of 50 images on one page, and similarly go to the detailed view by clicking the image. What we found problematic with it, is that they are in a random order and can’t be filtered or organized in any way.. That’s why we first created our own chronological visualisation of the prints to make it easier to work with them.

The time lapse in our interface got inspiration from a similar one used in the Selfiecity project. On their site the faces are tilted so the angle of the images varies more. We wanted to make it more stylish by only using images with the same position of head and rotating them to be facing the same direction. We also found an inspiring short film ’One Minute Art History’ by Cao Shu that showed how techniques of creating art have changed throughout the time. This was also the goal of our time lapse, only just within a more specific art form of printed images.

For the timeline we researched functioning visualizations, and found for example Florian Kräutlig’s work interesting. Also Selfiecity’s timeline of stacked images is very visually pleasing, even though you can’t see the thumbnails as well as in Kräutlig’s examples. We prefered to slightly see the image in the thumbnail, because we wanted the user to be able to perceive the change in the colour of the images, in a similar way to the New York Public Library’s overview timeline presentation of documents.

3. Concept

We found this collection the most interesting, because it was approachable from many different points of views. Firstly, the book people collection includes information of the people portrayed in the prints, such as their birth and death dates, profession, working and living places, published works, and possibly relations between other book people. Secondly, the collection includes information of the visual aspects of the print, such as the date, place, technique, size and material. Thirdly, there’s a lot of visual information that can’t be found on the data, like how the people look like, how they are portrayed and which symbols or typography is used in the pictures.

First ideas

In the beginning we had no access to the actual data, only just the listing online where we could see the portraits and find information on individual pictures. Therefore we didn’t know anything about the overview of the data. So we started working on the project with a focus on the people portrayed in the prints. Our first idea was a map and a timeline, where could be seen where and when the portraits had been made and the life of the individual book people could be followed through the portraits. We imagined a medieval map that could be used as a tool for learning the history of book printing and the people involved. When going through the pictures we soon noticed that most of them were located in Leipzig or at least Germany, so we abandoned the idea of a map.

Next we tried to think of ways to get more people interested in the collection by adding some participatory elements to make the exploration of the collection more fun. We had an idea of approaching the old portraits from a modern and entertaining point of view. We impelemented themes from social media imagery, resulting in book people memes, where text from a current context is added to the old picture based on its visuals. Our other idea for participation was finding doppelgängers, so people from present who look similar to the people from the past. Later we found out that Google had a similar idea with their Arts & Culture app, where they use facial recognition to identify which painting from art history the users look like.

Our third participatory idea was to apply these portraits of book publishers to the functional idea of a dating application Tinder, where you categorize people based very superficially just on their looks. In this case people would go through the collection of portraits and deciding whether they find them attractive or not. Eventually we would’ve collected the data to make a chart that shows the top 10 most good-looking book publishers. In the end we decided these ideas were fun to play with but we didn’t want to put all of our focus on the participation of the audience.

Workshop

In the end of December we hosted a workshop in Leipzig at the National Library of Germany to gain some more ideas for working with the collection. First we got some more information to get a deeper insight into the collection. We learned that it is combined from four private collections, so it’s not a totally comprehensive selection of book people portraits. Also it was emphasized that some of the people had a more significant role for the development of publishing and book distribution. We also got to see some original prints, which made the visual aspects of the portraits seem just as interesting as the people in them.

During the workshop the participants from the library staff were asked to think of new ways of connecting the pictures together. Since only one of them had known the collection before, most of the ideas raised from the workshop based on the visual aspects or the imagined relationships of the people portrayed. It was still interesting to see that the workshop raised very similar questions to the ones we had been thinking of during our brainstorming. One of the participants even suggested embedding the pictures into a social media platform in a way alike to our participatory ideas. The visit also underlined some prospects we hadn’t considered before.

Final idea

Finally in January we received the data and the digitalized images of the prints. Based on the data we got an overview of what information is available and how comprehensive it is. We found out that not all images included all information, especially the information on the people portrayed in the prints was impartial. Also the high resolution portraits we received were so amazingly beautiful, that we decided to shift our focus from the people to the visuals. Especially the details were so astonishing, that the technique started to interest us more.

We still found the temporal aspect of the images very important, since they are located on a time scale of 400 years, from the 16th century to the 20th century. Therefore we wanted to keep a timeline in our visualisation, but instead of the location of the prints we added small thumbnails of the pictures to represent the amout of the prints made during different time periods. This visualisation still didn’t produce as much new information, or ’hidden data’, as we would have wanted to, so we tried adding different attributes to it. Professions, countries or the ages of the portrayed people were interesting to observe, but they weren’t related to our focus on visuals. Technique instead was related to it and had developed through time, so we decided to add it as a toggle option to the timeline.

We developed a research question ”How did portraits of book people change over time?”, because this was a question that arouse while we scrolled through the images chronologically. We could immediately see some trends during different time periods in fashion, frames and typography for example. Hence we decided to create curated collections of the change of these visual attributes throughout time. We also thought of how to visualize time simply in one image, and got an idea of a time lapse where one could rapidly see the change of these finely detailed images. Finally we constructed an interface which starts with the time lapse, continues with an overview of the collection and follows with the curated collections of typography, fashion, hair, frames, symbols and techniques.

IMG_20171221_141358.jpgIMG_20171221_141358.jpg
IMG_1104.jpgIMG_1104.jpg
WhatsApp Image 2018-02-21 at 15.14.40.jpegWhatsApp Image 2018-02-21 at 15.14.40.jpeg
WhatsApp Image 2018-02-21 at 15.14.38 (1).jpegWhatsApp Image 2018-02-21 at 15.14.38 (1).jpeg
WhatsApp Image 2018-02-21 at 15.14.38.jpegWhatsApp Image 2018-02-21 at 15.14.38.jpeg

First visualisations

To get first insights into the data, we created a color encoded timeline with a qualitative color scheme, where each color represents a different category (The lifespan timeline is an exception - here we used a sequential color scheme to make the data easier to read).

The years are combined into decades - not only does this save up valueable screen space, it also compensates a bit for inacurracies inside the data (like “around 1900”).

These visualisations gave us great impressions into the data and we learned more about the temporal development of the portraits. The most magnificant change over time is observeable with the crafting techniques, that is why we decided to continue to work with this particular view.

final_origin.pngfinal_origin.png
final_profession.pngfinal_profession.png
final_lifespan.pngfinal_lifespan.png
final_technique.pngfinal_technique.png

4. Design

The visual design of our prototype wants to achieve a historical look by using old-fashioned newspaper typography and a sepia paper background.

It is divided into several sections, which explore the collection from different perspectives and levels of depth. These sections can be navigated via a quick navigation on the left-hand side or by using the mousewheel (or other scrolling input).

The working prototype can be visited here: http://timohausmann.de/fhp/dnb/modx

The Introduction

1_intro.jpg1_intro.jpg

The first section of the webpage acts as an introduction and features a short video that gives visitors a quick and general impression of the collection. It shows several portrait images in chronological order across the centuries and thus already resamples the change over time in a way that is easy to understand. The portraits are close-ups of the depicted persons, so the high level of detail and the change in image quality is apparent. The images are equally resized and aligned by the face, so it is especially intriguing for visitors to watch the video. A soft fade between single images eases watching it even more.

The Timeline

2_timeline.jpg2_timeline.jpg
3_timeline.jpg3_timeline.jpg

In the next section we give visitors an overview of the whole collection in the form of a timeline. Since it is a large amount of portraits, each portrait is only shown in very small size.

Conceptionally, this timeline is panable and zoomable to a certain degree, so visitors would be able to explore it further. Also, clicking each image would reveal a detail layer (described further below).

The timeline view can be toggled with a switch to another view that splits up all images into their crafting techniques. In comparison to the other meta data that we found, there is an obvious change in techniques over time, so we decided to educate our visitors about this aspect. The splitted rows help to really compare the shown quantities and make it clear when which technique was used.

The Sub-Collections

4_subcollection.jpg4_subcollection.jpg

The following sections show the „Sub-Collections“: here we focused on different visual key aspects of the portraits. Each Sub-Collection features 28 hand picked portraits, that are shown as thumbnails in chronological order as an overview. Each Sub-Collection is accompanied by a short text, explaining the visible change over time. By hovering over the thumbnail, a larger version and the date of that picture is revealed. With a click the detailed fullscreen view will open.

The Detail View

5_detail.jpg5_detail.jpg

In the fullscreen view, visitors can explore the full detail of single portraits. The individual image opens at 100% zoom scale, so the full quality and detail is apparent at first glance. The common interactions of zooming and panning are available to the visitor, much like navigating Google Maps. Since we only show a cutaway in the initial state of this view, a „minimap“ is displayed in the lower right corner, that shows the full picture and indicates the current cutaway. Here too, panning is possible by clicking or dragging. Despite a lot of heterogenous meta data is available for each portrait, we decided to only display crucial information: The name of the person depicted, their lifetime, their occupation and the craft technique. If the current portrait is part of a Sub-Collection, it is also possible to navigate back and forth between images within that Sub-Collection.

The Footer

6_footer.jpg6_footer.jpg

Finally, the last section gives short information about the data, the project and the people behind it. Furthermore it gives visitors the opportunity to share the web page in social networks.

5. Evaluation

So the result of our research question “How did portraits of book people change over time?” that gives the visitor of our website an overview of the whole collection and the crafting techniques timeline. As we looked deeply into our collection and showed “Sub-Collections”, we reviewed each of them. Let's see a couple examples of our findings.

Speaking about the techniques: „Etching was used since the 15th century, but often produced simple images with unprecise lines. Copper Engraving was a highly popular technique for most of the time, not only because it gave the artist a lot of possibilites. The later, closely related Steel Graving allowed for significant higher amount of copies. Wood Carving is closely related to book printing and therefore has a special relation to this collection. Finally, in the 19th century modern techniques like Autotype, Lithography and Photography emerged.“

Changes of the haircut overtime: „Throughout the 17th century, men wore their hair mostly long with curls well past the shoulders. Although men had worn wigs for years to cover up thinning hair or baldness, the popularity of the wig as standard wardrobe is usually credited to King Louis XIV of France. In the end of the 18th century we can see the influence of USA. Wigs were generally short, but long wigs continued to be popular with the older generation. Wigs were made with a lot of white powder. In the 19th century hair was generally worn short, brushed back from the forehead.“

Another interesting thema is Typography: „The Gothic Type (German: “Fraktur„) was the most popular font for over 400 years of book publishing. In this collection, it can be seen across all centuries. In the early years, Majuscule Type is commonly found, often written in latin. Since ca. 1780 the use of swung, decorative type and lines is noticeable. In the middle of the 19th century there is a trend towards hand written signatures. While Antiqua Fonts with serifs are timelessly found in every century, there are almost no examples of sans-serif types in this collection (although popular sans-serif fonts existed since the 19th century).“ All this we got looking at the collection more closely, making a research with the help of wikipedia.

6. Discussion

On our final presentation we got a little bit of feedback from the audience. First comment was that we also agree with, is that the text on the main page is not good readable because of the video that is probably changing the faces to quick. The second comment concerned the background of the site, which is a contentious issue, some like it and some do not. The next point is the “Sub-Collections”, where we probably need to make out outs of example pictures, for haircuts - cut outs of hair ect. What needs to be done is of course the zoom effect in the timeline and detailed fullscreen view of the pictures in the “Sub-Collections”. We would also like to link to the official website of the collection when the user clicks on a picture, but unfortunately it is quite difficult because of a lack in database.

7.Conclusion

Our project was an interesting process of co-operation in an international and interdisciplinary team. We learned a lot about information visualization, concept development, creating interfaces for different target groups and working with collections and big data. It was fascinating to work with people from different departments and use all team members’ strengths to create the final visualization and conclude with research results. We are happy with the progress of working with this collection and the result of the project.

Our findings of how the book people portraits changed during 400 years are not only a conclusion of the research of this collection, but is also connected to history in general. Therefore our visualization is a useful tool for both the broader audience as well as experts who want to explore the collection and learn about history. Our realizations on the most interesting factors of the collection could help the partner with presenting the collection also in another context such as an exhibition. We hope the partner found our research results interesting and useful for their future work.

References:

German National Library’s database https://portal.dnb.de/opac.htm?method=simpleSearch&reset=true&cqlMode=true&query=partOfAuthority%3D1049796586&selectedCategory=any

Bildindex, a collection by The German Museum of Books and Writing https://www.bildindex.de/

Selfiecity http://selfiecity.net/

One Minute Art History, short film, Cao Shu, 2015 https://www.youtube.com/watch?v=4nUBPAJcH-E

Timeline tools, Florian Kräutli, 2016 http://www.kraeutli.com/index.php/2016/04/08/timeline-tools/

New York Public Library’s digital collection http://publicdomain.nypl.org/pd-visualization/

History of fashion design, Wikipedia https://en.wikipedia.org/wiki/History_of_fashion_design

All links as of 22.02.2018.

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im zweiten Studienabschnitt

Betreuung

foto: Prof. Dr. Marian Dörk

Entstehungszeitraum

Wintersemester 2017 / 2018

zusätzliches Material

Links