July 2021
« Jun    


Web design is a process. There are many phases that require careful thought and observation to get the job done. Our job requires many skills and tools to design the right solution. Quite often, web designers find themselves spending a lot of time on small things like finding the correct colors or measuring DIVs, margins, or spacing. We have a tendency to be pixel perfectionists, and while that is a great trait to have, it also leaves us vulnerable to inefficiencies in our workflow.

I have been a web designer since early 2000’s and I have gone through a lot of different software on both Windows and Mac. As I work on a Mac almost exclusively these days, I thought it would be a good idea to share which Mac apps I use and hopefully in the process, help some web designers improve their workflow.

Coda by Panic – $ 75

Coda by Panic

I have used various code editor software in the past, some of which were good and others that were really bad. When I started coding, Notepad was of course, my favorite. It was fast and simple. No gimmicks. But then I was introduced to Dreamweaver, and while it seemed clunky at first, the color-coding and snippets helped tremendously. And then I discovered Coda.

Coda by Panic

Coda is a type of software that mesmerizes you with its UI. Every inch of it was designed well and it’s a joy to use. Coda has all the features you would expect to find in a code editor, in addition to some unique things such as MySQL editor, live code hints, built-in file browser (FTP, SFTP, and WebDAV), and retina-support.

I also want to give a quick shout-out to Espresso as well.  Espresso is another fine code editor for Mac. I would recommend trying both to see which one you like better.

Transmit by Panic – $ 34

Transmit by Panic

Another Panic product?  I know, I know. I swear I am not affiliated with Panic; I just love their software. Transmit is what every FTP client should be. I have used FileZilla on Windows for over 5 years, and I loved every second of it, but Transmit is on a different level. It’s like FileZilla on steroids. As with every other Panic product, its UI is very intuitive and designed for designers.

One of the great features of Transmit is that it allows you to mount your FTP connection as a folder or drive so that it can be browsed and manipulated just as a normal OS folder would be.  This changes your perspective on what FTP should be.  Why should not FTP be as easy as dragging a file over in a folder?  It should!

ColorSnapper by Koolesache – $ 4.99

ColorSnapper by Koolesache

Who does not love an awesome color picker?  We all need a quick and easy way to select colors off the screen, and while there are many apps that do that, ColorSnapper is one of the better choices.

ColorSnapper by Koolesache

ColorSnapper runs in your menu bar so it is always accessible when you need it. If that’s not good enough, you can use OPTION + COMMAND + C to fire up the color picker. The reason I love it is that it just works. It’s not bloated with features I do not need. You select a color and it’s instantly in your clipboard ready to be pasted. In case you want to look up a previously picked color, just click on the ColorSnapper icon in your menu bar and it will bring up a list of last 5 colors.  ColorSnapper developers are promising that this functionality will be expanded in the next release to include a larger memory of colors.

Oh, and yes, ColorSnapper fully supports retina displays as well. No jagged edges or pixilation here!

xRuler by Li Jianyu – $ 1.99

xRuler by LI JIANYU

xRuler is exactly what the name implies. A simple ruler used to measure dimensions on your screen. Just like ColorSnapper, it runs in your menu bar so it is always there. If you click on the icon, you can choose to show the horizontal or vertical ruler, or both. The rulers are somewhat transparent so you can see through them. This is very useful in situations where you need to measure overlapping objects.

xRuler by LI JIANYU

Another great feature of xRuler is that it shows you the exact pixel number when you hover over it, as shown in the screenshot above. When we were talking about pixels, we need to know the exact number, not a close or approximate number. After all, we are pixel perfectionists.

WhatFont Chrome Extension by Chengyin Liu – Free

WhatFont Chrome Extension by Chengyin Liu

This is a Google Chrome extension so it is not limited to Macs. With @font-face being so popular these days, designers need a way to quickly identify fonts on the web. While you can always look for it in the source code or using Firebug or similar extension, WhatFont is the fastest.  To activate WhatFont, you simply click on the f? icon in your Chrome browser. Then hover over which font you want to identify and voila.


And there you have it! Five great apps that help you do your job better and they can all be yours for under $ 120. I have no doubt in my mind that there are some great apps out there that even I do not know about, so it behooves us all to share our knowledge. If you are using an app that helps you in your workflow, why not share it with the world? Help designers do their jobs better and at the same time, support the developer that created the app.

Having said that, if you have any thoughts, suggestions or opinions on these apps, or any other related apps; post it in the comments!

Desizn Tech

Comments 0
There are currently no comments.