Cool Tools are a Must-Have for Web Designers

Admit it, as a designer you are always looking for cool new tips, tools and tricks to enhance your projects and make your life a little easier.

Thankfully, new tools, products, apps and even great user interface kits hit the market almost daily. There are also a host of old favorites out there a well – some you may know about and others that you might think about trying for the first time.

Here (in no particular order) are a dozen we think you’ll like.

Responsive Design Testing

Responsive Web Design Test

We are all thinking responsive design, right?

Designmodo’s tool is a great way to see how your site will look in a variety of environments in just seconds. Type in your URL and get a preview by pixel width or device size (height and width).

Best Designed WordPress and Bootstrap Themes

Designmodo Shop

It can be super-difficult to have all the devices you need on hand for visual testing – which is what this tool is. Using the actual website, it is simply a visual approximation.

The responsive design testing tool is free!

Fake Images Please

Fake Images Please

If you are anything like me, you have a hard time leaving spaces in design projects in hopes that the holes will make sense to others that look at your mockups.

Fake Images Please allows users to create quick and simple placeholders for images by size, making it easy to know what fits in every location on the page.

Using placeholders can make it easier to “see” the overall design – especially for clients and non-designers – and keeps you from spending time working on placeholders yourself.

This tool is free and easy to use. Just type in the fake images URL followed by your image size and desired text.

Webnote app

Webnote app

Designers are somewhat notorious for their collections of images and snippets from all over the web. The new Webnote app is a browser and web clipper all in one. You can surf and save pieces of the web as you are inspired for later.

In addition, Webnote allows you to add notes to your snippets and share them socially. It works a lot like Pinterest, but for the whole web, not just as an image clipper because you can save anything – even whole web pages.

Webnote is only available on iOS right now, and is free.

Stride

Stride

Stride is a tool made for small businesses. It facilitates collaboration, management and business tracking. Users can keep up with active accounts, client projects and maintain to-dos.

This tool is also useful for tracking metrics – including goals and sales. It is designed with small teams in mind, with real-time measures, tasks and simple report generation.

Free Stride accounts allow up to five active accounts and paid plans range from $9 to $49 per month, depending on number of accounts included in the plan.

MyScriptFont

MyScriptFont

Have you ever needed a special font? MyScriptFont is the answer.

You can create your own typeface is a few steps: download the template, draw your letters, scan the template and reload into the application. The software will create your custom typeface – which can be fun for logos or specialty designs – as a true type, open type or SVG font. Install it and you are ready to go.

The software is free and the site also includes a tool for extracting images and fonts from PDFs.

The Bricks Addons

The Bricks Addons

The Bricks is one of the most popular user interface kits on the market. And The Bricks Addons is a must-have for developers and designers.

The kit is a complete set of UI components and elements and includes great forms, elements, e-commerce tools and words. The design is clean and simple and because every component is fully customizable. This is a great framework for any site, with hundreds of great pieces that fit together seamlessly.

The Bricks Addons is $89 for a personal license and the developer’s license is $289. Plus, The Bricks Addons includes a bonus 150 vector icons.

Adobe Edge Reflow

Adobe Edge Reflow

As the dominant software brand in the industry, Adobe has taken on responsive design with Edge Reflow. The software is designed to help designers and developers better create for multiple web experiences – desktop, tablet and mobile. It is not a boxed template and requires web design knowledge.

From Adobe: “Reflow itself is built using HTML, CSS and JavaScript, with the goal of helping web designers design for HTML, CSS and JavaScript. Our intention is to remove layers of abstractions, so designers can create for the web using the web.”

The recent (April 2013) release makes it easier for designers and developers to embrace the responsive web using tools they are familiar with – a real bonus.

Adobe Edge Reflow is comes with the free Adobe Creative Cloud membership and is also available to paid users.

Apiary

Apiary

Apiary is one of those tools that makes developers happy. It allows for API prototyping, includes GitHub integration and is fully customizable.

Simply, Apiary makes it easy to create tools and documentation for users so they can use your API. This tool is still new and in beta – so there could be a kink or two – but can be a great option (and time-saver) for sites designed with API users in mind.

Apiary is free while in beta.

Foundation 4

Foundation 4

The starting place for any website is the grid. Zurb has that covered with Foundation 4.

The grid is a responsive framework that starts the design process with mobile and expands to larger interfaces. Foundation is based on a spectacular grid system that is flexible and adaptable. The software also has a proven track record (this is a step up from Foundation 3), with some big-name clients such as Pixar and National Geographic.

The Foundation 4 grid is free to download. You can find out more in Designmodo’s previous Foundation 4 article.

Color Scheme Designer

Color Scheme Designer

Although there are quite a few color palette design tools out there, this one is one of the best.

You can create a palette based on any color in a variety of methods for different color pairings and combinations – monotonic, complementary, triadic, tetrad and analogic. Plus the tool has options for creating palettes that are visible to the color-blind, export tools, light versus dark examples and a random scheme generator. If you are not comfortable mixing colors or creating a palette, this tool takes the guesswork out of it for you, with a great color matching every time.

Color Scheme Designer is free and is definitely a tool that designers should become familiar with.

Weavly

Weavly

Video is all the rage these days and Weavly is a neat tool that allows you mix video and sound.

The software allows you to use videos from YouTube and Vine or GIFs from Tumblr and Loopcam without having to upload files.

The platform has a variety of preset options – sports montages, video-music remix, Vine compilation and more – and can be a fun way to create a video snippet.

This tool is not an alternative for professional video. But it can be a great way to add a dash of creativity to a project.

Weavly is free and still in beta.

Square UI

Square UI

We’ve talked a lot here at Designmodo about trends in flat design.  Square UI is a user interface kit that gives you all the tools and components you need to start a flat design scheme.

The ready-made parts are versatile and work in a variety of applications – websites and for iOS and Android applications. And the look is simple and clean – a super starter kit for anyone interested in flat design.

The Square UI personal license is $39 and developers can get it for $149. And if you want to test out flat design on a smaller scale, check out Flat UI Free, a kit that works with Twitter Bootstrap and contains a variety of basic components.

Carrie Cousins has more than 10 years experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with her on Twitter @carriecousins and Google+.

Newsletter

6 Comments
  1. Amine Boujida Apr 16, 10:11 pm

    merci beaucoup …………

    Reply
    +3
  2. Patrick McLaughlin Apr 17, 3:29 am

    Thanks for the scoop on some cool tools. It’s much appreciated.

    Reply
    +1
  3. excellantly Apr 17, 5:36 am

    All useful stuff. Great work. I will try them for sure. Thanks for sharing.

    Reply
    0
  4. Damon H Apr 17, 8:16 pm

    Just made my life better… thank you!

    Reply
    0
  5. John Apr 18, 4:13 pm

    Brilliant, some useful tools here which I’m certainly bookmarking. Has anyone visited http://www.dottedpaper.co.uk for Free Printable Dotted Paper for Desktop, Mobile and Tablet devices? It might come in handy for someone who’s short of cash :)

    Thanks

    Reply
    0
  6. Haroon Abbasi Apr 20, 7:14 pm

    Amazing and nice collection of tools.

    Reply
    0

Leave a Reply

*
* Minimum length: 20 characters