This paper focuses on the process of making the vignellis, a digital publication for the iPad and the technical challenges that came along with it. The end result was a functional ePublication that could be read on the iPad in iBooks. The publication explored the life and work of two famous designers, Lella and Massimo Vignelli of the Vignelli design firm. The goal of the project was to introduce us to a technology we had not yet learned much about and allowed us to gain some experience in sourcing material and gathering assets to make an entire publication from front to back.

It is very important for designers to realize the importance of the shift from print to digital and to accommodate this change as best as possible within their practice.
According to Ron Burnett, “there is no doubt that we have entered an unstable period of change as various traditional forms of media shift to accommodate the impact of the Internet and digital culture in general.” Since the introduction of tablets such as the iPad, there has been a shift in how users interact with content. Contemporaneously, the process of publishing material in the electronic realm has become increasingly easier.
The shift from print to digital has many benefits. Books, which previously took up physical space, can be stored in electronic form. By making print more of a valued commodity, designers can enhance the quality of books that pass from the digital to the physical realm. There is no denying that there is something beautiful about print—the textures, the smell, the ability to say “this is mine.” The electronic book, on the other hand, is not finite; it is forever changeable and belongs to no one. It is not a physical object one can hold on to. This group project focusing on digital books was assigned to us in a third-year typography class instructed by Celeste Martin titled Typographic Systems at Emily Carr University of Art + Design in Vancouver, BC. The project involved sourcing content, both text and imagery, to create an EPUB-type ebook from scratch. Since we were given the option of selecting our own material, we chose three articles about designers Lella and Massimo Vignelli. While their names may not be familiar, their work on American Airlines and the United Colors of Benetton is instantly recognizable.

The three articles and accompanying assets, taken from the Design Observer website, focus on the life and work of these two people, both as individuals and as a team. From start to finish, this project was a learning process; one of the main challenges was designing a piece about designers who themselves already have very strong opinions on what design should be. We wanted to make their visual voice apparent throughout the ebook despite the restrictions of the medium.

Defining the problem

Simplicity can be a beautiful thing; most times, less is more. An EPUB, however, demands simplicity. When our team first began designing the ebook, we were not clear on what we could and could not do. We quickly realized that in addition to being restricted to the 1024 x 768 pixel dimensions of the iPad screen, we were also limited by the margins of the “iBooks’,” which did not leave us with a big workspace. The level of interactivity an EPUB offers the user is also considerably low, especially when compared to the digital magazines one can produce using Adobe Publishing Suite, both in the technical and aesthetic realm.
The EPUB files seemed to take on a mind of their own; once exported from Adobe InDesign, they often had myriad problems that had to be manually fixed in programs such as Adobe Dreamweaver or Terminal. The most important lesson that we learned from this experience was that there is no real value in memorizing any workflow. The technology is constantly changing and is being improved to the point where users have to do less and less.
Craig Mod, a designer and writer, points out in “Post-Artifact Books and Publishing,” that “the rules for iPad content are still ambiguous. None of us have had enough time with the device to confidently define them.” Being new to the technology, our group did not yet know what we could and could not do. We frequently turned to the internet for tips on how to fix certain issues; when one person did not have the solution, someone else did.

Getting started

The first step in creating our publication involved sourcing the material and getting permission to use it. We contacted the Design Observer, and obtained written consent to use their articles for our specific purpose. Next, we were started creating a concept for our ebook. Our research included looking at the body of work the Vignelli design firm has created. We considered some of their more influential work, such as the designs for the New York City subway systems, and some print designs they have produced over the years that prominently feature the colour red.
The NYC subway maps, especially the older ones, are quite beautiful and simple. The various colourful lines overlapping and spreading over an egg-white surface was a visual that particularly appealed to our team.

Iterations

Our final design is the product of various initial iterations that were simplified as the project neared its end. We had the text and imagery that we needed from the Design Observer, but we had nothing that tied the everything together with one cohesive visual language. Our solution was to create a cover and openings for each section that included vector images inspired by Vignelli’s subway map.

