Penguin - An unsuccessful template

A fatal flaw in these designs is how much these 'templates' need the correct amount of copy for it to be effective in demonstrating its use. Using to kill a mockingbird as an example, the composition falls flat as it fails to 'fill up' the template as succinctly as the In Cold Blood variation. 

It was brazen to attempt to create a template Penguin could use. The competition is asking for creative interpretations of these book titles that are meant to 'wow' and attract the everyday reader.  The penguin team are more than able to create a template of their own, it is unnecessary and a possible waste to have gone down this route as a design solution. 

Rereading the brief provided more reason as to why this approach should not be chosen. Most importantly are the requirements for a 'imaginative concept and original interpretation of the brief' and 'point of difference from the many other book covers it is competing against'. This graphic solution does not achieve these two aims. For readers, this will come across as a reserved approach to book design that will not ultimately shout for their attention in the bookstore. An artistic solution to the brief is better suited to these aims and will stand a better chance amongst the competition. 

Nevertheless what the intended template does possess is an unorthodox approach to book cover design. The weights of the cover copy are overtly thick and highly contrasting, combined with a cold and stark white background that doesn't evoke much emotion to the reader. This visual approach is hardly seen on story book covers, but more so on books for design. This emotional disconnect will probably hurt the sales of the book which is a criteria that Penguin are aiming to achieve. Furthermore In Cold Blood's target audience aren't designers. Therefore the considerations for type, leading and overall composition would probably be lost to the average reader.

The design was meant to be utilitarian and objective yet flexible enough to accommodate a range of titles and authors. Its downfall was that the 'template' was centered too much on this specific book title rather than the vast majority of others that needed to be. 

This is why despite the simplistic and straightforward book covers for Penguins Little Black Classics, it works as a template because of how flexible it is given the varying amount of copy used for each one.

Penguin - A possible new look for Penguin

In response to the visually chaotic shelves of bookstores today, this brief presented an opportunity to create a possible new art direction Penguin could take in making it stand out on the shelves. The solution should be bold and contemporary that utilises functional design that strips away the unnecessary and presents the reader with the essential information. 

Fig. 1

Fig. 2

These two compositions represent the 2 new art direction Penguin could take. There were countless adjustments to the positioning of each title, the hierarchy of the information, the typeface for the back cover's copy and the width of the captions.

The decision to have the cover predominantly in black and white is to help Penguin stand out from the colourful book shelves. Book covers these days use an overload of colours that are presumably used to help attract the reader through visual attraction. When most book covers adopt this design direction the end result is none that clearly stand out from the rest. Therefore a lack of colour will help achieve the opposite. Furthermore the simplicity in the black and white colour scheme will appeal to the more mature audience which the story is intended for.

The use of a bold and large type set of the book titles help maintain the readers attention once the lack of colour grabs it. The restrained visual look is carried through onto the spine and back cover design creating a consistent visual identifier for this art direction. The addition of Penguins signature orange to select captions was a late addition to the designs in effort to communicate Penguin's brand to the reader more explicitly and quickly on first glances.

The slab serif used for the back copy, was chosen as it relates to the western setting of In Cold Blood. The rounded characteristic of each letterform also brings the typeface to modernity as rounded typefaces such as FF Mark is trending.  

However these two designs were eventually scrapped. The proportion and placement of the copy combined with the brashness of the bold title did not prove effective in creating a visually appealing design and one that can be used as a template. Furthermore not every book will be appropriate to the connotations that the slab serif type give. 

Fig. 3

Fig. 4

Therefore they went under another redesign, this time the typefaces were strict in adhering to the gird system. This produced a more visually proportional look for the covers. In Fig 3. the bold book title has been changed to just an outline to instead shift the attention to Truman Capote and to create a less heavy impact on the cover. The use of orange has been reduced to just the 'In Cold Blood' on the spine which makes the colour use more special and allows for the reader to identify the book's publisher when arranged on a shelf. The alignment of the author, title and caption text have been shifted to create a more central visual hierarchy when the readers eye goes down the cover. Also, the baselines of each word has been aligned to a grid line which produces a more even composition. 

