In this article we have 20 completely free Web UI kits and stencils that are perfect for the initial mockup or wireframe stage of a web design project. Most of the kits are editable and the kits are in either .psd, .ai or .png format, but you will also find some Omnigraffle stencils and some kits in .svg format. So, whatever your preferred format you are bound to find the perfect kit for you.

Modern Web UI Set (.psd)

This free Web UI Set has everything included in the PSD file in well organized in folders, and fully editable using vector layers in Photoshop, from the button shapes, to the gradients, and text. Having every element editable means you can recreate anything you need that is not included in the file, just by using existing items as your base.
Modern Web UI Set (.psd) →

Massive Web UI & Button Set (.psd)

This free UI set contains all of the following elements in three distinct styles: glossy, satin/light gradient, and one-color. The satin/light gradient set is available in 7 different colors (which you’ll find all of in the psd file).
Massive Web UI & Button Set (.psd) →

Web UI Element Pack (.psd)

This User Interface Element Pack in PSD format, contains 19 elements including Loading Bar, Button in normal and clicked state, Button toggle, close, next, previous and paging icon and slider.
Web UI Element Pack (.psd) →

Web UI Wireframe Kit (.psd)

This web UI template kit is made completley with shape objects and in some cases converted into SmartObjects. So they’re totally scalable.
Web UI Wireframe Kit (.psd) →

Browser Form Elements (.psd)

Browser Form Elements (.psd) →

Web Page Elements (for Omnigraffle)

With the open-source “Bitstream Vera” font set, free icons from FamFamFam and this Omnigraffle web ui set, you should have most of your common web page elements covered, including headings, form elements, content management function, image placeholders, etc.
Web Page Elements (for Omnigraffle) →

Wireframe Kit (Google Drawings)

Google Drawings is still in its early and simple form and didn’t have any notable UI kits, until now. These kits have been specifically designed for Google Drawings, and you have a choice of four templates, that include: The main blank template, product detail page, landing page and item list view.
Wireframe Kit (Google Drawings) →

Sketching & Wireframing Kit (.ai, .eps, .pdf & .svg)

Sketching & Wireframing kit is a free set of elements for sketching and wireframing. It consist of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.
The Kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format that can be easily modified. It can also be downloaded in PDF and EPS formats.
Sketching & Wireframing Kit →

Wireframe Symbols (.ai)

This download contains the symbol library and a full Adobe Illustrator file with all of the elements spread out on the art board. To install this library just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator go to your Symbols Palette and load the library.
Wireframe Symbols (.ai) →

Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle)

The popular Yahoo! Design Stencil Kit version 1.0 is available for OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG), and covers the following topics: Ad Units, Calendars, Carousels, Charts and Tables, UI Controls, Form Elements, Grids, Menus and Buttons, Mobile, Navigation and Pagination, OS Elements, Placeholder Text, Screen Resolutions, Tabs and Windows and Containers.
Yahoo Design Stencils (.xml, .pdf, .svg, .png and Omnigraffle) →

Ext JS v3.0 Stencil (for Omnigraffle)

This is the updated version of the Omnigraffle ExtJS stencil Ext JS. This update contains many improvements and additions, namely that the developers have recreated most Ext JS elements as Graffletopia shapes or groups. This is especially helpful for resizing titles, tables cells, and so on.
Ext JS v3.0 Stencil (for Omnigraffle) →

165 Vector Icons in 5 Colours (.ai, .jpg and .svg)

This huge kit, from Liquidicity, contains 165 icons and are available in these five colors: Red, green, blue, black and white.
165 Vector Icons in 5 Colours (.ai, .jpg and .svg) →

Flex 3 Stencil (for Omnigraffle)

This Omnigraffle stencil contains all of the Flex components from the Flex 3 Style Guide: panels, data grid, buttons, fields, links, toggle, menu, scrolls, accordion, tabs, list, data picker, tool tip, errors.
Flex 3 Stencil (for Omnigraffle) →

Twitter Widget Stencil (for Omnigraffle)

This stencil includes a selection of useful Twitter badges and widgets.
Twitter Widget Stencil (for Omnigraffle) →

Web Designer Toolkit (.psd)

Web Designer Toolkit (.psd) →

Facebook GUI (.psd)

Facebook GUI (.psd) →

Facebook Applications (Omnigraffle)

This is a pretty sizable collection of Facebook related elements to use in creating wireframes for Facebook applications.Facebook Applications (Omnigraffle) →

Web Elements Kit (.psd)

This huge set of various web elements with 17 easy to modify modules, with each module comes with four different color options.Web Elements Kit (.psd) →

Flex Darkskin UI (.psd)

This beautiful and polished free Flex UI skin is available for free from psdthemes.com, but you do need to signup first.
Flex Darkskin UI (.psd) →

WEB UI Treasure Chest

WEB UI Treasure Chest →

CSS3 Button Maker

The CSS3 Button Maker gives you a number of sliders and color pickers to style your own CSS3 button. Then you can grab the code to use in your own project.

CSS3 Generator

Select from a list of CSS3 properties, fill in a few parameters to fit your needs, and it spits out the generated code along with a live preview.

CSS3 Please!

CSS3 Please! is a CSS3 rule generator that acts as a sort of playground. It allows you make various CSS3 tweaks and see a live preview. Then you can copy and paste into your own file.

CSS3 Gradient Generator

The CSS3 Gradient Generator was created as a showcase of the power of CSS based gradients as well as a tool for developers and designers to generate a gradient in CSS.

CSS3 Transforms

CSS3 Transforms gives you a set of sliders to experiment with various transforms such as position, rotation, skew and more. It also generates the corresponding code on the fly.

CSS3 Selectors Test

CSS3 Selectors Test automatically runs a large number of small tests which determines if your browser is compatible with a large number of CSS selectors. If it is not compatible with a particular selector it is marked as such. You can click on each CSS selector to see the results, including a small example and explanation for each of tests.

This post covers 10 of the best free web UI kits, resources and stencils from around the web to kick-start the early stages of your next project.

If you’re partial to any particular free web UI kits or resources, let us know about them in the comments below.

1. UI Design Framework

This is a complete design framework that includes a Graphical User Interface (GUI) library with hundreds of vector elements for interface design. Plus, it has a minimal UI icons set with 260 vector icons for Illustrator, and a library with 200 styles to apply in Illustrator. They can be utilized to create more comprehensive wireframes, mockups and deliverables using consistent, well-designed common UI elements.

Each vector element can easily be customized to suit your needs by resizing, coloring and tweaking its appearance, all neatly contained within organized Illustrator panels.

2. Web UI & Button Set

A large, versatile web UI and button set that should have something useful for everyone. It’s available in three different styles with over seven colors and contains elements with three distinct aesthetics: Glossy, satin/light gradient, and one-color. The satin/light gradient set is available in seven different colors (all of which you’ll find in the PSD file).

The individual elements in the set include control buttons, info and text boxes, navigation elements, drop-down and collapsible box styles, speech bubbles, search forms and loading elements.

3. Sketching & Wireframing Kit

This is a comprehensive and well-organized set of resources for sketching and wireframing that consists of form elements, icons, indicators, feedback messages, tooltips, navigation elements, image placeholders, embedded videos, sliders and common ad banners.

The kit comes in two vector formats, one for Adobe Illustrator and the other in SVG vector format, which can be easily modified. It can also be downloaded in PDF and EPS formats.

4. Browser & Form Elements

Designers Toolbox is an excellent resource; take note of the free web browser windows and standard HTML form elements. You can choose from several options, including Windows Vista (IE/Firefox), Windows XP (IE/Firefox) and Mac OS X (Firefox/Safari). Once you’ve chosen your operating system and browser, you can then download the required browser window size, ranging from 640×480px to 1600×1200px.

