50 Time-Saving Web Design – Developer Tools

• 7 minutes READ

In our field it is important to know how to do specific tasks and use creativity to achieve our goals, however it is necessary to have the right developer tools in order to get our aims in a more efficient way.

Here you have several tools for different steps on our daily work, from scratch to production:

Mock Up Tools

MockFlow

MockFlow is an application based on Flash which allow  you to create a wireframe with simple elements to develop a prototype so you can show your concepts  to colleagues and clients. The points in favor to this service are a fast wireframing tool and its collaborative purpose.

FrameBox

FrameBox is a drag and drop application which aloud you making fast wireframes using ui elements, resize them and even you can set layout width for making low quality prototypes for responsive web design. You can share your designs by social media or mail. Simple and efficient.

Online Email Template Builder

With Postcards you can create and edit email templates online without any coding skills! Includes more than 100 components to help you create custom emails templates faster than ever before.

Try FreeOther Products

Icons

Iconizer

This site has a collection of icons, you type on the search bar and then it retrieves you the result. Pretty much stuff we can find out there, but there is something extra: after picking the desired icon, you are able to personalize it, so you can change background, angle of image, foreground color, etc.

Iconmonstr

This is the right place for someone who is looking minimalistic icons. Shapes can be downloaded in png  or in SVG format

We Love Icon Fonts

This site offers icon fonts in order to be used as simple icons. You should add the font you like into your collection, @import to your css with the url, then associate a class to it and then apply it where you consider convenient. Here you have an example.

Textures

Texture King

Texture King shows different categories related to textures and inside them you can get many options to download.

Create Websites with Our Online Builders

With Startup App and Slides App you can build unlimited websites using the online website editor which includes ready-made designed and coded elements, templates and themes.

Try Startup App Try Slides AppOther Products

Lost and Taken

Another great texture collection, the most remarkable about this site is its great categories, which covers many kind of textures (like lights or plant leaves) that you cannot find anywhere else.

Stock Images

Official PSD’s

Official PSDS is an excellent site to look for PSD resources, its collection is really huge, plus really nice tutorials and a community where you can interact with another Photoshop users.

SXC

Simple and full of options, SXC is the right place to look for a particular image.

Freepik

Freepik is a wonderful resource, because in there you can find vectors, photos and PSD. Very simple and extremely useful.

Fonts

Dafont

Dafont offers a really big quantity of fonts, most of them are free for commercial and personal purposes. It is a tremendous tool in order to preview how text will look like. There are many categories to search and it worth to look over them maybe you can get some inspiration for your next project.

FontSquirrel

Font Squirrel has galleries of fonts free for commercial use, plus a @font-face generator where a font can be set in different font formats in order to assure a consistent crossbrowser experience. Please see this tutorial from Paul Irish where he explains how to do that. It is necessary to stress that  the fonts that you can convert should be legally elegible for web embedding. Are you a little lazy about using the font-face generator? Don´t worry there are plenty of kits already ready for use in @font-face kits.

Identifont

Identifont has free fonts, a section called Fontset where you can mark your favorites fonts, but the most remarkable feature is the one related to identify fonts. Many times you get amazed for a font in a site and you do not have how to trace it. Now you can do that with Identifont.

What Font is

What font is lets you identify an specific font using a picture of it, besides it has plenty of free fonts to download.

Google Fonts

Google fonts is a service you can choose different kinds of fonts, then download or embed in your site by css, @import or via Javascript.

Feature Detection Tools

Modernizr

Modernizr is a javascript library which aims to detect if a browser supports html5 and css3 features, in case the new features are not supported, some classes are applied to html tag. For more information how to use this wonderful tool, please read this article.

Polyfills – Modernizr´s recommended

Polyfills are scripts which simulate the behavior of native API in old browsers. These are the recommended by the library, over 40 scripts.

Few out of the previous list to have in mind:

  • JQuery-Animate-Enhanced Extend $.animate() to detect CSS transitions for Webkit, Mozilla and Opera and convert animations automatically. Compatible with IE6+ .
  • CssSandpaper  is a JavaScript library which looks through at the stylesheets in a html document, it can make appear some CSS3 features such us box-shadow, transform, opacity, etc in older version of IE.
  • JQuery-Anystrecht is a plugin focus on simulating CSS3 background-size property.
  • Transform.js and Transitions.js  are both jquery plugins which can emulate the features  of CSS3 with the same name.

Image Galleries

Gamma Gallery

A responsive image gallery with a caption on over. Really recommended for sites design for responsive web design.

Touch Touch

Touch Touch is an image gallery which aims to be ideal for mobile android and ios devices.

GridNav

A really nice image gallery with 10 effects that can be applied. The mentioned effects are:

Sliders

12 Professional Responsive Jquery  Slider Plugins

TouchSlider

touchSlider is a responsive layout slider which is suitable for desktop and mobile devices. Its more remarkab characteristics are:

  • Cross-browser support, desktop and mobile
  • CSS accelerated
  • Multipurpose options
  • Responsive layout
  • Ready for images and content
  • Callback functions support

It has been tested and compatible with:

  • iOS (iPhone, iPad, iPod Touch)
  • Android (all versions)
  • BlackBerry OS 6 (Torch)
  • WebOS 2 (Palm Pre/Pixi)
  • Desktop browsers

Parallax Content Slider

A simple parallax content slider with different animations for each slider element and a background parallax effect.

Awkward Showcase

It is a content slider, you can place in it text, images, images with captions or tooltips like it is shown in the picture above, and video. Besides it is infinite, so when you get the last image, it goes automatically to the first slide without going left when you click on right arrow.

Sprite Generator

Css.Spritegen

Everybody knows the benefits in performance that CSS sprites can bring to us. An automatic sprite generator save us a lot of time using our favorite image editor. This particular generator gives us the option to deliver the sprite in .png or .jpg  format, plus the css code generated.

Sites to continuous consult

In order to be updated on the always changing world of the web, I am going to recommend some sites to have a close look:

World Wide Web Consortium (W3C)  is the international community which members in its majority belongs to the main companies in Internet, and the mission of this organization is to achieve Web standards and  in this manner get its full potential.

WebPlatform.org is an open wiki where developers around the world makes their contribution for a better web, no matter which browser or platform. In this site you can read about the hot topics of these days: Html5, SVG, CSS3, animation, video, webgl and more.

Html5 Please is nice place to know if new web features are supported by several browsers and mobile devices (old and new ones). Besides there are polyfills or fallbacks in case a certain feature is not supported.

Ezequiel Lavaca

Ezequiel Lavaca is a frontend freelance developer passionate on new technologies. Personal website: www.canvasestudio.com

Posts by Ezequiel Lavaca
Cookie Icon

We use cookies to ensure that we give you the best experience on our website. Privacy Statement.

  • I disagree
  • I agree