Müller-Brockmann's axial design

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.

Axial vs Bilateral layout design

 

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.

Müller-Brockmann's axial design

Josef Müller-Brockmann

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.

Axial Design Thin Columns

Wide columns

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

Axial Layout with wide columns

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.

Axial design with diagonal layout

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.

Axial design with non-objective elements

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.

Axial design with explicit axis

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.

Axial design with background

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!)

Axial design with transparency

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.

Axial design with odd text

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.

Axial design with odd axis

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.

Leave a Comment