{"id":924,"date":"2012-07-02T15:50:23","date_gmt":"2012-07-02T06:50:23","guid":{"rendered":"http:\/\/brain.dailyon.net\/?p=924"},"modified":"2012-07-02T15:50:23","modified_gmt":"2012-07-02T06:50:23","slug":"10-excellent-tools-for-creating-web-design-wireframes-%ec%9b%b9%eb%94%94%ec%9e%90%ec%9d%b8-%ea%b0%9c%eb%b0%9c%ec%8b%9c-%ec%9c%a0%ec%9a%a9%ed%95%9c-10%ea%b0%80%ec%a7%80-%ec%99%80%ec%9d%b4%ec%96%b4","status":"publish","type":"post","link":"https:\/\/blog.goorigo.com\/?p=924","title":{"rendered":"10 Excellent Tools for Creating Web Design Wireframes (\uc6f9\ub514\uc790\uc778 \uac1c\ubc1c\uc2dc \uc720\uc6a9\ud55c 10\uac00\uc9c0 \uc640\uc774\uc5b4\ud504\ub808\uc784 \ud234)"},"content":{"rendered":"

10 Excellent Tools for Creating Web Design Wireframes<\/a><\/h1>\n
Posted by Henry Jones<\/a> on Mar 30, 2010 | 51 Comments<\/a><\/div>\n
\n
<\/div>\n
\ucd9c\ucc98 : http:\/\/webdesignledger.com\/tools\/10-excellent-tools-for-creating-web-design-wireframes
\n<\/a><\/p>\n

\ubb34\ub8cc\uc774\uba74\uc11c \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \ub2e4\uc6b4\ubc1b\uc744\uc218\uc788\ub294 \ud234 ~! \uc5f0\ud544\uc744 \uc368\ubcf4\uc790
\nhttp:\/\/www.evolus.vn\/Pencil\/Downloads.html<\/a> <\/p>\n<\/div>\n<\/div>\n

When starting a new web design project, it\u2019s always a good idea to begin with a wireframe<\/a>. The purpose of a wireframe is to communicate the layout of a page without getting caught up in color and design elements. Wireframes can be a big time saver as they help all parties involved come to an agreement on placement of major page elements such as headers, content areas, navigation menus, and footers. The key is to get the layout nailed down so major layout changes won\u2019t take place once detailed design elements are in place.<\/p>\n

There are several different routes that a designer can take for creating wireframes, and there are even applications designed specifically for this. For this article, we\u2019ve rounded up 10 excellent tools for creating wireframes<\/strong>.<\/p>\n

MockFlow<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

MockFlow allows you to design and collaborate (in real-time) user interface mockups for your software and websites. It comes with numerous built-in components & icons.<\/p>\n

Axure<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

Axure enables application designers to create wireframes, flow diagrams, prototypes, and specifications for applications and web sites. It lets you use ready-made widgets including buttons, form fields, shapes, and dynamic elements that you can edit and format in a familiar environment. Or you can create your own custom widget libraries.<\/p>\n

Balsamiq Mockups<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

Using Balsamiq Mockups feels like you are drawing, but it\u2019s digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. With 75 pre-built controls to choose from, you can design anything from a super-simple dialog box to a full-fledged application, from a simple website to a Rich Internet Application.<\/p>\n

Pencil Project<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

The Pencil Project is a free addon for Firefox. Some key features include: built-in stencils, multi-page document support, and multiple export options.<\/p>\n

HotGloo<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

HotGloo is completely web based with lots of features that let\u2019s you drag and drop and scale items easily. It also has support for realtime collaboration.<\/p>\n

Mockingbird<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

Mockingbird is another web app with a focus on collaboration. It allows you to link multiple mockups together and preview them interactively to get a feel for the flow of your application.<\/p>\n

Cacoo<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

Cacoo is an online drawing tool that allows you to create a variety of diagrams such as site maps, wire frames, UML and network charts.<\/p>\n

ProtoShare<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

ProtoShare is an easy-to-use, Web-based prototyping tool with a focus on collaboration. Team members can review work and provide timely feedback, ideas, and suggestions on clickable wireframes or creative content.<\/p>\n

iPlotz<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

iPlotz allows you to rapidly create clickable, navigable mockups and wireframes for prototyping websites and software applications.<\/p>\n

OmniGraffle<\/a><\/h3>\n

\"wireframing\"<\/a><\/p>\n

OmniGraffle is an app for Mac OS that gives you plenty of tools to create amazing wireframes and mockups, but it\u2019s also great for creating all kinds of charts and diagrams as well.<\/p>\n","protected":false},"excerpt":{"rendered":"

10 Excellent Tools for Creating Web Design Wireframes Posted by Henry Jones on Mar 30, 2010 | 51 Comments \ucd9c\ucc98 : http:\/\/webdesignledger.com\/tools\/10-excellent-tools-for-creating-web-design-wireframes \ubb34\ub8cc\uc774\uba74\uc11c \ud074\ub77c\uc774\uc5b8\ud2b8\ub85c \ub2e4\uc6b4\ubc1b\uc744\uc218\uc788\ub294 \ud234 ~! \uc5f0\ud544\uc744 \uc368\ubcf4\uc790 http:\/\/www.evolus.vn\/Pencil\/Downloads.html  When starting a new… <\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/924"}],"collection":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=924"}],"version-history":[{"count":0,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=\/wp\/v2\/posts\/924\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=924"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=924"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.goorigo.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=924"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}