Each form element package includes pull-down menus, input fields, radio buttons, check boxes, buttons, text fields and scroll bars, all within an easily editable PSD file.

5. Modern Web UI Set

This is a clean and modern web UI set for use in web design, applications, and print. Its clean, black-and-white aesthetic means it can be used in virtually any situation. Included within the package are navigation elements, buttons, drop-down menus, scroll bars, and login panels. The set was built in a non-destructive way, meaning everything included in the PSD file is well organized in folders, and fully editable using vector layers in Photoshop, from the button shapes, to the gradients, and text.

Having every element editable means you can recreate anything you need that is not included in the file, just by using existing items as your base.

6. UI Design Kit

For those who don’t wish to create interactive or complex wireframes or mockups, this UI kit provides a worthy alternative. You can simply open it within Photoshop and start utilizing the elements included. The kit contains buttons, drop-down menus, scroll bars, navigation elements, speech bubbles, radio buttons, avatars, tabs, checkboxes, text fields, and a search bar.

Included within the package are shape objects, which in some cases have been converted into SmartObjects, so they’re completely scalable.

7. UI Buttons & Icons

Here, you’ll find a selection of 165 high-quality UI icons and buttons, available in AI, JPEG and SVG formats, meaning each element can be easily modified. There are also five different color schemes to choose from. The package contains icons, loading bars, symbols, buttons, arrows, and star ratings.

It’s a well-designed, clean collection that provides a good base to use when beginning any type of UI design, wireframe or mockup.

8. UI Library

This is a simple but extremely useful Adobe Illustrator symbol library file with all of the elements organized on the art board. The package contains scroll bars, lists, buttons, tables, tabs, ads, text fields, and loading bars. This library of UI components could be utilized well when creating wireframes or mockups.

To install this library, just drag and drop the file named “Wireframe Symbols.ai” into your Adobe Illustrator Symbols directory. Once you are in Illustrator, go to your Symbols Palette and load the library.

9. Web Elements Kit

Here, you’ll find a huge set of UI elements that are easily modified through the layer styles. There are 17 modules in total in the package, with each module containing various color options. You can either use the “all in one” PSD or the individual PSD files for each element. Overall, the set is well organized with each layer labeled, so you can simply drag and drop them into your project.

Each text field is fully editable, with easily customizable colors. Also included is a “How To” help file with information on how best to use the files.

10. OmniGraffle UI Stencils

Try out this set of shapes for creating wireframes and mockups in OmniGraffle. It consists of the basic components you’ll need to create user interface specifications. Included in the package are header and footer variables, buttons, switches, controls, sliders, menus, headings, arrows, tabs, media players, modal windows, a color picker, and pagination elements.

An OmniGraffle UX template is also available (free), which includes shared layers for basic UX document needs, including title page, wireframes, and storyboards. The UX Form stencil is also an excellent resource for OmniGraffle, which provides different button layouts, a progress indicator, captcha code input field, labels, and more.

Are there any other free UI resources you would recommend? If so, let us know in the comments below.

明河是推荐直接使用jquery UI包中的拖放，当你的需求jquery 拖放UI无法满足时，不妨看下以下插件。

1、Superfun

• 查看示例
• 点此下载

示例中演示了对倾斜容器的拖放，当然这个demo不兼容IE。

2、CropZoom

• 查看示例
• 点此下载

拖放在图片剪切中的应用，这个朋友么应该不陌生，这个jquery插件的强大之处在于，你不只可以改变剪切区域，还可以控制图片大小，以及图片的旋 转。

3、Jquery Iviewer

• 查看示例
• 点此下载

这款jquery插件可当做web地图的基础模型，对web地图有兴趣的朋友很有参考意义。

4、Dragscrollable

• 查看示例
• 点此下载

当你在容器内进行拖拉时滚动条也会随之滚动，明河觉得有意思的地方在于标尺。

