Planning your webpage

How can you turn a blank page into the webpage of your dreams? You could just start writing HTML and CSS—changing things along the way, removing things you don't like, adding things you suddenly think of, and rearranging parts of the page.

That's not always the best strategy, however, as it can lead to a lot of wasted time writing HTML and CSS that you later discard. Instead, you should plan your webpage before you actually build it. You can figure out content, layout, and even the look and feel.

The first step of planning anything is often brainstorming—figuring out anything and everything you might want to do. You brainstorm by drawing mind maps on paper, jotting notes in a document, or by putting post-it notes on a board.

You can brainstorm by yourself or—if you want to multiply the range of ideas—enlist a collaborator to brainstorm with you. While you're brainstorming with a collaborator, use the "Yes, and…" approach. Don't focus on what won't work about your collaborator's ideas; focus on what might work and which related things might work.

After you generate lots of ideas, you'll need to decide which ones you actually want to pursue. Prioritize the ones you're most excited about—try starring them or moving them into a list—and discard the rest or save them for later.

A good next step is to create a paper prototype—your webpage, but on paper. It's a sketch of the components of your webpage, with scribbles for content and boxes for elements.

Below is a paper prototype for SF quiche, a web app that will satisfy all your quiche-finding needs:

Since it doesn't take much time to make a paper prototype, you can iterate quickly and not feel too stuck to your original design. You can also make a few different prototypes at once, and you can make prototypes for multiple pages of your site.

After you've made a prototype, you might want to do some user testing. Show the prototype to a friend, then ask them what they'd click first or where their eyes travel to. See if they have any other feedback.

Once you're feeling pretty good about your paper prototypes, you might want to turn them into wireframes. A wireframe is like a prototype, but it's typically digitally drawn and more precise. A wireframe is made up of boxes that represent each part of a page, plus small bits of text and icons as needed. For example, below is a wireframe of our SF quiche app:

This wireframe was created in a popular online prototyping tool called Balsamiq. You can also make wireframes using the shape tools in office tool—like Powerpoint/Keynote—or by using design apps like Photoshop, Gimp, or InDesign. You can also search for more prototyping tools online. Keep in mind that many wireframing apps cost money when you're deciding which to use.

Once you've made your wireframes, you might want to do another round of user testing. Some wireframing tools let you share your wireframes for others to comment on. There are also tools like InvisionApp that let you create interactive wireframes, where clickable areas lead to new screens.