Fig. 4 is a slightly more radical approach to the redesign. This direction was based around the structure of the Marber grid which famously created the iconic compositions of previous Penguin books. As such Fig. 4 can be seen as a modern update on the grid. In this cover design, 'In Cold Blood' has been changed to a lighter weight which adds contrast and allows for Truman Capote to be the focal point of the design. Also, the width of the column is thinner compared to Fig. 3 as it is more aligned with the central focal of the front cover which is created through the vertical zig zag line and thinner weights of Akzidenz. This makes the book look taller than it actually is as compared to the more spread out visual that the wider, thicker type font on Fig. 3.

In both compositions, the entirety of the design is produced using one singular typeface that is a reference to the old designs of Eric Gill and Romek Marber. This keeps in line with Penguins visual brand but at the same time updates it to the modern era. The restrained colour palette and typographic compositions produce a cover design that does connote characteristics of that it was designed. Hence the addition of the zig zag line that was taken from the Marber grid and forms the placement of the texts.

Studio Brief 02 - Wim Crouwel a graphic odyssey on the iPad

Wim Crouwel's a graphic odyssey is a good example of how editorial content aimed for designers and possibly other creatives can be presented to the reader. 

The reader is presented with a dynamic front cover that with every tap of the finger on either the background or masthead, a different background or letterform appears. Although subtle, this adds a level of depth as the digital publication engages the user. Swiping left will bring the reader to the contents page.

An interactive content page also allows for quicker access to the chapters in the e-book. 

The benefit of the digital copy is that the pictures are much more vivid as compared to the printed copy. The colours of the Crouwels design come through better and give a more accurate representation of what his work looks like in person. This creates a more immersive user experience.

A single tap on the screen and the on screen menu for the e-book. This gives the reader an idea of how far into the e-book their in as well as providing some functions. For example pressing the hamburger button expands a drop down menu that shows the different chapters, allowing the reader to quickly jump through the e-books content if necessary. This creates ease and convenience for the reader which ensures a positive user experience. 

Another engaging feature of the e-book is the animated compositions of Crouwel's typeface design. When used appropriately like in this example, the reader gains a better understanding of how Crouwel's typefaces are formed. 

Wim Crouwel's a graphic odyssey appropriately incorporates the advantages of having editorial content on screen to provide a more engaging reading experience for the user. Despite these positives, there is still the issue of enticing the reader back to reading the e-book. As much as it is engaging, the lack of tactility and how the e-book is essentially just another app on the user's tablet makes it hard for the e-book to require a second reading.

Studio Brief 02 - Identifying the problem of digital magazines

https://blog.yudu.com/2014/05/14/3-common-problems-digital-magazine-publishers-encounter/

In this article, the advantage of the screen  is acknowledged in providing new ways to display editorial content. However there must be a level of restraint in how much these publishers should use these advantages. If used too much, the overall publication becomes over-saturated with rich-media content. This causes problems on the level of performance on the platform as more videos and gifs would increase the amount of data needed to be loaded, increasing the capacity requirements from devices that may have small storage capacities. Furthermore it draws attention away with print content and confuses the reader. Therefore rather than over saturating the digital magazine with these features in effort to 'wow' the user, these features should be placed where necessary and not for the sake of it. 

The article also suggests that the printed magazines content should not be entirely converted to screen. Instead, publishers should selectively choose which aspects of the magazine to showcase online. This will help potential readers decide on buying the magazine. Furthermore, a digital magazine often costs a lot less than the printed version, and thinking monetarily, the publishers would prefer if people bought their physical copy to stay in business. Therefore rather than trying to create a platform where readers can view entire on screen magazines, it should rather be a preview feature that helps promote it. 

https://www.wired.com/insights/2014/10/are-digital-magazines-dead/

In this article, WIRED discusses the background of the digital magazine industry and the possible direction of its future. Digital magazines have only been in circulation for around 6 years and is seeing a slow rise in its subscriber base with more people adopting tablets. The important point to take away from the article is the authors acknowledgement that digital magazines have an opportunity to push how readers view editorial content. Digital magazines provide a unique experience in an age where information flows quickly and readers jump around between content. They have the opportunity to captivate audiences in ways that many cannot.

https://gigaom.com/2013/10/06/tablet-magazines-failure/

An article by Gigaom raises some interesting points on why a app based solution to digital magazines ultimately leads to failure. Firstly is how much the user actually frequents their apps. To quote Gigaom, "the average user only opens eight apps a day with the most popular being Facebook, YouTube and game apps. And according to a 2012 report from Localytics, 22 percent of all apps are only opened once." Therefore even if there was an app for these digital magazines, it will need devoted subscribers to avoid the app being discarded. 