Cover Iterations

The cover went through a process of simplification throughout the project.(image 1) We started by featuring a portrait of the Vignellis together, and while it was a beautiful image, it did not suit the publication. We next appropriated the cover of the NYC subway maps (seen here: http://www.flickr.com/photos/dsostatic/3947688462/in/photostream). We started with an overabundance of dots and simplified the design as we worked toward the final version. The cover we ultimately chose was the one with colourful dots on a light coloured background, as it most embodied what we think of as Vignelli’s bold design style.

03_vignelli3
figure 1. Cover iterations with the final cover embodying the Vignelli’s bold design style with colourful graphics and clean type.

 

Section Iterations

The openings for each article also underwent changes throughout the process. Our first iteration was heavily inspired by the colourful lines that are present in the NYC subway map. We started by including the title and author of the article as part of the image, but this soon proved to be problematic as the text could not be linked to from the contents page without using a cheat. The text also detracted from the beauty and simplicity of the colourful lines and weighed the image down with its bold black presence, so we removed the typographical element. We then noted that the article openings did not connect well with the simplicity of the cover. We liked the simplicity of the cover, and wanted to carry that over into this element of the publication. As such, we decided to match the illustrations at the beginning of each article to the cover by assigning a different coloured circle to each article (figure 2).

03_vignelli2
figure 2. Each article’s opening page is assigned a different coloured circle which corresponded with the eBook cover.

 

What the font?

When reading a book on iBooks, there is a short list of predefined fonts the user can choose from, such as Georgia, Baskerville and Verdana. They work, but using presets would not add any sense of originality to the publication. As such, we decided to choose our own fonts.
Massimo Vignelli is renowned for being very particular when it comes to typefaces. In one interview about the proliferation of fonts, he had this to say about how many good typefaces exist: “there’s no more than a dozen, actually I don’t use more than three or four in my life.” With this in mind, we chose two fonts he uses often: Helvetica and Bodoni. We soon realized that this was a poor choice; as anyone can unzip an EPUB file, only freeware fonts can be included. Additionally, high contrast fonts like Bodoni do not read as well on screen as in print.
As an alternative to our initial choices, we decided on two open-source fonts from Google Webfonts. We wanted to keep a degree of similarity to Helvetica and Bodoni, so we chose a sans-serif typeface named Questrial for the titles and headers and a serif typeface named Sorts Mill Goudy for the body text. To further establish a connection to Massimo Vignelli’s design, we used two of his favourite colours: red and black. Red was used for all the titles and headers, while black was used for the body copy.

03_vignelli1

Findings

Working on a piece that was about such influential designers was a challenge as we had to make sure to stay true to their voice, while maintaining our own. We also had to work as a team and play off each others’ strengths to achieve the final product. Mod states, “Of the books we do print — the books we make — they need rigor. They need to be books where the object is embraced as a canvas by designer, publisher and writer. This is the only way these books as physical objects will carry any meaning moving forward” (emphasis in original). The same might be said for ebooks.

References

  • Big Think. “We Use Too Many Fonts.” Interview with Massimo Vignelli. Big Think. 15 April 2010. Web. 4 Dec. 2011. <http://bigthink.com/ideas/19591>
  • Burnett, Ron. “Digital Culture Notes: Part Two.” Blog entry. Critical Approaches to Culture + Media. Emily Carr University of Art + Design, 6 June 2010. Web. 4 Dec. 2011. <http://rburnett.ecuad.ca/archive/2010/6/6/digital-culture-notes-part-two.html>.
  • Mod, Craig. “Books in the Age of the iPad.” Blog entry. Journal. Craigmod.com, 4 March 2010. Web. 4 Dec. 2011. <http://craigmod.com/journal/ipad_and_books/>
    —.“Post-Artifact Books and Publishing.” Blog entry. Journal. Craigmod.com, 14 June 2011. Web. 4 Dec. 2011. <http://craigmod.com/journal/ post_artifact/>

 

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>