Rapid prototyping and durability assessment

The A4 dimensions of the publication allow for rapid and cheap prototyping. This prototype was bound with bulldog clips in order to allow for proofreading and layout improvements. Errors with the text and some inconsistent image spacing were corrected.  

The prototype was then perfect bound (sans cover) in order to assess the correct quantity of glue to apply. Generally 3 layers are recommended, so I conducted a durability dest after applying 3 layers by choosing random pages and suspending the book by them. The pages remained in tact, but cracking sounds were heard as if they were trying to break loose. In subsequent tests, 4 layers of glue were applied and the cracking sound could not be repeated. By testing out the amount of glue needed for ample durability, a weak final publication has been avoided. 

Updated front cover

In multiple feedback sessions it was noted that the book's front cover, though relevant and somewhat appropriate, was not very visually simulating. In order for the book to appeal to a larger audience the cover must be visually appealing, and so the final version was updated to improve this. The illustration on the front reflects various different screen sizes and aspect ratios, from 16:10 to 4:3. The title typeface is Maison Neue Medium, reflective of the body text inside. This creates harmony from cover to cover, and also allows for high legibility to be maintained, which is important for a title. The description is set in Maison Neue Mono, the same as the title typeface within the book. This typeface in particular provides a visual link to the digital through its association with retro tech and command prompts. The blue does this too through its connotations with the very first operating system background colours. 

Usability and formatting improvements

A number of formatting changes were appropriated after discussions with Nick in order to improve the experience of using Typography in Interface Design. The images were moved from the left of the grid to the right in order to give more breathing space, avoid any gutter infringement and give a sense of progression as the eye moves from the left to the right of the page, and then the page is turned. 

Generally it's bad practice to have text in the gutter; it loses content and throws off the reader. Though in some cases it's acceptable, in this case it was disruptive, and so the layout was updated to avoid this. 

Close analysis of The Vignelli Canon

A major source of inspiration so far in this project has been The Vignelli Canon. It'd be effective to reflect the inherent simplicity but tactile beauty of this book in Typography in Interface Design.

The book's design is simple but elegant, with a block red cover and bold Helvetica text. It's uncluttered and impactful without being over the top; the bright red cover allows the book to draw the eye's attention and to be easily identified on a bookshelf, and the mirrored white text allows for identification if the book is stored or upside down. It also epitomises the design style of Vignelli - an eternal modernist who utilised clean cut, simple letterforms. 

The cover has a satin-esque, smooth feel (almost like very thin rubber), which makes the publication seem high quality and pleasant to touch. It doesn't have many pages and they don't need to be laid flat, so perfect binding works ideally here. It makes the book easy to flick through and use comfortably (this is also helped by the relatively compact size, which simultaneously aids cost, use, transport and storage), as well as giving it a nice, sharp-edged block appearance when closed. Recreating this look and feel with my own publication would seem appropriate in order to create the same ease of use and visual appeal. Though I have been tempted by the compact form of The Vignelli Canon, a larger format is more appropriate for my book due to its analytical and image-based nature. 

The inside pages of the book are printed on glossy paper to allow the type and images to appear shiny and evoke a higher feeling of 'quality'. Though my general preference is for matte stock, glossy paper usually creates a higher quality feeling, and is almost essential for the reproduction of printed images. Though smell might not often be considered in book design, it is of high importance. A book with a nice smell encourages the reader to pick it up and engage with it more often, and it can also create a historical and emotional connection with the book. It can also make the book feel more considered and 'designed'.

Because of the relatively large amount of text within the book, a serif is employed. In this case it's Bodoni, which is quite rare in publication design. To offset the negatives of the typeface in small scales (i.e. the very thin tails), it has been set in a larger point size. The titles are set in a bold sans serif typeface of the same point size to identify themselves as different and important, but not so much to intrude. It'd make sense to use a similar technique in this book, particularly considering that a lot of digital interfaces do too. 

Critique feedback

There was concerns about my publication having inconsistencies in the scale of the double page spreads when moving from spread to spread:

In the example above the spread design goes from small-scale text and images to a full, very large image covering the whole spread. I was concerned that this transition was too extreme and would affect how the spreads flow, but I asked in a crit and it was fed back that this didn't matter much and they didn't think the same was true. They suggested I could build the spreads up and down in scale in order to avoid or mitigate this, however. 

It was fed back that my front cover was simple and modernist in a positive way, but that it may appear too dull and exclusive in its target audience. It may limit its appeal to those interested in UI design and technology, instead of making it more accessible and appealing to all. It was recommended that I explore utilising an image on my cover, such as the iPad keyboard seen on the double page spread from inside the book. I will definitely try using that image as a cover to see how effectively it works, but it's worth remembering that this book is targeted at UI designers, designers in general and tech enthusiasts, and so the design doesn't have to be overly accessible for all kinds of people. 

