Email iconarrow-down-circleGroup 8Path 3arrow-rightGroup 4Combined Shapearrow-rightGroup 4Combined ShapeUntitled 2Untitled 2Path 3ozFill 166crosscupcake-icondribbble iconGroupPage 1GitHamburgerPage 1Page 1LinkedInOval 1Page 1Email iconphone iconPodcast ctaPodcast ctaPodcastpushpinblog icon copy 2 + Bitmap Copy 2Fill 1medal copy 3Group 7twitter icontwitter iconPage 1

As a designer, I like my designs to be built perfectly and since I only trust myself when it comes to small details, I like to get my hands dirty in the front-end to get those details right. In the process of getting my front-end toolkit set up to my liking I’ve been gathering the most useful apps and extensions out there, so here’s a roundup of my favourite front-end tools:

Sublime Text 3

For me, Sublime Text is the code editor I’m most comfortable with. It offers a whole world of packages to install and customize as you please and, for light front-end development (I’m no front-end architect), I think it does the job.
Download it here.

The most useful packages I use with Sublime Text 3 are:

Emmet
An incredibly useful HTML and CSS shortcut library that allows you to create a whole HTML layout in a single line of code. It’s saved me hours of coding. Look at what you can achieve with some of the built in commands:

Pretty useful, isn’t it?

Download it here.

SideBarEnhancements
An extension that makes Sublime Text context menus as useful as they should have been in the first place. You’ll now be able to create, edit, delete, rename, or move any file. It also adds functionalities such as copying URL paths, getting base64 content out of a file, and much, much more.

Download it here.

Idiomatic Comments
This extension allows you to quickly insert tidy comments in your CSS, as well as commenting bits out.

Download it here.

FakeImage.pl
The quickest way to get placeholder images in your code without having to copy and paste them from Google. You can define the exact measures, the text inside the images, and the colour combination.

Download it here.

Spacegrey theme
As a designer, I care a lot about how my screen looks, and I hate Matrix-looking screens. Spacegrey is one of the most balanced themes I’ve used, colour and typography-wise. I’ve been using it for more than a year and I haven’t found anything wrong with the colours.

Download it here.

iTerm 2

They call themselves ‘The Mac OS Terminal Replacement’. For me, this is how Terminal.app should be. Highly customisable, lots of useful shortcuts, multiple tabs and windows…

Download it here.

Tower 2

At UVD we use git for version control, and I can’t keep up with the amount of different commands needed. That’s where Tower 2 fits in. It helps me understand git better, it saves me from having to read nasty errors on iTerm, I can quickly resolve conflicts… the list goes on and on. A magnificent piece of software.

Buy it here (£39.95).

Dash

You can’t always remember the exact syntax of some of the languages you’re building your websites with, and this is why Dash is so useful. It’s an app that hosts offline and lets you search all the documentation you would ever need. It has integrations with lots of app, but I would recommend coupling Dash with Alfred; you’ll have the quickest combination to get documentation about any programming language out there.

Alfred + Dash

Download or buy it here (Free/£14.99).

Frank DeLoupe

I like to pick colours directly from some designs or photos, to create a nice colour palette, and Frank helps me doing that. It’s a little menu bar app that will allow you to pick any colour and copy the HEX code to your clipboard or even make it your primary Photoshop colour.

Buy it here (£0.79).

ImageOptim

An absolute must if you care about website speeds and performance. ImageOptim will optimize all kinds of images to the minimum size possible without losing any quality at all. It works better with PNGs, but you can throw any image at it.

Download it here.

WhatFont (Chrome extension)

I usually get inspiration from browsing around the internet, and when I see a font I like, I use WhatFont to identify it. I also use it as an alternative to the Inspector to quickly see line heights, font sizes and how it’s served.

Download it here.


And that’s it for my list of favourite design-to-front-end tools! I hope it’s useful, and if you have any recommendations for any other tools that might be useful for us, please use the comments section down below or tweet me!

Share: