Web 設計師的 50 個超便利工具（下）

作為一個 Web 設計師并不容易，不僅考慮設計與架構，還要時刻注意各種小細節，設計師的工作被各種各樣的問題包圍，你需要一套超級便利的工具幫你解決各種消耗時間和精力 的問題。本文介紹了50個非常強大的工具，你會發現，其中的一些工具會讓你感到驚豔在，這是第二部分。

This tool allows you to create meaningful visuals for code and can be used to plan, organize and navigate code in a more intuitive way.

<a href="http://kaleido.media.mit.edu/" target="_blank"></a>

This application is a powerful online image editor. Its tools are organized in handy, draggable boxes that can be positioned very much as you would see in traditional image-editing applications.

<a href="http://mugtug.com/sketchpad/" target="_blank"></a>

Type or paste text in any of the green or grey shaded boxes and click on the button Convert button above it. Alternative representations will appear in all the other boxes. You can then cut &amp; paste the results into your document.

<a href="http://rishida.net/tools/conversion/" target="_blank"></a>

This tool generates grid systems in valid css / xhtml for rapid prototyping, development and production environments. The grid system generators offer the ability to customize the width, no. of columns and margin(s) to allow more flexibility for various designs.

<a href="http://www.gridsystemgenerator.com/" target="_blank"></a>

The tool checks availability of social usernames, domain names and trademarks.

<a href="http://www.ud.com/" target="_blank"></a>

A useful tool for testing typographic scale and rhythm. It lets you set factors such as the typographic scale (traditional, 3:5 Fibonacci, Le Corbusier, etc.), the font size in percentage, line height, the layout, padding and the line height for h1, h2 and h3 headings.

<a href="http://lamb.cc/typograph/" target="_blank"></a>

ColorBrewer is an online tool designed to help people select good color schemes for maps and other graphics.

<a href="http://www.personal.psu.edu/cab38/ColorBrewer/ColorBrewer_intro.html" target="_blank"></a>

If you’ve ever sent an email campaign, you know that if your CSS is not coded inline, it is likely to get stripped out by email clients, which can make your email design pretty funky looking. Writing CSS inline can be time consuming, and repetitive. MailChimp has a CSS inline conversion tool built right in that will automatically transform all of your local styles into inline styles. Designers have found it so useful, we thought we’d share it with everyone else – even if you don’t have a MailChimp account.

<a href="http://www.mailchimp.com/labs/inlinecss.php" target="_blank"></a>

HTML Purifier is a standards-compliant HTML filter library written in PHP. HTML Purifier removes malicious code (better known as XSS) and make sure your documents are standards compliant.

<a href="http://htmlpurifier.org/" target="_blank"></a>

Rendera helps you learn HTML5 and CSS. Type in your HTML code and see it rendered in real-time. Then style it with CSS. You can use any of the HTML 5 or CSS3 tags your browser supports. The tool supports HAML and SASS, too.

<a href="http://rendera.heroku.com/" target="_blank"></a>

An intuitive tool for learning, writing, and testing Regular Expressions.

<a href="http://gskinner.com/RegExr/" target="_blank"></a>

This tool allows you to try out Ruby code in the prompt command line online. It supports Ruby’s built-in methods, and contains a step-by-step tutorial for Ruby newbies.

<a href="http://tryruby.org/" target="_blank"></a>

GoogleCL is a command-line utility that provides access to various Google services. It streamlines tasks such as posting to a Blogger blog, adding events to Calendar, or editing documents on Google Docs.

<a href="http://code.google.com/p/googlecl/" target="_blank"></a>

Simple tool that generates code for fluid grid-based layouts.

<a href="http://www.tinyfluidgrid.com/" target="_blank"></a>

This online tool lets you skip the phone menus for hundreds of companies and makes it less frustrating to call large companies. For business owners, Fonolo allows your customers to actually see your phone menu options, before they call you.

<a href="http://fonolo.com/" target="_blank"></a>

Forward your important emails to [email protected] and the tool will create to-do lists on the fly and send you alerts when needed. It can be integrated in E-mails, IM, Web, iPhone, Gmail, Google Calendar etc.

<a href="http://www.producteev.com/" target="_blank"></a>

AddUse is a web based tool that helps you create, manage and present your user research in a simple, easy to use and cost efficient way. It’s a tool to use at any given moment in your development process. It presents the results from your user tests, surveys and questionnaires in a graphical way, efficiently helping engineering, marketing and management groups make the right decisions.

<a href="http://www.adduse.com/" target="_blank"></a>

Online registration for events, workshops, classes and courses. The free version allows for 150 events with 300 bookings per month.

<a href="http://bookwhen.com/" target="_blank"></a>

<a target="_blank" href="http://www.cnblogs.com/lhb25/p/must-read-links-for-web-designers-and-developers-volume-12.html">Web 前端工程師和設計師必讀精華文章推薦</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/07/28/html5-awesome-single-page-sites-inspiration.html" target="_blank">酷！15個精美的 HTML5 單頁網站作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/11/22/best-awesome-css3-animation-demos.html">炫！35個讓人驚訝的 CSS3 動畫效果示範</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/03/02/30-mind-blowing-parallax-scrolling-effect-websites.html" target="_blank">贊！30個與衆不同的優秀視差滾動效果網站</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2012/01/13/25-outstanding-single-page-website-designs.html">靓å！25個優秀的國外單頁網站設計作品欣賞</a>

<a target="_blank" href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/09/awesome-html5-and-javascript-effects.html">帥！8個驚豔的 HTML5 和 JavaScript 特效</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/06/27/35-exclusive-rainbow-colored-flash-websites.html" target="_blank">頂！35個很漂亮的國外 Flash 網站作品欣賞</a>

<a href="http://www.cnblogs.com/lhb25//lhb25/archive/2011/08/24/outstanding-admin-panels-part-one.html" target="_blank">哇！34個漂亮網站和應用程式背景管理界面</a>

<a href="http://www.yyyweb.com/go/web" target="_blank">本部落格新站點 ◆ 前端裡 ◆ 歡迎圍觀：）</a>

歡迎任何形式的轉載，但請務必注明出處。