当你需要为网站快速创建一个直观和可用的用户界面的时候，在写代码之前做好设计是基础。一个普遍的方法就是通过线框图来展现你的设计，线框图是一种使用线条为基本元素的绘画，与蓝图相对，像框图表现基本的导航和功能块，比如内容、功能等，这些都已经进入网站的创建。线框图的主要原理就是通过归类每一个页面上的入口和出口来保证设计的逻辑流程与功能。
WebsiteWireframesTools(Web)－－网站线框图工具
Oversite(Mac,Win,Linux)
Jumpchart(Web)
Jumpchart使用的Textile标记语言非常简单易学，简单性是非常好的特性，另外对于有可复用性要求的项目来说小纸片也是不错的功能。
这个软件基于web，用于快速规划和创建原型。一个Jumpchart是可以共享的，可以导出齐整的css，自动生成自己的网站地图。不能使用它创建高级页面布局，或者富导航，但是对于基本的网页布局设计是足够好用的工具。
Denim(Win,Mac,Unix)
使用Denim可以使用手绘的方法创建带有链接的网页布局。
使用曲线来创建和改进你的设计，为了保持方向感，有一个可选的浮动窗口提供当前编辑曲线的一个放大的视图。有些人发现这在他们感觉到在设计中失去方向感的时候或是是在想拖曳一个在主窗口中不是很容易观察的页面的时候非常有帮助。
设计者可以在多重层次上创建网站的显示方式，网站也可以在多重层测上被修改更正。
Dia(Win,Mac,Linux)
Dia是一个矢量做图工具，类似Win32的Visio.适用于图形语言比如数据流、entity-relationshipdiagrams，组织关系图表，统一建模语言（UML），电路图等等。适用于复现图形相互连接的情形。Dia是非常好学的，而且对语有能力的用户来说很熟悉。
Dia可以加载和保存图形为XML格式，可以导出为多种图形格式：eps.svg.xfig,以及png格式，也可以打印（包括多页打印）。另外，它是免费的。
MockupScreens(Win)
由于界面很直观，所以非常容易使用。可以快速添加组件，快速创建窗体。可以的组织这些窗体创建场景和故事板。可以为单独的窗体添加注解，比如使用留言本的方式或者添加彩色图标，看起来非常有吸引力。另外他是以一种演示幻灯片的模式，所以非常容易向别人讲解你的设计。
BalsamiqMockups(Win,Mac,Linux)
如果需要更加快速的选择，需要用户快速添加功能：输入一些控件或者图标的名称的若干字母然后就出现了！selectfromthelistofsuggestions,andyourcontrolwillbeaddedinnotime.另外一个非常有用的特征就是BalsamiqMockups具有无限制的返回和重做，另外动作名称清除明白也是非常有帮助的。对输出的范围限制是比较遗憾的，但起码是比较好用和快捷的。
MockupsistightlyintegratedwithAtlassianConfluence,AtlassianJIRAandXWiki.使用60个预先构建的空间你能设计任何东西，从一个超简单的对话框到正式的软件，从一个简单的网站到富交互网络应用。
能够在Mac,Windows，linux上使用，桌面版需要70美元。
LucidSpec(Win)
LucidSpec是Window适用的软件，用来创建原型和描述软件界面。使用这个软件可以快速创建页面布局，向用户展示，为程序开发者添加更多的细节。可以节省开支，增进用户的满意度，加快项目交流，明确需求。甚至可也可以创建功能需求说明文档。LucidSpec可以模拟软件的运行状态，这可以帮助设计者和用户发现遗漏或者错误的需求。我比较喜欢的是它支持17种不同的组件，包括菜单、网格、树状结构和日历。这些组件都可以重新设置其参数。
使用LucidSpec，你在三种活动中循环：1）设计页面布局和内容，在窗体中安排组件的位置，修改窗体和组件的参数值。2）模拟应用的运行，尤其是窗体之间的转换流程。2）描述在布局中不太明显的动作，这些描述都以绑定在组建或窗体上，也可以被引用。
iRise(Win)
Ithinkitshighcostisagreatnegative.
Intuitect(Win)
Pencil(Win,Linux,FireFoxAddon)
Pencil是一个免费的草图和GUI原型工具，可以作为Firefox的插件的形式安装，也可以独立安装。它的功能包括：通过模板创建图示、设计原型、有背景的多页面文档、支持富文本的即时编辑的文本控件、PNGrasterizing,跨平台等等。Pencil项目不需要过多的专业知识，而且非常快捷。Pencil会是永远免费的，可以再任何支持Firefox3的系统上运行，这个项目看起来是非常有用的而且同时是免费的。
OmniGraffle(Mac)
在流程图上创建连接是我很喜欢的。我喜欢它的功能强大同时界面易用。贝塞尔曲线是非常有用的，但是以我个人角度来看我觉得有些难用。
有两个版本供选用：基本版和专业版。只适用于MacOSX.
EasyPrototype(Win,Mac)
Mac和Windows都可以使用。
Thecostis$69witha30daymoneybackoption.
SmartDraw(Win)
它也提供了网页标注，点击抓取任一个网页然后在其上标注。对于网站评审和开发都是非常有帮助的。SmartDraw可以喝微软的办公软件无缝结合。SmartDraw的模板是非常有力的，LimitedmapsmaybeitsdrawbackwhichIfeel.
SmartDraw's内建相片-软件功能，可以从相机或者其他地方直接导入照片，切割或者缩放、调节对比对和颜色，然后将其放入组织关系图或者其他任何绘图之中。
只可以在Windows使用。
MxGraph(Web)
使用MxGraph是不需要安装插件或者第三方软件的，只需要在web浏览器中创建和绘制图表。MxGraph可以用于对网络、数据库等追踪工作流程。
MxGraph的价格多种多样，取决于使用。ThepricerangeofmxGraphstartsat3,600Eurosforalimiteddistributionsingledevelopmentlicensewith12monthsoftechnicalsupportandsoftwareupdates.ThebrowserlistitsupportsincludesFirefox,IE,Safari,Opera,Camino,Iceape,Epiphany,Galeon,GoogleChrome,Ithinktheyforgottomentionflock.