Outlining for Web Design - A Piece of Cake

Miranda Singler • 6/2/2016

Here at Symsoft we design some fairly complicated websites. We have to consider factors like personalization, interaction points, user-generated content, and scalability. It can be pretty overwhelming to consider all of these moving parts even at the conceptual stage. To make sure I don’t leave any pieces out of the puzzle, I use a simple technique gleaned from my high school English teacher – Outlining. 


If you’ve ever written a paper, or prepared for a speech, you’ve likely used this technique too. You start by focusing on the main goal (the big picture). Then you build out the main sections, then the paragraphs, and finally the words. You essentially divide the information into chunks, while keeping the big picture in mind for each piece. 


You can use this same outlining technique in your next complex web project. But before outlining, talk with your team to clearly understand the business goals and define the main components. If you don’t have the main idea, then you’re probably not ready to start outlining. Once you agree upon the main goals and general structure of the site, you can begin placing the pieces in the right spots. 


The best part about outlining is that it doesn’t require any special tools or technical skills. You can use pen and paper, dry erase board, or your favorite text editing tool. 


Since we eat a lot of cake at Symsoft (yes, cake!), here is a cake-themed example to guide you in your next outlining adventure.


Symsoft Outlining Web Design


Again, the main things to keep in mind are:

  1. Define your main goal (and let this guide your entire process)
  2. Outline the templates
  3. Outline the sections
  4. Identify the specific components for each section (images, buttons, call to actions)

Thanks for reading, and happy outlining!

Miranda Singler

Miranda is a designer with 5 years of experience in facilitating business communications through clear design solutions partnered with engaging visuals. She loves brainstorming and iterating to develop intelligent visual storytelling that enhance and humanize technical communications.

Explore topics:

Other Blog Posts from Miranda Singler