The Breakroom

Expanding the Twemoji Universe

March 7, 2016

By Ged Maheux

Twemoji_Hero

Over the past few years the popularity of emoji has steadily grown. Heck, you can even send your sweetheart a kissy face emoji pillow as a gift! Over a year ago, we were pleased to be able to contribute to the ever-growing popularity of emoji as we helped Twitter design and develop their own unique emoji style for use on Twitter.com and their mobile apps.

Twitter recently announced an update to the Twemoji suite and we’re pleased to report we were once again able to lend them a hand in their creation. Twitter’s newly announced emoji cover the expanded icons added in Apple’s iOS 9.1 update and include dozens of new national flags, a newly-designed set of people icons with diverse skin tones, new animals, buildings, vehicles and more. The expanded set of emoji were completed here at the Iconfactory in Greensboro under Twitter’s direction over the course of two and a half months and helps bring the Twemoji suite in line with the current suite available in iOS 9.

Twemoji_Diversity

Chief among the challenges of these new emoji was the creation of Twitter’s own set of diverse skin tones. Unlike the emoji seen in iOS, Twitter’s emoji have no levels of gradients or shading so finding the colors to represent each of the required diversity levels took some time. Adjusting hue and saturation levels to find the exact right combinations for primary skin tones, plus shadows and highlights required several rounds of exploration until we zeroed in on the correct values. The new people emoji were also improved upon from their previous versions thanks to unified eye, lip and hair colors that all were specifically designed to work with the various diversity settings.

Twemoji_Flags

The new Twemoji now also includes over 100 new flags from countries like Mongolia, Ethiopia, Macau and Sri Lanka. All of the artwork seen in Twitter’s flags were drawn by hand specifically to match Twitter’s existing emoji style and precise level of detail. We’re grateful Twitter users in these many countries can now find their own nation’s flag for use on Twitter.

We’re pleased to have been able to assist Twitter once again with the development of their cool and unique emoji suite. Like the universe itself, the emoji cosmos continues to expand day by day. Even more exciting emoji will be added in the months ahead and we’ll be standing ready once again to help our clients with all their emoji needs, should they call on us. No project is too large or small; make sure to check out our portfolio. You can learn more about the expanded emoji suite seen in iOS 9.1 over at Emojipedia and explore all of the icons we’ve helped create for Twitter there as well. 🖖

Happy Holidays and Thank You!

December 18, 2015

By Ged Maheux

2015 Animated Iconfactory

As we power down our Macs and prepare for our annual (and much-needed) Christmas break, we wanted to take a moment and say thank you. Thanks to everyone who has continued to support our efforts by purchasing software like Twitterrific, xScope, iPulse and Flare. Thanks to our incredible clients who put their brands, reputations and apps in our hands year after year. Thanks to everyone who writes with words of support for the things we do, who sends us ideas and constructive suggestions, who makes us laugh on Twitter or who inspires us with their incredible talent.

2015 was an important year for all of us here as we saw the horizon of our services greatly expand to encompass not only icon and UI design, but also end-to-end coding, development and testing. With the help of Iconfactory North, we brought a host of new software into the digital world and we can’t wait to continue that trend next year and beyond. We’re were also excited to be privileged to witness the birth of the new Apple Watch and Apple TV platforms as well as the introduction of the incredible new iPad Pro.

Incredibly, 2016 will be the 20th anniversary of the Iconfactory. When we reflect on just how far we’ve come, from a simple, single hosted page on AOL with sets of pixel pushed icons to where we are today, it’s simply amazing. Needless to say we wouldn’t have lasted 5 let alone 20 without all of you supporting and encouraging us to continue. Next year is going to be a big one around these parts and from our Iconfactory family to you and yours, happy holidays, thank you and have a smashing new year!

Making of the 7R Mobile App

November 23, 2015

By Cheryl Cicha

7R is short for DRD4-7R, a gene associated with the hunger to explore. Also known as the “adventure gene,” some scientist claim people with this gene are more likely to embrace change and novelty, explore new places and take risks.

Suunto – a leading designer and manufacturer of sports instruments – approached us to develop their 7R App for iOS. The goal was to enhance the experience for owners of the soon to be released World Collection. The 7R app pairs with the adventure and travel watch Suunto Kailash named after the soaring 22,000 foot mass of black rock in Tibet that has never been climbed.

7R-App-Timeline

