50 Time-Saving Web Design – Developer Tools
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 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 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 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.
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.
This is the right place for someone who is looking minimalistic icons. Shapes can be downloaded in png or in SVG format
All icons displayed on this website are released in pure css with only one html div, it aims to show the potential of CSS3 for creating visual objects and an alternative to SVG for responsive web design.
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.
Texture King shows different categories related to textures and inside them you can get many options to download.
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.
10 Ravens has free textures, stock images collection and 3D models. Very nice resources for exigent people.
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.
Simple and full of options, SXC is the right place to look for a particular image.
Freepik is a wonderful resource, because in there you can find vectors, photos and PSD. Very simple and extremely useful.
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.
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 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.