Sprint nº 4 – – – towards one fluid object!

The fourth sprint started with a series of introductory workshops led by our developer Lucia Dossin. We covered various topics, from web-based typography, to javascript and jquery libraries. For the first workshop we discussed the specifics of the use of typography on online platforms, looked into examples of font families, and also at text related css properties. In the following workshops we experimented with different snippets of code and had a better understanding of the overall structure of the language. After the examples and notes taken in the workshops we could then apply and move forward into questioning what other animatons and interactions could be added to our chapter.
In the process of considering different interactions, we collected a few experiments which included transparency layering in image galleries, pop-up boxes, zoom-in features, image mapping, audio soundscape and various video display options. After receiving the final material for the chapter Space of Flows, we decided to combine some of the previous experiments that would best fit the content.

 

1blogpost

 

The chapter Space of Flows opens with an immersive experience, which is now re-assembled with a new footage of the Arnhem Station  (find more about it here!).

 

2blogpost

 

United Network Studio Meeting

 

In the middle of the sprint we met with UNStudio and We Love Digital, the studio which will be continuing developing the app, and Proxi (Barcelona), the studio responsible for designing the printed version of the book.

During the meeting, Proxi Studio presented the overall design process and the concepts behind the book Knowledge Matters. We also presented our concept and prototype – interestingly we could identify some common threads between the digital and printed designs. In both cases we can feel the presence of a modular structure in which projects are constantly revisited and referenced. Another common thread is the colour spectrum which is used not only for atmospheric purposes but also functions together with a coded navigation.

 

After discovering some mutual design decisions, we found important to aim for a stronger graphic consistency between both. We did this by implementing the typeface and color scheme from Proxi’s Graphic Kit. Since we already had made the decision of combining serif and sans serif fonts, and apply it to different text hierarchies, very litle adjustments had to be made. The colours are now more vibrant, but we had to adapt them to the gradient in order to still convey the “going in depth” feeling, starting from lighter to darker.  

3blogpost

 

In the meeting at UNStudio, We Love Digital gave us valuable feedback on potential features such as navigation between chapters, by swipping left and right, a more direct option in comparisson to the “circular menu”. The conversation also reminded us of integrating some other features that we had previously in mind: bookmarking content and citation highlighting/selection for social media sharing.
At the end of this fourth sprint we presented the new style applied to the entire App designed so far. We also included a new set of interactions for an enhanced reading experience, now with the final material from the chapter. The timeline was enhanced with new footage from the Arnhem station, with very subtle motion, producing a more vivid impression of the surrounding environment.

 

screenrecording_timeline

 

For the next Sprint we will improve the app according to the feedback received, and finalize the overall navigation system. Another goal is to create a clear styleguide that visualises how the tools glossary could work as an extra feature to be available throughout the app.

 

4blogpost

 

/* Lessons learned from sprint nº 4 */

Achieving consistency in both graphic and structural way might seem like an easy task, until you actually start connecting the dots between separated webpages, different code systems, javascript experiments and various style guides. And that is the moment when even any good team requires patience. Although, it’s worth the pain: once all threads are carefully weaved together, a whole new clear and harmonious pattern starts to appear, turning a rough sketch into a more thoughful and professional prototype.

 

Share