ITERATING (LIKE A PRO)

Oh hello! My name is Carey and today we’re gonna make some fun stuff and look at how to take your design work way farther through some simple iteration tactics you can put to use right now!

So like last time, we’re lookin at a cool project submission from someone who’s taking this course, the Visual Design Lab. Each chapter in the lab is a video class with progressive topics and strategies and working examples of using them, and then each one has a challenge where you apply all that stuff, and basically get your ass kicked from wall to wall. This submission we worked over last time was for the final challenge in Chapter 7 of the lab, and today we’re gonna check out some cool stuff for the challenge from Chapter 3. Now, the projects in these first chapters have some stiff constraints for how you make things, and in this one you’re working solely with some basic shapes: circles, triangles, and squares, pretty basic! Yeah that’s… that’s the idea. There’s no distorting these shapes but you can add or paint in color and also whatever elements you can make by hand. Like literally by hand. Ooooooh, scary! 😀 Pencil, chalk, paint, ink wash, carving your crush’s name into your leg, whatever! It’s all good!

Fair enough. But there’s a million billion things you can do with that, and this is what Simon Janelle did. Broke out some paints, looks like oil paints maybe, made a handful of awesome disasters with them, and figured out how to use them with the basic shapes. He’s got the bare paper from before painting, and then these are just vector shapes full of those textures, and he’s roughened some of the edges of them with a chunky photoshop brush. Pretty cool!

Now, as you can tell, the point of this challenge isn’t really to make anything recognizeable or meaningful. Y’know, the first few chapters of the course are really focused on developing formmaking strategies to give you more control over your imagery so you can give it a lot more appeal. He’s doing a really great job with that so far. The raw paint textures are pretty awesome, and then applied to some basic shapes, there’s a certain kind of charm in a few of these. These ones are fun. They’re bright, they’re colorful, they just naturally feel kind of playful. What you might notice though is that across the whole set… it’s all basically the same. Darker and more chaotic down here for sure, but it’s all shapes filled with bright paints, and they’re sorta spread evenly around the frame. Sometimes there’s more stuff, sometimes less, although in these two he’s got some really big shapes, and some of them are flat black, and he’s manipulated some of these paint fills to greyscale. And that’s definitely a start toward something different, but it doesn’t go very far, and the only way you can really develop your own imagery into more awesome stuff is by evolving it over time, which you can do by iterating.

So let’s see what else we can do with just the elements he’s working with and take this somewhere by adding some really simple iteration strategies, the first of which… is to reduce, or simplify. And it might seem like there’s not much here to reduce and simplify to begin with, but we can actually start by just picking some stragglers and yankin ‘em out. Right now, our main elements are sort of this circle and this square. They’re the biggest and most visually chaotic so they’re sort of dominant here, even if not by much. And then these other smaller circles and squares kind of echo those main shapes and textures, so they kind of seem to go together. So if we’re gonna simplify, I’d take out the thin lines, and probably these triangles too. The point of reducing in this sense is to limit the number of different things you have to work with so you can focus on what’s left and on figuring out how what’s left works best. So now we only have to think about circles and squares.

Then the second strategy is to just… resize some things. We have one element that’s pretty small, and then a couple that are a little larger, and then our sort of main elements that are kind of… I’d call these medium sized. So let’s grab another square and make a big resizing move.

Alright, well now it looks less like a shape and more like the background is split between paint and paper, but that’s kind of to be expected. Big changes are what you’re looking for, and when you make big moves like this, it’s gonna throw things off, sometimes for the better, sometimes for the worse. So maybe now we have to spin it so we can see more of the shape. And obviously these textures have a lot of activity, they’re very busy and very colorful, so the net effect right now is that it’s hard to see anything. Everything is screaming, everything is extra. So we can actually simplify or reduce again, because we can do a lot more than just murder elements. We can reduce and simplify by toning down their qualities in various ways. So let’s combine that idea with the third basic strategy, which is to re-color. Let’s simplify or reduce… some colors!

