Below is the URL link to my final Music and Study visualisation exploring the influence of listening to music while studying. (Made for desktop viewing only)
I decided to remove the “Stories of Me” screen which I was planning to make look like a bedroom wall so you would scroll down the wall then down the desk where my charts are. This proved too difficult to make look realistic due to the perspective change and the lack of imagery I had.
Instead, the website will open at the start of the visualisation. Looking back over my title type I felt it looked a little flat so I experimented with different curved type paths and colours finally choosing the wavey type path in yellow as it looks livelier and had a sense of movement & rhythm just like music.
After writing the rest of my descriptive paragraphs I added the yellow lines (acting as headphones) to connect the phone playing music to the rest of the visualisation, I like how the yellow colour linked with the title and tied everything together.
A quick sketch I did to remind myself of the main patterns and elements from my personal data that I can discuss and highlight in my final visualisation.
Halfway through making my final visualisation I found that I didn’t have enough of my own images of objects to fill the website to make it look like a desk so I used some free mock-ups to fill in any gaps. The url links to the mockups are attached to the images above.
After receiving feedback from Eden I continued developing my design by dropping the unnecessary extra screens and adding a GIF animation and using more meaningful interactions. To make the study theme shine through more I attempted to make a desk for the phone and have a bedroom wall as the header image.
I wanted to utilize the benefits creating a website on Muse offered me by making a GIF alongside my bar chart. I initially was going to animate the whole chart however, I didn’t want to jeopardize the accuracy of the chart.
In comparison to my previous bar chart, this one replicates a music visualiser referring back to my personal data about music with each rectangle a key for a total of 2 skips.
I made the GIF by creating a short video animation in After Effects that I then exported to Photoshop and exported as a GIF file. I’m happy with the final product as I feel like it makes the chart look more interesting and intriguing.
Cool and helpful website created by Adobe to show the different scroll effects Adobe Muse is able to achieve.
I have recently been experimenting with creating more meaningful interactions within my visualisation. The intention was to have the sections of the pie chart and the radial chart pulse together (in genres) on rollover. I achieved this by creating vector shapes in Illustrator which I then grouped together then exported as separate SVG files.
However when I went to preview my interaction it became clear that the rollovers overlapped causing multiple sections of my charts to pulse at the same time. I’ve been researching into ways to fix this but haven’t found any viable solutions.
I may need to improvise and instead, try using a hover scale widget or have only one of the charts interactive but and using colour to show the connection.
Before our studio classes finished I met up with my tutor Eden and showed her my current visualisation on Muse to gain some feedback and advice.
Eden found the “purpose” and “process” sections were unnecessary and advised me to focus on the visualisation itself as that was what was the most significant factor. She also found that my study theme wasn’t clear and that my titles for my charts weren’t descriptive enough and lacked the detail needed to be understood instantly.
This critique was very helpful in reminding me what the key factors of the brief were and how important it is to use interactions that are meaningful to the visualisation and add depth instead of being gimmicky and unnecessary. For example, the image below used expanding triggers to show the chart information and the descriptive text, adding no character or significance to the visualisation.
I drew Eden’s feedback on my design sketch in blue pen to help me visualise exactly what needed improving and the types of widgets, transitions and interactions I could use that would be more effective.
How To Think Visually Using Visual Analogies
Most research in cognitive science explores how we see things but little research is done on how we understand what we see.
Understanding is the ultimate test of how good your visualization is. So how can you make people understand? Show something familiar and analogize. If you know nothing else about visualization but pick the right analogy you are more than half way there. This is what a professional designer does - and there is no substitute for analogies.
How do you choose the right analogy? In this grid I organized analogies from the abstract down to the more detailed. I grouped them by similarity in shape. The goal is to enable you to quickly see the possibilities and “try them on” your information. With time you’ll be able to do all of this in your head. But for now this is a shortcut.
Let’s start simple and abstract.
Great examples of how charts can be used in various ways for different purposes and messages.
Interesting article about the effects of listening to music while studying. I like the phrase “The Mozart Effect”, could possibly use it as the name for my visualisation.
Using my ideas from my re-developed sketches I created a second draft of my website design with two linked screens. The first screen is the homepage and uses typography and illustrations to explain the purpose and process of my visualisation, acting as the introduction into my “story” or visualisation which is on the second screen.
The second screen shows a phone playing music with the line (headphone chord) linking the charts together. I used triggers to make the text interactive and expandable.
As my intention is to create a data visualisation in a website format I re-developed some sketches of possible layouts in a scrollable orientation lengthening the vertical dimensions.
For image one I was thinking of adding a profile section to my website that divides the homepage and visualisation. Because this brief is about personal data and telling stories I wanted to make it more personal by having a picture of myself with a mindmap like design surrounding me, highlighting what my visualisation is about.
My other idea (image 2) was to extend my desk theme to include my bedroom wall as the background of the homepage with the visualisation contained at the bottom on my desk. This would create a more interesting perspective and relate back to my personal data collection of Music & Study.
Quick video showing the process involved in creating my chart elements on my website and the interactive text. I first began by creating vectors of my charts created in Infogram then transferred them to Muse where I then added trigger widgets to my text which allowed them to open and close when clicked.
I am still researching and watching tutorials on different effects and interactions I can create for my final visualisation.
Before I started to create my final website design on Adobe Muse I wanted to mock up the layout on InDesign using real photographs I took of various objects that occupy my desk at home.
For my final visualisation, I plan on creating an interactive website using Adobe Muse. As my data is about the music I listen to and how it affects my study I decided to theme my visualisation around a study desk with my phone in the centre and the headphones visually linking the different components together.
I created my visualisation on my memory of recently breaking my external hard drive and almost losing all of my uni design files aka “A designer’s worst nightmare”.
I first recalled the location and my feelings of my memory then created a rough timeline of the events that occurred.
For my visualisation, I took inspiration from Nigel Holmes “Wordless Diagrams” where he usually uses a two-tone colour palette and very simple pictograms in a linear instruction-based layout.
I used the online Infogram app to create a series of charts that I can use later as part of my infographic.
Other possible comparisons:
My final chosen 6 data variables I will be using for my Infographic are:
The above chart shows the 6 variables grouped into the genre of music they fall into with the time, skips and volume being tallied up for graph prototyping.
A chart of all of the data I collected over the span of 23 days (approximately 3 weeks).
After analysing the data I will narrow down these 10 variables to 6 variables that are most relevant and important to my final infographic.
A) Key design principles found in Neurath’s Isotype charts
B) Example of Isotype in use in contemporary times
Labour Day - Francesco Franchi
Labour Day is a visual representation comparing the levels and areas of employment and unemployment in different locations in the world, with the year 1971 and 2010 placed in juxtaposition.
It was difficult to find a chart that consisted of all the above Isotype design principles but this one did use a few similar concepts including simplified, standardised colours and a promotion of comparing & contrasting.
This chart does, however, lack the intense simplicity Neurath’s charts had while still maintaining a quick recognisability and a clear sense of accuracy.
Types of Charts I will use:
For my design, I plan to use the term “study” as a theme for my overall design by having a birds-eye view of a desk and a phone in the middle with headphones linking the different charts together.
I first collected data that focused on time and school, breaking down the data into the Years, Terms, Months, Weeks, Days and Hours of school education. I then put this data into an Excel spreadsheet and created a Bar Chart, Pie Chart and Area Chart to visualise the data.
Final Infographic I created using my previous data collection and charts created through Excel and Datamatic. I used a fun and colourful colour palette leaving plenty of white space and simple text to not over complicate the overall design.
Supermarket Aisle - Cereal Data Resource
Excel Spreadsheet - Cereal Data Collection
Pie Chart - Amount of Cereals
Multiple Doughnuts - Flavour of Cereals
Bar Chart - Price of Cereals