15 awesome web services for web designers.

In this post i will share 15 amazing usefull web services for designers which can helps a lot in our daily work. Personally i use some of them regularly. Hope you will cosider it as i am because i found some of them really helpfull . Most of them are free for use. You dont feel the output of this services untill you use by youself. If  you have any other good services in your mind dont hesitate to share it by your valuable comment because i hardly believe that sharing is the great way to fulfill our knowledge.

1. Snipplr

 What: Social snippet repository
Cost: Free
Link: http://snipplr.com
Why: Snipplr is a public source code repository that gives you a place to store and organize all the little pieces of code that you use each day. Best of all, it lets you share your code snippets with other coders and designers. Did we mention it works with TextMate, too? It’s code 2.0.

2.Domainr

What: Pick a original domain name with other TLDs, in the del.icio.us fashion
Cost: Free
Link: http://domai.nr
Why: Desirable .com domain names are scarcer than profitable investment banks. But Domai.nr makes finding pithy URLs easy by querying 280 top-level domains and another 2,014 second-level ones for domain hacks, turning real English words into unique and memorable Web addresses like del.icio.us, internetfamo.us, gee.ky, and iamthewalr.us. Plus, it’s free. — Wired

3. Are My Sites Up?

What: Check whether your websites are up or not and get noticed when they go down.
Cost: Free for up to 5 sites; $25/$50/$75 per year for premium services.
Link: http://aremysitesup.com
Why: When your websites go down, shouldn’t you be the first to know?
Our free plan will check up to five of your sites at least 25 times per day. You get unlimited email and SMS notifications and we will do our best to tell you WHY your site was down by providing the HTML status error code.

Our premium plans offer significantly more features: Faster site checks, an iPhone application, RSS feeds, Twitter integration, Keyword search, premium-level support, and more!

All for just one dollar per site per year (or cheaper!).

4. Templatr

What: Create a simple design with little or no effort.
Cost: Free
Link: http://templatr.cc
Why: It should should be easy to create an individual Design with the templatr. With a little experimentation you will be able to reach the desired result much more quickly than with endless written explanations.

5. SurFTP

What: Web-based FTP client
Cost: Free
Link: http://surftp.com
Why: Once you are logged in, you will be able to navigate the FTP server, upload files, download files, zip files, unzip files, install software, copy, move and delete, copy or move to a second FTP server, rename and chmod.

6. Bespin

 What: Open, extensible web-based framework for code editing
Cost: Free
Link: https://bespin.mozilla.com
Why: Bespin is a Mozilla Labs experiment that proposes an open, extensible web-based framework for code editing that aims to increase developer productivity, enable compelling user experiences, and promote the use of open standards. [built using HTML5 technology]

7. Genfavicon

 What: Convert images into favicons for your website.
Cost: Free
Link: http://www.genfavicon.com
Why: Genfavicon is a site that features an application that allows you to create an icon out of the image of your choice. Simple select your image, by pasting in the URL address or uploading the image. Then choose which part of the image you wish to make the icon by dragging the mouse and cutting the desired shape. You must then select the size of your icon; 16X16, 32X32, 48X48, 64X64, or 128X128.
Preview what you have chosen and then finalize your icon.
You can then use your icon for your webpage or any other place you would like to put it.
Making your favicon could not be easier, in three quick steps you have made an icon that you can easily paste on your webpage.

8. CSS Sandbox

 What: Experiment with CSS styles in real time
Cost: Free
Link: http://aurelio.net/css-sandbox/
Why:
A toy.
A teacher.
A live demo.
A quick reference.
A web application.

A single HTML page.
The CSS Sandbox can be described by all these sentences.

It’s a simple and quick web toy that lets you explore CSS in real time. Just click and see the effect instantly, no Reload needed. It’s fast and funny!

Once you’re satisfied with the style of the Sandbox, roll your mouse over the handy CODE button. A panel will pop, showing all the necessary CSS code to apply that formatting to your own site.

9. Typetester

What: Compare screen type
Cost: Free
Link: http://www.typetester.org
Why: The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts will be updated.

10. Wofoo