5、Table Drag and Drop JQuery plugin

• 查看示例
• 点此下载

表格行数据拖放。

6、 jquery mb.containerPlus

• 查看示例
• 点此下载

华丽的弹出窗体拖拉，你可以自由的控制弹出的窗体。

7、Creating a Draggable Sitemap with JQuery

• 查看示例

可拖放的站点地图……貌似实际意义不大。

8、jQuery Reel Plugin

• 查看示例
• 点此下载

这个插件很有意思，产生类似全景的效果。

LivePipe
LivePipe UI 基于 Prototype Javascript 框架，包含了一整套经严格测试并高度可扩展的 UI 控件，拥有很好的文档，在不支持 JavaScript 的环境中，可以无缝降级使用。包括 Tab, 窗体，文本框，多选框，评分控件，进度条，滚动条，右键菜单等多种控件。

LivePipe 首页与下载
LivePipe 演示与示例

UKI

UKI 是一套简单的 JavaScript UI 工具集，用于快速创建桌面风格的 Web 应用。包含的控件从滑动条，到分栏视图，不一而足。熟悉 jQuery 的开发者会发现这个工具很容易上手，非常简洁，无需安装框架，不依赖 CSS 引用。

UKI 主页与下载
UKI 控件，演示，示例

MochaUI

MochaUI 是 MooTools Javascript 框架 与 ExplorerCanvas 的一个备受欢迎的扩展，可以用来快速创建 Web 应用，Web 桌面，网站，饰件，独立 Windows，Modal 对话框等等。

MochaUI 主页与下载
MochaUI 控件，演示，示例

中文编译来源：锐商企业CMS 网站内容管理系统 官方网站
Sigma Ajax UI Builder
SigmaVisual 是一套基于 Web 的，所见即所得的 AJAX UI 创建工具，包含超过40个不见，如 Tab，对话框，树形图，时间线等，基于 JavaScript 和 PHP。

Sigma Ajax UI Builder 主页和下载
Sigma Ajax UI Builder 控件，演示和示例

JxLib based MooTools

JxLib 是一个基于 MooTools 的 JavaScript UI 框架，包含多数 Web 程序都需要的基本空间，如按钮，Tab，菜单，树形结构，对话框等等。JxLib 还支持换肤功能。

JxLib 主页与下载
JxLib 控件，演示与示例

Dijit – The Dojo Toolkit

Dijit 基于 Dojo，也是学习 Dojo 扩展的一个好起点。可以用来创建非常漂亮的 Web 2.0 GUI。支持多语种，甚至支持不同语种的文字书写方向以及本地化数字，日期等等。

Dijit 主页，下载
Dijit 控件，演示，示例

jQuery TOOLS

jQuery Tools 是一个非常轻量（2.5kb）的常用 UI 库，支持以下 jQuery 对象，Tabs, 工具提示，滚动条，层，表单以及 Flash 嵌套。

jQuery TOOLS 主页与下载
jQuery TOOLS 控件，演示，示例

jQuery UI

jQuery UI 基于 jQuery，包含 3 个大类，饰件，一些内置的 UI 对象；效果，对各种网页对象施加动画效果（如爆炸效果）；鼠标交互，如拖放操作。

jQuery UI 首页与下载
jQuery UI 控件，演示与示例

Prototype UI

Prototype UI 基于 Prototype 与 Script.aculo.us，包括多个模块（旋转木马，Modal 窗口，阴影，右键菜单等），每个模块可以单独安装使用。

Prototype UI 主页与下载
Prototype UI 控件，演示与示例

Jitsu

Jitsu 功能包括 XML 标记，页面编译，动画引擎，Ajax 以及运行时检测等等，它的 Ajax 功能使消费级 Web 应用的创建变得非常简单，支持客户端数据绑定，还可以将页面编译成 JavaScript，Jitsu 在 Firefox 和 IE 中运行最佳。

Jitsu 主页与下载
Jitsu 控件，演示与示例

Qutensil
Qutensil 仍在开发中，但其路线图已经显示出某些引人注目的东西，基于 Prototype 与 Scriptaculous ，包含消息，调色板，滑动条，工具提示，可拖放窗口以及警告，确认，提示等窗口。

Qutensil 主页，下载
Qutensil 控件，演示，示例

Script.aculo.us
script.aculo.us 是一个备受欢迎的 UI 工具集，基于 Prototype 框架，提供了诸如视觉效果，UI 控件以及面向 DOM 的工具。

Script.aculo.us 首页与下载

Alloy UI
AlloyUI 是一套功能丰富的 UI 框架，基于 YUI 3，部分基于 YUI 2，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

Alloy UI 首页和下载
Alloy UI 控件，演示与示例

iUI: iPhone UI 框架

IUI 包含一套 JavaScript 库，CSS 式样表及图片，是一个轻量级 iPhone UI 库，包含 iPhone 风格导航菜单，设备方向，iPhone 风格切换等功能，可以为你的 Web 程序带来 iPhone 般的体验。

iUI 主页与下载
XUI

XUI 是一个用于移动 Web 应用的轻量，极简，高度模块化的框架。它之所以非常轻量的原因是，它只支持移动浏览器，所有跨浏览器支持的代码都被剥离。它面向一线移动 Web 浏览器，如 Webkit，Fennec 以及 Opera，并有意将来对移动 IE 和黑莓提供支持。

XUI 首页，下载
Yahoo! YUI Library

Yahoo! YUI Library 可谓所有 Web UI 之父，可靠，功能丰富，目前已经发展到第 3 版。它拥有一个很庞大的开发团队，推出了非常丰富的功能，就功能而言，无可匹敌。

YUI Library 主页与下载
YUI2 入门
YUI3 入门
YUI3 控件，演示与示例

本文国际来源：Specky Boy 15 Javascript Web UI Libraries, Frameworks and Toolkits
中文编译来源：锐商企业CMS 网站内容管理系统 官方网站

Last week I posted a CSS3 dropdown menu and someone complained that I didn’t explain the CSS code in detail. Well, here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius. These CSS3 properties are commonly used to enhance layout and good to know.

RGBA

The first three values are RGB color values and the last value is the level of the transparency (0 = transparent and 1 = opaque).

RBGA can be applied to any properties associated with color such as font color, border color, background color, shadow color, etc.

Text Shadow

Text shadow is structured in the following order: x-offset, y-offset, blur, and color;

Set a negative value for x-offset to shift the shadow to the left. Set a negative value for y-offset to shift the shadow to the top. Don’t forget you can use RGBA values for the shadow color.

You can also specify a list of text-shadow (separated by a comma). The following example uses two text-shadow declarations to make a letter press effect (1px top and 1px bottom).

text-shadow: 0 1px 0 #fff, 0 -1px 0 #000;

Border Radius

The shorthand for border radius is similar to the padding and margin property (eg.border-radius: 20px). In order for the browsers to render the border radius, add “-webkit-” in font of the property name for webkit browsers and “-moz-” for Firefox.

You can specify each corner with a different value. Note Firefox and Webkit has different property names for the corners.

Box Shadow

The structure for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color.

Again, you can apply more than one box shadow. The following example is a list of three box shadow declarations.

-moz-box-shadow:
-2px -2px 0 #fff,
2px 2px 0 #bb9595,
2px 4px 15px rgba(0, 0, 0, .3);

1. Dynamic tooltip

Very cool tooltip! It’s very well made because it consists of cool transition effects and it also has a transparency and a drop shadow effect.

2. Popup Bubble

Brilliant tooltip! It looks so simple but it has awesome transition effects. This tooltip could be very useful for clean and simple websites.

3. jQuery Horizontal Tooltips Menu Tutorials