What's important is that the cover makes the book feel approachable but appropriate; modern, simple and fresh. With a digital influence. 

The idea of using bright white paper was reinforced in the crit in order to invoke the feeling of looking at a back-lit display. G.F. Smith's phoeniXmotion stock might be suitable for this; further tests will be performed when my samples are delivered. 

The cover

The front cover is designed to do the exact opposite of what all the current interface design books in existence do. Whereas they are visually complex, odd and dated, this design is meant to be simple and fresh, but appealing and modern. Clearly linked to the digital. To convince the audience that you can reliably document and comment on interface and interaction design, it helps to get the book as an interface correct, and that's not something a lot of the current publications achieve. 

The layout of the type and the grid system employed is reminiscent of those seen in Grid Systems in Graphic Design by Josef Muller Brockmann, a key source of inspiration for this project. Even decades on, modernist design books are still amongst the most respected and popular ones going. This proves their own theory of good design being timeless, and I'm not one to argue. 

The five-dot symbol is a subtle reference to the signal strength indicator on iOS. I explored the use of the hamburger menu symbol but decided to drop it because of the backlash it's receiving under current interface design guidelines; it's now known to considerably reduce user interaction, and should only be used to store low-priority actions to make room for common ones. The signal bar on iOS however is unique but universal, and familiar but not immediately recognisable (particularly at vertical angles). Incorporating a symbol into an otherwise fully-text based cover gives visual appeal, balance and helps to draw attention.

By placing the symbol again on the back cover it allows the book to be identified on a shelf when the cover isn't viewable, or simply when the book is placed face down. A similar technique was utilised by The Vignelli Canon, where the publisher name was placed in the same place as the book's name on the front cover but on the back cover, giving phenomenal visual balance and allowing it to be identified from all sides. 

Initially it was decided that white would serve as the cover colour, but in feedback sessions it was made clear how many books had been easily ruined and dirtied through their white cover. Jan Tschichold is also strongly against the use of white covers on books, as are many book publishers. This wouldn't be appropriate for my book, it must be suitable for use by many people as many times as needed. 

The cover colour was changed to black, which offers the same simplicity as white but with added practical benefits. Further experiments will be conducted with other colour choices in order to find the one most appropriate.  

How I could make a physical book feel more like a digital interface

Quite early on the idea of making a physical publication feel more like a digital interface was floated. This would help to avoid any paradoxical notions of using one media to document the other (a point raised in numerous unique critiques). After doing some research and looking into ways to migrate some digital elements to the physical, it became glaringly obvious why this solution is never adopted - the media are different because they are different, and they both work differently in order to work well. There is no point in trying to make the experience of using a book like using a computer, or vice versa. They have been selectively designed to create the best experience in their own right. 

Instead of trying to merge the media it makes more sense to instil a feel of the digital through clean, legible typography, and a lot of white space. It's also worth looking into the use of bright white stock to replicate the experience of using a backlit display. 

Type system for my publication

TYPEFACE

A group of people were presented with a number of typefaces and the design concepts from earlier: Helvetica Neue, Maison Neue Mono, San Francisco and Roboto, and asked which they would most associate with design for interfaces and which would be most appropriate for the book. The group concluded that Helvetica was too similar to a lot of the design books already out there and that it needed to differentiate, and that the unsuitability of Helvetica for digital interfaces would seem ironic. San Francisco would introduce an Apple-centric approach from the beginning, and Roboto would do the same for Google, even if both the typefaces would perform well. Maison Neue and Maison Neue Mono were decided upon as the final typefaces to go with for their unique but contemporary appearance, and Mono's visual link to early interfaces and sci-fi interfaces. 

Maison Neue Mono will be used for titles and headers to instil the technological look and feel of the publication. Maison Neue Medium will be used for the actual content to improve legibility and readability. Initially Maison Neue Book was used, but proved too thin and wiry in printed legibility tests. 

Generally type in books ranges from 8pt to 12pt depending on the nature of the book and the quantity of text. Since the text in my book will be relatively minimal, a text size of 10pt will allow for optimal readability and ideal space consumption. 

Note on Serif typefaces: Though commonly accepted, the superiority of serif typefaces is heavily disputed by growing sects of the typographic and scientific community. The argument in favour of serif typefaces is that they guide the horizontal “flow” of the eyes, allow for ample spacing between characters, increase the contrast between individual letterforms and allow words to bind into ‘functional wholes’, and that people generally prefer to read large bodies of text if they are set in a serif typeface. Others argue that Serifs actually disrupt character discrimination and add uneven appearance to the shape of strokes and characters. As concluded by Alex Poole: "[if there are indeed any differences in readability it is likely that they are so peripheral to the reading process that this effect is not even worth measuring, and that a greater difference in legibility can easily be found within members of the same type family than between a serif and a sans serif typeface. There are also other factors such as x-height, counter size, letter spacing and stroke width which are more significant for legibility than the presence or absence of serifs. Finally, we should accept that most reasonably designed typefaces in mainstream use will be equally legible, and that it makes much more sense to argue in favour of serif or sans serif typefaces on aesthetic grounds than on the question of legibility” (Alex Poole, 2008).

Poole, A. (2008) Alex Poole. Available at: http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/ (Accessed: 14 December 2016).

Serif typefaces were explored in the beginning of the publication's development, but in critiques it was noted that a sans serif typeface would be more suitable for a book about mostly sans serif typefaces. More importantly, it was said that it would be a more appropriate decision stylistically for a book focused on technology and digital environments.   

LEADING/TRACKING

As stated by Josef Muller-Brockmann, leading is an important typographic feature to consider. If the distance between lines of text are too small or too great then the "optical picture" of the text can be adversely affected, discouraging the reader and creating an uncomfortable experience. If the lines are too far apart then the cohesion of the text is disrupted, and the lines appear independent and isolates. If the lines are too close together then the type appears too dark, and the lines forfeit their optical clarity. As a general rule the leading is often a few point sizes larger than the typeface itself. 

"Type in which the lines are well leaded soothe the reader's eye while stimulating [their] mind."

Design and construction considerations

Durability, ease of use and appearance are all important when deciding on the method of binding. The publication must be durable enough for repeated reference use, and attractive enough to appeal to modern designers. The ability for the book to lie flat would be a bonus, but not a necessity. Sandwich binding allows for the book to life flat and also gives an alternative but attractive look and feel, though isn't very durable. This drastically reduces its suitability for Typography in Interface Design. Interscrew binding is also attractive and offers a very unique appearance which would differentiate the book amongst others, but it lacks in practicality and is expensive for mass manufacturing. It's quite difficult to open the pages fully, never mind lie them flat. Saddle stitch binding, regardless of whether thread or staples are used, would not be suitable for the book due to its hand-made, low cost appearance. Due to saddle stitch binding being based on folded pages it means that the publication tries to spring you to the centre pages as you flick through; this annoying experience isn't present on perfect binding because that involves single pages being glued. 

A perfect bound publication would offer the best compromise between cost, durability and appearance.

Most modern displays have either a 4:3, 16:9 or 16:10 aspect ratio. For comparison, standard A4 has an aspect ratio of 1:1.414. I could link the digital/physical theme of my publication through a digital aspect ratio, but not at the expense of usability. Some recent displays have actually eschewed traditional digital ratios for physical ones - the Microsoft Surface Book, for example, has a screen size with the same dimensions as an A4 piece of paper. This is to create a feeling of familiarity when using the machine as a tablet. I'll have to experiment with how different paper sizes and aspect ratios feel in the hand; how they look, and how wieldy they are to use. One thing is for certain - books that don't fit properly onto book shelves are just annoying, so my publication must abide by this. 

Digital printing is the most appropriate for this publication. It allows for cheap, fast and easily distributable publications to be produced at a high quality. 

Every Book Starts with An Idea: Notes for Designers

Every Book Starts with An Idea: Notes for Designers by Armand Mevis

Mevis' essay on book design contains a lot of useful information, and his initial (harsh) observation resonates with me:

"Out of all those books there must only be a few hundred whose design is worth looking at, fewer to talk about and fewer again to discuss in depth"

Whilst undeniably harsh, his comments feel more justified if you go into almost any library or bookstore and take a look around. One or two out of the hundreds may strike you as being particularly well designed, and the rest just disappear into the background. 

I also like his comparison of book design to finding your way out of a jungle - you're (in most cases) presented with a huge bulk of text and it's up to you to decide how it looks, feels, works, reads etc. 

Initial design ideas

Jan Tschichold argues that square is an ugly format for a book. Even if it wasn't, square and overly wide books tend to stick out of bookshelves and protrude amongst the other books. In most cases this is annoying, and considering a book spends most of its time on a shelf it would make sense to avoid this. Additionally, gravity makes landscape orientated books difficult to use without them being propped up on a table; you have to awkwardly balance the book in one hand whilst trying to navigate it with the other. This is exacerbated with hardback bound books. The point of Typography in Interface Design is to be an easy to use, attractive and appealing reference book inspired by modernist and UI design. By definition the book has to be easy to use, and the best format for this is portrait and relatively narrow. Paperback perfect binding would also allow the book to be easily flicked through. 