What: Form builder
Cost: Free for limited number of entries and one form only; from $9.95/month for more intensive usage
Link: http://wufoo.com
Why: Wufoo strives to be the easiest way to collect information over the Internet.
Our HTML form builder helps you create contact forms, online surveys, and invitations so you can collect the data, registrations and online payments you need without writing a single line of code.

11. BrowserCam

 What: Cross Browser Compatibility Testing Tools
Cost: 24 hours free trial; prices vary from $20 to $1000/month
Link: http://www.browsercam.com
Why: See your web design on any browser on any operating system. Check javascripts, DHTML, forms and other dynamic functionality on any platform. Not just yours. Use our bank of testing machines remotely to test your website.

12. Zoho Suite

 What: Productivity, collaboration and business apps
Cost: Free for personal use; pricing varies depending on the services needed
Link: http://www.zoho.com
Why: While Google Docs seems to be the first product people think of when online office suites come up, the lesser-known Zoho Suite offers more apps and features. See how Zoho stacks up against Google Docs. — LifeHacker

13. Time59

 What: Track time and expenses, handle invoicing and payments.
Cost: Risk-free 30 days trial, $49.95 per year
Link: http://time59.com
Why: Be more organized with less effort. Time59 keeps track of the work you do, gets your invoices out quickly, and manages client payments. Your Time59 account can be accessed from any internet connected computer… at home, at your office, or on the road. Getting started with Time59 is easy. There’s nothing to install, just sign up and you’re ready to go.

14. Mint

What: Web site analytics
Cost: A single site license is $30
Link: http://haveamint.com
Why: Mint is an extensible, self-hosted web site analytics program. Its interface is an exercise in simplicity. Visits, referrers, popular pages and searches can all be taken in at a glance on Mint’s flexible dashboard.

15. CrazyEgg

 What: Supplement your analytics with visuals and actionable data
Cost: Plans start at $9/month
Link: https://crazyegg.com
Why: Analytics only give you a static interpretation of your site visitor’s activities. You may be able to tell how many people have visited your site, or viewed a particular page, but you won’t be able to gauge effectiveness of design elements, link placement or popular areas of your site. If you want to know where people are clicking on your site, and which areas could use improvement, you need Crazy Egg. Crazy Egg helps you visualize your visitors.

10 Essential Firefox Addons Every Web Designer Should Know

It’s no secret that web designers and developers love Firefox! Firefox provides an endless amount of functionality that you simply won’t find in any other modern Internet browser.
One of the greatest aspects of Firefox is the ability to install add-ons to do just about anything and everything a browser can possibily do. As a web developer this functionality is extremely useful to us.

Firefox has some cool add-ons which make the job of website designers much easier. There are many useful add-ons for Firefox out there and we use several pretty much every day for work.

Since there are so many different add-ons available to download, it can be a little overwhelming to pick out which ones you should be using. I compile a list of the 25+ Essential Firefox Add-ons (along with brief descriptions) that every web designer should know about. Be sure and let me know if i missed anything!


01. Web Developer

The Web Developer Extension is a extension for the Firefox browser and it’s a great tool for web designers. It has a variety off essential tools that allow you to code quality websites and troubleshoot problems easily. It’s a powerful all in one plugin. Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. The added benefit of having Web Developer Tool is the ability to edit CSS on the fly. If you want to try a different font, different size, different color, background, borders, margins, padding, practically anything to do with CSS, you can make the changes in the Web Developer tool and see the changes instantly. The Web Developer tool saves you time when playing around with CSS.


02. Firebug

Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. Firebug gives you full control over the CSS, HTML and JavaScript of any page that you choose. Inspect and edit HTML, Tweak CSS to perfection, Visualize CSS metrics, Monitor network activity, Debug and profile JavaScript, Quickly find errors, Explore the DOM, Execute JavaScript on the fly, Logging for JavaScript. Best of all, every change that you make is done live and instantly, so you can quickly test out different changes and see the results of those changes instantly.


03. Codetech