Yeah good! Alright, desaturating it makes it a little less crazy in here, but it’s still a lot of competing moments of chaos. It’s a real battle royale for attention. So let’s reduce that one even more, and then we can even take the texture out of these two circles entirely so they’re totally blank. So that’s gone, and now it’s a little less chaotic in here. This is good, we’re slowly reducing and simplifying in different ways. Let’s do a resize on this circle so it’s a little more prominent, and I’ll pop in a little drop shadow for some local value contrast just so it’s still visible. Little fix for that. And let’s go farther, let’s reduce the amount of that texture even more, maybe knock it out from behind this square. It’s not a huge change, but one foot in front of the other, we’ll just keep walkin it out.

Because obviously these are pretty basic strategies: reduce, resize, recolor. They’re not a magical recipe for success, but they’re a really effective way to start pushing yourself away from the stuff you’ve been doing. Over the next few minutes we’re gonna go pretty far with this, but already in just a few small steps, without even touching half of the elements, you can see this is a little bit different from what Simon was doing over and over. And that’s no knock on Simon. We all do this. We can all get kind of bound in by a narrow set of ideas or expectations and it can be really hard to break out of them and go somewhere radically new and exciting. You’ve probably been through this a ton. I have. It’s really common, if only because making stuff requires a certain attention to detail, and we can get kind of fixated on those micro-level differences. So just trying to push these strategies really hard can help you bust through that wall. And you can do it with just about anything: typography, character designs, 3d, static stuff, animated stuff… whether it’s abstract shapes or recognizeable imagery, or a mix of everything, works for all of that.

The trick is that you have to keep pushing, that’s the iteration part. Keep moving further away, step by step. And that’s an important skill because if you’re in, say, motion graphics, you’re designing little animations that probably need to develop a style but still have enough variation to be entertaining as they play out. Sometimes they have to evolve dramatically as they go from the first shot to the last. Whereas, If you’re making a commercial or a show title or anything really, and every shot in it is basically the same, you’re putting people to sleep. So the design phase is important for figuring out how to make something fresh and exciting, and not murdering people through repetition! 😀

So, through iteration, you keep simplifying, resizing, recoloring, and then at some point you take your little discoveries from doing that and start building it up again. It’s a process of trimming your garden, selecting what you want in it, and letting it grow back out. And one move at a time is fine, but y’know, make those moves significant. Don’t be a pansy about it.

Like, ok, let’s strip out like half of this stuff. Let’s resize this giant thing. Let’s pull out even more of the color and value by fading it even more. Maybe shove these boxes around… and align their tops, cuz why not? And why not let that little triangle come on back. It wasn’t hurting anybody.

Is this great? Not really! But it’s a little bit different! We’re on a path to getting away from where we were. And we’re figuring out some things that work along the way. That’s really the point. It’s to walk that path, and keep walking it until you end up somewhere you haven’t been. And you can walk it as fast or slow as you like, but hopefully there will be a couple of things you find out as you do. I’m really liking this faded out version of the texture as a big swatch, so let’s make that front and center. Let’s plop this right in the center too. This little guy’s gonna get lost so let’s blast him all the way to white and pop him off with a little drop shadow. And maybe this also gets a different color and a different shape. Although it’s a tiny bit harder to read against that background texture than the pink square was, so we’ll just reduce even more of the dark stuff in the center by brightening it. Maybe even more just right around the triangle. We’re figuring out what works well for these elements and what doesn’t.

Like, this little square has kind of the same problem, the chaotic texture fill against the textured background is a little confusing to the eye. This time let’s change it’s color, maybe to a nice complement of that blue. Let’s resize it too! And what if we add in a bunch of highlights and shadows to help it pop off. Kind of gives it a little bit of depth. We could do that subtly to the paper texture too. These lighting touches are subtle, but they’re kind of nice, so that’s one of those things we can refer back to as we keep changing things. Because obviously this is different from what Simon was doing, but it’s not that different. We’re not leagues away from where he was, we’re kind of right next door. Ok, alright, you’re not wrong… /you’re kind of a dick about it/ but let’s keep pushing on!

