6

Case Study: ABUK. Book Covers Graphic Design for Audiobook Application

 2 years ago
source link: https://uxplanet.org/case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

Case Study: ABUK. Book Covers Graphic Design for Audiobook Application

It seems that within the last half-century the world has witnessed one of the most dynamic stages of its progress, especially in the sphere of technologies that are evolving and improving faster and faster. So, people adjust their routines and education to the new reality encouraging designers to find new approaches and try new solutions. Books have become one of the bright examples. Our today’s case study will uncover the project devoted to books in the times of digital experiences. Welcome to see how the Tubik team creates custom book covers for ABUK, a big online audiobook store. The case study is packed with tons of graphics showing the creative process.

Client

ABUK is a big library of audiobooks in the Ukrainian language. In fact, it’s the first audiobook store in the country, based on the original high-quality sound recording. It offers classic and contemporary Ukrainian and world literature to be listened to on smartphones and tablets. The project included mobile app design and development for iOS and Android, website design, and creative illustration. In this article, we are going to unveil only a part of the project, book covers design, although that particular part of the project had a crucial influence on all the aspects of the product functionality and promotion.

0*VWu0Leqjo2-9b4sU.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

Book Covers in the Digital Era

The main visual element representing books is their covers. For decades, graphic designers and publishing houses worked on the diversity of formats for book cover designs, from super minimalist and typography-based to bright and catchy with custom photos or illustrations.

0*rAjyXRFPj8B8Z2n8.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

When the progress stimulated the advent of audiobooks, it didn’t bring too much revolution to the cover design: the original book covers were just resized and adjusted to the needed format of the packaging for the records, cassettes, or CDs.

0*oZA3YC7pjQW-6lBV.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

However, working on the ABUK application, we’ve realized that in the era of digital products, book cover design requires a thoughtful and original approach. You can’t just scan and downsize the existing paper book cover because on the mobile screen it won’t look attractive or even legible. So, based on the extensive research the design team offered the client creating original book covers to solve the problem.

0*ZL7sS4RAWNbcKxTp.gif?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

Diversity and Consistency

The biggest challenge, in this case, was to keep the consistency of the visual approach for a great diversity of content. The special design system was developed with two general concepts for cover designs. Some of the book covers were focused on a visual symbol from a book presented with a 3D model while the other ones, more complex and artistic, featured unique illustrations adapted for mobile devices. This approach not only increases the originality of visual design presentations but also helps to transfer the emotion of any book effectively.

Let’s take a closer look at these two types of covers.

Medium Covers (3D Art)

Medium-level book covers are built around one prominent visual symbol reflecting the book plot and presented in the 3D art form. The hardest challenge here was to work out a physical detail that would set a strong connection with a book, limiting it to only one particular object. Below you can look closer at the stages for this kind of cover: creating the 3D models and then giving them style and skin with colors, textures, and shadows.

Below you can take a look at the path from wire models to finalized book covers with 3D graphic elements.

0*MyYcReqORPDBd2tn.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*ZgrHeagC7M4jBW2t.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for the collection of short stories by Edgar Poe
0*W6JuPlK6RLdRI4c4.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*SKp2oVBcHBuQJ6jZ.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for The Lover
0*vfScPukTu5quC6tl.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*9f0iPjKVta7Gs7jv.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for On the Blood Field
0*jZQrc9n77Oz3Ry4u.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*bnEOuQCG-eo35_5A.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for The Attorney from Lychakivska
0*N-SA3YFLov6GJ0gS.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*YL1gkBsuke94eIU0.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for That Was How Huska Perished
0*5maadiwsmZ4cptQP.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*B-qhAWdkqngfcTcX.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for To Live Up To Spring
0*ISEXFat9SlZVRiYI.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*gs05vYzdytXGIEt3.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover design for Samum

Here’s the collection of book covers designed in this style for the ABUK application.

0*Rq7YElUIZQBVBFPD.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
3D modeling for the book cover arts
0*ArHi3jXiqtBlu0n_.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Collection of final designs of book covers with 3D graphics and typographic part

