Archive for the 'Design' Category
Snowflake Symbol Design Inspiration Thursday, November 30th, 2006 by Mike
This week I’ve enjoyed the process of designing our 2006 MakaluMedia Christmas cards, being especially pleased with how quickly the design has moved from inspiration to completion. 
This year’s idea focuses on a snowflake theme in blue. Can you make out what the snowflake has been built from?
It’s created from the circular outer arms of the MakaluMedia logomark. Check out the Makalu logomark, below the snowflake.
While at Caribou Coffee last week, I noticed all of the snowflakes on their printed materials, which inspired me to build a snowflake from bits of our company logo.
The Process
Here’s how I formed the snowflake design with parts of our MakaluMedia logo.
Using an outer arm, I spun it around a central point, resizing the arm and exploring different placements of arm: with the ball end of the arm at the center and also at the edges of the snowflake.
As I worked, a star shape emerged at the center, so I removed some artifacts, to further emphasize the star shape.
Finally, I reversed a circle out of the snowflake’s center star and placed MakaluMedia dual Ms in the middle of the circle to complete the snowflake design.
You never know where inspiration may come from — be ready to capture it!
CGI Interactive Logo Design Thursday, October 26th, 2006 by Mike
Last year, after Paul Bradley came across Ian Landsman’s Creating a Business Logo article, he asked if we could design a new logo for his company, cgi Interactive. One of my passions as design director at MakaluMedia is logo design and corporate identity, so I was excited to take on the project.
Paul’s firm. cgi Interactive, is a software development company based in the North West of England, who develop custom web based applications for businesses. The CGI moniker had its touch-point in the Common Gateway Interface (CGI) programming done for clients in the early days of the Internet.
Paul wanted to maintain a connection to the past by keeping the CGI name, while coming up with a strong, clean logo to represent his company, on both the web and with other print materials (letterhead, envelopes and business cards).
Questions & Research
I started as I always do: asking questions of Paul about his company, goals, taste and thinking and doing my own gathering of information about the company. While it might seem trivial, the information gathering phase is critical — these are the words I ponder, as I prepare to sketch logo concepts that capture the company in a simple, iconic form.
From my initial research, it seemed the logomark should be simple and clean, yet still have a bit of a human touch, as Paul mentioned a history of “bespoke” or custom software development.
Sketching Ideas
As I sketched ideas out, I began focusing on a mark made of the letters C, G and I — using them to form a compact object.
Rounded letter-forms turned into squared letter-forms. I liked the idea of the C wrapping itself around the I to form a “G” at the intersection. To reinforce the “I” character, I used a lower cased variation to take advantage of the dot.
Black & White Explorations
We both liked this direction, so my next step was to jump into Adobe Illustrator and create the letters in black and white vector form, where I could explore the relationships of the C, G and i elements:
Notice how the horizontal stroke of the “i” character extends into the counter of the capital C character, to form a G. Then, the dot of the i character fills out the upper right corner of the mark. I like creating logos in black and white first — to assure they work well in their simplest form.
The mark also created an unintentional, yet nice side effect — notice the appearance of of a person on the right, extending an arm into the C, with the dot of the “i” acting as the head? What a nice coincidence!
Color Explorations
Next up was the color phase, which was quite straightforward, as Paul knew he wanted cool blues and greens used. I explored some complimentary warm colors with the mark, but we kept coming back to a combination of dark sea green and a sky blue to capture a solid, professional feel:
Notice also the font used is a Myriad/Gill Sans blend with a little custom tweaking done on the letters. The “cgi” text was kept in the sky blue, and “Interactive” stayed in the dark sea green, corresponding to the colors chosen for the mark.
Paul was very pleased with the final logo design. He felt it captured the professional look he wanted to portray, yet still maintained a human touch, to represent the custom, collaborative projects cgi Interactive does. I had fun working on the logo design, facing the challenge and seeing a unique mark emerge from the letters themselves.
Since designing Paul’s logo in 2005, we’ve had many interesting and challenging logo projects come from new and existing clients, keeping me happily busy doing what I love — logo design.
If you like this approach to logo design, and need logo or corporate identity design work, just drop me a line and let’s talk!
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.
Artist Series Videos on Legendary Graphic Designers Saturday, August 26th, 2006 by Mike
Yesterday, my friend and design colleague, Alex Bendiken, shared a video of Paula Scher he saw from the post Picasso, Paula Scher, and the lifetime behind every second on the Signal vs. Noise blog.
In fact, upon visiting Hillman Curtis’ video section to see Paula’s video, I found several other short video documentaries with graphic design greats, and watched all of them in a single sitting.
The collection includes videos of Paula Scher, Milton Glaser, Stefan Sagmeister, David Carson, James Victore and the Pentagram Design Group.
What a wonderful collection of inspirational videos!
I especially enjoyed the video of David Carson, one of the brash, rebelious designers I followed when I started my professional design career in 1989. Carson had this wild, interpretive design which featured typography pushed into completely new directions. It was Carson who inspired me to push my typography a little farther — check out his video to see the wild designs he’s come up with over the years.
Thanks Adobe and Hillman Curtis for creating the Artist Series films — please keep them coming! I’d love to see more interviews of great designers, including Neville Brody, Rudy van der Lans, Charles S. Anderson, Joe Duffy, Jonathan Ive, and the many other design leaders, while they’re still alive!
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.
Gauging Reactions to the Slashdot Redesign Thursday, June 1st, 2006 by Arto
Alex’s win in the Slashdot CSS redesign contest has been making the rounds on the net.
S/D/R — The Big Three
Mere moments after the official announcement on Slashdot, the story made its way to Digg and Reddit. To date, Slashdot’s original announcement has garnered 852 comments. The Digg story has been “dugg” 1715 times and commented on 203 times, while at Reddit the story has gained 110 points.
While we have been receiving a constant stream of private congrats via e-mail, comments on all three sites cover the full spectrum from “love it” to “hate it”; the latter kind occasionally moving on to some disproportionately extreme reactions that may perhaps be a symptom of an excessive disconnect with Real Life(TM). Goes with the territory, and Alex is taking it all in stride, I hope. This much is obvious: had this been a vote, instead of CmdrTaco’s call, I doubt any single one of the proposed designs could’ve sustained a clear majority.
Unfortunately, what contributed to an initial negative backlash of sorts was the fact that when the story broke, the design preview was missing a number of elements, including the actual Slashdot logo itself. Slashdot staff quickly corrected the situation, but the posted comments show that a significant number of people thought the erroneous version was the final design, and were understandably upset.
The press release
OSTG’s press release was published on MarketWire, eventually being picked up by MSN Money as well. It includes this comment attributed to CmdrTaco:
“Alex Bendiken’s entry was selected because his design improved upon many shortcomings of Slashdot’s original design. His design moves commonly-used functions into positions of prominence, and improves the readability of articles. His entry required only minor changes to our core HTML, and breathes fresh life into a site that has remained aesthetically unaltered over its 8+ year lifespan,” said Slashdot founder and site director Rob Malda (aka Cmdr Taco).
Blogosphere reactions
The blogosphere has received the new Slashdot with open arms and an almost unequivocally favorable opinion:
- Steve Bryant posts on his eWeek blog that he thinks he Slashdot redesign “looks pretty damn good. Contemporary, but not so much that it’ll be outdated soon”. He also comments that “all of Google-dom is filled with the name Alex Bendiken” — well, actually, it’s only like 600 entries at the moment, but you, dear reader, are more than welcome to add your contribution to the growing number…
- John Gruber of Daring Fireball likes the new design, calling it “a big improvement that preserves everything that’s good about the classic Slashdot brand.”
- Rui Carmo of The Tao of Mac agrees with Gruber that the new design is “very slick indeed”.
- An editorial in PHP Magazine calls Alex’s design “very nice and well done”, while drawing on their own previous experience to add that it’s no easy task to satisfy everyone. How true…
- David A. Utter, staff writer at WebProNews, details the differences between the old and new designs, without neglecting the runner-up.
- Ryan over at CyberNet News blogs: “I believe that Alex really deserved to win. From the bunch of redesigns that I saw his was the best. He kept the integral parts that makeup Slashdot but he also implemented a slick interface.”
- Philipp Lenssen thinks the design “is cool. The font could be easier to read, tho”.
- Phil Crissman likes the new look, adding “I’m sure I’ll see a lot of comments along the lines of It’s the same, only different (true), you just added round corners/gradients (no and yes — they already had some round corners), and more such complaints. I’m of the opinion that it retains the characteristic slashdotness of the design, but manages to make it look current. Good job, I say.”
- Ronald Heft, Jr. states: “I personally love it. I’ve always hated the current design, and while the new one does resemble the current design, it greatly improves upon it. The site feels less jagged and seems like a more calming place.”
- Michael Angeles thinks the new design ” adds a good deal of white space around the margins by removing the black background and increases height between lines of text, which makes the left nav much easier on the eyes. The previous design always felt cramped to me.”, and goes on to ponder the merits of the font selection and the differences between Arial, Tahoma and Verdana.
- BorkWeb labels Alex’s brainchild “a pretty clean and snazzy design”.
- Scott Troyan blogs that “it looks nice. Very clean, retaining classic Slashdot elements, while rejecting the classic Slashdot ugly.”
- Adrian Lee ponders what makes for an effective website and states the redesign “takes that general look, and makes it much smarter and cleaner. Much easier to read and skim over, generally nicer on the eyes and I don’t feel like my attention is pulled around as much. Generally I’m impressed.”
- S. Shreyas calls the new design “a very decent layout and 100x better than the older one”, though critizing aspects like the grey color and whitespace usage, goes on to lament that the runner-up’s, Peter’s, design was slashdotted and unavailable for review.
- Darren Foong is short and succinct: “it’s extremely awesome.”
International coverage
Here’s a quick sampling of reactions from the non-English part of the blogosphere:
- Chinese: Solidot, Gea-Suan Lin’s blog.
- Danish: Cssdesign.dk
- Dutch: Bakje.nl Jatlog, UZY.nl
- French: Scrapbrain
- German: Macelodeon, observatory, praegnanz.de
- Greek: pestaola.gr, Wiggler.gr
- Hungarian: Hungarian Unix Portal
- Italian: Luca Mondini
- Japanese: hirokixs
- Polish: miscz.pl
- Spanish: Abadia Digital, aNieto2K, Barrapunto, Bitperbit, DesdeGuate.com, menéame, Microsiervos, Un Blog Más, Vecindad Gráfica
- Thai: Blognode
- Turkish: Fazlamesai
More buzz in the blogosphere can be found at Technorati and, of course, Google.
The Slashdot Redux Tuesday, May 30th, 2006 by Alex
In early May I learned about the redesign contest at Slashdot, the tech website we’ve all come to love over the years. Still running on confidence gained in the winning of another redesign contest, I decided to give it a shot.
As a long-time Slashdot reader myself, I had a good feeling about the characteristics of the winning design. First, Slashdot’s brand and identity are closely married to its huge, loyal and long-time community. A redesign of Slashdot must be evolutionary, not revolutionary. Secondly, Slashdot presents a huge amount of information. A redesign should address the accessibility and usability of this information architecture. Finally, Slashdot operates on a budget. To allow for a fast and cost effective transition, a successful redesign should leverage its existing markup to the greatest extent possible.
With those design targets, I sat down for nearly 48 hours straight, and came up with the winning entry, presented below:
Over two hundred people submitted designs, from which Rob Malda picked three finalists. Be sure to check out the great designs by Peter Lada and Michael Johnson.
A more thorough article, discussing the decisions and compromises made during the design process, is in the working. Grab our feed and you will be the first to hear about it!
UPDATE:
Here’s a sneak peek of some more screens to tide you guys over until the new design is published:
If you’re an adventurous Firefox 1.5 user, you can also install the Greasemonkey script (developed by my brother, Arto) that allows you to try out the live Slashdot site using my design. Get it here.
MakaluMedia Corporate Identity Portfolio Monday, May 15th, 2006 by Mike
Since the end of 2004, I’ve been actively pursuing corporate identity design through the company I work for, MakaluMedia.
The first in a long line of logos was created for Ian Landsman, his firm UserScape and his first product, HelpSpot. In fact, Ian wrote the post Creating a Business Logo back in January 2005, describing the logo design experience from his perspective.
Since the that first web 2.0 logo project, and having been featured in Bob Walsh’s Micro-ISV book, I’ve been receiving many requests to help companies and individuals design their corporate identities. It’s been wonderful helping create clean, clear and effective logos for each one of our clients.
Last week I realized we had no central page on the MakaluMedia site, where logo or related information could be viewed. This week I’ve created a new page where you can view a select collection of logos case studies:
MakaluMedia Group Design Portfolio: Corporate Identity
The portfolio explains why Makalu’s logo design process is different, along with 4 case studies and images of completed logos. My goal is to continually expand this portfolio page, making it a handy reference for anyone seeking to learn more about our logo design services before they hire us.
I still intend on going in in depth on the design process for logos I create on the Rohdesign Weblog, as I’ve done for the Outer Level and LiquidFitness logos. I enjoy sharing my thought process and more detailed sketches on the weblog. From the comments I’ve received, readers enjoy it as well.
I’m hoping the two pages will compliment each other nicely, with the MakaluMedia Corporate Identity page providing the overview of each logo design, while the weblog can offer richer details, sketches and the thinking behind each design.