Skip to Main Content

BIG LIST of WEB DESIGN TOOLS

Posted on 3.31.2014

In Website Magazine's April 2014 issue, we featured 20-plus Web design tools, which can take a project to the next level.

Here are those featured in the issue:

Type Scale is a visual calculator for creating typographical scales for Web designs. Just enter in the base size and what scale is needed, and it will provide optimal sizes for headers, body, and other text.

Animatron is a simple tool for building HTML5 animations and interactive content. Work right in your browser and save projects in the cloud.

The Ginger Project is a simple and effortless way to create an “explainer video” for anything you need to explain. You can include voice overs and it includes tools for creating a beautiful look to your projects.

Duo is a Web browser that lets you view both mobile and desktop versions of responsive websites you’re designing. It’s available as a bookmarklet, or as a standalone Mac program.

Adaptive Backgrounds is a jQuery plugin for extracting colors from an image and applying those colors to the parent element. It’s an easy way to make your background match your images.

Layrs Control is a free Photoshop extension to improve your workflow. You can edit layer names, remove unused effects, delete empty layers, and more.

Origami is a Quartz Composer toolkit for design prototyping. It makes it easy to create interactive prototypes, without the need for any programming.

Social Kit is a Photoshop plugin for creating cover images, profile pictures, ad banners and more for your favorite social platforms, including Facebook, Google, Twitter, and YouTube.

Readymag is a simple Web publishing tool for any kind of digital storytelling, from presentations to rich media magazines and microsites. It’s cross-browser compatible and doesn’t require any coding skills.

Magnifier.js is a JavaScript library for creating a magnifying glass effect on your images. It includes zoom functionality using the mouse wheel, as well as the ability to display the magnified image within the lens or externally in a wrapper, among other features.

Pinegrow is an app for Windows and Mac that makes it fast and easy to mockup and design Web pages with (or without) Bootstrap, multi-page editing, and Less.

Feedthebot offers up a complete guide to complying with Google’s webmaster guidelines. There’s a brief rundown of each topic on the homepage, linked to more in-depth coverage of each.

The Titon Toolkit is a collection of UI components for creating responsive, mobile, modern websites. It includes toosl for HTML5, CSS3, Sass, JavaScript, jQuery, and more.

Min is a tiny CSS framework, weighing in at less than a single kilobyte. It includes all the basics you’ll need for things like buttons and typography, and has support all the way back to IE5.5.

The Pattern Library is a set of free patterns offered up for free by leading designers. You can use them freely in your designs, or even submit your own pattern to share.

ScrollMagic is a jQuery plugin for creating scroll interactions, including starting animations at a specific scroll position, synchronizing an animation to scrollbar movement, and more.

Flaticon is a huge repository of downloadable free vector icons. They also offer a free plugin for using icons directly within Photoshop.

Sitedrop is an easy way for creatives to share their works-in-progress. Just connect to Dropbox to share any kind of file, which can then be downloaded, commented on, or favorited.

Mozilla's Appmaker is a drag-and-drop mobile app creator that works right in your browser. It’s in pre-alpha release, so expect some bugs, but it looks promising.

DiagnostiCSS makes it simple to detect inaccessible or invalid HTML markup, highlighting inline styles and event attributes, invalid links, empty and deprecated elements, and more.

Raw is an open source Web app that lets you create vector-based visualizations in vector and raster formats to embed on your website. It’s built on D3.js, and has a simple user interface.

UsabilityHub is a set of usability tools that make it easier to test the effectiveness of your designs. Do five second tests, click tests, and more.

WebsiteMagazineMiniLogo

Leave Your Comment

Login to Comment

Become a Member

Not already a part of our community?
Sign up to participate in the discussion. It's free and quick.

Sign Up

 

Leave a comment
    Load more comments
    New code
  •    
      

    The Ultimate Guide to Personalization

    Kibo