Design Tools We Can’t Live Without
The design team at Madgex are a mix of Creative/UI designers and Front end developers who work across all our products and services. From designing and building new products and features, to delivering projects, marketing our services and everything in between.
I asked everyone in the team for a favourite tool, that they use day in day out and couldn’t live without. Here are the results…
We use Illustrator daily within our design team to design everything from page mock up and style tiles to internal graphics and marketing collateral. Graphics we design can be resized without distorting or losing quality thanks to anchor points and paths that hold the computer graphic (otherwise known as a vector) together.
Style Tiles (which are mini mood boards that capture a client’s branding requirements) are one of the main pieces of work that we produce in Illustrator. We can use the eye drop tool to copy colours, fonts and border styles quickly and easily. Illustrator holds an endless library of other tools.
The pen tool is perfect for tracing and creating new shapes, as well as editing paths and the exclude and merge tools, under the Pathfinder tab, help us cut out and merge images and shapes. All help us work super efficiently. The front end developers we work with then use the illustrator file and save the assets as .svgs or .pngs to use in the site build.
ImageOptim optimizes images by removing junk metadata, unnecessary color profiles and then compresses them, losslessly (without reducing quality). This makes images smaller in file size, making them load quick and take up less space on the drive.
I use this on every image I create, it saves a surprising amount of space. A great tip is you can cmd drag it into a find window to create a short cut you can drag images to compress them (see screenshot). Best of all its FREE.
Caffeine – James Wragg, Front end Development Team Lead
Caffeine is always one of the first apps I install on a new mac, super simple and super useful!
It’s a tiny program that puts an icon in your menu bar. Click it to prevent your Mac from automatically going to sleep, dimming the screen or starting screen savers. Click it again to go back.
If you’re giving a talk, presentation or workshop & don’t want your screen saver interrupting things – Caffeine! If you’re reviewing your work on your iPhone, referring to your laptop screen & don’t want the screen dimming or screensaver kicking in to interrupt your flow – Caffeine! If you’re watching an Apple keynote, or following a video tutorial and the screensaver keeps kicking in – Caffeine!
Only downside is the icon isn’t retina, so looks a little blurry on new screens. However, this is easily rectified! Just download a custom icon, I like this one.
Trello is a free project management tool. There are three levels of organisation: (1) Create a board. (2) Add lists to your board. (3) Add cards to each list. At Madgex, each designer in the team has their own board that anyone in the team can view.
Every morning, I start the day (after making a coffee) by looking at Trello to plan my day. It’s where I manage my time and where my manager looks to see my workload for the week. I go back to it throughout the day as I finish tasks or someone comes by my desk and asks for some help with a project – if I keep Trello up to date, I keep on track.
Cards have a couple of nifty features. The coloured labels enable us to tag each card as either ‘on hold’ (red), ‘in progress’ (yellow) or ‘complete’ (green). The due date makes it super easy to prioritise and keep track of deadlines. Each card is a task, which is placed into a relevant list. My lists are ‘Projects’, ‘Enhancements’, ‘Product’, ‘Testing’, ‘Sales/Marketing’ and ‘Done’. Once a task is done, I drag it over the ‘Done’ list to keep track of what I’ve recently completed.
The Trello interface is basic compared to rivals Asana or Basecamp, but that’s the beauty of it – simplicity.
Developing HTML emails is not the easiest task for a front-end developer, not only because it’s like coding 15 years ago but because of the testing. Email providers behave very differently from each other and you are bound to get some (unwelcome) surprises with your design.
This is where Litmus comes into play. You can get instant previews of your emails from all the main clients on desktop, mobile and web, making it easy to spot the errors.
Testing the layout of your emails is only one of the features that Litmus offers. You can code directly in their editor, with instant previews on the side, so you can see your email take shape (and correct it) as you type. It also has analytics and a spam checker.
Litmus has a great blog on everything email related. I learned some nice little bits of code from their posts.
In short, Litmus is great tool if you’re working with emails. And the design of the site is super nice, which is always a plus!
InVision is a prototyping & collaboration tool that allows us to share visuals with clients and share thoughts and comments directly in situ. You simply drag and drop your files in to the window, and with some setting changes, you can dictate whether you have hotpots to link to other screens or present your design within a device.
It has become staple to the design team at Madgex. We use it across every project, big and small. It’s such a powerful and efficient tool that I don’t know what I would do without it. (…oh wait. send comp.jpg email, email, email, email, email, email, email, email…. You get the idea!).
The InVision team also deliver continual updates that will make our lives easier, and as a bonus they produce some top end blog material on UX design tips.
I use Sublime Text, day in, day out, which is a text editor to write all my front-end code. It’s an amazing tool without which my life would be be ruined.
Why? Well, it has very stylish and elegant user interface, which helps improve the readability of code, it highlights and tooltips the code I am writing, and finally, it also supports all the other plugins I rely on to speed up the development process.
One of the best code editors out there and a must have tool for every Front-end developer.
Grunt and Gulp – Jack Appleby, Senior Front end Developer
The two task runners we use are Grunt and Gulp. They carry out most of the time consuming, repetitive work that goes into making and maintaining production-ready assets.
For example, when we make a change to the CSS for the Job Board Platform, Grunt picks up that change, compiles the Sass to CSS, minifies it and copies it to a distribution folder. Without the task runner, this process would involve three manual steps. And that’s just the CSS.
And for my own pick, I’ve chosen Slack. We use it for all our team communications, whether in channels by subject, or for direct messaging each other. It’s dramatically reduced the amount of noise in my email inbox and allows everyone in the design team to stay in the loop of all major projects and developments, no matter where they are physically located while working within other teams around the office
We’ve also set up lots of slack integrations, including the excellent LaunchKit Review Monitor so we can keep on top of app stores reviews. It’s quick, its easy and a great way to keep the team across everything that is going on. The Slack app is great too!
That’s are our top picks right now, but we’re always looking for new tools to help us design and build as efficiently as possible.