Lay me out

I’m excited to continue the #notadesignernewyear challenge with you! 

If you’re new to the challenge (or to this whole newsletter), welcome! Let’s get you caught up:

So far we’ve:

1. Picked our redesign project – for me, it’s redesigning my personal site (yikes)

2. Gathered our content – at the bottom of the last issue, I made a list of all the content I want to include. I organized them based on the Atomic Design framework – I’ve got my atoms (the most basic element on the page, like a label), my molecules (a collection of atoms, ex: a form), and my organisms (a collection of molecules, ex: a newsletter signup call out)

In today’s issue, we’re going to dig into laying out content and beginning to wireframe.

When you’re done reading, take the poll and let me know if it was helpful!

I’m also excited to announce that this issue of Not A Designer is brought to you by Erik Kennedy of Learn UI Design. He’s a REAL designer who used to be an engineer, has created design courses taken by thousands of students, and has his own newsletter, Design Hacks. Check it out!

Ok, let’s dive in 🙂

You’ve got your content. Now you’ve gotta decide where to put everything.

That’s where a wireframe comes in.

Wireframes can be super detailed or as chill as a marker and some sticky notes. You can use software that specializes in it, like Balsamiq, or just grab some Post-It goodness.

But watching tutorials on how to wireframe, it feels like people just intuitively know where to put things. With little thought or explanation, boom, a section is perfectly laid out and they move on.

I don’t know about you, but I need more structure than that.

So we’re going to break down our wireframing into three steps:

1. Ordering the content

2. Laying out the rows

3. Laying out the organisms

Ordering the content – does this go next?

Websites are generally laid out from top to bottom. So before we can start on a wireframe, we need to first lay out the order of our content.

For this, we need to answer two key questions:

1. What are our goals?

2. What action do we want users to take?

In thinking about my site, I have three goals I’m trying to achieve. Here’s how they break down in order of priority:

Goal #1: Read about my background
User Action: Sign up for my newsletter

My primary goals are to introduce myself, tell people about my background, and build a mailing list of folks I can update on what’s going on in my professional life. This means my bio and personal newsletter are top priority, so after I get my hero out of the way, I’ll start the meat of the site with that.

Goal #2: Get people to understand my work
User Action: Reach out

After that, I want a place to really showcase the things I’ve built and give people a chance to know my work better, so next up are my projects. I’m trying to take my speaking career more seriously this year and I’m hoping that reading all these cool projects will make people want to book me as a speaker, so the speaking section will come next.

Goal #3: Impress people
User Action: Consider working with me

To provide some external validation to my work, next I’m going to show the logos of companies I’ve partnered with. Then finally, I have a list of fun facts about myself I want to include, which are interesting and hopefully leave a good impression, but are not super important. I’m hoping these will seal the deal on wanting to work with me.

Great, I’ve got an order ready to lay out! Now it’s your turn.

Activity: Go through the list of content you want to include for your site and put it in order, optimizing for your goals and what actions you want visitors to take.

Done? Great! Let’s keep going. But, first, a quick break.

I’m excited to introduce you to Not A Designer’s very first sponsor, Design Hacks, a newsletter run by incredible designer Erik D. Kennedy. Design Hacks helps you create better designs. It features short, original UI/UX tips & tactics. It’s read by over 50,000 people from Apple, Google, Stripe, and more. Check it out here.

Laying out the rows

Of everything I learned on how to wireframe and lay out content, I still felt like I didn’t know where to begin. I was staring at that blank canvas wondering where to put that first pixel.

But there was one video that gave me what I needed most – a starting point.

It began with a very simple proclamation:

Everything is a row and each row should contain a single idea.

What a powerful way to simplify things and give us an entry point!

We can use this proclamation to look at our freshly ordered list of content in a whole new way.

You see, your list isn’t just a collection of content about you – each top-level item is actually a single idea, which can be visually represented in a single row.

So to start laying things out, I can map each top-level item to a single row in my wireframe. That row will take up the whole width of my site (I’m not going to worry about how many pixels yet), so I can start wireframing my website by blocking out rows for each top-level item.

Based on what kind of elements are contained in each top-level content, I’m going to estimate how much space I need for each row – sections with tons of content will be taller and sections with less content, like a nav bar, will be shorter.

I’ll end up with something like this:

Activity: Now it’s your turn. What do your rows look like?

Laying out the organisms

Last issue, we talked about the pieces of our content in terms of Atomic Design and how each top-level item can be thought of as an organism. So when we lay out our wireframe, each row actually contains an organism, and organisms are made of molecules (ex: a form) which are made of atoms (the smallest units like a label, input field, or heading).

So the next thing I’m going to do is take my content list and place the molecules and atoms into their corresponding rows in my wireframe, representing them as rectangles.

I’m going to guess how much space I’ll need based on how long each piece of content is likely to be, and I’ll size the rectangles on my wireframe accordingly.

For sections with repeating molecules, I’m just going to place one molecule. I’m not going to worry about spacing or exact sizes (we’ll do an issue on columns and grids soon), I’m just getting all the content down on the page.

Here’s what I end up with:

This isn’t the final placement of the content.

It’s just a way to gather all the pieces and see what we’re working with. It’s a helpful intermediate step before finding a final place for each piece.

Take a moment to reflect on this layout.

What are some things that stand out to you? What’s drawing your attention?

Just by seeing all the pieces laid out in front of me, I’m starting to form some ideas of where I might put some text, how different pieces might work next to each other, noticing their estimated sizes and how much space I have available.

Instead of doing all that work in my head, I can see what I’m dealing with and start to make connections. If you’re just beginning to learn wireframing, this can be a really helpful step. It certainly was for me.

Next, we’ll move into proper wireframing territory.

Let’s decide on some structure for each organism. We need to find a good place for all of our little elements. We’ll begin at the top and work our way down, starting with our nav bar.

Nav bar

The most common way to lay out your nav bar is to put your logo or site title on the left and all nav items on the right. You make sure your nav items are evenly spaced (we’ll get into spacing in a different issue) and call it a day. Easy!

But here’s the problem – I don’t really have a logo for my personal site.

And while I could just put my name there instead, I was already planning on using my name as the heading of my hero and I don’t want it there twice. So the left-right nav bar isn’t a great solution for me.

If all I have are the nav items and no logo or title, the other option is to simply center align my nav bar. I think I like that idea! Let’s go with that for now and we might revisit it later.

Let’s go ahead and center align our nav bar items.

Perfect! One row of our wireframe is done.

Activity: It’s time to lay out your nav bar. What will you go with? If you’re taking on this challenge, reply and let me know!

Now that we’ve got one down, next issue we’ll move into something a bit more complex – the hero.

In the meantime, check out this popular twitter thread on laying out content from Erik. It’s a great breakdown with tons of examples of how a simple rule of thumb can make your designs so much stronger.

What to take away from this issue:

• When you’re new, really break it down – start with a bulleted list, then order it, then lay out the rows, then wireframe each row at a time. Take it one step at a time. You don’t have to do it all in your head.

• Put all the pieces in front of you – the more you can gather all the parts and see them laid out, the easier it is to see how things should be put together and where they ought to go. Things become so much clearer that way.

Hopefully this breakdown was helpful to you! Let me know what you think 🙂

Next week, we’ll look at laying out the hero, the centerpiece of our whole site.

See you then and happy designing!

❤️ Saron

PS. I just launched a new project called Big Cash Money 2024 👀. If you have big plans to maximize your money through different revenue streams this year, check it out and apply by Jan 12 :)