The exact dimensions are not yet finalised. The idea of using a digital aspect ratio such as 16:9 seems obvious, though that format was designed exclusively for screens and is very long and narrow. It's difficult to make such a narrow book easily usable without sacrificing thumb space, margins etc. There are of course other formats, like 16:10, but an inherently physical format seems more appropriate. The book is about type in UI design, it isn't actually an interface, and there's no need to sacrifice usability to make a link between the two. Though uncommon in books, A4 is a very good format for one; specifically in this case. It would allow for rapid prototyping by using a standard office printer and inkjet paper, and it'd have a link to the digital through the Microsoft Surface Book, which has a display with the same dimensions as an A4 piece of paper. 

According to Typographie by E.Ruder, the optimal line length for body text is considered to be 50-60 characters per line, including spaces. According to The Elements of Typographic Style the optimal line length is "[anything from 45 to 75 characters, with 66-character lines being widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.]" The reasons are listed below. 

• Too wide – if a line of text is too long the reader’s eyes will have a hard time focusing on the text. This is because the line length makes it difficult to gauge where the line starts and ends. Furthermore it can be difficult to continue onto the correct line in large blocks of text.
• Too narrow – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress readers, making them begin on the next line before finishing the current one (hence skipping potentially important words).

The design should be simple but attractive to allow it to appeal to the target audience and retain easy usability. This alone would separate it from the majority of the books about design in interfaces, which are considered unattractive and awkward to use by most. They remind users of a badly designed school textbook; something this book must avoid. There are no dedicated publications for typography in interface design, so there is a sense of freedom to create something new. The idea of a very simple and clean design, primarily featuring white stock with black text, makes sense. It provides ample contrast for high readability, and is also reminiscent of typography on backlit digital displays. White covers are easily bruised and made dirty, which is why Jan Tschichold and most book publishers tend to avoid them. It'd make sense to follow this advice in the final design. 

Experiments have been conducted with type-only covers and covers with symbols. The symbols chosen have a deep relationship with digital environments - the hamburger icon and the iOS signal icon, for example, which are universally used on multiple occasions every day. The idea of making the cover appear like a grid in construction has also been floated, which would provide a clear link to UI sketches and wireframes. 

A case study of some typefaces used in UI design

San Francisco is a neo-grotesque typeface developed in 2014 by Apple for use in Apple Watch, then expanded to use in both iOS and macOS. It was designed exclusively for the digital environment, and replaced Helvetica Neue which had served in the interim between Lucida Grande and San Francisco. It performs very highly in small screen environments due to the unique shape and features of every letter (a problem which plagued Helvetica). 

Roboto was designed by Google in 2011 for exclusive use on Android software (with use ranging from phones to TVs and car infotainment systems). Its high x-height and condensed form make it ideal for small screen environments like phones and watches. It performs well in the space it was built for, and although Google describes it as "modern, approachable" and "emotional", some have criticised its military-esque stern-ness. Even a redesign in 2014 failed to make it more friendly. 

Helvetica had a short stint on macOS and iOS, which was fine for users who had already adopted a device with a Retina display, but for those with lower resolutions devices it proved very difficult to decipher words at small sizes, particularly in areas of the system where the Light variant of the face was used. In the words of Erik Spiekermann:  "Helvetica sucks. It really wasn’t designed for small sizes on screens. Words like ‘milliliter’ can be very difficult to decipher.”  

The focus of my publication

My publication will serve to form an analysis of typography in current interface design principles and examples, a historical overview of past examples of interface design, and an approximation of potential future scenarios for it. I won't focus exclusively on a set environment except digital, but instead I'll try to encompass as many areas as possible. Desktop and mobile operating systems will feature heavily, and there'll be a deep look into interfaces on wearable technology since it's still an emerging market. I'll also explore games consoles, vehicles and VR/AR. 

It will be targeted at UI designers, digital designers, and designers in general, as well the more broad audience of tech enthusiasts. This would allow me to use both the design press and the tech press as potential help to market and review the book.

My book must be pleasant to look at and use, but due to its nature as a design information book it must be durable, easy to store and not overly fancy to keep costs and manufacturing realistic and appropriate to scale.

Exploring how typography is used in interfaces in such a broad and all-encompassing manner will allow me to set a good founding for further UI explorations in future modules, as well as COP and PPP.