WHERE IT ALL BEGINS: WIREFRAMING
In the web design world, planning a layout for a whole website or even a single page is called wireframing. The basics of wireframing involve stripping the page down to its bare bones and only concerning yourself with literally where the blocks of content will sit on the page. I like to call it scaffolding. It’s the basic frame for how your page will be designed, but it has none of the facade. It’s sort of like writing an outline for a report. It tells you generally where content should go, but it isn’t the detail of the final draft.
The best part is, if you can draw squares and rectangles with moderate accuracy, you can wireframe.
In fact, you don’t need fancy software to do some basic wireframing either. For a whole website redesign, sure, hire someone who can mock up your key pages in special wireframing software. It’s honestly worth it. But for brainstorming a page layout within an existing website design, you can start with simply paper and pencil (don’t use pen… trust me, you will need to erase things as you brainstorm).
Wireframing Do’s and Don’ts
- Don’t:
- Worry about colors, fonts, specific content like titles, text, or photos yet
- Try to make it perfect. Don’t worry as much about scale. It’s a sketch to help plan out the basic flow of the page, it doesn’t have to be perfect.
- Be afraid to sketch out multiple page layout options for the same page. Sometimes brainstorming where content can possibly live on a page helps you discover new ideas.
- Wait until you have the perfect software. You can mock up some simple
- Do:
- Lay out your content in rows and columns
- Try to keep in mind the major themes you plan to put on the page and how the content will fit together in the experience as the user scrolls down the page
- Think about how the natural flow of themes down the page may mimic the flow of your whole site’s overall navigation.
- Ask yourself, what do I want the user to do on this page? And place the most important content either at the top for emphasis, or after other content in order to use the preceding content to form an argument for why taking action is critical.
- Make multiple layout wireframes for the same page, it can help you pick the best parts of each idea.
GRIDS AND MOBILE DESIGN
The foundation of mobile-responsive design is what’s known as a grid-system. It’s typically made of several columns with gutters in between each column. Those columns are what allow a number of layouts on various pages, including dividing the page in half, thirds, quarters, and more.
A basic grid system typically consists of 12 evenly spaced columns, each with a gutter in between them.
This allows you to sketch blocks of content in a wireframe that when it’s coded properly will respond to the size of the screen and stack on top of each other accordingly.
Chances are, you won’t need to create more than a few columns on your Classy page, so start sketching out how you think the page layout might work, and start noting ideas for where content could live on the page. This will give you a framework for when you start adding code to actually build the page.
Sections or full-page, horizontal blocks that only one column may be able to use Classy’s built-in text block. But for sections with multiple columns, you’ll need to use a Custom block. Building a layout that’s more than one column will require some HTML/CSS coding, but I’ve created templates you can download to hit the ground running with just a little knowledge.
Check out my series on Advanced Classy Layout Templates to learn more about these HTML/CSS templates.
LIMITATIONS TO KEEP IN MIND
Classy pages are intentionally very limited. Keeping the system simple keeps their product accessible to a wide audience and easy to use. But it also means that some layouts you may want to create just aren’t possible.
On landing pages for Ticketed campaigns (including ones with fundraising options), Crowdfunding, and Peer-to-Peer pages, you can use my advanced layout templates to create multiple columns just about anywhere on the page. There’s even a template available to replace the default Classy hero section for events, so you can remove the donation button for events where asking for donations isn’t appropriate, but you still want people to register online.
Donation Pages, Thank You Pages, and Peer-to-Peer fundraiser pages in Classy are a different story. These pages are intentionally limited. Custom blocks can be added above the main section of the page and below it, but not within it. So you can’t make a multi-column layout within the description section of a donation page or the Thank You page. And of course, fundraisers can’t edit the layouts of their fundraising pages either.
But by that point in the user experience, simplicity is probably best anyway, so it shouldn’t be too big of a deal. Just keep those limitations in mind as you build your pages.
TESTING IT ON DIFFERENT SCREEN SIZES
A great way to make sure your design looks good on multiple screen sizes is to use the Inspection tool and mobile preview/breakpoints. In Chrome, Edge, and Firefox (Sorry Apple users, I’m on Windows), you can right click on a web page and choose Inspect to access a tool that lets you see the HTML and CSS code along with other things like the browser Console log. All of these browsers also offer a mobile preview that shrinks the page down to various mobile sizes.
By checking your page across multiple screen sizes, you can determine if the breakpoints in the CSS template are right for your page, and adjust them if they’re not. The width of the screen typically appears in the top-right corner of the Chrome browser when the Inspection tool is open. This can help you determine at what width you want to change the layout of your page.
To learn more about mobile breakpoints, check out this article from Web3Schools: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
BUILDING IT OUT
Whether you’re building a page in WordPress or in Classy, or any other platform, wireframing a layout can be a really great way to get your ideas down on paper (sometimes literally).
Once you have your ideas sketched out, jump over to my series about Advanced Classy Layout Templates to get the HTML/CSS code you need to start designing beautiful pages.