Maximum Covers (2D Illustrations)

Maximum covers aim at more detailed 2D images that offered a higher level of flexibility of compositions and visual metaphors for the cases when physical objects aren’t enough to reflect the book essence or the accent should be put on characters. Illustrations of this type also opened more opportunities for using more complex color palettes, tints and shades, patterns, textures and visual effects, negative space, and specific small details.

The creative flow started from the rough sketch of an idea for a book cover graphics which was approved together with the client and then transformed into digital illustration and polished. Take a look at some of the illustrations for book covers created in this style.

0*z2-ZB2GBndsZ2ma4.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*Gk7cXZ_eG6OK3-K3.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*-lg3NpIoWxOQ2se3.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Iterations of the book cover illustration for Fahrenheit 451 by Ray Bradbury
0*ieJJglTB_4HrhL-u.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*_LkV7fZ5Ld73pzMw.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
The sketch and polished book cover illustration for The Hound of the Baskervilles by Arthur Conan Doyle
0*CahdqcZOhVShgFka.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*P2p6te9CvT6q_qQk.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for The Old man and the Sea by Ernest Hemingway
0*YpZWahQhfQS5_WUn.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*CFhGglyjJxBjUyv5.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for The Invisible Man by Herbert Wells
0*Fp6RHHIqbcHly7zQ.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*41kQsn7tqZ2i7Ycd.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for Tender Is the Night by F. Scott Fitzgerald
0*-UdLaSKnniaATrf_.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*DR_OGggScNenj7q-.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for The Hitchhiker’s Guide to the Galaxy by Douglas Adams
0*jFr6kRfpCElooOqO.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover illustration for the collection of short stories by O.Henry
0*G0J6kcNp7i-FLPOC.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover illustration for A Doll’s House by Henrik Ibsen
0*jtSbqZNy6rwnlpN4.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover illustration for The Catcher in the Rye by J.D.Salinger
0*whRtdtefi79tGlAh.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover illustration for The Good Soldier Schweik by Jaroslav Hašek
0*vOd816ZNuUOtRaBC.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*dHznH2Lgm_8JU623.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for The Intention by Lubko Deresh
0*hQaF2pELM4c_Xhpb.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*xlDk3pjcklKI1fA6.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book illustration iterations for Karlsson on the Roof by Astrid Lindgren
0*5jGnXUt0sRxXTS3i.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*4T6IdNbTgrUHrc6_.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Sketch and book cover illustration for The Judge Will Come by Volodymyr Lys
0*80T8evCaXQKhLOuL.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*St-j9Krby-yfJFGx.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
0*NEinAlE3l7Wdo-8X.jpg?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Book cover iterations, sketch, and illustration for Jacob’s Century by Volodymyr Lys.

Below you can see some of the finalized book covers based on that approach, featuring custom 2D illustrations and typographic parts with the book title and author.

0*Dr-cCN2sOZKGRL3I.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87
Collection of final designs of book covers with custom 2D graphics and typographic part

After the book covers are designed, they are tested as a part of the application user interface.

0*t29gSCeykLKFZ81f.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

The work is still in progress as the ABUK audiobook store is constantly growing, so the Tubik team is working on new creative book cover designs. Stay tuned to see more!

0*oG-r-wsI_biy4Wye.png?q=20
case-study-abuk-book-covers-graphic-design-for-audiobook-application-2f5863cf2f87

Design Case Studies

Here’s a set of more case studies sharing the design solutions and approaches for some of the design projects done by Tubik.

Carricare. Identity and UX Design for Safe Delivery Service

Vinaty. Website Illustrations for Wine Service

Real Bitcoin. Creating Website Illustrations

Pass-On. Landing Page Design for Delivery App

Devpost. Hero Illustrations for Hackathons Platform

PackYak. Mascot Design for Shipping Service

Uni. Landing Page Design for Fintech Service

Uplyfe. Identity Design for Health App

Bennett. Identity and Website Design for Tea Brand

GNO Blankets. Branding and Web Design for Ecommerce


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK