Monday 3 October 2016

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. 




No comments:

Post a Comment