Design-Notes » development tool

Nice Screen Measurement Tool NRuler 1.0 – Free Mac App

alexandra — Fri, 01 Jan 2010 17:51:26 +0000

Web designers often need to have precise measurement of a design and make little changes here and there. It is nice to get all measurements right at once. One pixel makes huge difference, right? I found a little MAC App can help us on this task. Due to my “compulsive sharing ” habit, I put it into the first post of 2010 !! Hope you like to little apple too !!

(BTW: it says multi-platform but Im using mac so I have only tried it on my machine.)

Download From Apple

Apple description

About NRuler
Have you ever wanted to be able to visually measure a space on your website or design so you could plan an object of an appropriate size? NRuler is a free multiplatform screen ruler and unit converter which lets you measure anything on your screen. It comes with a unit converter that lets you convert betweeen measurement units.

Main features:
- Pixels, Centimeters, Milimeters and Picas
- Horizontal and vertical
- Ability to always on top
- Customizable pixels per inch
- Mark center or mouse position on the rulers
- Unit Converter
- Saves your settings
- No installation required

ADD TO If this helps, why not tell your friends?

6 Excellent web design tools

alexandra — Fri, 24 Apr 2009 15:20:59 +0000

Recently I used a free typography frame work created by csswizardry.com. I have tried some CSS reset before but they were quite disappointing. This typography and grid base design frame work was extremely useful. It not only same me the time to do my own reset also give me many column width choices to use. I only have one suggestion for the creator. Class names like “ sixforty twoeighty ” are bit too much typing. I would suggest changing them to “w640,w280″.

Here are some screen shots and the download link.

Some useful tools that I have been using.

Firefox addon for grid base design

And four more bookmarklets I found from a long list of speckyboy design magazine’s post on 32 Indispensable Bookmarklets for Web Developers and Designers. As you know those big design magazines like to give you a long list of 100 something. I don’t mind this kind of posts in inspirations, but for tools, no one has the time to go through a long list. Here are the most useful ones I picked up from the list

color list gives you all the colors on a page in hex
DOM inspector:
Document Tree

Design : includes ruler,grid, unit, and crosshair tools.
Css reload : reloads CSS style sheet every 2 seconds.

ADD TO If this helps, why not tell your friends?

11 must know Free online tools for web design and development

alexandra — Sat, 11 Apr 2009 10:51:02 +0000

Styleneat
A great online tool that organizes and standardizes CSS code in multi-line format or single line format. User can also choose to sort selectors and identifiers.
YUI compressor
Compress multiple jacvascript files into one. You can also chage compression rate
Make your own font for free with Your fonts. It is a bit time consuming to scan upload and download using this online tool, but comparing to learning a whole new software, it is the better choice.
Simplythe best
All sorts of free scripts and snippets from java to php and C++.
Javascript packer
An online tool to compress javascripts. This one has been around for quite a long time. Old and ugly don not necessarily mean out of date.It works very well.
IE net render is a great tool for mac users to check your website’s compatibility with IE. Unlike browsershot.org which only alow unregistered user use once per day, this once is much more generals. For some mysterious reason people are still using stupid IE6 and IE7. As long as they keep using it, it is our job to check : (
Shrink your image size made easier with smush.itThanks for this online tool designers and developpers can spend more time on creative stuff.
dingitsup
This online tool notifies you when your site is down by email or sms
Here we have the latest loader generator Preloaders, different from the traditional ones. It added features like 3D
Apart from fire bugs which everyone seem to be using there is another good firefox plugin Yslow

YSlow analyzes web pages and tells you why they’re slow based on Yahoo’s rules for high performance web sites.
Dummy text is designers best friend. Last but not least, free Dummy text at Lipsum. User can choose to generate the texts with different formats, list, paragraph, what ever your choice is.

ADD TO If this helps, why not tell your friends?