Web design essential apps

Swatch website

Easily create swatches with Halipixel

Every designer has their own toolset. With different styles and working methods, added the the insane wealth of options available for tasks, we all find a core set of apps to aid our day to day business. Here’s my current list of must haves, check them out and let me know what you use below…

Design

Straight to the business of actual design, a great tool for use in collaborative work to sketch up very vague design ideas is Mockingbird. This can be great to jump straight onto a live mockup screen and avoid confusion about ideas, though it’s getting easier to jump straight to live web mockups themselves. Getting colours together in an early stage can be a headache, but using the Halipixel tool for generating quick swatches of subtle balance is hard to beat.

There are many great responsive templates out there and it depends on your level of requirement, but for a real stripped down essential  I like RWD Grid. Finally, as webfonts are becoming widespread its hard to look beyond the Google webfonts for ease of use and implementation, though FontSquirrel lets you create your own and I find these Ligature symbols cover most of the essential requirements with easy setup.

Manage

No surprises here, for sharing work will often need your recipient to have the same software. The photo sharing tools of Dropbox are well developed, especially for mobile, plus some exciting collaborations in the works between Adobe’s Creative Cloud and Behance which will aid the creative process. Day to day tasks are easy to manage with a to-do application like Astrid.

mockingbird

GoMockingbird for quick mockups

Debug

Now the site is live and you’re testing and fixing comes a widespread selection of tools. The PixelRuler lets you check things line up and double check the measurements, in a much more hands on way than browser developer tools. Testing the code or trying to convey development issues is quick and easy with the ever popular jsfiddle, but you can also create quick screengrabs and video capture on Jing.

Want to see your site on specific screen sizes? I find the viewport resizer a really quick way of seeing phone and tablet sites with option to switch orientation. Browserstack is a great paid option, though IE itself now allows previous version control on its own tools.

resizer

See your website in iphone dimensions with resizer plugin

These are a selection that have found their way into my regular working habits, but what are yours? Is there a missing app or unsung hero you can’t work without? I’d really appreciate your comments below

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s