inkubator <

Creating a Design Atmosphere - Synote.

The Web Science Institute has recently funded a project to enhance the web application Synote Researcher.

Synote makes multimedia resources such as video and audio easier to access, search, manage, and exploit. Learners, teachers and other users can create notes, bookmarks, tags, links, images and text captions synchronised to any part of a recording, such as a lecture.
Imagine how difficult it would be to use a textbook if it had no contents page, index or page numbers. Synote actually provides the way to find or associate notes with a particular part of a recording,i.e. the media fragments.

The Synote project was created by Dr Mike Wald and has won numerous awards and recommendations within the field of teaching. Mike and his team are utilising this funding to add new features and enhancements that will greatly improve Synote.

The pilot system will provide accessible crowd-sourced annotation and enrichment of audio-visual material. Use cases include students watching, correcting automated transcription, and enhancing flipped classroom content, remixing online multimedia resources, problem based learning in class, real-time notation alongside research presentations, coding of audio-visual content for contextual analysis, second screening for research communication e.g. within documentaries, and creation of hybrid research publications. Annotations will be published as linked open data and support cross-referencing to existing social commenting systems, with natural language processing supporting cross-referencing of materials.

The updates to Synote plan to be piloted in teaching across 3 faculties in Semester 2 within the University of Southampton.

I'm on the team to look at how we might enhance the Synote experience from a design perspective. I also plan to use the enhancements in my own Games Design & Art teaching.

To kick start this process I ran a half day inkubator workshop to look at how we can design from the content out to produce a design atmosphere based around three key elements.

Andrew Clarke outlines the elements that make up the design atmosphere;

Typography
Typefaces, type treatments and white space.
Colour
Emotion and interaction vocabulary.
Texture
Decorative elements, line-work, patterns and shapes.

We would then design from the Atoms up and provide a html/css prototype and a style guide that could be used through out the site.

The first part of the workshop was to outline the principles around creating a design atmosphere and what it means to design with layout the very last and least important consideration. This was very much a case of running through the principles outlined by Andrew Clarke and Brad Frost.

We then divided into two groups, one group looking at the current content and brain storming around what was the type of feel and aims are of the content, while the second group performed a content audit on the main player section of Synote.

Once we had agreed on the content audit and the type of atmosphere the content was trying to convey it was time to find typography and colour to convey this atmosphere. Again spliting into two groups we utilised Typecast to take real content from Synote and play with choosing a headline and body font, the students used the font browse option on typecast and then used a basic project to compare and whittle down three potential options to one.

The other etam collected some quick research on other video and education sites to see the colours that are normally associated with this category of content and using Adobe Color CC they played with sets of colours that they could then turn into swatches.

Graphic design tools are bringing a knife to a gun fight. -Andrew Clarke
Using Typecast and Adobe Color CC

Once we had our fonts and colours selected it was back to Typecast to build the structure of our content using the content audit data and of course starting mobile first.

We then agreed on a body font size and leading (line-height) and a header one size visually in typecast and used Tim Brown's modular scale tool to create a type scale based on the Golden Section. We used this scale to flesh out our heading sizes and ensuring we made choices based on meaningful mark up decisions for the content.

From Adobe Color CC we had a handful of of colours and proceed to test them on the real content, we then reduced the number of colours we had initially and introduced more shades.

This was a pretty fast paced workshop (4 hours) and although we have yet to move into the last phase, Textures and Content Flow (Layout) we made a good first pass at redesigning the Synote Atmosphere.

I then took the typecast project as a guide and coded the prototype with a cut down version of HTML5 Boilerplate and connected it to Typekit to build the initial html prototype and also used typecast to generate the html style guide, these have now been sent to the rest of the Synote team for feedback and to see what the developers think!

Our own next design steps:

Additional References

@_inkubator