Iconfactory was approached by Suunto to design and develop a mobile app that enabled Kailash owners to visualize and share their journeys based on the vast amounts of data collected by the watch. Via the app, users have their complete travel logbook at their fingertips, get notifications and can adjust the watch on the go. A unique timeline pulls photos from the camera roll and softly merges them with a dynamic world map allowing them to see where they were travelling in the world along with the photos they took at that moment.

The first and biggest challenge the Iconfactory development team faced was communicating with the watch over Bluetooth while several versions of the hardware and firmware were still in development. This often meant determining whether Bluetooth errors were in the integration library, the watch firmware, the hardware, or in the application’s code was tricky. Solving these problems required in depth knowledge of the Bluetooth stack, custom debugging code, and a bespoke library written to monitor and track conversations with the device, as well as constant communication with the teams involved in Finland.

Once these initial hurdles were overcome, the app was able to sync with Kailash and utilize data. We would have loved nothing more than to test the app in an adventure around the world, but ultimately settled for limited to trips to the grocery store. Ultimately, the Suunto sales force carried early prototypes of the watch with them as they travelled providing valid test data.

With the challenges of remote teams in vastly different time zones, here are just a few of the best practices we used to ensure the app was feature complete and shipped on time.

  • Weekly meetings with the client, Account Manager, Lead Designer and Development team kept everyone involved and moving forward with visibility into progress.
  • The Product Owner responsible for the success of the app responded quickly to email with detailed answers, which kept the feedback loops for communication short. This was critical when iterating on involved features like the Timeline.
  • Constant visual refinement so that the app shared the aesthetic of the Suunto brand, which is reflected in all aspects of the UI and icon design. To see some of the early wireframes, see our portfolio.
  • Lead developers had direct access to technical resources in the other time zones, which made working through challenges or getting answers to question much quicker.
  • A public Trello board for communicating status in near real time allowed anyone on the team to quickly assess the product status and provide detailed feedback from any time zone.

Designing and developing the 7R app was fraught with unknowns but was a challenge we thoroughly enjoyed. If curiosity drives you forward and you thrive on discovery you might belong to the few who possess the adventure gene, 7R. To find out, download the free Suunto 7R app for iOS from the App Store now.

The New Favicon

November 4, 2015

By Craig Hockenberry

The recent release of Safari 9.0 brought a great new feature: pinned tabs. These tabs are locked to the lefthand side of your tab bar and stay in place, even when you open a new window or relaunch the browser.

The default behavior is to display the first letter of the site’s name on a color from the site’s theme. If you work on a site with a strong branding element, you’ll want to customize the icon on the pinned tab. Anthony Piraino and I have been working on one for the Iconfactory and would like to share some of the things we learned.

Markup

You begin by adding some simple markup for the pin graphic. It’s literally one line of code in the <head> of your HTML:

<link rel="mask-icon" href="/favicon.svg" color="#990000">

The href points to an SVG file and the color is used to draw the vector shape contained in the file (the background color for the tab changes depending on whether the browser window is active and if it’s selected.)

Iconfactory logo shape

The documentation states that the graphic should be a vector shape filled with black. In our first test, we used a fill color that wasn’t black: the image is used as a mask, so the opacity of a filled shape is the only thing that matters. Any opacity in the shape’s fill color will be used, but we don’t recommend using it (and you’ll see why in just a second.)

We used both Illustrator and Sketch to create SVG files during our tests. In fact, we began this exercise by just exporting our standard logo into SVG; it’s shown to the left.

Seems simple enough, right?

Rendering

First attempt at SVG icon

And it is, until you upload the file on your site and see your beautiful artwork rendered down into a 16×16 bitmap (or 32×32 on a Retina display.) Our first attempt is shown to the right.

Yuck.

Of course, at such a small size, a hand-tuned bitmap graphic would be a better choice. The ubiquitous favicon.ico has been around since Internet Explorer 5 was introduced in 1999. The ICO file format also supports transparency (it was also used for desktop icons on Windows.) So why not stick with something tried and true?

Our first thought was that the Safari engineers were being lazy: the default implementation renders a vector glyph on top of solid color. Doing the same with SVG could probably reuse a lot of their internal code. But this doesn’t really sound like a path that the Apple we know and love would take…

It’s our guess that the company has other plans for these files. They currently only appear in pinned tabs, but as more sites support this new style of “favicon”, it’s likely that they’ll make their way into lists for browser history or frequently visited sites.

