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.

  • http://aubergine-design.com/ Tim

    Usually when I wireframe, I just make a kind of “ruler” with squares and rectangles of different pixel-sizes and put them on the (top layer of a) blank document and follow that guide. I’m considering MockingBird tho…

    • Filip Reese

      Thanks for sharing. So you do that as part of the set up process in Photoshop before you begin designing?

      • Tim

        Usually before the designing process (when everything needs to be pixel-perfect) so than I can start on the design.

  • http://www.webdesigncreare.co.uk/ Steve Harwood

    I’m usually one for sketching things down on paper and wire framing layouts in Photoshop using guides so that I can ensure things stay aligned throughout designing. Although not always for each page, mainly for the homepage but hadn’t heard of any of these before you shared them in this post. MockingBird looks like it will be particularly useful so cheers Filip for sharing!

  • Filip Reese

    No problem and thanks for sharing your technique.

    I just came across another program I would also like to share. Its very feature rich and has a similar artsy feel to simple. Check it out http://www.balsamiq.com/ .

  • http://www.buraq-technologies.com web design

    Wire frames are the basic of efficient web designing. Thank for this article.Thanks for sharing.

  • irul

    pencil and paper is great…..do sketching is very exploring mind

  • http://www.cbil360.com/ CBIL60

    For ease and comfort pencil paper is the best option, it gives freedom to show and apply creativity.

  • Hayabuza

    Designosaurus Rex here ! i love paper and craions are fun :) u can get dirty by creating a line :)

  • Stavros Kalyvas

    I use Gliffy.com
    Exceptional visual abilities and collaboration tools.
    Wix is useful as well

  • http://www.vishualmedia.com Vishnu Panji

    I use Pencil or Axure to create nice wireframe with lot of features.