Mockup tool

To find out more about Balsamiq Mockups 3, head to the product page at

Download a free trial here:

Posted by 홍반장水 홍반장水

Mockup tool  -




UI 개발도구 - 다음카카오





-  워크플로위 :

 : 워크플로우, To Do list 를 만들 수 있다.



Posted by 홍반장水 홍반장水  [MockUp] - Mockup 도구




Posted by 홍반장水 홍반장水

Framer.js: A prototyping toolkit


Framer.js is a toolkit for turning static mockups into interactive and animated prototypes. You can generate assets out of Photoshop, animate layers in 3D space, and more.



Posted by 홍반장水 홍반장水

15 Online HTML5 Tools for Web Designers

by Andy on October 10, 2012


Online HTML5 tools are quite useful for web designers who wants to forge ahead of the competition, and have more satisfied clients. It is of course important to follow developments and keep an eye on new tools that emerge.

HTML5 is the new version of the markup language HTML that has been used for presenting and structuring online contents since the early 90s. It is an internet core technology that was proposed originally by Opera Software. If you want to learn more of it’s background and history these HTML5 infographics can help you. HTML has been standing in the shadow of other frameworks like Flash and IE, but the word is, that this is going to change with the arrival of HTML5. As of today, HTML5 is still being developed, but believe me, it is here to stay.

HTML5 has opened a window of opportunities for web designers. Online web design tools based on HTML5 makes it easier to incorporate audio, video, drag and drop, fonts, animations and graphics into web pages. HTML5 also helps web designers build mobile friendly website themes to ensure excellent user-experience when surfing the Internet on mobile devices. However, since such tools are fairly new, some people may still be unaware of their true potentials. Also, some web designers still want to use Flash and other popular framework as their primary tool set.

Below, I have listed 10 useful online HTML5 tools. They can provide developers and web designers with manoeuvrability in making websites more convenient, productive and attractive.

Moqups – HTML5 App For Creating Wireframes

Moqups is a HTML5 web app for creating wireframes, mockups or UI concepts. You can go to their blog and read more about this highly popular project.


Fontdragr – Online Font Testing Tool

If you are a designer, you might find it difficult to choose a decent font. However, using this online font testing tool can make the process much easier. You can view any font you want in a webpage without changing its CSS or HTML code.


Liveweave – HTML5, CSS3 & JavaScript Playground

Liveweave is a new playground for developers and designers to test HTML, CSS and Javascript. Liveweave editor has built-in context-sensitive autocompletion for HTML4/HTML5 and CSS2/CSS3, that makes life a lot easier.


Adobe Edge Animate

Edge Animate will allow you to create animated and interactive web contents. It has an easy to use and intuitive interface, precise control, broad reach and more.


HTML KickStart

HTML KickStart is not really a tool, it is a set of HTML5, CSS, and jQuery building blocks for website development. It includes files, layouts, and elements that will give you a headstart and save you hours on your projects.


Stitches – An HTML5 Sprite Sheet Generator

Stitches is a really easy-to-use HTML5 sprite sheet generator. Simply drag and drop image files onto the app, click “Generate” and your sprite and stylesheet will be good to go. Currently compatible only with the latest version of Firefox and Chrome.


Create – Web Editing Interface

Create is a new web editing interface that uses a browser-based HTML5 environment for managing your content. It can be adapted for use with virtually any content management backend.


SpriteBox Online HTML5 Tool

These days, compressing images seems to be the rage. By placing your photos in a Sprite, you can increase the rate of your loading times as well as image transitions. Online Sprite Box Tool will aid in designing photos into sprites with the use of HTML5, CSS3 and jQuery.


Online Velocity Sketch Tool

This unique HTML 5 online canvas drawing tool can make creative, strange looking creations. Use this HTML5 tool to come up with something really awesome for your designs.


On/Off Flipswitch HTML5/CSS3 Generator

A beautifully designed and super-easy-to-use tool for generating your own HTML5/CSS3 “On and Off” flipswitches with optional animated transitions.


Online SVG to HTML5 Canvas Tool

