Archive for the 'Icons' Category
Recommended Design Resources Saturday, October 7th, 2006 by Mike
Our crew has been very busy this year, helping customers with the corporate identities, application icons, websites, and back-end systems — which is why it’s been quiet here at the Summit blog. In an effort to get back into blogging, I’ve decided to share links to design resources we use in the development of our work here at MakaluMedia.
MyFonts: WhatTheFont?
This very slick online tool lets you upload an image of your font in question and get details on what font it might be. Alex shared this one with me and I was impressed with how accurate it was!
Fontshop Type Navigator
An online tool that can help you visually identify fonts you are clueless about through process of elimination. Use the selections on the left side to narrow down your font until you find just what you’re looking for.
LinoType Font Explorer X
This free tool from LinoType provides very nice font management features for Mac OS X which supplement Apple’s stock Font Book application. You can also buy fonts directly from LinoType from Font Explorer X, making it the iTunes for fonts.
LogoPond
This is an excellent site with cataloged identities you can search by various features, including by color or by rating. This is a nice place to go for inspiration. I really need to submit some of our logos here!
PrintingForLess.com
This printer in Livingston, Montana (Big Sky Country) has very smart people, great pricing and does really nice 4 color print work. We’ve seen good stuff come from PFL for several clients and like their approach to business. Robert Scoble did a video walkthrough of their plant which is well worth watching.
Apple Developer Connection: Icon Genres and Families
This simple document has all sorts of good stuff for the Mac OS X icon designer, including appearance, lighting, design and technical details to help you get your icons spot on.
Design Observer
An excellent resource for the latest in design thought and commentary by founding writers Michael Bierut, William Drenttel, Jessica Helfand, Rick Poynor and many more contributing writers to boot. More than just pretty pictures, Design Observer always gives me something to think about.
I hope these links provide inspiration in your work or your thinking. If you have links to share with our team, please do! We always love finding new, useful resources.
StreamerNet Icon Redesign Friday, July 7th, 2006 by Mike
About a month ago, my good buddy Michael Ashby came to me with an icon redesign project for the startup company called StreamerNet.
StreamerNet provides individuals and businesses with a variety of very powerful portable streaming services and an application for the PC called StreamerNet Mobile Video Producer. Both their application and services make heavy use of advanced Windows Media features.
StreamerNet wanted to have their original “galaxy” of icons redesigned, with a smoother, more sophisticated and more consistent icon style across the suite. There were also a few changes needed and one new icon to create.
Here are the original icons:
One of my main goals was to clean up the icons and simplify them as much as possible. The icons above have quite a bit of detail in them, though so small that much of it was getting lost, and not clearly suggesting the purpose behind each icon.
I began with the Video Email icon first, establishing a style with sketches, then producing a final icon for approval by the client. StreamerNet liked the first icon’s style and look, so I continued on the other icons.
Because of a tight timeframe, I did sketches for my own concepting, heading directly to final art in Fireworks once I was satisfied with the concepts. There were of course a few tweaks to make on the final art, though not very many.
Here are the final icons:
As you can see, the new icons are a little bit larger, and more consistent in style than the originals, while being a little simpler and clearer. I think the added depth of the new icons also helps them pop off of the screen a bit better than the originals.
The icons are now in use on the Solutions page, as well on the headers for each sub-page linked to the icons, and will most likely be used in the StreamerNet Mobile Video Producer application.
I’m very pleased with the final icons. I think they help tell the story of StreamerNet in an attractive, consistent way, while maintaining and clarifying the original concept.
Designing the HoudahSpot Icon Tuesday, June 27th, 2006 by Mike
Back in February, I came in contact with Pierre Bernard, a Mac OS X developer in need of an icon design for his search tool, HoudahSpot. Pierre’s search tool is really an alternate front-end to the Spotlight engine, offering features such as live queries, manipulations of files within search results and an easy to use interface for searching with complex criteria.
Concepting
Pierre had ideas in mind for the his icon — his signature elephant, a set of binoculars, and sheets of paper. I was selected to offer alternate ideas, refinements and provide design guidance in bringing this icon to life. 
After some initial questioning about the application and Pierre’s idea, I began as I always do, with pencil sketches in my Miquelrius notebook.
Sketches, Round 1
I felt there needed to be something tying the loose papers, binoculars and the elephant icon together, when I realized that if you were on safari, you would carry papers in a binder.
So, with this idea in mind, I sketched out a a heavy duty leather binder with the Houdah elephant icon embossed on the cover, and binoculars laying on top of the binder. Pages would be coming out at odd angles to suggest chaos often present on a user’s machine. I also included a small compass to complete the image.
Sketches, Round 2
Pierre and I both quite liked the binder concept from the first round, and wanted to refine the idea a little bit more. I sketched out a second round of pencils, exploring variations on sketch 5 and a runner up, to make sure we were going along the right track.
On this set, I moved the binoculars down and right on the binder cover to reveal more of the Houdah elephant character, removed the compass, which felt unnecessary. I then rounded the leather binder’s corners and refined the paper positioning to be a little less chaotic. This second round sketch looked quite nice, with pretty good balance and proportions.
Sketches, Round 3
Pierre had one more experiment to try before settling on the concept — sliding the binoculars off of the right edge of the leather binder, to reveal the entire Houdah elephant character. I created an abbreviated 3rd sketch exploring this idea, though immediately Pierre and I felt it threw the balance of the icon off. The binoculars on an angle, laying on top of the binder were better.
Color Comps v1-3
Next up, , move ahead to the Mac, and start building the icon in Fireworks. First, I began in icon 1 with the binder, as I felt this element would hold the icon together. Using a photograph of leather, I modified it in Photoshop and Fireworks as the base texture, adding shade, reflections and seams. You can see I also began exploring documents inside of the binder. In icon 2, the binoculars were built using reference from Leica binoculars. In icon 3, I move to defining the documents in the binder in more detail, widened the binder and corrected the angle and skew of the binoculars.
Final Icons
Next, I brought the final icons from Fireworks into Photoshop, for final tweaks and export to .icns files which Pierre could bundle into HoudahSpot. Pierre wanted to remove the highlight on the left edge of the binder, and other small tweaks I found were made to the icon before final export.
I used the binoculars art from the master application icon file to create a complimentary document icon, using the leather binder texture on the top edge of the document to carry over the look and feel of the main icon to the document icon.
Conclusion
Pierre and I are both very pleased with the final application and document icons. They’re warm and inviting, capturing the idea of HoudahSpot well. Yoram Blumberg, a German designer liked the icon quite a bit:
When I stumbled upon HoudahSpot at MacZOT.com my first thought was: «I really love that catchy icon, I don’t care what the app is for — I wanna add that icon to my dock!»
Thanks Yoram! :-)
Special thanks go to Pierre Bernard for choosing to work with me and MakaluMedia on this icon. His help and collaboration through the entire project made the HoudahSpot icon a pleasure to create.
I hope my description of my icon design process is interesting and helpful, especially for developers who are curious what goes into the development of an application and document icon. If you need an icon designed, drop me a line.
If you’re interested in exploring an alternative approach to search on your Mac with the power of Spotlight under the hood, give HoudaSpot a try.
Related Links Designing the endo icon Kula 1001 Icon MailDrop 2.0 Icon Story
The Building of Fincalena Saturday, June 3rd, 2006 by Matt
Fincalena, a Belgian-owned builder and property agent working locally here on the Spanish Costa del Sol, contacted MakaluMedia for the development of a website which would give them an edge in the highly competitive Spanish property market. We met with the company, discussed their objectives and concluded that the site would attempt to achieve the following end results:
Project a corporate identity combining Fincalena’s northern European roots with the essence of the southern Mediterranean market in which it operates.
Improve the visitor process of finding a desired property.
Introduce features and services which set Fincalena apart in the market.
Allow collaboration with other agent partners in the area.
Optimize for the Google search engine.
Minimize the cost and effort associated with managing and maintaining the site.
Faced with these challenges, we set off to work. We’re quite pleased with the results, as are Fincalena, and this article describes the process.
Phase 1: Corporate Identity
Fincalena worked with our Design Director, Mike Rohde, in the iterative process of identifying and designing a corporate identity. Our collaborative approach, which you can read more about here and here resulted in a set of outputs including color palette definition, typeface specifications, and a logo mark. In addition to the website, Mike produced a number of supporting print products, including property signage, based on the corporate ID.
Phase 2: System Specifications
After conducting a review of the competitor sites in the context our defined objectives, we felt that we could improve in a number of areas, through both enhancement of “typical” services (like searching for property) and through the introduction of some innovative new features.
We decided to reduce the number of search criteria to three: location, type, and price range. We felt that the tendency to overwhelm the visitor with selection criteria is often counterproductive.
We decided to make use of modern interface technologies such as AJAX, to enhance the user experience.
Realizing that many visitors appreciate a printed version of a property profile, we decided to implement on-the-fly generation of downloadable PDF files.
We decided to develop a mechanism to ease the process of publishing frequent and timely real estate news.
We decided to develop a mechanism whereby Fincalena can collaborate in real-time with partner sites.
We decided to leverage the Content Management System (CMS) framework that we’ve been independently working on as a standalone product.
Phase 3: Implementation
For the past year or so, we’ve been making a gradual migration from development in PHP, to development using the Ruby-on-Rails web application framework. Rails is a highly productive environment, both in terms of the well thought-out MVC model (specific to web applications), and in terms of the underlying language, Ruby. It’s this technology on which we based the generalized CMS product we are internally developing, and to be used in the Fincalena project.
As with most projects (especially those involving customers willing to work in an agile process), we began by developing the core system screens, and expanding outward, including iterative reviews, until we had a full set of site screens. This set of screens represents a nearly complete specification of data (content), services (features) and general layout.
From there, we began the parallel processes of visually designing the site, and implementing the back-end software.
On the home page, we wanted to immediately set the tone for the quality that can be expected from Fincalena properties, the lifestyle available to residents of this privileged region, and to provide the shortest path possible to property identification.
In the interior of the site, we focused on simplicity and removed, as far as possible, distractions that would take focus away from the properties. We spent a great amount of time on the organization and presentation of property metadata (such as price, features, etc.) and tried to subtly integrate features such as the downloadable PDF, and the AJAX-based filtering mechanism, which provides live updates of search results without a page refresh. We decided to use a Flash-based solution for the seamless presentation of the property imagery.
On the content management side, we extended our Rails-based CMS framework to the management of properties. This system reflects everything our organization has come to learn over the years about the design of human interface systems, and may be the focus of a future article. (And special thanks to FamFamFam for their icons released under Creative Commons.)
Fincalena have reported to us that after using nearly every property management system on the market, ours is (in their words), “by far the best in terms of ease-of-use and efficiency.”
Advanced Functionality
We proposed to Fincalena a mechanism to allow the automatic re-publication of real-estate news on their site. The result is a sub-system whereby Fincalena can subscribe to the RSS feeds of partner news organizations, and then selectively publish individual articles on their own site, and via a synthesis RSS feed for subscribers. In other words, we implemented an embedded aggregator.
Fincalena also wanted to collaborate with other local partners, for both strategic and technical purposes. To this end, we designed the architecture of the back-end system to allow seamless integration into partner sites, allowing for the coordinated management of properties, while providing the source traceability required by the individual partners.
We have just recently completed the first such integration, with Fincalena partner Bright SL:
In terms of Google friendliness, we applied a number of techniques, especially in the design of URL structures, to help optimize the site’s representation in the world’s most important search engine.
Concluding Notes
Both Fincalena and MakaluMedia are highly satisfied with the results of this project. Fincalena have a powerful, innovative and future-safe platform on which to build and grow its business. For MakaluMedia, this project represented an opportunity to apply a broad range of cross-discipline skills and experience to a new business area for us.
Designing the endo icon Saturday, March 11th, 2006 by Mike
I’m very excited reveal my latest new icon design for endo, a syndicated feed reader developed by Adriaan Tijsseling. This new app approaches syndicated feeds as “streamsâ€? rather than the common “email appâ€? approach most aggregators use.
The icon was developed in collaboration with Adriaan, the developer of blogging tool ecto and Flickr stream manager 1001, which I’d designed the icon for last year. While we worked out the new icon, I’d been under an NDA with Adriaan (as design director at MakaluMedia) but since endo has been released, I’m free to share. :-)
(Click on graphics below to see full sketches)
Initial Concepts v1
I began the project by writing out thoughts and sketching some initial ideas, and having designed the 1001 icon,
felt that the icons might benefit from having a “family� feeling between them. So, when you look at the initial v1 sketches I did, you can see this quite clearly.
While the final icon veered quite a bit from the initial sketches, I like to point out that very often a designer must work through what is in their heads in order to progress to the next step — a bit like flushing out the immediate ideas to get at the deeper ideas.
Sketches v2
In the second round of sketches, I began exploring the idea of different shapes, 
shapes breaking planes and swirls of data surrounding shapes. As endo was to be different than other aggregator/readers because it treats feeds as “streams� I wanted to convey the idea of a stream of data — as chaotic swirl or plane.
While breaking a plane was an interesting concept, the more chaotic swirl appealed to both Adriaan and me, because it felt much more like the real net, with wild streams of feeds spinning out of control. Endo was to be the calm in the midst of this storm of data; helping its users wade through this swirling cloud.
Sketches v3
In my 3rd revision of sketches, I focused entirely on the idea of a swirling cloud of data, 
surrounding various shapes. You can see in the larger sketch that circular swirl with a central “hub� containing a magnifying glass at the center of the swirl. This represented the application at the center, filtering good signal from the noise. These concepts were attractive to both Adriaan and I, though we both wanted to see one more round to finalize the concept before I went to Fireworks and Photoshop on the Mac.
Sketches v4
In this round, Adriaan had the idea to include the newly standardized Feed Icon, which is already used in 
Firefox (and will also be used in IE7), so I tried several icons with the Feed icon integrated. I tried a variety of angles, until in sketch E you can see the idea of having the feed icon appear in the central hub and also appear in the shadow below, since the central hub would be transparent (like a marble).
Once Adriaan and I saw sketch E, we were both in love. Adriaan gave the Ok to move to the Mac, and there, the new endo icon was born, using Fireworks to build the icon (with vectors and layers) and then exported in Photoshop, using the excellent IconBuilder 8 from IconFactory.
Only minor tweaks were needed to finalize the icon on the Mac and deliver the needed icon, and source files Adriaan needed to spruce up his endo application and the new Kula website.
Conclusion
I’m very pleased with the new endo icon; it’s simple, different and I think conveys the concept of a feed aggregator sifting signal out of the syndication noise — just the idea Adriaan was trying to convey with his very different application. One commenter on the BWANA Weblog suggested the endo icon “has the best application icon since Shiira.â€? which was flattering indeed. :-)
Thanks Adriaan for trusting in me to help on this project and all of his excellent collaboration. Working on this project was truly a pleasure!
If you’re on Mac OS X and want a alternate way of deal with feeds, try out endo. It offers a very different approach, which may just suit your needs.
World-Wired: Beyond MATC Article Wednesday, January 11th, 2006 by Mike
At the very tail end of 2005, I happened to stop by my alma mater, Milwaukee Area Technical College to see 
instructors and friends. While there, I was introduced to the PR department (which is very near the place I used to work as a student). Somehow, I managed to get an invitation to be the topic of an article for a new online magazine at the MATC website, Beyond MATC.
In December, I received a call from Julie at MATC’s PR department, where I shared stories and insights from my years as a design student, about my work now and remote working in general. It was a great discussion — touching on globalism, distributed teamwork, creativity, blogging and more. Unfortunately, much of our discussions had to be trimmed from the final article (seems like a great reason for an MATC PR Weblog).
This week, Sue, the MATC staff photographer stopped by to take a few photos to accompany the article, to complete the process. Sue and I had a great time on the shoot, with a side benefit that my office is all clean and tidy. ;-)
Today, I was notified by Julie that the article was online:
World-Wired: Mike Rohde Serves Global Clientele
Here’s an excerpt:
You never know where on earth an MATC degree might lead. For 1989 Commercial Art (Graphic Design) graduate Mike Rohde, it led to colleagues and clients in Germany, Spain, France and Ireland. Rohde creates corporate logos, Web sites, Web applications and business blogs for firms around the world, working from his home office in Wauwatosa.
Privileged to be able to combine his passions for design, technology and new ways of working, he is, simply, an artist at heart. “I had always loved art and wanted to be an artist, but my dad warned me about ’starving artists’ and how hard it could be for me to make a living,” he says. So Rohde came to MATC for a night class in photography, which led him to the Printing associate degree program.
That program required classes in commercial art, and from there he found his calling. “The other students in printing said, “What are you doing here? You should be an artist.’ One great thing about MATC is that you are required to be exposed to other areas. I got good cross training between printing, commercial art and photography.”
His cross training also included working as art director for two years at MATC’s student newspaper, The Times, and a part-time job in the college’s Design Centre as a student graphic artist.
On the article page you’ll not only see a few shots of me in my office and kitchen, the photographer took a few shots of my sketchbook, some with a recent logo done for Panoramio and a shot of our kitty Jasmine playing around with my Faber-Castell pencil. Gotta love the cat photo!
BTW, it’s funny to me that my Mac is not shown in the photo above, while the crusty old vanilla PC I use for testing websites is — someone might get the idea I’m a PC user or something! :-)
The entire experience was very positive, all the way from the phone discussion with Julie to the photo shoot with Sue. I’m very happy with the article. Thanks Julie, Sue and MATC for the opportunity!
Kula 1001 Icon Monday, January 24th, 2005 by Mike
Received good news on Sunday night! Adriaan Tijsseling, the author of blogging tool ecto, dropped a line to tell me my new icon for 1001 (a Flickr photo stream management tool) was used on his latest beta. Alright!
I’ve been a user and fan of ecto since June, so when I learned via Michael Ashby that Adriaan was looking for some icon and design help with ecto, I dropped him a line. As it turns out, Adriaan found help with the ecto project with designer Neil Dixon. However, he was also in need of a new icon for his 1001 app, a tool for viewing and managing your own and others’ Flickr streams. I felt honored to be offered the opportunity, so I immediately agreed to take on the project through the company I work for, MakaluMedia.
So, I began as I usually do, with sketches in my Miquelrius sketchbook. The concepts were scanned and emailed to Adriaan for review. The process went quickly, as one of the concepts in my sketches — an earth with photo streams wrapped round, being viewed by a loupe — resonated with both of us.
From there, I began the icon construction process. At first I tried to sketch the sphere with streams wrapping around it, but soon realized it would be difficult to get right without good reference. The next day I had an idea in the shower — why not wrap strips of paper with black photo blocks printed on them around one of Nathan’s kickballs?
So that’s exactly what I did — and it worked perfectly! The strips provided a perfect template for re-drawing in Adobe Illustrator. I then copied the vector art from Illustrator into Fireworks, to add color and paste photos into the stream blocks on the globe.
In fact, if you look very closely at the pics on the streams of the final icon, you can make out shots of Adriaan, his friends and several of my own family. It’s always fun to see the icon, because even though the little pixelized photos are obscured, I can still remember the moment when each family photo was taken.
I had a blast working on this icon. It always feels great to see a project like this come together, especially when the process leading up to the final art was so much fun! :-)
Thanks Adriaan!
MailDrop 2.0 Icon Story Tuesday, December 3rd, 2002 by Mike
Okay everyone, time for a little horn-tooting PR for a “design the iconâ€? contest I won on November 18th. I think the busyness of the season and Thanksgiving holiday threw me off, because I’d intended to mention this sooner. :-)
Anyway, Matt Henderson, the owner of MakaluMedia (the company I’m design director for), alerted me of an icon contest being offered at Erik Barzeski’s NSLog weblog. Erik runs Freshly Squeezed Software, makers of various Mac OS X applications, including a Mail Merge app called MailDrop. It turns out that MailDrop is being updated to 2.0 and was in need of a new icon.
Well, I figured what the heck. While I have 15-some years of graphic design experience, I’ve never done a Mac OS X icon before. I thought this project could be fun, challenging and educational. Better yet, the icon concept they were looking for was somewhat cartoony, and hey, I love cartooning. So I took on the project.
Erik liked the direction in my sketches and rough icon ideas, so I proceeded with the icon project and ended up winning the contest. The final set of application icons are posted with this article. We’re still in the process of finalizing the app’s document icon.
My icon building process took a little time to sort out at first. I ended up working in Macromedia Fireworks, because I could use vector art, yet see immediately how my changes would appear in pixels. I also experimented with Adobe Illustrator and Photoshop, but because of my daily use of Fireworks and its vector/pixel feature, it just suited me best.
Once I had a final icon, I exported a master PNG file with transparency. Then I opened the file with Photoshop 7 for conversion into icons using a handy Photoshop plugin from IconFactory, called IconBuilder. At $69 It’s not cheap, however, for the time it saves doing icons, I can see its value. I love that IconBuilder has no use restrictions (other than a nag screen which appears after multiple uses), because this allowed me to fully test it out before we decide to purchase it.
If IconBuilder is a little too high for your budget, there are other free and shareware tools out there, like Icon Composer (included with the Xcode Tools on the OS X developer CD) or the $15 shareware tool, Iconographer.
Should an icon for OS X be in your future, check out these helpful Apple documents: Icon Genres and Families, Suggested Process for Creating Aqua Icons, and Tips for Designing Aqua Icons. Here’s another useful reference: OS X Icon Tutorial from O’Reilly’s MacDevCenter.
Overall, it was a great challenge, and indeed, very educational. In fact, it felt very good to dive into something I’d never done before!
Ok, here’s my final PR spiel for this Friday: If you happen to need a little icon work or any other type of design work (web or print), please feel free to drop me a line. :-)
Have a great weekend!