Here I’ve built it back up a bit, let the garden grow with more squares at various sizes, and reintroduced a circle on the left. But the color is even more reduced. I like the flat black against some of the muted paint texture, and some of these shadows are starting to give it a bit of depth, but nothing else here seems like much of a revelation to me. And that’s fine, we’ve got a few different ideas in our bag now, and with those we can start looking at our fourth strategy, which is to remix and recombine! Y’know, take something that you had used in one way, and now use it in a different way. Or take some things that you’ve figured out but haven’t used together yet, and bring them together. And sort of like how simplifying or reducing can be done in a bunch of ways: taking things out, or toning something down, reducing the variety of different things that are present… y’know, there are different ways to reduce and simplify and you can get creative about it. In that same sense there are different ways to recombine.

So here’s a real departure, with a lot of recombining. Bringing back in some circles and recombining them with a desaturated paint texture. Adding back in a sample of this color and multiplying it over that. Applying this shadowing idea to these circle knockouts gives us this kind of paper cutout look. Obviously this frame also went through a bunch of reducing and resizing and noticeable recoloring, but mostly there’s a ton of recombining what we already had. Finding different ways to use the little ideas we’re collecting. The circle is invisible and now the shadow is inside of it. The color is extracted from one texture and is being used to tint another texture. The lighting and shadowing on the background paper is also applied inside of this circle so it’s a little darker here and brighter here. This is the flat black idea from the squares in the previous frame, lightened up a bit, and as a circle, set inside of another circle that’s knocking out yet another circle.

These sorts of recombination ideas might sometimes come at you too fast to catch, or they might occur to you frustratingly slow. Doesn’t really matter, just keep at it. Again, it’s a process. We’re walking the path. I actually kind of like this one. A lot of stuff is really working here. So let’s see where else that might go.

Mmm… probably not here. I don’t want to go to here. This is definitely dentist office wall art. Fine! Fair enough, it makes my teeth hurt! But I do think that using that desaturated texture, faded out and masked off to give some grit to the background is really nice! So maybe we take just that, not this other dumpster goop, and…

…paint it in a little heavier. Maybe even add it back in as a subtle highlight here in this black circle. And then here’s a cool little idea: extracting one of the paints in one of those textures to become its own element, and filling that with a flat color. Again, you can see how we’re constantly using several of the strategies, if not all of them, each time we move forward: reducing and simplifying, resizing, recoloring things, and recombining various qualities and aspects of them in different ways.

Now we’ll keep doing that, although there’s not much more to strip out at this point, so here you can see how I took some of what was working and used it in a different way while I built it back up by bringing triangles and the edges of those squares back in. And there’s nothing in here that I really see as working. I don’t see any big wins here, so let’s take this and reduce it a ton again and recolor it and…

THERE WE GO. Finally I’ve got the simple idea to recolor the background, which leads to other ideas like using the paint texture to brighten it like we did with the lighting touches from before. It’s kind of an ode to the division05 background, actually! That’s cool, at least, because then I decided to put the extracted paint element inside of the triangle, and it turns out that looks like bird shit. 😀

So let’s swap out for circles, scaled WAY up so they actually knock out most of the background, which is toned down even more. The bird poop is scaled up and combined with another extracted paint stroke, and also scaled down and turned purple down here. There’s also this idea of using the triangle as a kind of particle. Again, this is not a show-your-friends piece of art, but I do like this idea of using the paint texture in the background more like atmosphere.

So let’s pump up that atmosphere. I’m sampling the colors in the paint textures and brushing them back in with a huge soft photoshop brush, over the top of a desaturated texture, just like in this one, but now with more colors involved. And then this idea of making thin lines by punching one circle out of another, like here, is a good idea, but just isn’t really lighting my fire. But there’s also this layering of darker and brighter small shapes that kind of works. I mean, that’s pretty simple, but it’s kinda cool. And again, look back, we’re a long way from Kansas at this point.

