This site uses cookies to collect information about how you interact with our website and allow us to remember you. We use this information to ensure we send you relevant promotional, marketing communications and to measure the performance of our website. To find out more about the cookies we use, see our Privacy Policy.

Design Tools We Can’t Live Without

The design team at Madgex are a mix of Creative/​UI design­ers and Front end devel­op­ers who work across all our prod­ucts and ser­vices. From design­ing and build­ing new prod­ucts and fea­tures, to deliv­er­ing projects, mar­ket­ing our ser­vices and every­thing in between.

I asked every­one in the team for a favourite tool, that they use day in day out and couldn’t live with­out. Here are the results…

We use Illus­tra­tor dai­ly with­in our design team to design every­thing from page mock up and style tiles to inter­nal graph­ics and mar­ket­ing col­lat­er­al. Graph­ics we design can be resized with­out dis­tort­ing or los­ing qual­i­ty thanks to anchor points and paths that hold the com­put­er graph­ic (oth­er­wise known as a vec­tor) together.

Style Tiles (which are mini mood boards that cap­ture a client’s brand­ing require­ments) are one of the main pieces of work that we pro­duce in Illus­tra­tor. We can use the eye drop tool to copy colours, fonts and bor­der styles quick­ly and eas­i­ly. Illus­tra­tor holds an end­less library of oth­er tools.

The pen tool is per­fect for trac­ing and cre­at­ing new shapes, as well as edit­ing paths and the exclude and merge tools, under the Pathfind­er tab, help us cut out and merge images and shapes. All help us work super effi­cient­ly. The front end devel­op­ers we work with then use the illus­tra­tor file and save the assets as .svgs or .pngs to use in the site build.

Ima­geOp­tim opti­mizes images by remov­ing junk meta­da­ta, unnec­es­sary col­or pro­files and then com­press­es them, loss­less­ly (with­out reduc­ing qual­i­ty). This makes images small­er in file size, mak­ing them load quick and take up less space on the drive.

I use this on every image I cre­ate, it saves a sur­pris­ing amount of space. A great tip is you can cmd drag it into a find win­dow to cre­ate a short cut you can drag images to com­press them (see screen­shot). Best of all its FREE.

Trel­lo is a free project man­age­ment tool. There are three lev­els of organ­i­sa­tion: (1) Cre­ate a board. (2) Add lists to your board. (3) Add cards to each list. At Madgex, each design­er in the team has their own board that any­one in the team can view.

Every morn­ing, I start the day (after mak­ing a cof­fee) by look­ing at Trel­lo to plan my day. It’s where I man­age my time and where my man­ag­er looks to see my work­load for the week. I go back to it through­out the day as I fin­ish tasks or some­one comes by my desk and asks for some help with a project – if I keep Trel­lo up to date, I keep on track.

Cards have a cou­ple of nifty fea­tures. The coloured labels enable us to tag each card as either ​‘on hold’ (red), ​‘in progress’ (yel­low) or ​‘com­plete’ (green). The due date makes it super easy to pri­ori­tise and keep track of dead­lines. Each card is a task, which is placed into a rel­e­vant list. My lists are ​‘Projects’, ​‘Enhance­ments’, ​‘Prod­uct’, ​‘Test­ing’, ​‘Sales/​Marketing’ and ​‘Done’. Once a task is done, I drag it over the ​‘Done’ list to keep track of what I’ve recent­ly completed.

The Trel­lo inter­face is basic com­pared to rivals Asana or Base­camp, but that’s the beau­ty of it – simplicity.

Devel­op­ing HTML emails is not the eas­i­est task for a front-end devel­op­er, not only because it’s like cod­ing 15 years ago but because of the test­ing. Email providers behave very dif­fer­ent­ly from each oth­er and you are bound to get some (unwel­come) sur­pris­es with your design.

This is where Lit­mus comes into play. You can get instant pre­views of your emails from all the main clients on desk­top, mobile and web, mak­ing it easy to spot the errors.

Test­ing the lay­out of your emails is only one of the fea­tures that Lit­mus offers. You can code direct­ly in their edi­tor, with instant pre­views on the side, so you can see your email take shape (and cor­rect it) as you type. It also has ana­lyt­ics and a spam checker.

Lit­mus has a great blog on every­thing email relat­ed. I learned some nice lit­tle bits of code from their posts.

In short, Lit­mus is great tool if you’re work­ing with emails. And the design of the site is super nice, which is always a plus!

InVi­sion is a pro­to­typ­ing & col­lab­o­ra­tion tool that allows us to share visu­als with clients and share thoughts and com­ments direct­ly in situ. You sim­ply drag and drop your files in to the win­dow, and with some set­ting changes, you can dic­tate whether you have hot­pots to link to oth­er screens or present your design with­in a device.

It has become sta­ple to the design team at Madgex. We use it across every project, big and small. It’s such a pow­er­ful and effi­cient tool that I don’t know what I would do with­out it. (…oh wait. send comp.jpg email, email, email, email, email, email, email, email…. You get the idea!).

The InVi­sion team also deliv­er con­tin­u­al updates that will make our lives eas­i­er, and as a bonus they pro­duce some top end blog mate­r­i­al on UX design tips.

I use Sub­lime Text, day in, day out, which is a text edi­tor to write all my front-end code. It’s an amaz­ing tool with­out which my life would be be ruined.

Why? Well, it has very styl­ish and ele­gant user inter­face, which helps improve the read­abil­i­ty of code, it high­lights and tooltips the code I am writ­ing, and final­ly, it also sup­ports all the oth­er plu­g­ins I rely on to speed up the devel­op­ment process.

One of the best code edi­tors out there and a must have tool for every Front-end developer.

An invalu­able tool the front end devel­op­ers at Madgex use on a dai­ly basis is an auto­mat­ed task run­ner. A task run­ner is a bit of soft­ware that per­forms tasks for you. Exam­ples of this in front end devel­op­ment may be com­pil­ing CSS, com­press­ing JavaScript, opti­mis­ing images and cre­at­ing icons.

The two task run­ners we use are Grunt and Gulp. They car­ry out most of the time con­sum­ing, repet­i­tive work that goes into mak­ing and main­tain­ing pro­duc­tion-ready assets.

For exam­ple, when we make a change to the CSS for the Job Board Plat­form, Grunt picks up that change, com­piles the Sass to CSS, mini­fies it and copies it to a dis­tri­b­u­tion fold­er. With­out the task run­ner, this process would involve three man­u­al steps. And that’s just the CSS.

And for my own pick, I’ve cho­sen Slack. We use it for all our team com­mu­ni­ca­tions, whether in chan­nels by sub­ject, or for direct mes­sag­ing each oth­er. It’s dra­mat­i­cal­ly reduced the amount of noise in my email inbox and allows every­one in the design team to stay in the loop of all major projects and devel­op­ments, no mat­ter where they are phys­i­cal­ly locat­ed while work­ing with­in oth­er teams around the office

We’ve also set up lots of slack inte­gra­tions, includ­ing the excel­lent LaunchK­it Review Mon­i­tor so we can keep on top of app stores reviews. It’s quick, its easy and a great way to keep the team across every­thing that is going on. The Slack app is great too!

That’s are our top picks right now, but we’re always look­ing for new tools to help us design and build as effi­cient­ly as possible.