14 Steps To Design The Perfect Website Layout

Plan Ahead & Collaborate

1.     Know What You’re Working From

More than likely, you’re going to begin at a place somewhere in the middle. This day and age, your firm or client already has a website or some kind of web presence. It’s best to take the time to respect the established brand and work off of it. Taking the time and care to see what’s already in place and works is a tenant of thoughtful design and gives you more opportunity for long-term success.

2.     Answer the “What?” Question

Similar to knowing where you’re starting from, you should also give plenty of time and space to see the full picture of your project. Ask yourself and your team, “what are we trying to accomplish?”. You don’t forge blindly ahead anywhere else within your business—you want to see the finish line just as clearly as you see the starting line. And most of all, you want to ensure you know what kind of race you’re running!

3.     Collaborate Early and Often

You’re creative and thorough—no one has to tell you that. But getting outside of your own head and getting other perspectives is the only way to produce something that is well rounded. We all have blind spots—admitting that we do is a sign of strength rather than weakness. Collaborate with your team and your clients early on, and once or twice along the way, to make sure you’re headed in the right direction.

Define & Follow a Structured Creative Process

4.     Start with Broad Strokes

It’s easy to get caught up in the finer details. And that’s a good thing—the final polish is incredibly important in any project. But getting too detailed right from the start will get you lost, unable to see the larger picture. You’ve already done the work of understanding the “what” of your design—make sure you instill that answer into your website’s layout.

5.     Create a High-Level Outline of Your Layout

Once you’ve begun painting the “broad strokes” of your layout, it’s time to put it down on paper. Designers call this a “framework”, and it’s meant to be a very simple blueprint of the website, with some brief notes on functionality. Once again—don’t paint, polish, or overdevelop your layout—you’re just trying to visualize the overall layout to check for any problems with hierarchy and visual flow.

6.     Work Geometrically, In a Grid

After you feel you’ve produced a layout that has flow and functionality and answers the “what?” question, it’s time to lay everything out geometrically. Believe it or not—even with all of the different mediums we browse the Internet on, every layout we see is broken down into a tidy grid. So, if you haven’t done the work to ensure your design fits into a grid, you’re going to see yourself making some big changes when it comes time for execution.

7.     Choose Your Palette & Stick to It

Thoughtful design is like any art form—you need to adhere to color theory in whatever form that takes. Choosing any old color won’t cut it. You’ll want to do the work to come up with a pleasing, complimentary color palette for your website—one that fits the personality of your brand. And once you’ve created a color scheme, keep the swatches handy and do not deviate from them.

8.     Choose Your Fonts & Stick to That, Too

Like your color scheme, your typography is an important facet of your website’s look and a major component to its personality. Is your brand better suited with a Serif font, or a Sans Serif? Maybe you want a custom header font, one that will stick out from the usual web fonts and set you apart. In either case, think ahead—make a clear decision about your typographic personality and stick with it so it’s consistent across every page.

Begin Looking at the Finer Details

9.     Polish Every Surface

Now that you’ve laid out your website, chose a color scheme, and created a typographic personality, you’re well on the way to the perfect website layout. It’s time to throw it all together—give it life and color. When you’re finished, inspect each component in front of you and refine it as much as you can. You’ve laid the ground work, so you can rest easy knowing that every agonizing detail will come together into a homogenous and thoughtful layout.

10.  Collaborate, Collaborate, Collaborate

You’re now far enough along in the design process that you should take a step back. Show what you have to your team and to a few of your oldest, most trusted clients. What do they have to say? If you’ve followed the process, then you should be in a good place. But take their feedback to heart. And if the response is too negative, don’t be afraid to go back and start over.

11.  Create a (Semi) Working Mock-Up & Use It

With a finished layout, you now have a pretty good idea that what you’ve made is as effective as it is handsome. But in order to really understand the flow of your design, you need to create a prototype. It doesn’t need to be functional—it just has to move and respond to user feedback in a rudimentary way. This can all be done easily using CSS—no hardcore programming is required. With a semi-functional prototype, you and your team can actually use the website as its intended and spot any issues with the flow of the interface.

12.  Take a Moment to Think Back, Don’t Be Afraid to Challenge Your Ideas

At this stage in the design, you’re moving at a steady pace. There is no better time to shake ideas loose than to force yourself to come to a grinding halt. Stopping your momentum is jarring—and it’s a great way to challenge your preconceptions (you have them) and to rethink your approach (you need to). You may decide that everything’s perfect. Or you may find a glaring flaw in your execution, or some small improvements that enhance the overall product. Whatever happens, you know you’ve done your due diligence.

Follow Along with the Execution, Be Your Idea’s Best Advocate

13.  Stand Up for Your High Standards

It’s no secret in the web design industry that follow-through is one of the biggest killers of any great idea. When your design goes into development, you’ll inevitably hear a lot of “can’t” and “won’t”. While some things simply aren’t possible, most of them are. Be your idea’s best advocate and don’t back down from your lofty ideas. Most of all, don’t let anyone dictate the boundaries of your high standards.

14.  Bring in Outsiders, Give Them Free Reign

There’s only so much you can account for, even after repeated testing. Before your new website goes live, make sure you bring in a third party to run your site into the ground. The less they care about your brand, the better. You want an outsider’s opinion and you want them to find all of the really sneaky bugs you missed. This is called “user acceptance testing” and it’s the last step before any credible website launch.

Enjoy Your Accomplishments, but Don’t Stop

You’re finally finished—your idea, like any good one, changed as you went along. But if you had a solid plan to start and took your time to develop a coherent and consistent strategy, then you’ve got the perfect website layout on your hands. It’s a lot of hard work, and the journey can be murky at times, but nothing worthwhile comes easily. As much as you love your layout (or are sick of poring over it), you’re not finished. A great layout is fluid—it’s always adapting, improving, and breaking boundaries. Keep it in your mind and continue to nurture it as you go to ensure it lives and breathes and ultimately embodies your brand and personality.