Data+Image+Interaction

Another Tumblr rant by Deb Polson... but this time about all yummy things associated with UX and UI design... data dramatisation, visualisation and interaction. https://twitter.com/debpolson | http://www.linkedin.com/in/debpolson My latest Data Vis Project: The ECOS Project Facebook Page | The ECOS Team Process Journal My other Tumblrs: http://designfictions.tumblr.com | http://argplay.tumblr.com | http://game-academy.tumblr.com

[livingdata]

Special Guest Presenter: Sofia Woods

As part of our 2015 CMS Program

Sofia Woods - Director at Shortie Designs. Co-Coordinator of the Brisbane WordCamp 2015. Am also a rookie DJ.

https://twitter.com/shortiedesigns

http://shortiedesigns.com/

https://www.facebook.com/SHORTIEDESIGNS

On Why We Use Wordpress

It makes good business sense (just acquired Woo Commerce... adding to it’s growing dominance in the market place)

Clients have control over content - allows clients to publish confidently on you have delivered their web 

Rapid Development - themes, plugins and frameworks to produce work quickly and iteratively (allowing you to be cost effective and competitive)

No need to write special functions (such as calendars etc)

Open source non proprietary (clients do not to pay a license fee to use/access)

It’s good for SEO

On Working with clients

Consult + Plan and Structure + Design and Develop + Testing and Launching (including support resources for client to maintain their new web product) + Review and Evolve

On WP Tools

Theme Framework - such as Genesis

Wordpress Codex

Child Themes and Plugins

Team Communication tools - Slack. Australia Slack group.

Build responsive sites - The latest Google initiative that some are calling the ‘Mobilegeddon’ - Google has changed its algorithm to favor mobile-friendly sites. See Forbes article: Can Your Business Survive Google's 'Mobilegeddon'?

On Working in the Industry

Commercial web or digital agency

Freelance

Your own agency

Theme & plugin agencies

VIP WordPress Agencies - such as Auttomatic (producers of Wordpress) and  Human Made

On Wordpress Communities

International conferences, Meetups, Wordcamps

On Building a Professional Profiles

LinkedIn, Twitter, Slack 

Blog - professional ideas on current trends, your processes, sharing code on github, thoughts on updates... problems and challenges encountered and/or overcome

On Local Internships

Orange Digital, Josephmark, Thoughtworks, Shortie Design!

[livingdata]

Fun in the lab today with a film crew... demonstrating and discussing our recent work with VR and gesture technologies. 

[livingdata]

DesFi - Considering the past to design for the future

Introducing 2nd year Interaction Design undergraduate students to my favorite topic - Design Fictions (see sample slides from todays lecture above). It sparked a thoughtful and quite hilarous discussion as we shared stories of our own histories with digital interfaces (specifically social networks)... and thoughts of possible future scenarios.

This was my last lecture in this series for this course. This year I experimented with various techniques to engage the students in a large lecture theatre to participate more vocally and critically... some things worked and others were a tad awkward... but it’s the best fun Ive had in such a formal and vast learning environment for years. A special thanks to this years cohort of Interaction and Visual Design students. I have thoroughly enjoyed your company, ideas and energy.

My Design Fictions Tumblr: http://designfictions.tumblr.com

[newishmedia]

[livingdata]

new inspiring creatives of a new dynamic web

The UI Design cohort for 2015 where asked to identify a ‘problem’, conduct research and collect data to justify and support their proposal to dramatise, visualise, animate and distribute an important story and inspire action using a single web page only…

So far they have kept online blogs to share their research and design progress. In the coming weeks they will work on producing the final interactive projects employing their new skills in basic web development. A sample of thoughtful and creative responses…

The need for more blood donors: http://smagin-interface-design-journal.blogspot.com.au/2015/03/resolved-interface-designs.html

Endangered animals: http://thomas-dxb301.tumblr.com

Energy drinks: http://truth-about-energy-drinks.tumblr.com/post/115373880866/panel-12

Child vaccination: http://alanahdowlingdxb301.tumblr.com

Anxiety awareness: http://hollyhinterfacedesign.tumblr.com 

[livingdata]

I am really enjoying following Holly Hutson’s project progress this semester:

http://hollyhinterfacedesign.tumblr.com/

Holly is a current student of my UI design course where we are experimenting with new trends in data visualization, dramatization, animation and interaction in single page web presentations.

This is a new approach for us... but the students have responded with energy, resourcefulness, thoughtful analysis and creative design work.

[livingdata]

Today Dave Wallace is introducing Javascript to our UI design cohort...

Dave’s awesome lecture notes: http://dave.if90.net/kib204/intro-to-javascript-3/

Some yummy javascript resources:

http://d3js.org/ Here you will see links to projects that demonstrates some of the visualisation techniques discussed in Debs lectures (see image above).

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG, and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation.

Code Geekz: http://codegeekz.com/best-javascript-data-visualization-libraries-developers/

W3Schools: http://www.w3schools.com/js/

More from Dave...

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://www.w3schools.com/js/default.asp

http://stackoverflow.com/tags/javascript/info

http://www.codecademy.com/en/tracks/javascript-combined

http://www.lynda.com/JavaScript-tutorials/JavaScript-Web-Designers/144203-2.html

[dxb301-rani]

A big component to this assignment is finding the drama in statistics and rather than just presenting information. The completed project should at least be more synthesised in way that allows users to be able to engage and understand the information easily.

This article by Creativebloq...

[livingdata]

A terrific resource that further explains the process of ‘Data Dramatisation’ (the topic of last weeks lecture)...

Thank you, Rani, for posting this. 

[livingdata]

I found this recent work while searching for an earlier work posted by student, Steve Lewis after our Data Vis class discussion last week. Both data interfaces promote information regarding the World Economic Forum (WEF). The one above refers to WEF 2015, offering some insight into the backgrounds of the participants that attend.

A record number of participants will attend the 45th World Economic Forum Annual Meeting in Davos-Klosters, Switzerland. In addition to the 1,500 business leaders from over 100 countries, more than 40 heads of state and government and 300 members of government will attend...The interactive graphic at the top of this page allows you to breakdown participant data across gender, region, country, sector and age. Georg Schmitt is Associate Director, Public Engagement, Media Relations, at the World Economic Forum. 

Most alarming is that only

Seventeen percent of Davos participants are female.

The post on Steve’s tumblr was created by by Jan Willem Tulp  based on data derived from a survey of experts from 72 Global Agenda Councils of the World Economic Forum in 2010... and focuses on links between issues and agendas... which provides a different, yet valuable, insight from the work above. 

The work: http://www.janwillemtulp.com/worldeconomicforum/

The source code: https://github.com/janwillemtulp/wef-dataviz-contest-nov2010

Jan created this work in response to a competition: http://www.visualizing.org/challenge/world-economic-forum-data-visualization-challenge  Here you will find links to the winning works... some stunning stuff!

Using data derived from a survey of these experts, interactive designers are asked to create a data visualization that will help elucidate the interconnectedness among issues, highlight the emerging clusters and catalyse dialogue at the Summit between the Councils.

A link to the data file http://www.visualizing.org/sites/default/files/data_set/Marc%20Schwartz/Interlinkage%20survey%20data.xls

[livingdata]

Welcome to the 2015 Cohort of Interface Design

A UX Designer appreciates that design artefacts exist in systems of interaction… And that a UI Designer provides interventions in these systems to improve human experience… 

Today we will discuss the program, the project and intended outcomes.

And we'll start with some basic visualization warmup exercises

[livingdata]

The Norse DarkMatter Platform

http://map.ipviking.com/

It doesn't take long to understand the visual language of this live data visualisation... as colour, line and animation has all been exploited expertly to simplify complex interactions in a single screen effectively... also allowing for some user control and experimentation with the interface, deepening the insight it offers.

Norse Delivers Real-Time Visibility into Cyber Attacks in Progress All Over the World... http://www.norse-corp.com/

Images above were captured from http://map.ipviking.com/ at 2pm on Wednesday December 10, 2014... after a run time of approximately 2 minutes.

 At this point, apart from being dazzled by the stunning graphics and processing mechanics, I noticed that the US was responsible for the highest Attack Origins and the Attack Targets... and that seemed fair... until I realised that the Targets under Attack by the US were predominantly within the US. As opposed to an overwhelming number of Attack Targets on the US coming from outside of the US. 

After running for 16 minutes, the US Attack Targets increased to over 8284 and the Attack Origins had, comparatively, only increased to 2369.

Also after 16 minutes, China had jumped to the top of the Attack Origins list, already doubling the numbers of US attacks... and didn't appear on the Attack Targets list, at all.

According to David Glance:

The attacks that originate in the US and China may actually be infected machines, including PCs and mobile phones that are remotely controlled to join in attacks started elsewhere. http://theconversation.com/i-dont-like-cyber-mondays-cyber-attack-takes-down-hundreds-of-sites-34913

[livingdata]

AI websites that design themselves

