Yes, sir. I'm andy and
My talk is gonna be about designing with code. It's not necessarily Gonna be a workshop
It's just kind of it's more anecdotal kind of my career path through education
Kind of like getting into the workforce and then starting active theory, and how that's kind of developed over the years
So yeah, let's kick it off
Um so this is the only graph in representation. I'll go blast through it, but
This is kind of it represents me
I'm kind of I'm kind of in that middle bit where I wanted to be a designer
I wanted to be a developer people kept trying to like
Take me into one of the other there wasn't really a place to me in the career world
I was a design I started out as a designer. I didn't really like people developing what I designed
I went to a developer
I didn't really like the design people were giving me so I really wanted to be both, but that didn't really work and so
Hopefully this kind of resonates with maybe some students who are going through some similar sort of identity crisis
I'm seeing a lot of sort of roles coming up these days
Interact with designer create developer creative technologists that I really know what that means
Diviner someone from my graduating class called themself. This it's a terrible word
But I understood without getting at you know they wanted to be both they wanted to represent themselves in both disciplines
They didn't want to be kind of pigeon-holed it to one of the other
and so
so this
This is the very first thing. I have a graphic design Justice in
2004 and I did this in MSPAint. I had no concept of typography
Layout I
Just creatively express myself through him as paint. I had no idea what I was making
And it looks terrible or get it off the screen as soon as possible
But you can kind of see what I was getting at you know there was some influences there
I've got like a silhouette of the strokes my favorite band at the time and the right there
And then in the bottom right you've got my myspace layout and myspace was just a great way for me to express myself
And it was the ux it was terrible it was there was a music player there. That was hidden you couldn't turn it off
Text text was right aligned the posters on the right you know as you had to work out how to use my myspace page
but it was it was a
Great way for me to learn how to creatively express myself through code and design and it was kind of this mixture of the two
worlds
And this is kind of where I started to work out is what I wanted to do and then shortly after that
This is where I came across this website on FwA
This was a website for Leo Burnett such agency in Chicago, but this website blew my mind this website
Really kicked me into gear that this is what I want to make I wanted to make creative expressive art on the web
This this website you could you could draw with a pen it was zooming in and out. You know it was crazy
this was at a time where I was looking at web sites like myspace like
Big comm sites and I'd even know you could do this sort of stuff
And so that's when I realized this is what I want to do and then I went into university
That with this goal in mind this end goal. That wanted to create things like this
And it started out like learning how to do some sort of design
This is the first thing I didn't illustrator is for a fake product
where it would zap you which if you fell asleep if your head started saying would zap you and you'd sit back up, so
It was yeah, it was a fake product bit
But I could kind of see what I was trying to get at it was uh it was my first coach trying to create layout
Spacing really having go that sort of stuff
And then that's what I started to find things that I liked you know like you as a designer
You kind of you start going down a path?
Learning things that make up use the designer and this is something that really inspired me this sort of this work from a design agency
In London called non-format the really great work definitely check out this stuff. They have a lot of really good books
But I found this style so bold and so
Graphic and so like just strong and and I really got inspired to do this sort of work
And I started taking on kind of like freelance gigs and this is what I did for a friend for free
You can kind of see that some inspiration was taking there
And I obviously I went a bit crazy with the photoshop layer affection of his clothes on drop Shadows and gradients on flexions
You know that I pretty much tried everything it was
But um it's it's good to look at this stuff
and kind of see how you're inspired to create this sort of stuff because so much in design is just
You slowly get better you don't come out being a great designer
It's it's a very slow progress to learning what you like and how to get good at stuff
And then going through university, this is my first creative coding project that I did
It was taking
the Game Tetris and kind of break that out into multiple multiple components one person would
Rotate the block for the giant steering wheel that I got from a bus station
One person would move the block left and right with these push panels that I got from a hardware store for like
Bathroom stall doors and another person would drop it with a it was like a sawn-off broomstick handle
And then I coated it all in processing. Which is not really a program meant for gaming
It's a kind of like a sketch program
I'm looking into all that up with an Arduino but but doing this sort of stuff
I realize this is what I love to do. This is what I want to do
I wanted to create things that look nice
That a technically complex and kind of create in an emotion and create some sort of like Story Arca there
And then so I left university
And this is my first real job. I got this is what I was doing when I when I left university
I was doing sites like this. I got to design this I got to develop. This this is a silicone web site
I think yes EpPs's are here, but this is I screen recorded this a week ago. This is still live
So you can still go to it?
But this but this too is this is my first go at creating like an expressive creative website
The code is terrible it
I believe all the Javascript is in a script such a s file which is about 5,000 lines big really terrible jquery selects
But I i realized I really liked parts of this project
But I didn't want to do big dog comp sites and so I left this job along with other jobs
To kind of try to do more creative expressive work, and that's when I created
This Portfolio site this is an earlier version
It did actually look like this when I went live but this is my first group creating something that was a little bit more
artistic and creative
Where I took a 3gs example, what kind of hacked it up a little bit overlaid some graphics on top of it
It was my first go at creating something that expressed myself, and then I wanted to use this as a way to get
out of the industry that I was into something a little bit more creative, and that's when I
Submitted that site to awards and this got picked up by a very talented developer called Michael anthony
And this he found me and then we talked for like five hours
And he sent me this website, and this website blew my mind at a time. This was done in old Javascript and csS
I haven't seen anything like this
This was kind of at the pivotal point when flash was on the way out and people were trying to work out
What's the next big thing and this was it this was it it was?
It was creating very creative animated websites completely with Javascript. He sent me all the code for it
It was it was crazy this guy is super talented
And that's when I realized that this is what I want to do
This is what I wanted to come to the us and give up like so all my stuff get married move to the us
For this sort of work, so this website was really pivotal in that moment
But yeah, I mean it's it's amazing. I mean looking at it now. It's it's it could be relevant today
And that's when we started active theory
This is this is a very bright day in venice. I I photoshopped myself in there cuz no one else could take the photo so
I'm not too sure if you can tell maybe my photoshop skills are all right
But um we still use it to this day. This was taken in 2012. This is a couple of months after he said active theory
That's my two amazing business partners there with Michael in the middle and Nicola like on the right
And the first project that we did was class of Akeeba
Clouds over Cuba was a project that we did with a very talented director. Ben, Trickle Bank
But this was a project that we just we did starting out of active theory
and
We just went nuts with this is this is a project like when you when you put it all in the line
And you just want to do absolutely everything you can we just went crazy with absolutely all of this stuff
The design kind of got given to us, but we animated everything everything. We possibly could we just kept staring at this website
Animatic every little element and and one thing that you kind of noticed in a lot of our work is we record using a camera
Playing with the website we don't take screen recordings because we want
We want to make sure that this is the actual product
It's not it's not an after effects comp this is how it actually how you actually play with it
So if you kind of go through our work
You'll be able to see that we want to represent the work that we create how it actually gets built you know
That's the final product. It's not a comp. It's not it's it's not a render. It's it's how it actually gets built
That's the thing that matters and this was a survey
This is the first time we ever did that and this kind of been the way that we presented work forward
And this is that very first office where we clap code includes our cuba?
Will sitting there on $10 iKeda's this is in the attic event of an architect paying very little rent
But it was a lot of fun
you know it's it's super scrappy, but you you need to kind of start in a really small way and build up from that and
then in 2013 we kind of got our big break doing racer and race it kind of came off the back of
creative lab kind of not
Necessarily knowing how to do a prototype we had done some some socket connections using clouds of Cuba to get this project
And then Racer was very much
in iteration of
A
Prototype like making it making it kind of like adding on features getting it to the point where it cuts that we're kind of look
Like this, but it was very much a lot of the design was done in code
Just because we kind of this is our first go at
Developing for really low Pad Android devices a lot of csS animations wouldn't work when you use Svg some places came at some places CSS
Some places now. It's a lot better, but back then Android for the web was was was not great
It was in a pretty bad place
And so just getting things to even like touch the screen animate you had to kind of like
Know how to how to really work the browser
And that kind of translated into an installation component where like the tracks were
embedded in this big table
And it was sock connections at the top and that's kind of us a little bit delirious after all the projects
And then on the right we were a little bit crazy along the tracks and had people kind of crashing into each other and stuff
like that
And then jump forward a couple of years
This is when I started concepting on paper planes. This is one of the first
Designs that I did for favorite planes and this came off the back of what else could we do that connected multiple screens together?
And something really simple was just kind of like just holding your phone like I pay a plane and throw I get into another screen
And since this is one of the earlier comps
And this is this is the only comps I ever did for paper planes paper planes didn't really exist in design world
Afterwards we kind of it. Just got straightened development and this
this is kind of what it ended up as
very playful
we've added things like a net a lot of the ux we kind of just worked out like what like how do we reduce the
Amount of you, why?
This project got realized with the very talented developer next in the gorgon who sit in and I think gordon you stood in there
But this was this project was very close to my heart and and it was great to see it come to life
Because it was such a slow iterative process to the point where you could finally release it
And this got released on the biggest stage ever
At google I/o this was the launch date for paper planes, and it was amazing. You know
thousands of people
Interacting at the same time with the mobile phone throwing into a giant chrome browser. You know it's just such a
it's such a pivotal point for the web and for my career to create something that most people can connect with
And this is the sort of stuff that I've always wanted to do you know this is
This is the moment which which really meant a lot to me
and
I put this slide in because
Back that the previous slide, where you saw the stadium
I was there late at night like couple of days before the installation launched tweaking this tweaking this globe to make it look better and
So much of the sort of work that we do and that's kind of what this talk is about
It's about iteration when you kind of look at these two things side by side. You're like, okay one is definitely better than the other
But when you go down a path of creative trying to make something better. It's very small increments
It doesn't actually look that much different every time you add a little layer. You're like
Oh, maybe we should make this gradient slightly tweaked, and maybe we should make this drop shadow purple instead of black
Maybe we should make this add these reflections all these little layers
Kind of like add on to this final product, but as you're doing it
it's really hard to see that and so it's
One thing that I'd like to get across is that you need to be able to trust yourself in your judgment
So much about design is opinion and subjective opinion. So you need to be able to go know this is actually better
I'm headed in the right direction and sometimes it's not you go backwards, but it's very small increments
And that's true about all about work although all of the work that I do is
So much of these little milestones they get through it starts out as something kind of ugly. You may not like it
But then it's little tweaks to get to the point where you're happy with it
and so this project was done for Hennessy and one site, but
this project
Was couldn't really be designed in the sense that a lot of the data
Because it was it was taking lidar scans from the actual vineyards
A lot of the comps were just kind of like looking for comps
And I do a lot of this sort of comps for a lot of our projects
But this one even more so it was very abstract. This is the first
This was the first round of design that I did for this which doesn't look anything like it did
But it was about trying to represent
the process of creating Konya through this chaotic process and then each chapter was a
representative aspect of that process of Vineyards
It was just kind of like I just find these crazy vines and slap the word vineyards over the top
But it was trying to represent
A
feeling or an emotion
Not so much like this is actually what it's going to look like but this is the feeling that it's trying to portray
and the next round of
Complicated Krank something a little more photorealistic. You're like all right, so we have fire to represent the distillery process
How do we represent fire like let's add some smoke let's add some particles some bread particles. How do you taste oq?
Let's take a silhouette and put some oak images in that stuff
So we kind of like knew what we needed to shoot and how we needed to build this stuff?
but the design was very much looking feel and
This is all the equipment that we use to record it in the top left. You've got this lidar scanner
There's a two hundred thousand thousand dollar piece of equipment that shoots out all these little laser beams over the course of two minutes
to produce this 200 million
Point lidar image, it's so complex. It's so highly detailed if you scan out just looks like a 3D model
and then on them on the right you've got like a
Pretty expensive red camera with a kinect on top and you've got another lidar scanner that was used to scan objects
and then you've got sound guys that were actually recording sounds as
We were kind of going around tapping on wood dropping nails stuff like that
and
So this this project was very much taking
Taking the lidar Data and creating something that could be played with and when I say this couldn't be really comped
It's like you couldn't really take this into cinema and be like no, this is what its Gonna
Look like so much in webgl it just it doesn't really appear the way. It's gonna appear in another program
You need to see it in webgl and make decisions based on that, so
Taking taking a 200 million 200 million point lidar data and reducing its 200 thousand you kind of have to make these creative decisions
You're like what oh for this for this particular scene you had to remove them had to remove the Roof had to remove the walls
You had to selectively remove points I?
Did it based on distance and then that was too precise?
I had to do it randomly
so there's a lot of iteration to get it to the point which made it felt nice and
So much about this project was just iteration it was just night after night
I was tweaking and tweaking and tweaking until you got it to somewhere. Where you happy with it
But yeah, there's a lot of fun
I mean, this is this sort of project is what I love to do where it's it's it really is just this
Creative process through making something from scratch, not really knowing how it's going to turn out
But trusting in the process and trusting your own opinion
And then this is a project that it's the last project that I'll show you
But this was more of a personal project
Where I really needed to get more into webgl. I wanted to learn more about Shader code, so
This this particular site definitely check it out. I
Didn't really design this at all. This was done through iteration, and I was like
Each different song was trying to represent an emotion or a feeling
And then you kind of take that as a concept and then you build around that so I'll just take one example
So the very first one I just asked the artist worked pretty close to it. I was like
What does this mean to you? What does this mean? He says he just said it was about like
Being thrown around having no control, and I was like alright. No control of falling
What about you like going through a tunnel?
And then I kind of landed on this concept where you're kind of like didn't really happen to have any control over and you're kind
of floating through this to create something which
which felt like you were kind of like moving through space and getting to this final image was just
Iteration you know you you start out with two cones that move eight into each other you add some noise, so kind of pulsates
You add this little worm guy that was like fifty concentric circles that kind of look to each other
But so much of this is just creating something
Not really knowing with the end product is but you try not you're really holding on to an emotion or a feeling
And that's all I'm going to talk to you about projects
But this is this is the question that I always ask myself and it might seem obvious from a macro level
Obviously you want your projects to be better
But this is a this is a question that I've always asked myself on a micro level
As you kind of go through it might seem daunting, but you can always make little things little tweaks
and that's that's the easy stuff like that's
Your like would this be better if this I can animate it would it be better if this you extra slightly different would be better
If this color was blue and set a green all these subjective opinions is how you make things that
Get to the get to the sort of level that we make it's just iteration of the iteration after iteration
So next time if you're kind of working
and you kind of get stuck focus on something small something really small that you can tweak and make better and
Sometimes sometimes the answer sucks sometimes the answer means you have to refactor an entire thing in order to make it better
But it's worth it
It's definitely worth it because this is the the endless pursuit of perfection getting to it
Getting to that point where you can't ask yourself this question anymore
What you've done everything you possibly can and then that's when you release it and that's how you make great work
It's it's this iteration because next time you do a project
You'll be able to take that knowledge and make it even better
And so if every project that we've done through active theory is this really slow progression through our own
Individual style myself and Michael and people that work with us
Making work that makes us happy making work that subjectively in our mind is perfect
And then this is my last slide. I'm sorry
This is my last slide. This is something. I started a year or two ago
But I found it really important. I didn't really know what what I was doing at the time?
But as I kind of just exists on the internet
I find things that I like and I slap it on this tumblr
And I can honestly say that I like this stuff like this
Represents who I am as a designer I can go to this and it can be like okay
This is this is things that I like this is my own individual taste my own visual style
I can't come to this so I feel stuck it's my own little place where I know that
I like certain things and then you can kind of use this sort of reference, so I
recommend like keeping track of
If you're a designer keeping track of things that you like because it's really interesting you go back a year or two and you'll find
Things and you'll find influences of the work that you create from this sort of inspirational material
Thank you