The proliferation of bitmap file formats within the browser may be another motivation. Sometimes the favicon.ico file is used, at other times apple-touch-icon.png appears. With a vector file, there’s a lot more flexibility.

It’s fun to speculate, but for now we have to play the hand we’ve been dealt. How can we improve our vector “favicon”?

Simplify

A simple SVG icon for Daring Fireball

Our first observation was the amount of detail in our icon was causing most of the rendering issues. As a test, I quickly created a pin icon for a site that has simple but effective branding. It’s also well within the capabilities of a developer who likes to pretend he’s a designer :-)

The result is dfstar.svg; it’s shown to the right. (This little experiment also shows that if you say “DF star” quickly it sounds like “Death Star”. Hmmm…)

A simplified SVG icon for the Iconfactory

We followed suit and moved our factory outside the circle that contained it. Instead of relying on negative space, we took advantage of positive space. The door, which used a thin divider between shapes, was also removed.

Our hunch about the need to simplify branding elements was correct; the result of our second test is shown to the right. We were a lot happier with our factory now.

A SVG icon which uses transparency

Earlier, we recommended against using transparency in your vector shapes. The reason for this is that you end up with “muddy” shapes. You only get to choose one color, and without any contrast, the semi-transparent shapes don’t stand out against the primary elements. The heart to the right is drawn on top of a circle with 25% opacity and gets lost in the background color. You also have to remember that this icon appears deselected (where there’s even less contrast.)

Another thing we learned: the size of the canvas you’re working on doesn’t matter. The dfstar.svg graphic was done on a 1000×1000 canvas while our logo was done at 256×256.

We’re used to working with icons, so powers of two are wired into our brains. As you’ll see next, this can be helpful if you’re trying to achieve pixel precision with your vectors.

Align

A pixel-aligned SVG icon for the Hypercritical site

After complaining commenting about our initial findings on Twitter, our friend John Siracusa offered up his unique approach. He aligned every vector in a grid that emulated a @2x bitmap (in his 382×512 file, each “pixel” is 32×32 in a 12×16 grid.) For his Hypercritical logo, this works quite well. The only downside is that the sharp edges get a little blurry in the @1x image.

Very few branding elements will be lucky enough to get away with this precise alignment. For example, we didn’t want to get rid of the round edges and windows in our logo. But John’s approach did show us the importance of a pixel grid, so our explorations moved in that direction.

Iconfactory pin animation

The animation to the left shows the progression of changes Anthony made to align the roof and windows of our factory on a 256×256 grid. While we ended up with a shape that’s different than our official logo, it renders a lot more clearly in the space provided.

Final version of the Iconfactory SVG icon

As you do this with your own work, keep in mind our prediction about these SVG files appearing prominently in other parts of the browser user interface. A graphic that’s heavily optimized for 16×16 pixels could look really bad when Apple decides to use it at 100×100. We’ll be fine if our final graphic (shown to the right) shows up in a browser’s favorite or history lists.

Finally, don’t get obsessed with perfection as you align vectors. There’s still a fraction of a pixel misalignment on the factory door that causes some blurring at 1x resolution. But as much as this bugs us, the graphic is the best it can be. Any attempt to make it “perfect” could easily be undone by a Safari engineer tweaking a number in a software update.

Testing

Of course you’ll want to preview your work as you tune your vectors. Safari caches the SVG files, so it takes a bit of effort to clear the old data and see your changes. Here’s a sequence we found to be reliable:

  1. Unpin the tab for your site
  2. Quit Safari
  3. Remove the Template Icons folder in your Home > Library > Safari folder
  4. Relaunch Safari
  5. Refresh a page that references your “mask-icon” to update the cached file
  6. Pin the tab for your site

(The folder being named Template Icons instead of Tab Icons is another good hint that these graphics are destined for other uses within the browser.)

The cache maintained by Safari is indexed by domain. That means you can’t compare different SVG versions by using two sites at localhost:8001 and localhost:8002. Similarly, we needed to deploy the same SVG file on our design.iconfactory.com and blog.iconfactory.com subdomains as well as our primary iconfactory.com domain.

It’s also worth noting that subdomains open in the same pinned tab. For example, if you pin this site (blog.iconfactory.com), both iconfactory.com and design.iconfactory.com will open in the same tab. A link to different domain, like iconfactoryapps.com, opens outside the pinned tab.

Consistency

We also took this opportunity to make sure our Iconfactory mark was used consistently throughout the browser’s user interface. This meant updating two important files: favicon.ico and apple-touch-icon.png.