So let’s take that another step! Here I’m doing a lot of the same things, just more intensely. Going as far as to add in reflections and light hits up in here. And I like the depth that all of the layering of black and white shapes creates, along with the lighting cues, but that’s maybe it for this one. It doesn’t really make very good use of the paint textures. And i want to use them! They’re really cool! And it turns out that in this particularly early exercise in the course, you’re not allowed to use 3d juuuust yet, and I want to stick to the same constraints Simon was sticking to, so I won’t like wrap the paints onto 3d shapes or sculpt out some cool glossy paint lick. I’ll go in the other direction and keep it really graphic. So let’s go all in on all of our strategies and see if we can do that.

This, I can get behind. This is really simple, but we’re using a bunch of stuff from the previous 12 iterations, so holy cow is it different from where we started! We had to go through these to get here, but that’s exactly how it works! That’s really how most simple ideas work. They come out of some thoughts that keep evolving. We’ve got a square punching out the paper to reveal the faded, desaturated fill. Some shading inside of that shape and a very slight highlight and shadowing. A flat-color-filled shape layered over the top. A pop of color… y’know, lots of the tricks that worked elsewhere are coming together here, and yet this uses the exact same elements in ways that are completely different from the originals. That doesn’t mean it’s necessarily to your taste, you might be gagging right now, but of course this isn’t meant to be something you’re aiming to post online either. The actual goal of doing this is twofold:

First, when you’re momentarily stuck in a rut and you don’t seem to be successfully making big moves in whatever you’re doing, doesn’t matter whether it’s simple vector shapes or full 3d setups, you can shake off those cobwebs by doing a series of iterations where you reduce, resize, recolor, and recombine. It’s like a brainstorming technique that’ll give you some desperately needed perspective on what you were doing, and get you away from the defaults that you tend to start with. You make big moves and you keep making them until it seems silly that you were making such small moves in the first place.

And then second, it’s really great for the long game. For what’s basically research and development. For exploring the space of possibilities of what you can do so that you can grow as an artist, because you gotta carve out your own space to do non-generic work and get noticed, whatever kind of work you make. All of those design rockstars who seem to constantly knock it out of the park are doing some version of this, both in their paid work and on their own time. That wildly beautiful new stuff they come up with doesn’t appear magically. They don’t just poop it out. They evolve it behind the scenes and then present it to everybody when they’ve got something rad.

Like, personally, I kinda like this. I’ve never made anything like this before. I never had a reason to, and never went down this path. But now I know how to go here with these kinds of elements. And of course we can keep going!

I like this too! Using those huge shapes, and texture in the background, but with more knockouts, more layering, more shadowing. I like borrowing this sort of paper cutout idea, but without the paper. And making the foreground shapes so big that the frame actually seems to be focused more on the background. It’s super stripped down, super minimal, and it’s kinda cool. What if we take some of that and go maximal? Y’know, patterns is something we haven’t tried.

Now, I wouldn’t say I’m in love with this, but there’s a certain something about the texture of these really small dot patterns. I kind of like these very orderly, rigid grids of dots up against the really organic, handmade paint texture. So let’s see if we can reduce and simplify that a bit and remix it with some of the other stuff.

And yes we can! Look at that, this is a whole new road we could go down, and it’s mostly just recombining stuff from the other frames. Faded background texture, dot pattern, some shadowing, layered up small black and white elements, a little color sampling for some painted in glow, although it looks kinda nasty here. 😀

And again, these aren’t meant to mean anything in particular, they’re pretty random. But maybe you’re working on something typographic, and you do some simple explorations with the letterforms that lead you to something like this, it’s bound to give you ideas for how it might look and move, and start you down a path to something really cool. All kinds of possibilities come out of this stuff, and it doesn’t even have to be a massive effort.

