4 ways to wireframe web designs

Ask any designer and they will tell you that the brainstorming and concepting phase is the most important part the of design process. Every great design starts with an idea, and this holds true not only for logo or illustrative design but also for web design.

Whether your final product is a Photoshop document or HTML and CSS, you should always start with a wireframe — a visual framework that illustrates the layout of content, interface elements and navigational system. When you demonstrate the functionality of your design to clients, it gives them options to choose from. This can save time before you become invested in one version.

The following 4 ways to wireframe web designs are some of the best techniques and software available to help jump start your next project.

Pencil and Paper

Keep it old school. Despite all of our recent advances in technology many designers prefer to sort out their ideas with an old fashioned sketch. Using pencil and paper, its easy to mockup a layout that solves organization issues of each page.

website wireframe

Pros:

  • Speed
  • Simplicity
  • Creativity

Cons:

  • Difficult to reproduce/share
  • People might think you are a “designosaur”

MockingBird

This easy to use, web based application called MockingBird is great for making fast and functional website mockups. It has an intuitive user interface full of pre-made web elements and allows you to link pages together. On top of that you can work collaboratively on a project with members of your team or your client.


Pros:

  • Work from the browser on any machine
  • Ability to link pages
  • Easy to collaborate
  • FREE/affordable

Cons:

  • Limited choices for stylizing your mock up
  • To work on more than two projects you need to upgrade to a paid version

SimpleDiagrams

SimpleDiagrams is, you guessed it, very simple! Its easy to use and lots of fun.

The drag and drop interface makes putting basic mockups together a brease. There are different choices for the style/background, and it’s easy to save your work as a .png so you can email it to your client or upload it on 99designs. While this program doesn’t have the in depth functionality of some other wire framing programs, it looks slick and you will definitely enjoy playing around with it.

Check out this mock up for a responsive web design I did in a matter of seconds:

Pros:

  • Fun!
  • Compatible across all Mac, Windows, Linux operating systems
  • Artsy hand-drawn style

Cons:

  • Limited functionality
  • Purchase required after trial

iMockups

If your lucky enough to have an iPad, you may want to try brainstorming and conceptualizing your design from the comfort of your couch with an intuitive program called iMockups.

The snap-to-grid feature makes pixel perfect alignment possible. You can easily share editable files with your clients or export to a universal format like .png or .jpg.

Pros:

  • Work from your iPad
  • Snap-to-pixel functionality
  • Professional results with a fun interface

Cons:

  • Only available for iPad

Whats your favorite way to wireframe web design? Share it in the comments.

The author

Filip Resse
Filip Resse

Filip Reese works as a Community Liaison at 99designs in San Francisco. He earned a B.A. in International Relations with a minor in Spanish from the University of California, Davis and has spent time living, traveling, and studying in Europe, Asia, and South America. Filip is an active skateboarder, photographer and outdoorsmen. If hes not writing tweets or handling disputes you can probably find him at Potrero del Sol Skatepark.

Related articles

How eJump Media grew their web business through 99designs
/

How eJump Media grew their web business through 99designs

eJump Media (known to us as Hitron) has been a longtime community member on 99designs. Since joining back in 2009, the team has won hundreds of contests and worked on many 1-to-1 Projects with more than 70 repeat clients. Back in 2014, we profiled their evolution as a team, which started with one account under the name…

Go wild for outdoorsy design
/

Go wild for outdoorsy design

June 4th is National Trails Day here in the U.S.—a chance to celebrate the paths for hiking and biking that weave through the country’s great nature preserves. We thought we’d take the opportunity to zero in on the outdoorsy design work that makes these activities possible. Could hiking trails really depend all that much on graphic…

Current Design Contests

Designers, check out these contests so you can start building your career.