The Grid harnesses the power of artificial intelligence to take everything you throw at it - videos, images, text, urls and more - and automatically shape them into a custom website unique to you. As your needs grow, it evolves with you, effortlessly adapting to your needs... websites that evolve with purpose

Stephen Hawkings may see this as the middle of the end of human kind... #wink

Prof Hawking says the primitive forms of artificial intelligence developed so far have already proved very useful, but he fears the consequences of creating something that can match or surpass humans... The development of full artificial intelligence could spell the end of the human race. BBC Article, 2.12.2014

Well, for now, the AI just may replace human web designers... along with car factory workers, bank tellers, soldiers, surgeons... #shrug 

[livingdata]

Animated History of the Web

Fastcompany article (5.12.2014) by John Brownlee

Thanks to Froont for these 9 visualisations of the History of the Web. This takes care of at least one lecture for next semesters class. 

Froont, a San Francisco company that makes tools for web designers has created nine GIFs that show just how far web design has come in the past 25 years

Sandijs Ruluks has also visualised the 9 basic principles of responsive web design in animated gifs here: http://blog.froont.com/9-basic-principles-of-responsive-web-design/

[livingdata]

Abstract/Info/Motion Graphics

sourced from a Wired article (12.8.2014) by Kyle Vanhemert:

Carl de Torres talks about his abstract designs for VisaNet that handles over 7 trillion dollars of transactions every year. Carl de Torres asked Visa if 'each and every transaction is viewed equally in the eyes of the network'?

Each transaction has a key set of variables that give it its unique signature... merchant type, amount, time etc. The design process resulted in the creation of transaction snowflakes. 

“As people continue to build ever more complex and invisible technological wonders, abstract graphics will be even more necessary to communicate how they work.”

This is clever, crisp work... and much is to be understood from it in terms of data dramatisation as a design practice. But I tend to agree with this comment posted to the Wired site in regards to its actual effectiveness as a communication device:

The process of this work is very interesting. It's hard for me to see the communication value of the Visa work though. Beauty and visual interestingness have value to be sure. But those snowflakes would require an unmanageable amount of encoding on the part of the viewer (blue means credit, a line means swiped, pink means a certain retailer type, etc etc etc) to be useful as storytelling devices. What could I know about Visa's business after seeing these that I didn't know before? Maybe I'm demanding too much of these, but "storytelling" is the whole context for this work. Christopher Casey

[livingdata]

A terrific collection of data visualisation using HTML, SVG and CSS

[livingdata]

Point of view: What wearable tech means for social media | 1000heads: The Word of Mouth People

When a wearable device transmits information to a mobile unit, it becomes part of a data ecosystem.  In this use case, the benefit of wearables is as much to collect information, as for the user to capture it.

Here in Australia, the subscription TV network, Foxtel, has released a wearable tech campaign where fans get to ‘feel’ the impact of tackles, heartbeat and the muscle movement in kicking a goal.  Players movements, heartbeat and so on are captured by a transmitter shirt, and then an app on phones is used to send the same signals to receiver shirts, available to subscribers of the network.

by Joanne Jacobs on 28 March 2014

[livingdata]

Brian Williams raps to ‘Rapper's Delight’ on Jimmy Fallon’s ‘Tonight Show’

Brian Williams and Lester Holt (NBC Newsmen) performing Sugar Hill Gang's 1979 classic "Rappers Delight.... well , not really 'performing'?

http://www.nbc.com/the-tonight-show/segments/1401

Fallon first started creating videos of Brian Williams "rapping" while hosting Late Night With Jimmy Fallon. Past mashups include Warren G's "Regulate," N.W.A.'s "Straight Outta Compton," and Snoop Dogg's "Nuthin But A G Thang." But "Rapper's Delight" might top them all. Read more: http://www.usmagazine.com article 

I'll be playing this video as an introduction to my MashUp lecture this week.

Although I am primarily interested a newish kind of interactive mashup... multiple data sources + compelling UI ... I couldn't resist posting this as a reminder of the origins of the mashup community. 

Thanks to https://twitter.com/Mic_K for the find!

Normally I open with The Strangerhood Machinima by Rooster Teeth and was a big fan of their earlier  Red vs Blue Halo Machinima series.

A fav machinima from way back (2006) is the 1K Project II, a mashup of 100 cars from the Trackmania game by BlackShark.

[livingdata]

From Todays 'Interface Design' Lecture. The very first of the semester.

This is yet another pairing of images to illustrate my obsession with SciFi worlds and DesFi experiments.

Reflections on the past and fantasies of the future can tell us a lot about how to design user interfaces in the here-and-now.