iain carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfproject samples 2017...
TRANSCRIPT
![Page 1: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/1.jpg)
Iain Carson
Creative Coder Portfolio
Project Samples 2017 make
design
code
![Page 2: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/2.jpg)
“I’m studying towards an MSc in Computer
Science at the University of St Andrews.”
and I also love photography
![Page 3: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/3.jpg)
design
3 Iain CarsonCreative Coder
PantheonTableau
“Designs grow through levels –Ask the right questions,
set the right goalsmap intuitively
and write good code.”
![Page 4: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/4.jpg)
Pantheon
Iain CarsonCreative Coder4
Interactive information visualisation project in Tableau
“A vast, incomplete, list of famous peopleand their perceived popularity”
I use a combination of Excel, JavaScript and texteditors to manipulate, complete and trim data.
Analytical abstraction of meaningful data is based on experience,
creativity,goals,
domain knowledge.
![Page 5: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/5.jpg)
Pantheon
Iain CarsonCreative Coder5
Interactive information visualisation project in Tableau
Visualisation transformation, experimentationin use of marks for encoding values.
![Page 6: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/6.jpg)
Pantheon
Iain CarsonCreative Coder6
Interactive information visualisation project in Tableau
Calculated fieldscustom functions
parameter switchesand embedded web elements
enrich interactivity beyondTableau’s default.
Simplify through reduction, organisation and context, to enhance cognition
![Page 7: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/7.jpg)
Iain CarsonCreative Coder7
The audience is key. This one’s for those curious children
The client matters. Here’s one for professional historians
Pantheon
Depth of data.
Powerful controls.
Dynamic views.
Simplicity.
Reduction of data through code.
Make interactivity obvious.
![Page 8: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/8.jpg)
“I have a 1st class BSc (Hons) in Natural Sciences from
the University of Bath”
and I love a challenge
![Page 9: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/9.jpg)
design
9 Iain CarsonCreative Coder
The Tree of Appropriateness
Sketching
“Designing visualisations requires careful processand attention to detail.
I follow the 5-sheet design process to ensure ample ideas are considered before production”
![Page 10: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/10.jpg)
Iain CarsonCreative Coder10
The Tree of Appropriateness
Sketching Process and Visualisation Design
Data is hard to read.I start with tools that
make it easier
Sketching doesn’t have to be neat, at first. It just has to be creative, and the
more, the better. I don’t get emotionally
attached to sketches, no matter how
beautiful they become.It’s about ideas,
content,and potential.
![Page 11: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/11.jpg)
Iain CarsonCreative Coder11
Even small ideas can lead to bigchanges in the final visualisation
Some encodings work better than others.
I save elements and ideas which may not work for one visualisation for re-use in other projects.
Keeping track of ideas and inspiration helps me fast-track my design learning experience
![Page 12: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/12.jpg)
Iain CarsonCreative Coder12
Sketches can be high-fidelity, accurately represent encodings,
and be linked to real data.
It’s a sketch until it’s indispensable
The Tree of Appropriatenesscompares datasets from
1974 and 2017. It accurately represents
over 140 data pointsand double-encodes important
parameters throughcolour, shape and size.
I feel strongly that evencomplex, multi-faceted datasetscan be projected faithfully if encoded
imaginatively.
![Page 13: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/13.jpg)
“I have 4 years work experience in high-end
technical sales and team leadership.”
and I can’t wait to learn more
![Page 14: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/14.jpg)
design
14 Iain CarsonCreative Coder
SimpleGridFull UI Process
“UI design is immersive, almost boundless in scope.As a competent coder, team leader and project manager
I’m unafraid to branch into peripheral fieldsto make sure features will work well
from the engineer to the client.
simplegrid
![Page 15: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/15.jpg)
Iain CarsonCreative Coder15
simplegrid
I use my 4 years experience in technical sales, with elements
learned from MSc courses in HCI to extract user requirements
This system diagram wasclient-verified
early in the design process to catch any misunderstandings
I’m competent in the use of a variety of UML
techniques, and quick to builddiagrams if it aids communication
Interview
Questionnaire
Observation
Video/audio analysis
Just some of the techniques I use
![Page 16: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/16.jpg)
Iain CarsonCreative Coder16
simplegrid
This is a hybridworkflow-activity diagram
I created this to bridge the gap between contextual enquiry and UI design
It captures the customer’s workflow and offers insight into potential UI solutions
This diagram was treated as a visual, dynamic UI requirements document
The diagram is easily understood by both the design team and the client.
![Page 17: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/17.jpg)
Iain CarsonCreative Coder17
simplegrid
I gather materials from both real and digital sources
Moodboards, concept diagrams and mockups are excellent communicators of intent and potential.
I can build UI elements in a wide range of design tools
![Page 18: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/18.jpg)
Iain CarsonCreative Coder18
simplegrid
P1
+RG1
C1 +
+
P1 P1
+
+
+
When building a UI, I evaluate process and workflowfrom the ground up.
A new UI doesn’t just mean new looks; it presents opportunity for improvement
from the moment the user starts interacting.
As a physicist with computer science training, I’m aware of how my
design choices may affect technical implementation
down the line.
I don’t let that stop me from innovating.
![Page 19: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/19.jpg)
Iain CarsonCreative Coder19
simplegrid
I buildinteractive digital prototypes
usingPowerPoint,
myBalsamiqand InVision
I also see valuein physicaland paper
prototypes
Client feedback is critical at every stage of the design process.
As an experiencedtechnical sales engineer,
I know how to interpretcomplex specifications,
and how to sell my ideas in response.
![Page 20: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/20.jpg)
“I’m effective in JavaScript, C#, Java andFrench”
and I love discovering new tools
![Page 21: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/21.jpg)
code
21 Iain CarsonCreative Coder
I’m a Computer Scientist
Get me out of hereC#
“You don’t have to take coding seriouslyto make serious code”
![Page 22: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/22.jpg)
I’M A COMPUTER SCIENTIST GET ME OUT OF HERE
Iain CarsonCreative Coder22
Watch the video
![Page 23: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/23.jpg)
Iain CarsonCreative Coder23
I’m comfortable with both object-oriented
and functionalprogramming
This project was made in C#using a Microsoft Kinect
I’ve also used C# to build games in Unity
I’M A COMPUTER SCIENTIST GET ME OUT OF HERE
![Page 24: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/24.jpg)
“I’ve picked up Angular, WPF, JavaFX, Android, Processing, D3, Unity…”
and I love using them creatively
![Page 25: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/25.jpg)
code
25 Iain CarsonCreative Coder
IdeaManagerAndroid
“With less than two months’ programming experience I was challenged to write an Android app in
under two weeks.Here’s the result.”
![Page 26: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/26.jpg)
IdeaManager
Iain CarsonCreative Coder26
You’re probably still recovering from your Jungle Escape experience.
That’s OK
This project is somewhat more mundane
![Page 27: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/27.jpg)
“I’ve built apps for Kinect, Arduino, Android and the Web”
and half of that was just for fun
![Page 28: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/28.jpg)
make
28 Iain CarsonCreative Coder
VAPIRProcessing
“Big problemscan always be broken down into a series of
small problemswhich when addressed individually really
aren’t that scary.”
![Page 29: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/29.jpg)
Iain CarsonCreative Coder29
VAPIRVisualisation of Audio
and Physicality In Realtime
SWAY
DEMO VIDEO
![Page 30: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/30.jpg)
Iain CarsonCreative Coder30
VAPIRVisualisation of Audio
and Physicality In Realtime
DEMO VIDEO
VAPIR augments how
people experience
music
It creates visualisations
responsive to both the
music and the listeners
![Page 31: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/31.jpg)
Iain CarsonCreative Coder31
VAPIRVisualisation of Audio
and Physicality In Realtime
DEMO VIDEO
VAPIR is built under
Linux using an
MS Kinect,
Processing,
and Java Minim
My depth threshold
algorithm identifies the
nearest user in the room.
It then finds edges
and tracks bodies.
![Page 32: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/32.jpg)
Iain CarsonCreative Coder32
VAPIRVisualisation of Audio
and Physicality In Realtime
DEMO VIDEO
My sound analysis tool, made using the Minim library.
It uses the Beat Detect,
Fourier Transform and
Buffer classes.
I built my own tools to explore
elements of the visualisations before
the final designs were implemented
![Page 33: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/33.jpg)
Iain CarsonCreative Coder33
VAPIRVisualisation of Audio
and Physicality In Realtime
DEMO VIDEO
I built over
20 visualisations
before settling on the
final
four.
![Page 34: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/34.jpg)
“Everything in this portfolio
was made
in the last 6 months”
and that’s only the beginning
![Page 35: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/35.jpg)
make
35 Iain CarsonCreative Coder
AxteroidsArduino
“I aim to excel instinctively.”
![Page 36: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/36.jpg)
axteroids
36 Iain CarsonCreative Coder
fully functioning arcade game
joystick
tap with potentiometer calibration
LED feedback
physical interface
powered by Phidget
designed from the ground up as an experiment
in event-based programming.
allowed iteration on control position and
software behaviour.
Sensitivity tuning dial integrated following
testing in multiple environments
user-study based control system
![Page 37: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/37.jpg)
37 Iain CarsonCreative Coder
coded in JavaFX
hybrid event/game-loop architecture
infinite starfield animated background
scorekeeping + hi-score
unlimited waves of AI-driven enemies
![Page 38: Iain Carson design code - iamiain.co.ukiamiain.co.uk/media/files/isc2017.pdfProject Samples 2017 make design code “I’m studying towards an MSc in Computer Science at the University](https://reader034.vdocuments.net/reader034/viewer/2022042100/5e7c4e901d04b718e7263a0c/html5/thumbnails/38.jpg)
That’s me
please get in touch