Interactive media design & prototyping.

The aim of this module is to design through wire framing the production of an infographic  based on improving Creative Conditions in an environment showing at least partial interactivity.

You can find the finished web page containing the info graphic here. The PDF file without interactivity can be found here. infographic-print

This project was broken down into a number of stages.

  • Group brainstorming.
  • Research.
  • Task analysis.
  • Flow chart.
  • Infographic design.

Group Brainstorm

Group Brainstorming
Group Brainstorming

For this process we broke into teams to come up with as many avenues of research & ideas to pursue as possible. Some of the ideas created included providing blank coffee cups in the canteen to allow doodling, using laptops instead of desktop pc’s to enable mobility, a communal whiteboard to allow idea generation and supplying water bottles to students. The full list of ideas can be found here.

After considering the list of ideas I decided to explore possible areas on which to focus. This list included areas such as Education, Workplace & Public Spaces. A more focused look produced ideas such as an office space or manufacturing facility, a town square or library, a workshop or class room. I decided to use the college graphics room for this project and looked at ways to improve the creative conditions in this room.

Research

I conducted research in a number of areas. Infographic design, Factors affecting creativity in the graphics room and current conditions.

2017-01-12-10.56.20.jpg.jpg
Areas of Study

Current conditions in the room can vary in a few ways. It can either be a very quiet room with a small number of students using it, to a very busy space if a large class or more than one class is using the space. It can also change due to lighting & heating at different times of the year. It is a very bright & evenly lit space if all the lights are on, or dark if not. However, depending on the time of day & year, and also the weather, the sun can enter the room through two walls of windows & a skylight. This can make it a very uncomfortable space to work in and also be difficult to see the projection screen or pc monitors.

Graphics room 1
Graphics room 2

 

 

 

 

I have focused in on 5 factors that adversely affect creativity. These are:

  1. Colour: I have looked at the theory behind how colours affect people in different environments and how they could be used to boost creativity in the graphics room. Angela Wright is a world-renown color psychologist who has developed a scientifically-tested theory of color named the color affects system. Angela’s work has shown that while a person’s personality affects how they interpret color, color influences everyone universally, and on a very basic level, color is deeply scientific. Some of her insights were recorded in an interview here.
  2. Light: Some findings on the effects of light on productivity & creativity can be found here & here. They look at the impact of the intensity, colour & placement of light.
  3. Temperature:  There is a regularly large difference in temperature within the graphics room. This can adversely affect concentration levels & production. Some interesting findings on the effects of temperature on a creative environment can be found here.
  4. Sound: While the graphics room is well removed from the rest of the college & therefore isolated from the bustle of the rest of the building there are still a few factors that can affect creativity. There are some studies done on the effects of noise, you can find one here.
  5. Ergonomics: How people interact with the physical environment & how the shape of that environment effects their decisions is very interesting. Studies show that even the shape of tables in a room can influence people. You can find some of the research on ergonomics here. John Cleese gave a very interesting Ted Talk on the power of creating the right environment for your work. He called it creating a Tortoise Shell. Yo ucan find the talk here.

Here are some images of my workbook where I lay out the research on the 5 main inhibitors to creativity.

Here are the files where I compiled my raw research.

colour-theory-psychology-2

wright-theory-copy3 Itten_Johannes_The_Elements_of_Color Interaction-of-Color

 

Research on other infographics & their designers.

I have looked at a number of differing styles. One thing I did notice was that the majority of design’s were laid out in a wire frame by hand, rather than on computer. Some of the examples can be found here.

Below is an example of a few different types of prototyping process’.

Wireframes Process This designer suggests that setting up a 12 column grid before beginning your wire frame is a good idea as it helps with the structure.

 

http://www.simplybusiness.co.uk/microsites/hungry-tech/

 

Nice example of a simple Infographic from 3. http://connected.three.ie/gtt_infographic?utm_campaign=Growth%20Through%20Tech%20-%20Three.ie&utm_content=43292027&utm_medium=social&utm_source=linkedin

Using InDesign for interactive wireframing. https://www.smashingmagazine.com/2013/03/creating-wireframes-and-prototypes-with-indesign/

Here are some of my favorite info graphics found over time.

One page websites that look like Infographics. Some of the ideas in these infographics are really great, using techniques such as Paralax to introduce movement & also the interaction between elements. For example, when scrolling down a list of figures an open head scrolls up, giving the impression that the figures are going into the head.

https://www.arnoldclark.com/challenge/

http://www.meetyourmx.com/#

http://neomam.com/interactive/13reasons/

Infographic webpage on the drawbacks of sitting all the time. http://time.com/sitting/

http://www.informationisbeautiful.net/

 

Task analysis.

The process of breaking down the process of even the simplest of actions can reveal some surprising things about how we move & act. By disassembling a task you can spot any issues with the process of reveal possible solutions to make it more efficient.

http://www.drawtoast.com/

Flow Chart.

I created a flow chart to map how the information might be laid out. This was a very valuable process as it helped to clarify my thinking and run through some dead ends before taking the project any further.

20170112_163216
Flow Chart.

Early wire frames.

I tried out a number of themes to represent my research, including plant based, electrical wiring and even an assembly line. I eventually settled on an educational theme. Some of the early wire frame attempts are here.

This slideshow requires JavaScript.

Early info graphics.

I produced the beginnings of a number of different types of info graphic layout. While they didn’t make it to the final cut the process did allow me to generate some ideas for graphics, positioning & colour. Some images of the process are here, ending with the almost complete info graphic.

workbook-layout
Info Graphic progression.

Once I had the layout finished I began tackling the question of how I would make the elements interactive. This isn’t as easy as it sounds in InDesign, however, I found the solution and managed to get some of the elements working.

The secret of getting roll over buttons to work is in creating overlapping layers and setting them to respond with different states such as visible/invisible.As you roll over an element it will for instance become invisible and reveal an underlying state such as a different colour.

 

Critical review.

The final PDF was very close to what I had planned for. I did find it difficult finding enough room to get as much relevant information on there without either leaving some out or having it crammed full of info.

Some of the text is at a smaller size than the rest of the elements.

I think the colour palette works well through out the pdf, and the elements are uncomlicated enough.

I would have liked to introduce more interactivity in areas such as the room overview.

 

Some further research.

How to Evaluate Design Ideas

http://www.creativebloq.com/design/10-steps-creating-perfect-infographic-3145672

12 Infographic Tips That You Wish You Knew Years Ago

Infographic Layout: Storytelling With Roadmaps

The Do’s And Don’ts Of Infographic Design

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s