Axial Layouts

I want to dive into Axial designs—they’re weird, but not THAT weird. Axial designs are right in the middle of the weirdness spectrum. Some of the systems we’ll talk about are really strange—radial, dilational, transitional—and some are pretty normal—grid, bilateral, and modular.

I wanted to start with something pretty interesting but not too scary, and I think axial is the right one for the job.

To use the axial system (I know, it sounds like some scientific or mathematical term, but trust me, it’s not that bad.) Just put everything on either the right or left of a line.

It’s not that bad.

Hell, event trees have axial design. They’re made of different branches coming off a central stem; flowers are like this too. (See? Not that bad.)

Axial designs can be either symmetrical or asymmetrical around their axis. We’ll talk more about this in a bit.

Notice:

Axial and bilateral (or centered) layouts are different. I want to explain this difference before we get too deep: you might be looking at some of these graphics and thinking to yourself: “gosh golly, Lucas, I know how to click “Center” in Word! I know this!” First of all, who says “gosh golly?” and second, they’re not the same.

 

With axial designs, everything is divided by the imaginary line; in bilateral design, it’s all aligned to it. The difference might sound semantic, but it’s really not. In the former, lines of text stay on one side, in the latter, they run across. If this distinction doesn’t make a bunch of sense now, just wait for us to get to bilateral design in a few weeks.

Symmetry

The stuff on either side can be either symmetrical or asymmetrical—in simpler terms, you make a straight line and make everything match on either side, or you can do whatever you want with the line and whatever you want with the stuff around it.

With axial designs, it’s easy to see why asymmetrical things often look better—they’re more dynamic and treat the page well.

How to create an Axial design

Always start with your content—start with the text or photos that you need to use. Then pick your design size—if you’re going to print it out, this usually means 8.5″ x 11″. If it’s for the web, it can be pretty much any size.

Now, draw a light line on the page—it can be straight, curved, or zigzag. It can go down the middle or to one side; it can even cut off a corner.

Next, put your content along either side of this line in a way that makes the important stuff look important. In other words, draw attention to the big pieces of information first.

Note—I always design by hand first. It’s quicker and doesn’t lock you into the more formal things like color and font. Designing by hand—with a simple pencil and paper—lets you test a whole bunch of ideas quickly. It also means that you don’t lose your ideas—they’re all in your notebook.

When it’s time to take your designs to the computer, you can use Illustrator, Photoshop, or… I suppose… if you absolutely have to… Word.

I really don’t recommend it. I suggest paying the $10 or $20 per month to get Photoshop.

There are some ways to create anything in these programs, but I’ve found that the easiest is to:

1. Draw the line with the line or pen tools

2. Type your text with text boxes

3. Rotate and position your text boxes

4. Delete your line

That’s a quick and dirty way to create a unique Axial design.

Your designs will mature over time, too. At first, they’re probably look a bit basic and chunky. You’ll explore asymmetry and new ways to direct the viewer’s eyes.

Try experimenting with your designs like this:

Note—The text in the designs below is not for a real event…yet. It’s a hopeful thing, so don’t show up to that address on that date expecting anything.

Thin columns

I usually start with thinner columns on either side of the axis—this keeps the content short and digestible.

You can make each column one word, phrase, or sentence.

Wide columns

Basically, try the opposite. Let your columns run wide, by placing entire paragraphs or longer sentences on either side.

Angle your axis

Who says you text needs to be straight up and down? Turn it around, flip it backwards—just make people pay attention. That’s the only rule.

Add “non-objective elements”

You can add dots, squares, triangles, or whatever else to make your design more visually appealing. You can also use these to draw attention to different pieces of text pretty well.

Implicit vs Explicit axes

Most of the time, you won’t actually have a big fat line running across your page, instead, you’ll just imply your axis with where the text lines up.

Sometimes, though, you’ll want to line your text up to something visible—a photo, a background graphic, or whatever else.

Background graphics

Feel free to create a scene in the background—this can be done with a photo or some simple shapes, like I’ve done here.

Transparency

To create a good hierarchy, feel free to use background shading to separate elements. (If you want to learn a whole bunch about creating good, unique hierarchy, feel free to read my post on it!)

Screw with the text

If you’d like—and I won’t blame you—get a little weird with your text. If something isn’t super important, or if you want to slow your viewers down a bit so they pay attention, try making a work or phrase stretch really far.

Screw with the axis

Your axis doesn’t have to be a straight line. Try making a zig-zag or a circle; follow the contour of a mountain or cityscape. Your axis can be whatever you want it to be.

Conclusion

This layout style isn’t for everything, but there’s nothing stopping you from using it on your résumé, business card, website, poster (especially poster), or flyer. It’s a bit out there, but not too far.