Design for Developers

Primitive Shapes Review

Design for Developers

Check out a free preview of the full Design for Developers course

The "Primitive Shapes Review" Lesson is part of the full, Design for Developers course featured in this preview video. Here's what you'd learn in this lesson:

Sarah shows several student-created examples, and talks about the benefits of tackling composition outside of the mindset of programming layouts.

Preview
Close

Transcript from the "Primitive Shapes Review" Lesson

[00:00:00]
>> Sarah Drasner: All right let's check out some of the things that people made. All right let's start with Andrea, cool. Okay so you can see how this would be kind of like maybe this would be the fold, you start with like a logo here, nav, three, and then this is really awesome.

[00:00:18]
That's kind of like the sunset in the background over a bunch of different lines of text. That's awesome. I love the diagonal that goes across here, that really breaks up the space great. Cool, we've got another circle. People taking good advantage of circle. I like how they didn't move around the circle either.

[00:00:40]
It's actually in front of the other thing. So one thing we didn't talk about yet is an idea of things moving backwards and forwards on the z axis in space too.
>> Sarah Drasner: Lovely, lovely. I love this one. This one's Jacob, right? Great one by Jacob. So there's, here's a few different ones.

[00:01:00]
This one is like, maybe you can imagine being built an SVG or something because it's got some other different kind of shapes and we're gonna talk about how to do this in a minute. We've got a couple of circles that are kind of bordering this one, and a little cutout of this one.

[00:01:15]
These are really cool. Right, sideways layout, yeah, that's right. Well, [LAUGH] I think we're supposed to turn our heads to see this one.
>> Speaker 2: [LAUGH]
>> Sarah Drasner: So we've got a circle.
>> Speaker 2: [LAUGH] Couldn't get it to rotate.
>> Sarah Drasner: [LAUGH] Right, right, right. Circle and, what's really cool about this is that the shape is actually diagonal and kind of off kilter but the text is still straight within that.

[00:01:39]
So you're not like rotating the text. It's still really legible. That's really awesome. I think that that's it for. Our layouts, yeah. Cool. Okay lets move on. So how did people find that exercise? Good, good? Kind of helps break down some of the shapes and kind of helps you be creative inside of your compositions without feeling like.

[00:02:06]
It's the end of the world right? If you spend forever lining things up in Photoshop, even if it's before you're sketch or whatever. Even if it's before you're committing to code you might feel like. Man I made this whole block of text and everything I committed to this and then you kind of locked into that thing.

[00:02:25]
Once you already have stuff there it's really tough to kind of think about a whole new way of reorganizing all of that information. So by breaking it down into just simple shapes and kind of removing yourself. From those details they are able to experiment a little bit more in kind of break free of some of the things that you would normally just kind of make yourself beholden to just the giant text box.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now