4 ways to wireframe web designs

facebooktwittergoogle_plusredditpinterestlinkedinmail

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?
Share it in the comments.

facebooktwittergoogle_plusredditpinterestlinkedinmail

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.