Once you’ve pixel-aligned the vectors, it’s simple to render them out into a file with the correct format. In spite of the ICO file extension, all modern browsers now support PNG and GIF file formats for the favicon (Wikipedia has a good overview on how this file is used in different browsers.) Since we wanted support for older browsers on Windows and the ability to have both a @1x (16×16) and @2x (32×32) bitmaps in a single file, we went with the ICO format on our site.

As its name implies, the apple-touch-icon.png was originally introduced on Safari for iOS. Apple’s documentation shows how you can specify different sizes in your markup for different display resolutions. On iOS, the file’s size can range from 60×60 pixels for the original @1x iPhone screen to a @3x 180×180 graphic used on the iPhone 6S Plus.

But don’t let that name fool you, this file also gets used in places that aren’t “Apple” or “touch”. For example, Safari on OS X uses this file in the frequently visited sites list. A 48×48 points version is displayed when you click in the address bar to enter a search or a URL. Rounded corners are also added to the image, but they’re not a squircle. Don’t use your own transparency in these images!

Chrome running on Android can also use the file. The required sizes quickly get out of hand when you try to support every possible display size and resolution on that mobile platform.

For this reason, we suggest picking a reasonably sized image and let the browser scale it down to the size that’s appropriate. We chose a 180×180 pixel image for our icon.

Here’s a before and after shot of our files:

Old and new icons

The two icons on the left show the favicon.ico bitmaps at 200%. The apple-touch-icon.png is shown to the right at 100%.

Conclusion

So there you have it. Even in this brave new world of vector favicons, knowing how to push pixels is still important for making your brand stand out.

It may seem a little crazy to go to these lengths, but it’s our business to make products look the best they can. We hope the experiences shared above help you with your own work. And if you need a little help, don’t hesitate to get in contact.

Keeping A Spooky Eye on iPulse

October 29, 2015

By Ged Maheux

iBall iPulse Jacket screen shot

The recent update to our venerable OS X system monitoring utility, iPulse, has been receiving rave reviews. iPulse lets you track what’s happening under the hood of your Mac in a single, elegant and infinitely adjustable desktop window. One of our favorite iPulse features are customizable appearances called jackets.

Today we’re releasing a fun and creepy jacket just in time for Halloween called iBall. iBall includes Retina graphics (see what we did there?) and looks great sitting on your Mac’s desktop, staring blankly back at you. To install iBall, simply download and expand the jacket then drop it on iPulse’s dock icon to set the new visual appearance.

iPulse is a must-have for anyone who likes to keep tabs on their Mac’s inner workings and is available from the Mac App Store. Be sure to follow @iPulseApp over on Twitter for the latest news on jackets, tips & tricks and more. Enjoy and happy Halloween!

Cultivating a New Willow App for iOS

October 20, 2015

By Ged Maheux

Willow_Answering

Evolving a popular app from version 1 to version 2 is always a challenge, and so it was with the recent update of the Willow app for iOS. Willow connects users around the world via meaningful conversations, posed by simple questions.

The Iconfactory was charged with updating the popular 1.0 version of Willow, modernizing both its look and performance. It was a development effort that took over 3 months to complete and made use of our team’s full range of expertise, from design and coding, to back-end engineering and testing. Building on the groundwork we laid in V1, the second major release included developing all-new interactions, adding rich visual details, and implementing features like group conversations and a re-designed home timeline.

The new timeline presents questions from Willow users in a new and engaging way and features rich media thumbnails, parallax scrolling, swipe to answer or dismiss, as well as the new up-voting feature that surfaces popular questions quickly. When composing new questions, users can customize the question’s appearance with over 450,000 custom images from Pixabay, a fun new way to make questions come to life in Willow.

Willow_iPadQuestion

At the heart of improvements in Willow 2.0 was the inclusion of group questions. Previously, users could only pose single questions which were answered on a one-on-one basis by individual Willow users. The new Group tab allows users to ask questions and receive answers across the entire Willow user base. People can up-vote questions they like and respond to questions on either a local or global level. All of this happens in real time. It is a wonderful way for people to connect and have meaningful conversations about topics that span a huge range of interests with others around the world.

Another key goal with Willow 2.0 was to simplify and improve the Branches user interface. Branches is the communications hub within the application where users can keep track of who’s responded to their questions, see and manage new group questions, and initiate personal chats with users. As the depth and scope of Willow’s feature set expanded, Wilow’s Branches UI grew tangled and badly needed pruning.

