Front-end design is tough and time consuming, but also rewarding and tons of fun. Where the fulcrum sits between those two is often decided by the quality of tools available to the designer. Here are 26 tools that help shift the balance towards “fun and rewarding”.
Demonstration
Need a quick look at how a piece of HTML will look in a browser? Need to show a client a quick demo of an effect, or ask for help on a forum?
Real-Time HTML Editor is a quick and elegant cut-and-paste preview for HTML snippets.
CodePen is a slick, powerful editor and viewer for complex code snippets with sharing and community features.
JSFiddle is a power tool for rendering code demos with the ability to load a wide range of libraries and external resources and fork your own copies of demos.
Sprite sheets
Sprite sheets allow you to load one large image file instead of lots of small ones, and only show part of the image at a time, to decrease the number of requests and (often) the amount of data a page requires to load.
Stitches is a drag-and-drop HTML5 sprite sheet generator that optimizes positioning of your elements.
Sprite Cow calculates background-position and size of sprites from hand-rolled sprite sheets with a clean HTML5 interface.
Testing
Web design would be much easier if you only had to design for one browser and device. Alas, that is far from the case. These tools will help to make sure your page looks and works consistently across platforms.
Breakpoint Tester , through its mega-useful bookmarklet, identifies all media query breakpoints in a site’s CSS and renders the site at those dimensions side-by-side.
CrossBrowserTesting will automatically take snapshots of a URL in over 1,000 possible configurations of browser, operating system, and plugin. Very useful to make sure your site degrades cleanly in old browsers. (This product has a subscription fee.)
web-capture.net is a free tool to capture full-page screenshots of a URL. It can save in a variety of formats and is free to use.
The Page Load Time Chrome plugin shows, at a glance, loading speed for a page in your browser toolbar. You can get much more detailed information in your developer tools, but I like to have this open for every page to get a quick feel for what’s going on.
Google Analytics Debugger , an official Google plugin, switches a site to the debug version of GA with the press of a button. With it switched on, all calls to Google Analytics are logged verbosely in your console.
Do you use AdBlock ? No? Well, your readers do. Make sure you check your sites with it installed to make sure the site degrades cleanly when ads are removed.
Graphics
These awesome tools help generate the graphics that every page needs.
Pixlr is simply amazing. It is an in-browser image editor with all the most-used features of Photoshop available to you, for free, in your browser. You can export your files anonymously, but make sure to sign up to save to your online library.
ajaxload.info generates a variety of animated loader GIFs for you with your chosen colors.
EZGIF generates, decomposes, and edits animated GIFs online.
duri.me generates base64-encoded data URIs of uploaded image files for you, and is super slick.
Design
You need more than graphics, though. These tools help with icons, colors, fonts, and more.
Favicon Maker , one of my sites, generates multi-resolution favicons and Apple touch icons for your site that you can download as a zip file.
Paletton , in beta as of this writing, is an immensely powerful color palette builder.
Google Fonts gives you free access to hundreds of fonts that you can hotlink for free.
Ultimate CSS Gradient Generator is exactly that: design your color gradients graphically and get the code to show the gradient properly in every browser.
SliderBuilder , another of my sites, lets you design and export slideshows and carousels through a powerful graphical editor.
Reverse Engineering
Every web designer has taken inspiration – sometimes liberally – from work seen on others’ sites. These tools help you figure out how to duplicate something.
With What The Font? , you upload an image of text (say, from a logo or header) and the software identifies the font used.
TinEye does a reverse search for images. Useful if you’re looking for the original of an image you see used online, or a larger version, or one without text or watermarks a later designer might have added.
The jQuerify bookmarklet injects jQuery into a page if it’s not already loaded, allowing you to manipulate the DOM in the console.
The ColorZilla Chrome extension is worth installing if just for the eyedropper tool to grab colors out of a webpage.
jsbeautifier pretty-prints Javascript and HTML, and is very useful for de-obfuscating third-party Javascript.
Inspiration
And when you’re just looking for inspiration — effects and plugins you never knew you couldn’t live without:
Check out one of my favorite sites, jQuery Rain , which shows you new plugins daily, many of which are free and open-source.
There you go. See if those help work become more fun and less tedious.
An intriguing discussion is definitely worth comment. There’s no doubt that that you ought to write more about this issue, it might
not be a taboo subject but typically people don’t speak about such topics.
To the next! Cheers!!
is to provide an easy solution to those looking to improve their
sales and conversions without having to rely on months of search engine
optimization to attract a constant stream of organic targeted visits to start
turning a profit.
When we started out our platform was very simple with not many features available, but because we focused on high converting ad spaces we were
quickly able to grow a client base and add
more and more options to really target those website visits
Hi, its pleasant paragraph regarding media print, we all understand media is
a great source of facts.
I adore and hate time travel motion pictures. The
theory doesn’t operate. Certain you can go into the future.
Very good article. I absolutely love this website.
Keep it up!
You could definitely see your skills in the work you write. The world hopes for even more passionate writers like you who aren’t afraid to mention how they believe. At all times follow your heart. “Until you walk a mile in another man’s moccasins you can’t imagine the smell.” by Robert Byrne.
I don’t know whether it’s just me or if everyone else encountering issues
with your site. It appears like some of the written text within your posts are running
off the screen. Can someone else please provide feedback
and let me know if this is happening to them too? This may be a
issue with my internet browser because I’ve had this happen previously.
Cheers
Excellent weblog here! Also your web site quite a bit up
fast! What web host are you the usage of?
Can I get your associate hyperlink in your host? I wish my web site loaded up as quickly as yours lol