Helpful UX Designer, Duncan Watts, has put together the first in his series of Irregular Designer's Tool Kit articles. In these features he'll share insider knowledge and tips for designers. Over to Dunc...

Where do we start?

We've recently had a second year degree student from Chester University working with us to gain some industry experience. He fitted in with the team really well; so well in fact that he's actually still here! He's switched-on, has a good eye and knows his way around the core software, but what having him here reminded me of, is how much of our knowledge and experience we take for granted. With that in mind, I thought it would be useful to share a little of our knowledge and the tools we use day-to-day including kit, resources, terminology, best practice and so on.

When I started my first job after finishing Uni, I had never even used Illustrator - to get me up to speed, I was given a map of Dudley town centre to illustrate for a leaflet. This was back in 2001, before the days of Google Maps, so I had to scan an old A-Z and trace it. The map took me days and days to do; when I was finished, I showed my boss who said it was spot-on but had cost the company more than the job was worth (ooops). That didn’t really matter as it was an investment in me that paid the company back time and again. But it does help if you know the software you will be using day-to-day.

So what do we use in the UX department at Blueleaf?

Prototypes and wireframes

For prototypes we use Axure. This is a great bit of kit that allows you to create responsive prototypes. It’s quick to learn and there's some great resources to help on the site. The wireframes can be as simple or complicated as you need and can respond to as many screen sizes as you want. Normally we do up to three but have had to show how layouts will work on up to five different viewports. It’s definitely worth having a look around the software. 

For simple interactive mock-ups we are using InVision. This is really nice and intuitive and can really help get across the design. It is also great for sharing and collaborating on projects and has nice skins to show how your designs will work on mobile and tablet devices. 

It's worth mentioning that there are lots of different solutions for prototypes and web mock-ups and it is worth having a look around to see what works best for you. However so far, the ones above are working well for us.

Design software

Once we get to the design stage we mainly work in Photoshop, however a good working knowledge of illustrator is important.

We use a creative cloud subscription for Photoshop and Illustrator as both products are from Adobe. This gives us access to lots of other Adobe products including Flash, After Effects and Premier to name just a few. You also get access to Typekit web fonts and can sync these directly into Photoshop, which is ace.

Fonts

We use several different font services, depending on the clients' needs and the specific consideration for individual projects. The two main ones we use are Typekit and Google Fonts.

Typekit is a paid-for service that has over 1000 fonts that sync with Creative Suite, giving you easy access to the fonts to use in the visuals. You can get a free version for smaller sites with less fonts which is worth getting just to have a play.

Google Fonts is a free service with about 700 fonts; they allow you to download copies of the fonts to use in your visuals.

I like to use Suitcase Fusion to manage my fonts rather than just using the Fontbook on my Mac. This makes turning sets of fonts on nice and easy. 

Another handy resource for fonts is Font Squirrel which offers a selection of free and nearly free web and print fonts.

Other useful software, apps and sites include:

Dropbox - great for storing files centrally, allowing us to pass files between the team and access them from multiple locations. You can get a free version to get you going.

Trello - a great free visual project management app which lets you drag and drop cards onto different lists so you can easily keep track of a project collaboratively. 

Office - most of our clients use Word, Excel and PowerPoint, so it helps massively to have the office suite. A free version called OpenOffice is available, which is pretty good but I have had a couple of issues passing files between the two. 

Cyberduck - an open source client for FTP which allows you to upload files to your websites as well as downloading them from FTP servers. 

Flaticon - this is a great resource for web icons which allows you to search and download vector icons for your sites including xvgs and pngs. Another similar site is Icomoon  

Grid Calculator - a handy site for quickly working out column and gutter widths.

That should be enough to get you started - if you have any specific topics or questions let me know and I will see what I can do duncan.watts@blue-leaf.co.uk

Comment