Beautifully made tooltip! This tooltip never disappears but follows when you hover over other links. Such a simple looking tooltip but its animation is brilliant.

4. Prototip

A lot of various very good looking tooltips which look awesome and have beautiful effects. Brilliant peace of work!

5. Coda Popup Bubble

Very nice tooltip with cool transition effect and it also has a drop shadow.

6. Awesomeness

Cool tooltip with nice transition effect and cool transparent border around it.

7. TipTip

Beautifully made tooltip with fade in / out transition effects, transparency and drop shadow effect.

8. (mb)Tooltip

Beautifully made tooltip with nice transition for input fields.

9. vTip

Simple but well made tooltip with a fade in transition effect. It has a cool looking border around it and when this tooltip appears, it also follows your mouse.

10. jGrowl

Cool tooltip which appears when you click on the link and then it sticks on the right-top corner of your window, and disappears after some time or when you close it manually by clicking on the close button. It also has fade in / out transition effects.

11. jQuery Ajax Tooltip

Interesting tooltip which can handle image and text together like a mini page. It has a drop shadow effect.

12. Digg-style post sharing tool with jQuery

Cool digg-style post sharing tool. This tooltip could be very useful for social networking website.

13. Input Floating Hint Box

Interesting tooltip with rounded corners for input fields. Tooltip fades in when you click on the input field and fades out when you click somewhere else.

14. Simpletip

Beautifully made tooltip with fade transitions. When you hover over a link, a tooltip fades in just above or below the link.

15. qTip

Very simple but good looking tooltip. This tooltip is available with rounded corners and also as a speech bubble tip.

16. Orbital Tooltip

Interesting tooltip plugin where you can set manually where your tooltip will show up.

17. Inline HTML Tooltip

Cool tooltip with nice transition effects.

18. tipsy

Interesting good looking tooltip which appears above, below, on the right or left side of the link.

19. Easiest jQuery Tooltip Ever

Simple tooltip but it could be useful to display an image when you hover over a link.

20. BsTip

Various simple tooltips with fade in and fade out transition effects and border around them.

21. EZPZ Tooltip

Very simple tooltip with border around it, which follows your mouse.

22. BeautyTips

Nice balloon style tooltip with transparency effect. There are available various tooltip styles, even interesting tooltips with cool animation, so you can choose one that fits best for your needs.

23. Tooltip

Various tooltip plugins for your website. Here you can find a simple tooltip with a nice fade transition and also you can find a good looking bubble style tooltip.

24. clueTip

Simple tooltip which shows up when you hover over a link and stays until you close it.

25. Creating A Simple Tooltip Using jQuery and CSS

Few simple but different tooltips.

26. BetterTip

Tooltip which appears on the right side of the link.

27. jTip

This is simple but useful tooltip for login form.

28. jqTooltip

Simple tooltip with ajax loaded content. It has fade in and fade out transition effects.

29. Pop!

Simple tooltip which shows up when you click on the arrow button and disappears when you click somewhere else.

30. Create a Simple CSS + Javascript Tooltip with jQuery

Simple tooltip with rounded corners. It follows your mouse movements.

1.使用绿色版Dreamweaver无法安装jquery_api_for_dw4.mxp
2.DreamweaverCS5无法与Adobe Extensionan连接安装mxp扩展
3.总知道就是无法安装jQuery代码提示
下面是最新的绿色解决方法，跳过Adobe Extensionan手动安装jquery提示mxp扩展

Step1.下载jquery_api_for_dw5.rar(点击下载)

Step2.把shared、Extensions、codehints三个文件夹复制到
WinXP:C:\Documents and Settings\Administrator\Application Data\Adobe\Dreamweaver CS5\zh_CN\Configuration
win7:C:\Users\Administrator\AppData\Roaming\Adobe\Dreamweaver CS5\zh_CN\Configuration

Step3.启动Dreamweaver CS5

Step4.Enjoy it