I couldn’t access SUBERAPPS and my other sites this morning, so logically I thought it must be my hosting server acting up. So I asked my friend, James from The Phuse to check on his side. He did noticed a little slowness but loaded eventually for him. He also recommended me this app, ImageOptim, that can reduce file size of images to reduce server load.

Tried it and hey it works! So I thought I should share it here.

How ImageOptim Works

ImageOptim is extremely easy to use. It compresses images by removing unnecessary comments and color profiles, handles PNG, JPEG and GIF animations.

I find that when I compress an image, there isn’t much difference compared to when it was not optimized.

Extremely Easy To Use

Before I tried the app, I imagine I would have to load the image into the program and save it again. But no, you only need to drag and drop your image, either into the app interface or the dock icon. ImageOptim will compress the image and save it immediately.

You can even drop multiple images for compression.

I’m guessing most people will be using this for their existing project. Let’s say you’re working on a website project, you can just drop your entire folder of images into ImageOptim and upload these image files.

It’s that easy. I find it can be very useful for making a site load even faster, resulting in a better user experience.

How Much Can It Compress?

It depends on the image you’re using, if you’re using an image with lots of color, it’ll compress the image even more.

As you can see from the screenshot, I managed to compress an image saving 30.6% of file size. Pretty impressive if you ask me!

How Much?

Free! Go download!

Check out SUBERNOVA online project management tool:

Today I am going to talk about an AIR app. If you think all AIR apps are resource hungry and memory hogging, wait till you try this out.

If you’re a web designer, you’ll understand that wireframing is an important step in your designing process. It’s important to layout the design in it’s raw skeleton form so that you know for sure where to put what and what goes where. Having a wireframe ready before heading to Photoshop or other graphics editing app will also help you speed up your design process because you don’t have to think about layout anymore while only concentrating on your creativity.

I have tried many wireframing tools, the most crucial feature I’m always looking out for is keyboard shortcuts. Keyboard shortcuts really aids me in the speed of generating a wireframe, for instance if I want to select all components in a wireframe, the shortcut key that’s already in my muscle brain is Cmd/Ctrl A. Without the keyboard shortcut I would have to select ALL components one by one which is a pain! You get the idea.

Balsamiq Mockups

Balsamiq is one of those wireframing tool that really works. Don’t be deceived by the raw design generated from the tool, it is on purpose. The low fidelity look encourages honest feedback, everything looks hand drawn, sketchy and looks like a “Mockup”. They don’t call it mockups because it’s a finished design. That’s another story altogether.

Just after a few minutes of use, I can feel the developers’ considerate thought process in the app. The app is snappy, the controls like the resize handle hides themselves when you don’t need them, the properties box lowers it’s opacity until you rollover them. The built in guides lets you snap objects to them so that you can align UI components without using your eyes. These are not big features but little things that differentiates annoyance from being a breeze to use.

Adding Components

You can either drag the UI (user interface) components out of the library, or an even faster way is by typing the UI component you want in the UI search box. Once the UI component you want is found, just hit enter. The UI component is added to your wireframe waiting for you to manipulate. We’re talking about speed here. :)

Editing Properties

Each UI component comes with its properties box where you can edit the component by cutting, copying, grouping, deleting, bringing to front or back etc. If you’re a keyboard shortcuts lover, Balsamiq have them built in and they work either on a Mac or PC.

Keyboard Shortcuts

Need I say more? If you’re familiar with Photoshop’s keyboard shortcuts, you’ll get up to speed very quickly with Balsamiq. One other thing to note is that unlike other wireframing tools I’ve used, I am happy to say that Balsamiq Mockups’ keyboard shortcuts works on a Mac.

Exporting

How useful is your wireframe if you can’t bring it out of the app?

Balsamiq gives you a couple of options for exporting like exporting to PNG and most recently, PDF format!

You can even export to clipboard after which you can paste the mockup image anywhere!

Offline & Soon To Be Online

Let’s just say you’re working on a plane, or in some deserted island, Balsamiq lets you work on airplane mode!

Need collaboration with your clients or co-workers? Balsamiq will be shipping a web version soon with collaboration features. Check out the web demo!

Conclusion

I highly recommend web designers to use wireframing tools before the actual design process. Choose a good tool, I have tested Balsamiq together with other apps and I can vouch that Balsamiq is the most speedy of them all!

At $79, Balsamiq is a great tool that you can keep forever.

If you want to learn more, check out the screencast embedded below:

Check out SUBERNOVA online project management tool: