4 ways to wireframe web designs

Filip Resse

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


  • Speed
  • Simplicity
  • Creativity


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


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.


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


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


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:


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


  • Limited functionality
  • Purchase required after trial


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.


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


  • 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

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

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