As a web designer or developer you have specialized needs. I'm not talking about your high-speed Internet connectivity or quad-core processors. I'm referring to the tools you use to get the job done. But not everything is built into that fancy IDE. Sometimes you need tools outside of the box.
So this collection focuses on 15 web-based apps that support your development process. Included are everything from brainstorming apps to design, testing, and compression apps. Enjoy!
You need a way to store your project files offsite. No matter what kind of onsite backup process you have, you can’t go wrong backing up your data on a site like Dropbox. In fact, it’s automatic. Just set up the folder to upload the documents and it backs up the contents on its own.
Whether you have running specification docs, need to keep track of time spent on a project, want access to your presentations online, or just want to quickly jot down some ideas – Google Docs is one the most trusted places to go. With a feature rich interface and robust set of tools, any office productivity is possible. Google Docs also makes file sharing and collaboration easy.
Brainstorming is a necessary part of the design and development process. This is especially true when you are working with someone who has limited experience in the field. Pictures and graphics can go a long way to making sure you are on the same page. Spider Scribe lets you quickly brainstorm out ideas, keep files in one location, and share ideas quickly.
Finally on the same page with your clients and customers? Are you sure? Using draftest, you can prototype several designs and get feedback. You can upload graphics or webpages, send it to customers through Draftest, and they rank/rate each and collect other information you want. It’s a great way to let someone review ideas and get quality responses.
Ever run into a difficult concept or idea that required a detailed backstory or explanation? If you haven’t, you will. When the time comes, Visual.ly gives you the ability to make awesome infographics. You can load up the content and make it easy for someone to get a lot of information very quickly in a single graphic – and maybe have a little fun in the process.
Color Scheme Designer
Sometimes your clients are going to have a very specific color scheme in mind. Other times, they’re going to leave it to you to come up with something based upon their two-color logo, or worse. Color Scheme Designer lets you build color palettes with the greatest of ease. Just plug in an RGB or CMYK color and pick which system you want to model and it will crank out complementary color palettes.
If you don’t want to spend a lot of time messing with stripe designs, grab Stripe Generator and knock it out fast. It’s easy to build lots of different repeating stripe patterns, and colors are simple to control as well.
If you want some quick, complex stripes or patterns, grab Patternizer. You can use the graphic or plug in the generated CSS script, making your design lightweight and easy to modify later.
Another great pattern site is Subtle Patterns. These are repeating patterns that are free for use and allow you to quickly add texture to your designs. No need to open up Photoshop and create a pattern. Grab one of these and get back to more important tasks.
CSS3 Click Chart
When it’s time to get down to the nuts and bolts of your design and you need to know what you can do with CSS3, the CSS3 Click Chart becomes an indespensible tool. It’s not only an awesome reference site for CSS3, but it also allows you to see which attributes work in which browsers. If you ever need more information, the W3C.org link is right there.
QuirkTools – Screenfly
Design’s all done?! Great! Now it’s time for testing. One of the best tools online for checking how your designs will look on various mobile devices is Screenfly by QuirkTools. Plug-in your design’s URL and choose which device you want to emulate. It’s not a browser tester, but it’s great for quickly seeing where the “fold” on the device is so you can tweak your designs.
A more robust testing environment, Adobe’s Browserlab allows you to quickly see how your design will work on various browsers. With a dozen or so browsers available, it’s MUCH easier to test here. You’ll just need a free Adobe user ID and you’re set. Type in the URL and view your designs in whichever browsers you need to test. This app is very easy to use and loads quickly.
Gen Fav Icon
Favicons are one of those finishing touches you can put on a design that sets it apart. But making them can be a pain. Using GenFavIcon, just upload the logo and generate it. It’s that easy. All the code needed is available making it easy to get a favicon up on the site fast.
Quickly compress your CSS and get your loading times for your site down with this tool. CSS compression usually just involves removing whitespace and comments from the file to make it faster to download. For sites that use a lot of CSS, compression can be a huge way to improve load times. CSS Drive has three different general settings based upon how much compression you want. Just paste your CSS into the browser, check a few boxes, compress it, and paste it back into your document.
You may wonder what social media has to do with managing design/development. Well, if you’re a freelancer or trying to grow your client base, then you need to be engaging potential customers via social media. There’s no better tool for managing multiple social media sites than Hootsuite. With tons of options and the ability to post across lots of different social media sites, you can get to work faster. The tracking of social media interactions is the strong point of Hootsuite and can save you hours of posting.