Most vector art packages such as Inkscape and Illustrator can export SVG or Scalable Vector Graphics elements. This tool will allow you to convert SVG files into its HTML 5 canvas equivalent.


Online 3D Sketch Tool

This sketch tool uses the capability of HTML canvas in creating 3D drawing. The tool will allow you to draw with dashed lines and vibrate your drawing. You can also rotate the 3D canvas by dragging with the cursor horizontally while pressing down the Space Bar.


Online Pattern Generator Tool

This is an online tool that can be quite useful for creating header and page backgrounds. Designers can even use the tool to create heading backgrounds. The tool will allow you to try out any pattern you want in just a few seconds.


Online XRay Tool

Online XRay Tool allows designers to quickly view the details of various page elements that are present in any webpage with just a few clicks of the mouse. Just drag the website bookmarklet into your own book bookmarks, go to the webpage you like to analyze, click on the XRay bookmark and then click on any element of the page. The tool can take care of HTML5 elements like canvas and give you the design data you need. online-Xray-tool

Online HTML5 Audio Maker Tool

Among the best features of HTML5 is the introduction of the audio tag. This tool will help designers get familiar with the newest audio features being offered by HTML5. Even more interesting is the fact that designers can play, not just with audio, but also with video integration using this HTML5 online tool.


Group Discussion!

Please tell us what you think of these HTML5 tools by adding your comments below. And please, if you have considerable experience with an online HTML 5 tool not included in my list, let me know about it. You are also welcome to share this article to your friends and colleagues.

Posted by 홍반장水 홍반장水

mock up 웹툴 중 테스트.

무료회원 가입 가능한데, 1 프로젝트에 4페이지까지만 가능하고, 유료가 되야 이 기능 저 기능...

"sign in" 하시고, 로그인하면 프로젝트 만들라고 표시된다.

"WireFrame Project" 중 하나를 선택해야하는데, 난 "iPad App" 을 선택.

프로젝트명 입력하고.

프로젝트 생성하고 들어가면 아래처럼 기본 템플릿이 나온다. 우측 메뉴바에 [component]탭에선  선택가능한 메뉴/버튼들을 스크롤해서 볼 수 있다. [pages]탭을 선택하면 작업된 페이지 목록이 나온다.

각 항목들을 캔버스에 옮겨다 놓으면 빨간선이 나타나서 위치를 조정하기 쉽게 해준다.

Posted by 홍반장水 홍반장水
TAG mockup
Mockup 이란? 비행기나 자동차 따위를 개발할 때에, 각 부분의 배치를 보다 실제적으로 검토하기 위하여 제작하는 실물 크기의 모형.

MockUp :

Nov 16, 2009

18 Mobile Frameworks and Development Tools for Creating iPhone Apps

iphonemockupSo you have a killer idea for an iPhone app, but when you describe it to people they just don’t get it. Maybe you have a client that is a visual thinker and needs you to draw it out for him. That’s when wireframes, mockups and stencils can be your saving grace.

There are many different types of tools available to developers, from low-tech stencil kits to high-tech collaborative software. So I’ve rounded up a few of the more popular ones people are using specifically for iPhone development. It’s far from being the definitive list, but it’s definitely a good place to start.

Low Tech Solutions


notepod Notepod is a notepad shaped like an iPhone. Each notepod is 100 pages of 60 x 110mm double sided paper. The front has 52mm x 77mm blank space (the iPhone screen), the back is a 6mm grid.

Project Page

iPhone UI Stencil Kit

stencilkit The iPhone ui stencil kit is a stainless steel, laser cut stencil kit for drawing quick mock-ups and wireframes for iPhone apps. It also comes with a Zebra mechanical pencil.

Project Page

iPhone Sketch Pad

iphonesketchpad The iPhone Sketchpad works precisely with the iPhone Stencil Kit, with one phone silhouette on the front side and three on the back.

Project Page

App Sketchbook

appsketchbook The App Sketchbook has 50 Double-sided, perforated pages each with 3 actual sized iPhone templates. Each page also has has 20px ruler markings and a ruled section for notes.

Project Page

Vector Images

MetaSpark’s Fireworks Vectors

iphone_mockup_toolkit A collection of vector iPhone UI elements for Fireworks CS3 and CS4.

