Shape

[00:00:00]
>> Sarah Drasner: So let's talk about shape. Shape is really important. We started talking about triangles. But there's all sorts of other pieces of shapes that are really interesting and important to understand. One thing is that circles draw your eye more than other shapes. If you look at all of the shapes lined up here, your eye probably keeps reverberating back to that circle whether you like it or not.

[00:00:21]
That actually is a thing. So there's this idea that's called saccade where even when you're looking at one image, your eye is constantly scanning around in an event called saccade. So it's always creating a spacial or a mental map of what it's seeing. And I talk about this a lot because it's really important.

[00:00:42]
That kind of scanning event is where we pick up on certain things. I mean, there are some things that are more important than others. Things that are moving are the most important because if you are predator or prey, which we are both of. You want to either eat things that move or run away from things that move.

[00:00:59]
So if something's moving, your eye is like whoa whoa whoa go pay attention to that before anything else. We also notice bright colors, because fruits, berries, we eat those too. So if you ever have like an accent that's a bright color that you want to draw someone's eye to, that's important.

[00:01:14]
But it's also important because of the circle concept, and the reason why they think that circles draw your eye. So this is a kind of map using, they actually scanned this person's eye and kind of drew where the person is looking while they're creating that saccade shape with their eye.

[00:01:32]
So as they're scanning around, you can see that they're scanning my entire face and they kind of scan in a circle, but then they get really drawn into the eye, right? They get there's like a lot of kind of saccade material right in the eye. So both face and eyes have circles, and that's probably why circles draw us in so much is because your brain is like, wait, I need to maybe recognize this person and understand a face.

[00:01:58]
And that's also why humans see faces everywhere, you know they have those books of like inanimate objects that are faces. We love that, we just can't get enough of this like idea that clothing hook is like an octopus who wants to fight us. Or an outlet is like a smiling person or something like that.

[00:02:19]
Okay, so this looks like it lines up. But really the circle lives a bit outside of that line. If I line the circle up perfectly with that line, it would look like it was tucked in. It would look like it wasn't lined up. For some reason the edge of that circle is compensated by our eye.

[00:02:38]
So if you do use a circle what you might end up finding is that you're using margin left, negative five, or something to just push it out just a little bit. And that will actually make it look like it's compensated appropriately. Diagonals are really dynamic. We also really love diagonals and we see them again and again actually in architecture.

[00:03:03]
As like, whenever we're like this is the supreme version of x thing, it's usually got a diagonal in it, we don't use them a lot on the web though. But I'm gonna show you how you can make them in code so that you can use them on your sites.

[00:03:17]
We're still stuck in table based layouts even though we're not in table based layout land anymore. So we can talk about how it just shows up. Any time people are like, the greatest blah! It's usually got a diagonal in it. There's all these examples, you'll start to see those everywhere as well too.

[00:03:41]
Partially because we don't see them quite as often now, little bit more rare. So if you wanna have a dynamic composition that isn't like a lot of other compositions out there, throwing a diagonal in, it's a pretty good way of doing that. This Swiss design that I mentioned earlier made lots of uses of diagonals.

[00:04:00]
They used grid systems all the time. But they also crossed through those grid systems, breaking them up with diagonals, too.