Designers and developers of websites have a treasure trove of tools to pick from. With the web moving at a breakneck pace (responsive design, CSS pre-processors, post-processors and more) it can be a challenge to keep up with what’s new and useful. Below you’ll find 14 tools, 7 for web designers and 7 for web developers that help bring a website from concept to reality.
Also, if you’re looking to get into web design, development or more, check out Treehouse.
For Web Designers
Adobe Creative Cloud – It almost goes without saying that Photoshop and Illustrator and two essential tools for any web designer. With Creative Cloud, you have access to both of those, plus a litany of other tools like Typekit, InDesign & Kuler. All of the Creative Cloud tools work very well together and should be a must for any designer. UI Faces – Because finding the right pic for mockups can be hard! UI Faces compiles avatars via Twitter and makes them available for use in your designs. 0to255 – I use this nearly everyday. 0to255 simplifies finding variations of a set color. It’s a perfect tool for rollovers, active states and highlights. Google Fonts – Typography on the web has come a long way from the days of Arial, Courier & Georgia. Google Fonts is a huge library of free, ready-to-fonts that can be downloaded during the mockup stage. Samuel L. Ipsum – For the Snakes on a Plane fans, I bring your Samuel L. Ipsum. This lorem ipsum placeholder generator helps fill-in content voids off and online. Be warned, there are three version to pick from: profanity-laden quotes from Jackson movies, clean quotes from Jackson movies and regular ol’ lorem ipsum. Responsive Sketch Pad – The UI Stencils Responsive Sketch Pad is a good companion when you’re in the preliminary design stage. The dotted grid makes it easy to stay in the lines and visualize a site in the browser and on a mobile device. Macaw – While this tool isn’t out yet, it does look like an interesting offering. Macaw promises the same flexibility as an image editor while writing HTML and CSS on the backend.
For Web Developers
Coda 2 – This is a personal favorite due to it’s all-in-one code editor, FTP client and built-in MySQL editor. Coda 2 also includes a programming reference library and visual CSS editor if you’re into that sort of thing. CSS Pre-processor – Depending on what stack you develop with will help guide you here. SASS requires Ruby to operate (built-in with any Mac) and at a basic level does the same thing as LESS, another pre-processor. Both of these are great tools and offer time-saving features like nested rules, mixins, variables and logic. Front-end Framework – Again, there are two very good options to consider here. Both Twitter Bootstrap and Zurb’s Foundation will make prototyping and development for the modern web faster and easier. Both package a responsive grid system with default element styles and javascript for making rich web experiences. Browserstack – This is a favorite around the shop. Browserstack lets you test your finished design on every browser and configuration you can think of. It’s a handy tool when you still need to support IE7 and IE8 in your designs. Pingdom – Uncover DNS and loading issues with Pingdom. You’ll see how long it takes the various resources to load on your site along with an overall performance score. Chrome Developer Tools – If you use one tool in the included Chrome Developer Toolkit, then let it be the web inspector. With the inspector, you’ll be able to quickly diagnose and make adjustments to layouts. You can also leverage the Console for logging and interacting with javascript. MAMP Pro – Spin up sites locally with ease. MAMP Pro allows easy installation and administration of an Apache, MySQL and PHP development environment. If you’re working on a lot of site for customers, then this is a must have. So, there you have it. 14 tools that can help any freelance web designer or developer kick off 2014 with style. This post originally appeared on FreelancersOutpost
