Fresh Resources for Web Designers and Developers (April 2013)
We are already in the second quarter of the year. While some people might fool you with jokes, we will share goodness instead, especially for designers and developers.
In this round, we have some great tools for you to facilitate your work — from a tool that allows you to create customized grid paper for sketching or wireframing to one that aid in optimizing your webpage load. Let’s check them out.
Paperkit
If sketching and wireframing are what you always do before Photoshop(ing), then you need this tool, Paperkit. It is a free tool to create gridlines or dotted paper for sketching your ideas. Several controls are provided to customize the output: paper size (A4, A3, etc.), unit measurement (currently only support for Inches and millimeters), spacing, margin, and stroke width and color.
Then you can download it in PDF format for printing.
Web Development Estimator
As a freelance worker, your client will certainly request your service pricing rate. This tool, The Web Development Estimator (well, the name has said it all), is a simple and straightforward tool to list items of your service with the price rate and save it in PDF format to send to your client.
One of the limits of this tool, however, is that it only supports dollars, Pounds, Yen, and euros for the currency symbol. Thus, if you are not serving clients with those currencies, this tool, sadly, might not be of much use.
Lorem Pixel
Lorem Pixel is a tool to generate a dummy image for you to design prototypes, both for Print and Web. Lorem Pixel provides several image categories (from cats to sports) to generate the image, it also allows you to adjust the image size.
All in all, it’s a great tool to complement its sibling Lorem Ipsum, worth bookmarking.
Antwort
Responsiveness is skyrocketing. (Almost) everything on the web today is going responsive, including the Email. Although, it is an ancient communication channel (invented in 1971), Email still is the backbone of all Internet communication and services (you register Facebook and Twitter with your email address, right?).
If you want to build/send one that is responsive, using Antwort is one of you best option. It’s a responsive layout for email. It supports all major email clients and fits nicely in various viewport sizes.
SassMe
Sass provides a set of functions to manipulate colors. However, it is not intuitive what the output will be like. SassMe is created to fill the answer. SassMe is a tool to visualize Sass color function output instantly. It provides sliders to adjust the colors and generates the function for you to paste it in your Sass/SCSS stylesheet.
Color Contrast Ratio Calculator
Contrast makes a design visually richer, and the content will be more readable. This tool by Lea Verou (also known as CSS guru) calculates the contrast ratio, it returns whether the color combination that we entered makes a good contrast as per the WCAG standard.
Browser Diet
It looks like “Diet” is not only related to meals, browsers also need a diet. The Browser Diet is a list of several tips to increase your website performance so that the browser can process your website quicker. It listed several factors from HTML, CSS, JavaScript and the Server-side of things.
Browser Hacks
Web Browsers often have their own quirks on how to handle or parse CSS properties and JavaScript. It makes our webpage look slightly different across all browsers. I’m not exclusively referring to Internet Explorer, sometimes it happens to Google Chrome and Safari too. To solve this issue, we can apply some “hacks”.
So, if you need one for CSS and JavaScript, Browser Hacks is the best way to go.
CSS Beautifier
Honestly speaking, if you have been in the Web Design field quite long, you might have seen plenty of these kinds of tools. But compared to the other similar tools that I’ve tried, this one has a cleaner and uncluttered user interface, and it generates the output instantly without a single click.