Having an app also limits the accessibility of the magazine as well. By not being on the web, it doesn't allow for the articles to be indexed or searched. This cuts out a potentially huge audience that could have been looking through the magazine, increasing its reader base. Furthermore it doesn't encourage users to share the articles on social media, preventing websites like Flipboard and the like from sharing it and increasing the magazine's exposure.

Therefore given the user habits and limitations of app design, a app based solution to the brief may not be the most realistic and effective way of drawing readers towards on screen editorial content. Furthermore by on creating an app, it limits the exposure of these magazines. A good number of users may have a tablet to view the app but almost everyone has a computer and or a smartphone which is where the full potential of the solution can be taken. 

http://www.pubexec.com/article/8-lessons-from-failure-digital-magazines-revolutionize-publishing/

This article identifies the problem with digital editorial content and user habits that dictate the future of this platform. The key points were that digital media have short half lives, how smartphones are continuing to dominate the mobile market, how people can discover the magazine and why a magazines tactility is its most important aspect. In the same way that users tend to only use eight apps a day as stated in Gigaoms article, the tablet has gone from a must have when it first came out to something of a luxury. This means tablets are not a primary way of users viewing digital content. The smartphone does compromise on its screen size but because of a necessity to have a phone, smartphones are becoming a increasing way in which more of the overall population access the internet. The tactility of the physical copy also plays a role in the demise of digital content. Not only is the reader able to feel the magazine but it can act as a statement, "the printed edition can also entertain visitors, decorate a coffee table, or display’s the owner’s taste or passion. It is an object that can be clipped, shared, or collected."

Studio Brief 02 - Understanding Apple's UI design

Looking at Apple's user interface guidelines for iOS will help give an understanding of the unique design philosophy of digital applications. This was researched to serve as a basis for the idea to have publishers preview their magazine on Instagram through an interactive editorial "story".

Take for example something as simple as iOS Gestures, although not necessarily the first thought when first thinking of the app's design, it will become a major issue when the gestures are not aligned with the gestures of the overall OS. The way the user navigates around the app should be entirely based around the established gestures of the OS, as stated by Apple "People generally expect the following standard gestures to work the same across the system and in every app." This will provide a seamless, hassle free user experience when navigating the story. Looking into the iOS guidelines is also helpful in that it lists out all of the gestures that are available for the Apple user. These can be implemented into the story. 

A problem that could arise with the content rich story could be long loading times, especially if people do not have access to good data or wifi. As a workaround, Apple suggests to mask the loading screen. Content must be shown as soon as possible, people's attention span on mobile devices are usually low and having content appear instantly makes for a positive user experience. Masking the loading screen or having placeholder elements as the content loads are ways to distract the user into having content shown instantly to them. Nevertheless, the app must make it clear that content is loading. 

Navigation is also another area that will be important for the briefs solution, more so to the website idea than the extension of Instagram stories. For example a content-driven or experience-driven navigation that could create a dynamic layout for the magazines content. As stated by Apples description, this type of navigation allows the user to move freely through the content which is more appropriate to books and other immersive apps. The danger with this style of navigation is creating a system that can become confusing. Therefore always maintaining a clear path for the user and using standard navigation components will allow the user to explore the content freely without the worry of getting frustrated with the website.

Studio Brief 02 - Erik Spiekermann

Watching Erik Spiekermann's talk, Typomaniac, proved useful in understanding the role of typefaces in digital design. 

A stronger stroked typeface is better than light and thin ones when designing for screen. Thinner fonts, which are preferred by majority of designers today create too much even greyness as the stroke width doesn't contrast enough against the background. Spiekermann says this is the worst thing to aim for. 

The most important point of his talk was his view on how the readers see a brand through the typeface. The branding relates to the function of the typeface. If the typeface doesn't work well, the brands identity doesn't work well. The characteristics of the typeface creates the brand, especially if its on screen. The app/website should have its own character to not make it look generic and of the platform its on. 
This was shown through his rebrand of the RMBA music app. The more characteristic and unique typeface used makes the app feel specifically designed and not just another generic design that follows Apple's UI template.

