USGBC Studio: From Wireframes to Live Sites

Share this :   | | | |
USGBC Studio: From Wireframes to Live Sites

Whenever I tackle a new web project, first things first—I have to do some planning. One of the most useful ways to plan a user experience or website is by creating wireframes.

So what are wireframes? They are a way to map out the functionality and layout of a website. Wireframes essentially look like a stripped down version of a website, with lots of boxes being used as placeholders for function/design elements. It’s important that the planning stage doesn’t get carried away with how things look since that will come later.

My go-to tool for creating wireframes is InDesign. I begin each wireframe by focusing on the homepage or landing page, and then walk through each interaction that takes the user to a new section of the website. I like to work with filler copy or copy that actually appears on the site since it gives me a better sense of spacing between images and text.

When creating your own wireframes, here are a few things to keep in mind:


  • Use it as a way to plan the layout and user interaction.
  • Clearly mark off areas for different functionality (I do this with a numbering system that you can see in the example).
  • Include technical specifications in your notes.
  • Use gray scale boxes and simple shapes that don’t distract from the main purpose of the wireframes—to plan the user experience.


  • Don’t make it look like a design mock-up. The design will come after the technical side has been discussed and approved.
  • Don’t use lots of colors or actual images.
  • Don’t spend too much time working on them. They are meant for planning and are simply one step in the web design process.

When the wireframes are complete, what comes next? I typically go through the following steps:        

  • Get approval on the wireframes so stakeholders are in agreement with how users will move from page to page.
  • Send the wireframes to the technical team for review. If something isn’t feasible, a new solution is proposed and added to the document.
  • Once the technical requirements are rolled out, it’s time to get started on styling and designing the site.
  • Plan the design by making mock-ups in Photoshop. The wireframes are used as a guide for balancing graphics and text on different pages.
  • The Photoshop mock-up is converted into a functioning web experience with HTML, CSS, and Javascript.
  • The new pages are tested to ensure consistency across platforms and devices. Any bugs or issues are corrected in the code.
  • Voila! The website is ready to launch.

Check out some of our most recent website projects:,, and

Leave a comment