Project Page

320480 Stencil PSD file

320480 Most iPhone screen elements, sensible layer sets all contained within one PSD file.

Project Page

Graffletopia Stencil Kit for Omnigraffle

graffletopia Graffletopia’s stencil kit for Omnigraffle. It is for quick sketching of iPhone ideas. Use the outline for printouts so you can hand sketch as well. The symbols are meant as a check list for included features in your app development.

Project Page


mockapp_ppt MockApp is a set of iPhone ui templates and library files put together for use in Powerpoint or Keynote.

Project Page

Firefox Plug-ins

iPhone Prototype

iphoneprototype This is a plug-in to browser Mozilla FireFox for prototyping interface of iPhone applications for creating an iPhone mock-up. Currently Alpha – not compatible with FF 3.55.

Project Page

Firefox Pencil

pencil Pencil is a free and opensource tool for making diagrams and GUI prototyping. Pencil runs on the Mozilla Gecko engine, turning the Firefox browser into a sketching tool with just a 400-kilobyte installation package.

Project Page

Fireworks Plug-ins


fwphp This plug-in combines Fireworks with some jQuery and PHP to give you a prototype you can not only view, but interact with, directly on your iPhone, just as if it’s a live app.

Project Page

iPhone Apps


liveview Liveview is an iPhone app that consists of two parts: the ScreenCaster and the Application itself.  ScreenCaster launches a simple iPhone skin on your Mac. From the same network, launch the LiveView app in your iPhone. Whatever the ScreenCaster is highlighting is now seen in the LiveView App. It also interprets touches as mouse clicks, turning it into a two way interactive prototype.

Project Page

Web Based Tools


mockingbird Mockingbird is a web based mockup/wireframe tool built using the Cappucino framework, so there’s no flash to wrestle with. While you can’t actually design your mockups from an iPhone (who’d want to?), the tool does have some very handy features. You can drag elements onto the screen, create multiple pages, link to other pages and share directly from the web.

Project Page


pidoco-software-prototyping Pidoco is a web-based tool that lets you create clickable wireframes via drag & drop ui and then collaborate with remote users on each project. The tool also includes iPhone stencils.

Project Page

iPhone Mockup

iphonemockup iPhone mockup is a web based tool that is currently in Alpha release only. You can design your mockup as a hand sketch or illustration, and mockups can contain user-uploaded images and user-entered text. Your mockups will be accessible via url so they are unsecured.

The developer makes this perfectly clear and warns that he could discontinue hosting mockups at anytime, thereby deleting any work. That makes this a handy tool for quick and dirty mockups you want to print or share with someone on the fly, but not for much more.

Project Page


protoshare Protoshare is a collaborative, web-based prototyping tool that helps teams visualize requirements for interactive projects and work together in real-time. It has an iPhone component that can be seen here.

Project Page


iplotz With iPlotz you can create clickable, navigable wireframes to create the experience of a real website or software application. You can also invite others to comment on the designs, and once ready, you can then manage the tasks for developers and designers to build the project.

Project Page

Installed Software


cogtool CogTool is a general purpose UI prototyping tool simply using a storyboard of your design idea with sketches, images or on a canvas. Demonstrate tasks on that storyboard, then press a button to produce a valid cognitive model predicting how long it will take a skilled user to complete those tasks.

Project Page


balsamiq Balsamiq mockups is desktop software that is designed to help teams or clients collaborate on wireframes and mockups. There are iPhone specific controls included.

Project Page


OmniGraffle is award winning diagraming mockup or graphic design software. Combined with Graffletopia’s iPhone stencil kit, this software is a great addition to any app developers toolbox.

Project Page

Justinmind Prototyper

justinmind Justinmind prototyper allows you to create fully functional wireframes for mobile applications and generate your HTML high-fidelity wireframes.

Project Page


irise iRise for iPhones gives developers a way to quickly prototype the look, feel and behavior of Apple iPhone applications through pre-defined visualization widgets and templates that can be quickly assembled into a high definition mobile applications.

Project Page

Posted by 홍반장水 홍반장水
TAG Mobile, mockup