Codetech is another wonderful firefox extension which allows you to edit your documents right next to your web pages as you surf. This web page editing tool has the feel of Dreamweaver in a Firefox extension. For a web developer or designer, which offtenly deals with HTML source code, Codetch is a lite version of a application like Adobe Dreamweaver. It has a similar layout, yet less features, but it helps the user to complete its source based tasks.
Author description says it all. It’s the closest you can get to a professional web editing interface in a browser. Install it as an extension today and have a full featured editor right beside your web pages as you surf!


04. Colorzilla

An other one of my favorite Firefox extensions is ColorZilla indeed. ColorZilla add-on features an online eyedropper, which makes it quite simple to get the exact value of a specific color. With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. In addition to color picker, ColorZilla offers a DOM color analyzer which allows you to locate elements on the page that correspond to a given color and find out the CSS rules that specify a certain color. ColorZilla also features a online palette viewer that allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. With this beautiful extension you can Zoom the page you are viewing and measure distances between any two points on the page.s


05. FireShot

FireShot is an advanced screen capture add-on for Firefox. In addition to giving you the ability to capture an entire web page, FireShot also allows you to add add graphics and notes directly to your screen captures.

FireShot gives you several options for handling your screen captures. Not only can they be saved in a variety of file formats, but they can also be saved to your computer, emailed to others or saved on the free FireShot hosting server. As a result of its wide range of features, this add-on has attracted over one hundred and fifty thousand active users, and has proven itself to be invaluable for web designers and other Internet professionals.


06. MeasureIt

As someone who creates designs for the Internet, one of the most chellanging job is to create design elements aligned. In that case MeasureIt comes in handy and allows you to overlay a ruler on a browser page so you can verify width, height and alignment of page elements.



07. CSS Validator/HTML Validator

CSS Validator is a Firefox extension which Validates a page using the W3C CSS Validator. Adds an option to the right-click context menu and to the Tools menu to allow for easy validation of the CSS of the current page. Opens the results in a new tab. Will only work on pages that have a CSS file associated. For example it will work with http://www.w3.org/ as the URL has a CSS file. When using the HTML Validator, you can choose to validate directly in the browser (where any errors are shown as a status bar icon), show the source with explanations of errors after the validation or a validation with proposed solutions to any errors.


08. GridFox

One of the most frustrating issues that a web designer undoubtedly encounter when coding grid-based layouts. How can a designer be sure that the grid is maintained from the original mockup to the final coded version? When I coded my first grid-based layout, I found myself regularly taking screenshots of the site and comparing them with my original grid in Photoshop. There had to be an easier way.

GridFox is a great extension that will overlay a grid on a selected website. If you can open it in Firefox, you can put a grid on top of it. It’s easy to customize, allowing you to create the exact grid you designed your layout around.



09. CSSViewer

With this extension you can view CSS properties of related page elements. Very handy, when You got large CSS file with styles overlapping each other, to analyze why something is not displayed in the way You wanted.



10. Browser Window Resizer

The Browser Window Resizer is useful tool for testing different screen sizes. It accurately resizes your browser so you can test to see if the web page you’re working on looks right in all of the standard resolution sizes. This will allow you to see if your design is going to look good to visitors who aren’t using the same resolution as you. The best thing about this add-on is that if you are using it in conjunction with the other add-ons in this list (specifically Firebug), when you see that something isn’t displaying properly, you can instantly make adjustments to your code and see if that fixes the problem, all without ever leaving your current browser window. Browser Window Resizer add-on resize your Firefox window to 640×480, 800×600, 1024×768, 1280×1024 and 1600×1200 resolution sizes.

If i miss any other addons which you think essential for designer please feel free to share it by your valuable comment.

10 Best Color Tools For Web Designers

Right Color for the Right combination is very important while you designing a web page because color play major role to make your web project successful. So sometimes its difficult task for web designer to select decent and beautiful color combination for every design. In that situation color tools can helps you determine matching color or even suggest sets of matching color palette when you are totally clueless.

There are numerous free online tools to help in your decision, so many that it can take time just choosing which tool to choose. Rather than creating a long list of what is available I have chosen 15 best tools which i like most because they are easy to use.



colorexplorer.com

colorotate.org

kuler.adobe.com

colourlovers.com

colorjack.com

pourpre.com

colorschemedesigner.com

colorcombos.com

colorhunter.com

colourgrab.com