The first step to designing websites is content. This is a fairly common best practice in the industry but can be a surprise to someone who hasn’t gone through a redesign process before. What about wireframes? What about the colors? Can’t we just mimic charity:water? (No. And that’s a whole other post for another day…)

It’s not unreasonable to think of colors and boxes and fonts when discussing design, but starting with visual traits rarely produces a satisfying design. Instead, the best home pages start by focusing on content.

Why Content-less Wireframes Don’t Work

Here’s an oldie-but-goodie tweet from 2016:

The joke is that all websites look the same. (That isn’t totally a bad thing!) It’s also a good example of two really common content-less wireframes.

Let’s think about all the reasons either of these design might not work for your own home page:

• You have one or three calls to action, not two.
• You don’t have 6 things to talk about, you only have 2.
• You have more or less to say about what you do.
• You have more than 3 items (or zero!?) in your website navigation.
• You don’t have any good photos. Any. At all.

Wireframes look great, but they flip the order of work you should be doing. Starting with wireframes means randomly selecting the number, shape, and relative importance of boxes without considering which boxes you need in the first place.

My Process for Home Page Design

Here’s how I approach designing a home page:

1. Do it last. The home page is the last thing I design. By the time we get there, the design’s typography, colors, global template, and content module designs are close-to-final. The home page is an especially important page, but it’s also still just one of many pages.
2. Outline the content. Have the website editors and content owners determine the type and order of information to go on the home page. Put it in a bulleted list. If it doesn’t make sense written down, the design won’t make sense either. This is the moment to hash out any disagreements about wording or content order.
3. Design a rough version. For me, I use the WordPress Block Editor to create a crude version of the home page. The primary task of the design is hyper-focused: Find the most effective way to communicate the information.
4. Revise and finalize. This step is usually pretty painless because we’ve already agreed on the type and order of information. Discussion should focus on this question: “Does the design effectively convey what we want to communicate?”
5. Launch!

This outline-focused approach owes a big tip of the hat to The Core Model. Baked into this simple, text-heavy process are a few secrets that really make it shine:

• People are much more likely to agree on broad communication needs than design preferences. That initial agreement builds confidence and trust that lasts through the entire design process.
• An outline of content isn’t that different from scrolling down a page on aphone. In both cases, we generally consume one piece of information at a time, and it’s critical that the information is self-contained and makes sense in order.

Two Case Studies

My two most recent major redesigns used this strategy with fabulous results.

While I’ve included screenshots below, I’d encourage you to visit each site so you can really experience the home pages the way a visitor would.

WSCADV.org

The Washington State Coalition Against Domestic Violence supports the work of DV organizations while also working with policy makers, researchers, and other interested members of the community. Their home page needed to clearly welcome newer visitors while also promoting the key pathways to involvement.

Here’s the outline their awesome web team came up with:

• Name/logo / Menu
• Current “what’s happening” feature (just one feature)
• One brilliant sentence that conveys who we are/what we do
• 3 buttons from top: How you can help/connect with your local program/get help now
• News roll
• Join our community (newsletter)
• Footer (hotline, social, other WSCADV sites etc.)

And here’s the result:

Learn more about my work with WSCADV.

CISWA.org

Communities In Schools of Washington is a network of 13 organizations across Washington State working to help kids graduate by meeting their needs with community-based resources. Since the design would be used for 13 separate websites, we needed to make sure it was both clear and customizable.

Here’s the outline that the network’s Website Task Force produced:

• [Header/Menu]
• [Banner image] – single image, randomly loaded from pool of images
• “Mission” – “Our mission is to surround students with a community of support, empowering them to stay in school and achieve in life.”
• [News callout] – will support graphic, text, link. Examples of how the news callout might be used: Big announcements, Event/tickets announcements, Major sponsor recognition, Call for volunteers, Call for in-kind donations
• “The Problem” – 3 sentence description of the problem we are solving
• “How We Help Students”: 3 sentences + image
• “Outcomes” Sentence + 3-4 stats
• Latest News – 3 most recent blog posts
• “You Can Help Students” – 3 calls to action, donate, volunteer, sign up
• [Footer]

And here’s how that home page looked for the State Office’s website at launch and then after the COVID-19 crisis started:

This design was so successful that we know it convinced someone to become a donor despite having no previous connection to the organization.

Learn more about my work with Communities In Schools of Washington.

Trust The Process

Designing a home page isn’t easy which is why it’s extra important to use a process that focuses on what’s important: communication.

I’ve found that this simple process focuses every participant on that critical task and produces home pages that are beautiful and effective!