Didactic Thumbnail.jpg

Didactics

Digital Publication
2017-18

User Centric Design
UI/UX
App

Interaction

This is made in collaboration with Dani Reis & Yash Rastogi. 

 

Didactics By Sonnenzimmer

Didactics is a publication, created by Chicago screen printing duo — Sonnenzimmer. It is a combination of two of their previous books — Warp and Weft and Formal Additive Programs. It highlights their process and method of creating screen printed posters. 

Didactics by Sonnenzimmer is a digital publication aimed to translate the attributes of the page to the screen. The book published in 2014, is translated into an interactive tablet experience. 

IMG_9804.jpg
Didactics_WSFrames19.jpg

I. The Challenge

The primary challenge was to translate hand made, silk screened posters to be viewed on a screen.

How can a process, that is rooted in physical making be shown on a screen that is devoid of texture and depth of layers? How can we translate tactility on a screen?

The book is essentially a combination of the clients that Sonnenzimmer worked with and how they informed their making, along with images of the actual posters they designed. With the app, we wanted to seamlessly combine these two sections. 

The Splash Screen

The Home Screen


II. The App — 

Section I — The three viewing modes

The app offers three viewing modes that blurs the lines between the different sections of the book.

The first one offers a informative view of the posters, that includes information about when it was created and how. It allows you to navigate freely between the home menu and the exercise and info pages. 

The second view, allows you to see Sonnenzimmer's sketches and approach to the visual composition of the project. It establishes a flow of eye that helps in understanding the aesthetic quality of it. 

And the third view allows for the posters to be experienced in full screen. The viewer can zoom in and out and explore the finer details of the posters.

Section 2 — The exercise section

Each poster in Warp and Weft comes with a set of guided exercises that Sonnenzimmer used as a guiding tool to create their posters. These exercises actually encourage the consumers to create their own work using Sonnenzimmers framework. 

Section III — The project information

The project information section highlights the research Sonnenzimmer conduct before they create. Oftentimes their clients creative background informs their own making. This section also goes into more detail about their creative influences and how it influences their composition.  


III. The User 

Didactics_WSFrames14.jpg

IV. Wireframes 


V. Ideation

Adapting a book to the screen required us to completely break it down into sections and build it back up differently. To achieve our vision we came up with some goals : 

  • Firstly, we wanted a seamless integration of the various parts. 
  • Secondly, we wanted to find the right balance between our own aesthetics and lining them up with that of Sonnenzimmers. 
  • Thirdly, we had to choose which part of the book we wanted to prioritize on. While the app contains each and every part of the book, it focuses more on the posters. 
  • Lastly, while finalizing our designs we wanted to find a replicate UI icons and graphic elements to function cohesively with our concept. 
     
IMG_0852.JPG

We developed various wireframes and prototypes both on paper and on sketch. We ultimately decided on a using the up, down, left and right swipe action. We decided to keep the home screen very basic with color fields buttons to suggest to unusual UI  elements inside the app. 

Didactic.png
IMG_9694.jpg