Coda
As an IDE Coda is geared very much toward frontend developers/designers and it does that very well. Coda has many visual tools to help you write CSS better than you ever imagined, faster than you ever imagined, and cleaner than you ever imagined.
In addition to its fantastic visual CSS tools, Coda comes equipped with an excellent SFTP client that lets you easily edit server files on the fly to get simple work done, as well as makes transferring files to and from servers drag-and-drop easy as it imitates the OSX Finder experience.
While I could rave about Coda forever I’ll wrap up with perhaps my favorite tool: the integrated Browser Preview mode. Preview mode works with any file, anywhere, and opens it in a localized browser directly in Coda – no need to have multiple windows open. And, best of all, Preview mode will update in real-time as you make changes so you can create frontend designs, email templates, and prototypes wicked fast and impress your boss (be the envy of your friends!).
Coda is an OSX exclusive application and will run you $100 directly from Panic. I don’t know of a Windows or Linux equivalent to Coda.
PerfectPixel
PerfectPixel is a Chrome Extension that does one thing: overlays an image onto your browser. That may sound pointless, but with the ability to adjust the position and opacity of that image and you have a digital onion skin of whatever you are trying to style. This gives you the advantage of being, without a doubt, pixel perfect.
PixelPerfect is a free Chrome Extension with a whole slew of other supported browsers from WellDoneCode.
xScope
xScope is a swiss army knife of digital creation tools, except this time it’s constrained to frontend web design. My personal favorite tool is the Guide tool which lets you create visual line guides overlaying your screen. I use that mainly for lining up design components with differing sizes. With Rules, Overlays (similar to PixelPerfect), and a fantastic Loupe tool for doing very tight pixel pushing, xScope is one of those tools that has so many uses that it’s hard to recommend it for just one.
xScope is another OSX exclusive and you can pick that up for $50 on the App Store or directly from IconFactory.
CSS Hat
CSS Hat is a nifty Photoshop extension that can help you get from mockup to browser quickly. The general gist behind CSS Hat is that it exists as a panel in Photoshop and will output CSS/LESS/SASS for any layer you choose – including fonts, layer styles, sizes, and borders. I use this sometimes to create a quick baseline CSS that I can finetune on my own.
Bonus points: if you are a designer who wants to get into writing CSS this is a great way to seeing the end-product of your design. Likewise, if you are developer who is working with designers who do not write CSS you can use CSS Hat to either get the quick and dirty CSS yourself or request it alongside the mockups where needed.
CSS Hat is a one trick pony that does its trick very well, you can get it directly from Source for $40.
These are just a few of the tools we use here at Wide Open Technologies, but from a frontend design standpoint they are my favorites. Hopefully you learned about some new tools to look at and create more beautiful, pixel perfect designs!