Maybe you’re working on a design or an animation and using these strategies as a quick brainstorming exercise to do something with it you hadn’t considered. Something that might work even better. Using this process to sort of get some fresh air into what you’re doing, or to get some perspective. In that case, it might only take you a few minutes to make a copy of what you’re doing and thrash that thing around, reduce the elements or simplify some of its qualities, resize them, recolor them, recombine those different qualities. I’ll even take a few seconds periodically while i’m working to quickly whack things around, just to see. It’s one of the main advantages of a digital workflow. You’re not gonna mess up anything by trying something out.

[01] Like, this one took less than a minute. It’s easy to blow up an element and try a few things. [02] Then I spent a couple of minutes mashing it around to get to here. Because it’s mostly simple moves and deciding which layers to turn off. [03] This one is more like 10 minutes. As simple as it is, I’m getting in there and figuring out how to make these chaotic textures work when right up on each other because they don’t work very well together as raw elements. So I’m brightening and darkening parts of them. And then I’m fussing with elements like the reflection on the gold trim and that sort of thing. I’m not precious about the whole frame, but i’m getting into the details and trying some stuff out to see what works and what doesn’t. [04] Then this is more like 20 minutes because i’m bringing in new elements and arranging them. That might go faster or slower for you, depending on how you work.

[05] Then we get to this, which looks simple, but I really spent time, probably an hour, figuring out how the subtler details work best. Y’know, how much to fade this texture, and how bright of a color looks good on top of it, and applying a gradient on top of that to give it some variation across its surface, and even a little bit of an inner shadow. Subtle things you might not even notice, but without them it wouldn’t work so well. Sometimes those are the things you’re actually looking for, to give it some polish and take what you’re working on to the next level.

[06] This frame was a little bit of a struggle, and for whatever reason, it took about 30 minutes to come around to the idea of using the paint as a subtle background texture. [07] But once I had that, I moved on and this came out pretty fast.

But you can imagine why you’d need to explore some real variations, and you can see the difference between taking what you have and quickly whacking it around for a few minutes for some fresh perspective, versus doing that for a longer chunk of time to find something new. The sort of research phase where you go out there and figure some stuff out. Invent some things. See what kinds of combinations of your elements actually bear fruit and are interesting and fun to work with. You can use these same simple strategies for either the quick fix or the long game, but there are reasons to work quickly and reasons to spend time, and both types of iteration are gonna be really valuable in their own way. You’ll find what helps you the most in any given situation, like sometimes you start a project by toying around with some elements for a while, making big random moves and figuring things out before really tackling the goals. And sometimes you’re already halfway through a project but find yourself circling the drain, doing the same things repeatedly, so you whack some of the imagery around for a bit to give it some life again. Sometimes you don’t even have a project, you just want to see what you can make, and you spend a few hours playing. You’re inevitably gonna find some tidbits that you can keep in your back pocket.

You can see where Simon has started doing that. Little bit of resizing. Some recoloring. He’s building it up and then simplifying in a very basic way, just taking things out mostly. And that’s great. But it is really hard to see where you can actually take it until you get into recombining the qualities of your elements, and you can see how far we went with those exact same elements in just a few frames by doing that.

Now, technically, the goal for Simon was to explore different ways of generating contrast. That’s the thrust of the challenge for that part of the visual design lab, so if he kept going, his explorations would end up aiming for that instead of shooting for something like these completely random attempts. But that’s actually even better. Having a bit of a target to aim for gives you a way to know whether you’re on the right track or not. Gives you a more concrete way to judge what’s working and what’s not, which helps.

But I actually like a few of these. And whatever the project, whatever the goals, just doing a bit of iteration will help you improve on your initial ideas, and get you out of the gutter when you’re stuck, and these 4 simple strategies can take you a lot farther than you thought you could go.

Thanks to Simon for letting us all poke around with his stuff. It’s pretty great stuff. And he hasn’t even finished the course yet, so maybe we’ll see more from him in the future. Try these strategies out for yourself, see if you can push it past your basic first draft and end up with something new and inspiring! Or that! Alright, see you soon!