The Hickensian

9.01.09 Recent Work: FontExplorer Pro

38 comments
Tagged with: fonts, icons, work

Just over 2 years ago, I started work on what turned out to be my largest icon project to date, for the new version of Linotype’s FontExplorer app (or ‘FEX’ as it’s also known). It was great to be asked to work on an app that I use everyday, and as the project grew, over 280 new icons were created for it, and at several different sizes.

The first job was to look at the application icons for Pro and Server editions. Amongst the early sketches, I was very keen on an early idea that used a printers wooden draw of metal type:

However, the child’s block idea was chosen, as Linotype liked how it suggested using the app was ‘childs play’, so this idea was progressed into early vector roughs:

As you can see, the Linotype L logo was common theme to all ideas, some more subtle than others. At one point we considered a transparent version:

These were worked through until we arrived at the final icons. Both apps also have updaters that show them packaged in plastic and brown parcel tape:

One of the requirements of the brief was that the client needed original vector artwork, so for the first time, I used Illustrator to create all the icons, not just the larger application icons. There are pros and cons with this – Illustrator has handy features such as global colour and selecting elements by same stroke or fill, but when it comes to pixel perfect rendering it’s a pain. You end up using little workarounds (such as not making a stroke 1 pixel, but 0.8) in order to achieve crispness.

Finally, to be ready for Resolution Independence (and as no one has created vectors that can scaled down effectively as well as up), several versions were required. So for each of those 280 odd icons, the following sizes were required: 16, 32, 48, 128 px, with application icons requiring a further 256 and 512px version. As a lot of these interface icons are 16px at default, the 128px version didn’t need to be as detailed/photorealistic as an application icon would be at that size, but still look good at that size. Here are some examples:

It was not only a great project to work on, but also a great client to work with!

Comments | RSS

No.1

∞ GUESS said 396 days ago:

Incredible work Jon. I love seeing the design progression. Those packaged versions are tasty!

No.2

∞ Dan Brendstrup said 396 days ago:

Excellent work as always, Jon. And I agree that those packaged versions are a very nice touch!

The only gripe I have is that the Linotype “L” is such an odd shape that you can’t help but think that it would never fit into any hole in that box, even if there’s an L-shaped cutout on one of the hidden sides, since it’s totally the wrong font! :)

No.3

∞ Ian McFarlan said 396 days ago:

Beautiful work, Jon. Love the block motif.

No.4

∞ Tim Van Damme said 396 days ago:

I read the article, scrolled back up, and slowly back down. They are incredible! Congrats!

No.5

∞ Oliver Ker said 396 days ago:

Amazing attention to detail, from start to finish. Love it.

No.6

∞ Rod said 396 days ago:

This is gorgeous! Incredible detail Jon!

No.7

∞ Bruce Colthart (@bccreative) said 396 days ago:

ALWAYS a delight to see sketches, even more so in the evolution of such an outstanding end product. Your vector work is so above and beyond what I often see in contemporary vector icons. Congratulations.

No.8

∞ pflynn said 396 days ago:

Amazing logo and amazing app! I just downloaded the new version now and they’ve somehow improved what was already a top app.

Just wondering, you said that you used Illustrator to create the icons, what do you usually use?

No.9

∞ BrandJoe said 396 days ago:

Really Impressed – need to up my game!

No.10

∞ Jason Santa Maria said 396 days ago:

Seriously beautiful work all around. FEX is my favorite font management app, I still shudder when thinking back to the crashing days of ATM or Suitcase.

No.11

∞ Chris Hester said 396 days ago:

That transparent cube is seriously amazing! I like it even more than the final design.

No.12

∞ George Terezakis said 396 days ago:

Brilliant work for a brilliant product mr. Hicks!
We really can’t wait to see your work on Opera :-)

No.13

∞ Lukes Beard said 396 days ago:

wow , amazing work and an amazing insight. well done and thanks

No.14

∞ David Clifford said 396 days ago:

nice stuff Jon! it’s nice to see your design process, it’s almost as if looking at a photographer’s contact sheet :)

nice work!

cheers,

David

No.15

∞ lewr said 396 days ago:

Excellent work. Simply amazing. I looking for the new Opera as well! Thanks for sharing these ideas

No.16

∞ Nick Dominguez said 396 days ago:

Another compliment into the pot. Well done!

No.17

∞ Brad McCall said 396 days ago:

Nice work – thanks for sharing your process!

No.18

∞ Luke Dorny said 396 days ago:

That’s quite a few icons to do.
I really like the earlier ones you sketched up top! …but there would be concerns that newer designers might not be familiar with the job case or metal type (sadly).

There are competitors for FEX, but in my book nothing comes close to it and it’s a relief that I’ve used it for years now and it’s only crashed ONCE.

Great discussion about the era on Jason Santa Maria’s blog: http://v3.jasonsantamaria.com/archive//2005/09/13/fontexplorer_x.php

High-profile reputation not only maintained but elevated, Señor Hicks.

No.19

∞ Jason Robb said 396 days ago:

Ditto. Very outstanding work! Always an inspiration.

No.20

∞ Mark said 396 days ago:

Wow. I love these icons. Your very talented with shading and highlighting etc.

I also love how you showed your sketches and thinking behind the project. It was great to get an insight into your work flow.

No.21

∞ James Edmondson said 396 days ago:

I have no idea how you render that so perfect in Illustrator. Beautiful work! You make others in your field proud to be there.

No.22

∞ Geoff Taylor said 396 days ago:

Still haven’t had a chance to check out FontExplorer Pro but those icons of yours are sweeeeeet. Great job, Jon!

No.23

∞ Vasily said 396 days ago:

What a fantastic job you’ve done! Crisp, fresh, effective. Linotype were lucky to get you.

No.24

∞ Marty Walker said 396 days ago:

When I first saw the cube I thought “Hicks is using a 3D app for sure.” But no! Love the sketches and the final result. Congrats and well done.

No.25

∞ Mark Story said 396 days ago:

Beautiful work Jon, and thanks for sharing.

No.26

∞ Sean said 396 days ago:

Stunning work.

No.27

∞ Scott McMillin said 396 days ago:

Great job, Jon!

I love the look of your original ideas. They’re certainly more appealing to me as someone who loves type and uses FEX a lot. The whole “child’s play” rationale for using the blocks concept sounds like a client not understanding its audience nor the branding of an application/product via its icon.

For me it’s even more egregious for a Pro-labeled product. I child’s block visually identifies the application/product as a toy. Once the app is launched and used the user will decide whether it’s easy-to-use. If it is, that feeling will be identified with the icon. It’s interesting to look at this from an identity design perspective (which I guess I’m doing).

Anyway, client directives aside, your work is fantastic, as usual.

No.28

∞ Jason said 396 days ago:

What everyone else has said… this is some gorgeous work.

No.29

∞ Nathan Borror said 396 days ago:

Process posts are my favorite! Wow, just wow man :)

No.30

∞ Anthony Baker said 395 days ago:

Absolutely wonderful, Jon. Just downloaded the app yesterday and was marveling at the design of the icons. Very happy to hear they are your own. You’ve outdone yourself this time, sir!