Willow_Answering

The resulting re-design is a concise, tab-based interface that clearly lays out the three types of content that can be navigated in Willow – Questions, Groups, and Chats. New content is constantly updated and can be favorited or searched at will. Questions and chats are now clearly organized and can be answered directly from within Branches or quickly removed using familiar iOS swipe gestures.

Taken all together, Willow 2.0 represents a complete overhaul from the original app, one that helps bring it to the forefront of modern iOS user interface design and development. The new feature set and rich visual appearance have already helped Willow gain new users and connect more people than ever before. For more information about Willow’s redesign, visit our portfolio of work. Willow is available from the App Store today for free, be sure to check it out!

A Clicker for your Ticker

October 13, 2015

By Craig Hockenberry

It’s well documented that I love my Apple Watch and use it daily to keep track of my activity. While the built-in apps do a fantastic job of keeping track of your health, I wanted something different.

One of the things I noticed early on was how a simple number like “Longest Move Streak” could be a motivating factor. You want that number to keep going up and will do crazy things like jump on an exercise bike with a glass of whisky at ten minutes to midnight so you can burn 20 calories and make your goal. (Yes, I really did this. And I’m not alone in my obsession.)

We’re currently at the beginning of an El Niño cycle: this means the Pacific Ocean has been warm and inviting. I wanted to track a “higher level” goal on my watch: the number of swims I’ve done during the season. The result is Clicker:

Clicker

The app is just one big button. Every time you tap your watch face you get a little haptic feedback and the counter goes up. If you force press, you can decrement or reset the counter. There is also a watch complication that lets you see the current count on your watch face. Seriously, it’s that simple.

But with this simplicity comes the same motivation that you see in the Activity app. Every time you flick your wrist you’re reminded of a number that’s important to you. It could be the number of days since you quit smoking, the number of pounds you’ve lost on your diet, or the number of times you’ve taken your watch in the ocean. Trust me, it works so well that I’ll probably be swimming in cold water just to hit my goal of 100 swims!

Clicker is FREE with no in-app purchases or other crap. If you really want to show your thanks, make sure to try out one of our other apps. Enjoy!

A New Life for iPulse

October 7, 2015

By Craig Hockenberry

With Apple’s announcement of System Integrity Protection in El Capitan, I feared that end had come for our beloved iPulse app. This app for tracking system status was originally released in 2002 for use with Mac OS X 10.3. It was also my first Cocoa app and taught me a lot about how to do modern Mac programming.

Over the years, there have been many FREE updates that made iPulse work well with the latest changes in OS X. Thankfully, the engineers at Apple provided new APIs that allowed apps to query El Capitan while in the “rootless” mode. This also meant that code which hadn’t been touched in over a decade needed to be replaced. It was a lot of work, but I couldn’t stand the thought of a Mac without iPulse!

We also took this chance to modernize the user interface, including updating icons and graphics for the Retina display. We also paid close attention to resource usage so that iPulse 3 won’t affect battery life adversely. The app also comes with new built-in presets that let you customize the interface however you’d like:

iPulse on El Capitan

iPulse 3 is available exclusively on the Mac App Store for only $10. The App Store built into OS X makes it easy to install and update iPulse wherever it’s needed.

With luck, iPulse will be keeping an eye on what your Mac is doing for another decade!

Twitterrific 5.13.2 Lands with iOS9 Improvements

September 21, 2015

By Anthony Piraino

Ollie makes himself at home in iOS 9 with the latest release of Twitterrific. Version 5.13.2 now supports iPad split-screen and slide-over multitasking in iOS 9. We’ve also added the option to reply to mentions and DMs directly from push notification banners in iOS 9’s notification center. Other new features include the ability to send and receive long direct messages.

But we didn’t stop there—we’ve also included improvements to tweets with images, account switching, VoiceOver accessibility, and more! Take a look at Twitterrific’s version history page for all the details, then head over to the App Store to try Twitterrific for free for iPhone, iPad, Apple Watch, and iPod touch. Advanced features such as tweet translation, ad removal, and more are available via in-app purchase.

Masters of the Small Canvas

September 18, 2015

By Corey Marion

A short but sweet piece by John Pavlus was posted today over at Bloomberg Business. It features some comments by our own Gedeon Maheux and our good friends and former Iconfactory pixel engineers Louie Mantia and David Lanham, as well as a few others in our field. It is a quick, interesting read about the evolution of icon design. Check it out!