Spiekermann advises to create mockups of the screens UI on paper as its easier and much faster than working directly on screen. This method can be applied to the briefs design process. A wider typeface is also better on screen, within reason.

Studio Brief 02 - Digital and Print content

The Gourmand's website serves as a visual preview into the printed content of the magazine. With on screen, readers are given a selection of articles that feature in the latest issue. 

In order to persuade readers to buy the physical copy, very limited information of the articles are shown. However the website's clean and minimal design does create a monotonous user experience that simply lets the content do the talking. This is a valid function but it does build anticipation in the reader to find out more about the articles. 

Olive Oil

In the On Paper section, users are presented with just static images of selective spreads. There is so much potential in this page to create a more immersive and engaging way to present their editorial content. Having just static images deflates the excitement in being able to read the full article. Just in the Olive Oil picture alone, Gourmand have an opportunity to show the artists process in forming those images, to have a gif where they flow on the page or a moving colour gradient that changes periodically. These possible techniques may not be the best way to create the needed engagement however it does represent what can be done and how magazines can definitely change the way they promote their content. 

It's Nice That's Printed Pages are also another example of editorial and digital content being distinct enough to have a following on both platforms, at least for some time. It's Nice That is a very popular website, picking the visually appealing projects from the creative world to comment on. Due to this follower base, Printed Pages already has good exposure to provide sales for their editorial content, which for some time was different to the website. Having this difference prevents repeating the same content on the website onto the magazine. It makes people want to buy the magazine as it is content that hasn't been seen before. 

The New York Times Magazine is also another magazine that has both an online and physical presence. The website is a subsection of the New York Times newspaper and has selected articles that presumably feature in the latest issue. 

Surprisingly the actual magazines cover is not the main focus of the website. After scrolling down a page, the magazine's cover is resided to the right hand side of the website, away from the focus of the articles. This does not create a user experience that promotes the appeal of owning the physical copy.  

Clicking on the cover, the user is redirected to another page that brings the artwork to full display. But again, it is yet another static preview of the magazine that does not give the reader any idea of the magazine's art direction. 

On mobile, the user has to scroll all the way down to view the magazine. If this is a section of the New York Times dedicated to the magazine's content, why isn't the magazine itself the first thing the user sees?

Studio Brief 02 - Feedback

The reason as to why magazines have difficulty in converting the same experience onto screen is due to the process of designing for print first then screen. As a way to promote the website/app and encourage more publishers to use it, the platform should be an example of what can be done to editorial content using digital techniques. During the design process of a magazine, it is definite that the publishers have the digital spreads prior to sending off for print. Therefore the publishers already have the content already made for this platform. They just need to convert it into an engaging digital experience. 

There was another issue of having both print and digital magazines side by side. A physical copy of the magazine would be the better option for the subscriber if both platforms have the same content. Due to preconceived notions of how bad on screen reading can be, a digital copy of the magazine may not be a viable option. Especially if it means the publisher has to do twice the work. Therefore rather than having both a digital and physical copy of the magazines content, the digital side of things should be more of a promotional feature, to get readers to buy the physical copy through featuring selected articles etc. Two magazines that do something similar to this are Printed Pages by Its Nice That and the Gourmand, which have different content for its website and magazine.
                                                                                                                                                                        

Extending on the social media direction this idea could take, there was a suggestion to have a feature where users can see who has looked at the digital preview of the magazine. Take for example the Following page on Instagram. Not only will you have the posts people have liked but the people who have viewed magazine previews. Seeing influential designers or people you admire view these magazine previews would encourage and garner curiosity to the magazine itself, hopefully providing future sales. 
Another aspect that would help encourage users to view these previews are the fact that how some magazines have a subscriber base that are only associated because of its brand image, like for example GQ. Some readers would prefer to buy the physical copy in order to carry it around, implicitly showing other people that they are as sophisticated as the content shown in GQ. Not only that but on social media as well. People love to take photographs of certain magazines that show off to the world what kind of person they are. This can be seen on http://thekinspiracy.tumblr.com/ The entirety of the website summarises the lifestyle choices Kinfolk subscribers make and the visual aesthetic they aim for. Although not as explicit as these methods, it is a step in the direction of helping generate exposure for these independent magazines.

Penguin - Full cover mockup

This is a mock up of what all of the book's cover will look altogether. The sailfish is moved to the back page to retain visual simplicity on the front. This typeface is chosen as the elongated letterforms help focus the attention to the centre of the book cover. Furthermore it has less connotations to the TATE gallery and Neville Brody's work. 

A suggestion was said to monoprint the blood smear on the front to add texture and a further level of depth. The blood smear could also be made to look like the boot Perry left behind that was key to the solving of the case. This would mean the removal of the sailfish as the two have no relation. 

Penguin - Initial Idea

 

This is the first possible idea for the front cover. A white back ground was chosen because of the visually crowded shelves one can see in bookstores. 

Although there was no non fiction in the bookstore, there was a shelf on crime fiction which is similar to the narrative of In Cold Blood. The onslaught of colour and large bold typefaces, which are supposedly meant to draw the readers attention fail to give the reader focus when all together. The plain white back ground of the mockup is meant to stand out from the visually chaotic shelf. 

Even the Penguin books in the fiction section don't necessarily grab the readers attention. They themselves follow a similar style in that the books author and title takes up majority of the cover design followed by a photograph contextualising the narrative. This can work negatively as seen in the cover for Jean Rhys Wide Sargassa Sea. The detailed photograph underneath reduces legibility of the display type which doesn't grab the readers attention. 

The sailfish is a reference to the sailfish Perry caught out in the ocean of the Mexican coast. This represented a high point in their lives. They've committed a murder and seemed like to be getting away with it. Perry took a picture with the prize and he looked like he arrived in the promise land. However they ran out of money and had to return back to America, this marked their downfall. Hence the blood draining from the dead cut up sailfish. 

Breaking the sailfish's anatomy into parts as well as the uneven straight fins, are meant to create an uneasy, ominous feeling to the reader. The X was added to explicitly tell it is dead, which added a slight depth to the vector graphic and completed the overall composition. The pool of blood is represented by a broad darker red (following the criticism Fujita received) brushstroke that contrasts appropriately to the artistic style of the sailfish.

The typefaces in both mock ups were specifically chosen to unnerve and reflect the atmosphere of the novel. The irregularities in stoke width, irregular capitalisation of the letters, large counters and thin stems achieve this. Furthermore the choice for unorthodox typefaces create a visual oddity that hopefully will break away from the sans serif type publishers tend to use to shout their book titles at the reader.

Truman Capote's name has been reduced drastically from previous penguin covers. This is so the readers eye flows down from title, graphic then author. 

Penguin - Saul Bass

Saul Bass's irregular typographic forms, sharply drawn haphazard style of illustration and his use of black all combine to create a disconcerting and unnerving visual look. Reading through the events of In Cold Blood, Saul Bass's style would be an appropriate way to capture the intensity, suspense and mystery of the novel. The danger however is creating a design that emulates his style. This would not be the best solution as emulating someone doesn't show an original thought process. What can be taken and applied however is the visual techniques that Bass uses to evoke ominous undertones. 

Studio Brief 02 - Critbox

Presenting the idea to the weekly critbox produced an alternative direction the online magazine could take. 

Instead of having another app or website to download and view the online magazines, the platform could be an extension of existing websites and apps. The overarching problem in the brief is the reluctance of people reading on screen editorial content. This is caused by the plethora of underwhelming websites and apps that try to emulate the tactile reading experience. Over time this has resulted in people having a negative impression of online editorial content without prior use. Therefore this idea comes as a middle ground between the two, which hopefully is a more approachable way to make editorial content enjoyable to read on screen. Furthermore what keeps these magazine publishers alive are the sales of the physical copies, to reduce the appeal of that would shorten the longevity of these magazines. 

Idea outline
Websites and social media accounts of magazine publishers will have an opportunity to showcase a part of their magazines content digitally, as a preview, before readers decide to buy their physical copy. This preview will be integrated to existing apps and websites as a way to "advertise" their publications, driving sales and gaining new readership. 
                                                                                                                                                                       

Regarding the initial idea, there were comments of how the website or app should be encouraging people to experiment with what they can do digitally with editorial content. This will help draw in an user base that will help ease the transition to on screen reading.
The more creative publishers can convey their content digitally, the more the appeal for this website/app will be generated.

Another aspect that should be encouraged is the idea that more content should be shown to the user, the more they interact with the website. This will create the illusion that the users are creating their own user experience.