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

Studio Spotify: It’s a Productivity Party

Share this :   | | | |
Studio Spotify: It’s a Productivity Party

There have been a multitude of studies on music and the human brain. One fact resonates: music can increase productivity. Whether it’s your favorite electronic beat, acoustic riff, or melodic lyrics, it all contributes to your positive mood and overall awesomeness.

Ever wanted an invitation to the Personal Dance Party (PDP) your coworker seemed to be having while churning out assignments? Wonder what that coworker is rocking to as you call his or her name over and over in an effort to get their attention to share your pressing review of last Sunday’s Game of Thrones episode?

Yeah, we do, too. Curiosity got the best of us and we asked our team to give us some of their favorite productivity boosters. The result? This pretty amazing Spotify playlist. Here’s a preview of some the tracks:

Celebrate, MIKA featuring Pharrell Williams
“This is my jam. It reminds me to take my time and enjoy the ride. Life is not about being the first and making the most… let’s live it up! Let’s go!” – Rukesh Samarasekera

Love Vibration, Josh Rouse
“It debuted in 2003 and still makes me smile and sway. Full of sunny, unbridled, 1970s am radio sounds.” – Joe Crea

Young Forever, Jay-Z featuring Mr. Hudson
“I like Young Forever when I really need to get something done. Why? I can completely ignore the lyrics and pump out work.” – Christopher Gray

Stolen Dance, Milky Chance
“This is your typical summer song. The song you listen to with your windows down and bob your head up and down and ‘accidentally’ put on repeat until everyone in the car has the words memorized. “ – Kunal Gulati


Join the productivity party and stay tuned because we will be adding new tracks as the music moves us.

Meet Ana Leilani Ka’ahanui

Share this :   | | | |
Meet Ana Leilani Ka’ahanui

Everyone: Meet Ana.

Ana is one of our team members who specializes in coordinating all the moving parts that go into our marketing projects. She is also known for being our in house photographer—she actually shot most of the photos on our USGBC Studio site!

10 Questions with Ana

  1. Where were you born? I was a Navy brat, so we moved around a lot. I was born in Long Beach, CA, but I was lucky to spend most of my childhood in Pearl Harbor, HI. If you’d like to practice some Hawaiian, my full name is pronounced AH-na Lay-LAH-nee Kah-AH-ha-noo-ee!
  2. Describe your role on the USGBC Marketing Team. I curate our growing collection of digital assets and also serve on our project management team. I’m also the staff photographer and provide video support for multimedia projects.
  3. Go-to Karaoke Song: A Little Respect by Erasure
  4. Favorite ice cream flavor: It’s a toss up between mint chip or mango sorbet if it’s really hot out. I also love Italian gelato.
  5. Best movie: The Princess Bride
  6. How do you contribute to USGBC’s sustainable efforts in your personal life? I installed a rain barrel in my backyard to water our plants. We use reusable shopping bags and purchase environmentally friendly cleaning products.
  7. Favorite guilty pleasure TV show to watch: Game of Thrones
  8. Cat or dog person? I’m a dog fanatic, 100%. I used to be the president of the non-profit that sponsors our local dog park. It’s like being on PTA for your dog. We just adopted an adorable mutt named Lani, which means “heaven” in Hawaiian.
  9. Best book you’ve read in the past year: I really enjoyed Mindy Kaling’s Is Everyone Hanging Out Without Me? (And Other Concerns). I think she is amazingly talented.
  10. Favorite city to visit: As a foreign language major, I studied abroad with Loyola University of Chicago in Rome and ended up living in the Eternal City for three years after I graduated. From the architecture and antiquities, to the food and the people, it’s a magical place. I feel very at home there and can’t wait to go back.

Our innovative Studio team is comprised of marketing strategists, digital analysts, designers and developers. This supergroup is responsible for making sure that USGBC communicates with the world in the most effective and compelling way while maintaining our standards of sustainability. The only way we can accomplish this is through collaboration. Glad you guys took the time to meet Ana—stay tuned to meet the rest of our talented team members!