MoneyWell has consistently been represented by a well bucket full of money, and we didn’t want to stray from that metaphor. The trick was to find a balance between the rustic look you’d expect from a handmade well bucket and a polished design that conveyed the app’s professional quality. Striking this balance would prove to be the biggest part of the challenge throughout the project.

First, it’s always good to start with a detailed sketch.

And before drawing anything semi-realistic I like to collect a few photo references—not in order to copy them slavishly, but because objects in real life often present interesting details we tend to forget when we recall things from memory.

With some idea of the bucket’s form in mind I moved into Cinema 4D to build it there. I tend to prefer Illustrator for small icons, but you can better approximate Apple’s photo-illustrative style in a 3D app. In fact, “de-rendering” the icon in Photoshop becomes an important part of the process—the rendering output is too “3D-looking” on its own.

I can’t explain everything that goes into building something like this in Cinema 4D, but I’ll try to provide the highlights.

While Cinema 4D will indicate the portion of the viewport that will be included in the final render, I like to make this safe area very explicit. I designed a frame graphic at 640×640 with a 512×512 transparent area and loaded this as a texture on a foreground object. I also set the rendering output to 640×640 so everything would line up consistently.

One also needs to be aware of the effects of color correction on the final output. I’ve settled on using “Load from Monitor” in Preferences > View > Display Color Profile as producing color that’s pretty consistent with other apps. Still, I recommend selecting “Use the embedded profile” when opening Cinema 4D’s output images in Photoshop. (You can always convert to sRGB on export.)

I built the bucket by using a cloner to arrange copies of a tapered rectangle in a circle. The taller planks are an extrusion of a curved spline, angled to match the arrangement of the other planks. The handle is a sweep NURBS, while the metal bands and coins are lathes. Really, the modeling is very simple.

Filling the bucket with the coins could have been tricky, but Cinema 4D made this easy. Put the coin in a cloner, assign them some physics, and drop them in. In fact, the shape they fall into and collide with is an invisible funnel—not the bucket itself. By reshaping the funnel, I could adjust how the coins fell until I got the look I wanted for the coin pile.

My first instinct for the bucket was to go all-in on metal to get as far away from a rustic look as possible.

And if it’s all metal, maybe the bucket is not made up of planks but machined from a solid block. (Around this time, Michael Shepard contributed the revised insignia design that would persist through to the final version.)

It’s a bit one-note, and the client asked us to go back to a wooden bucket approach. I was able to get a nice, rough look for the wood using displacement maps, and we moved the “MW” insignia to a medallion rather than lose it entirely.

That’s looking pretty good! But I’d gone too far in the “rustic” direction. The client asked for a darker, more polished look; and suggested the planks bend with the metal bands holding them together—as they would in a real well bucket.

Getting closer. You’ll notice I experimented with (but ultimately decided against) a ridged texture on the coin edges; and at this point we’d decided to eliminate any overflow coins from around the bucket.

The wood’s gotten a bit dull, so we polish it up. Notice the coin edges have yet to be completely smoothed—that’s a side-effect of the displacement used to achieve the engraving on the coins.

We’re close enough that it’s time to start playing with the pieces in Photoshop. I use compositing tags in Cinema 4D to hide certain objects without eliminating their shadows or reflections. Then I render to a “multi-pass” layered image which allows me to adjust those effects individually.

Reflections and specular highlights get toned down or masked out. Edges are softened with inner glow to flatten the overall look and reduce it’s rendered-ness.

This is now very close to the final result, but the wood still wasn’t quite there. The client sent over examples of something that might be more along the right line, and I dug up a similar texture in a high enough resolution to work for the larger icon sizes. Thanks to the multi-pass output, colors can be played with “in post” until they’re just right.

You’d think we were done at this point, but this icon has to work at every size from 1024×1024 (no, I don’t know why that resource exists either) to 16×16. You can’t just scale down and expect good results. As the image gets smaller, it needs to get brighter and sharper in order to be legible. Components may have to be resized or masked out to better conform to the pixel grid. (It helps if you cut your teeth on icons in Classic Mac OS.)

Here are some of the smaller sizes. Note that reflections and highlights have been toned down, contour lines are introduced and certain details (like the “MW” insignia) have been removed. Edges are sharper and the overall look is brighter and more saturated.

By the way, I really like Icon Slate for building and testing Mac app icons. It’ll let you preview an icon against different backgrounds or even right in the dock with a single click. Unfortunately it doesn’t support the 1024×1024 icon resource, so you’ll still need Apple’s Icon Composer to add that resource.

What is, theoretically, a linear transition from idea to execution…

…is usually something a little more convoluted:

What you see above is what goes into making the sausage. A lot of experimenting, a lot of trial-and-error, and ultimately something more akin to survival-of-the-fittest than let-there-be-light.

In this case I was trying to create an icon that looked like a holographic display. I’ve always loved the challenge of rendering “special effects”: glowing things, iridescent things, things bristling with electricity. These are the kinds of images that require obsessive adjustments of color and transparency in order to get from “cheesy” to “wow”.

After the first quick digital concept, I actually went back to my sketchbook:

I won’t be the first or last to emphasize the value of sketching by hand. The obvious advantage is that most basic shapes are just quicker to draw (albeit roughly) than to create in Photoshop or Illustrator. The less obvious advantage, paradoxically, is that sketching out more complicated forms is usually slower – an almost meditative process which allows you to come up with a second idea half-way through drawing the first.

Then I jumped back into Photoshop and got to work creating some rough drafts of different designs. Since I felt pretty confident about the holographs themselves, I started out by focusing on the design of the projection device. Experience has taught me that the ideas I like initially will not necessarily be the strongest candidates, so I try not to get too attached to anything. One of the things I wanted to make sure to get right was the “technology” of the projection screen. My first idea, a grid of glowing bulbs set beneath glass, eventually gave way to a matrix of glowing pixels contained within glass:

But the element that ended up giving me the most trouble was the base of the device. The original concept was to make it very futuristic, like maybe something Apple would be selling in the year 2050. I wanted it to imply a whole aesthetic of product design in whatever future world or alien spaceship it existed in. However, at some point during the course of my experimentation I had created a simple cylindrical disc, and the more I looked at it, the more I realized that all the detail I was putting into the others was going to crowd out the focus – the luminous glow of the projection and the holograph itself.

I shared a couple of the more developed ideas with my coworkers and I wasn’t too surprised when most people favored a shallow, slightly tapering metal base. It needed more personality, but it was clearly the strongest design.

I tweaked the color and shape, added some subtle (but essential) details to the metal and the projection grid, and spent the rest of the time refining the look of the holograph. I was careful at this point to make sure that whatever treatment I came up with was something I could duplicate with multiple shapes. The final product is a set of icons featuring the same device but with different holographic projections depending on the hard drive:

I’m pretty happy with the results. If you want to check them out, the icons are available for download.

As an overall goal, the get together was intended to be very conversational to allow the four of us to simply get to know each other better. While this low-key style interaction was a constant thread throughout our time together, we wanted to share a few of the more concrete points we discussed; believe it or not the time wasn’t all spent on gambling, drinks and shows. And… we’re excited to share what we go through as we grow. The good and the bad.

We’d like to encourage questions/ideas/comments/dialogue around these points, as well as anything else folks would like to throw out there. We like talking wit’cha!

State of the Design Union

We talked about where Black Pixel has been on the design front and where we think we’re at. Some of the points we want to keep working on are things like processes and efficiencies. We also talked a lot about the role of “design” as it applies to every piece of the project lifecycle and every member of the Black Pixel team.

Direction

Branding. Craftsmanship. Care-invested design.

We want our brand to deliver products with undeniably EXCELLENT user experience.

Our mission is to ensure this standard is reflected in everything from our website and scope documents, to our product interfaces, visual design, development and quality assurance; and of course, what the folks who work with us feel post-project.

Dan started an internal conversation with our design team proposing some ways we can change up current methods with the goal of opening up project-idea-contribution earlier on to create more learning opportunities, introduce more ideas earlier on and push foundational ideas further throughout the design cycle. We are learning from our past, learning from our friends and inspirers, and reworking ourselves to make noticeable, beautiful growth. We want to push ourselves and see what happens.

Creative team – Growth & Development

All of us here at Black Pixel come with a range of experience under our belts, so finding some stride in how we’ll push the boundaries of our creative brains is something we will continually work on. For our team members, we simply want to help people pursue the areas they’re passionate about, and also expose them to roles outside of their normal responsibilities.

As mentioned in the direction paragraph above, we’re going to try some different ways of approaching projects on the creative side. We’re proud of the people who’ve joined forces to become Black Pixel and we want to cultivate taste company-wide.

Evangelism

While we discussed a range of things from promotion, sponsorships, marketing, philanthropy and events, we resolved that the best evangelism method for us right now is putting everything into our people and our work. We have a good number of folks on staff that speak, write, teach and do a lot of traveling just to learn and connect with other folks in addition to the things called “their job.” We find these to be some of the best means to spread the word on who we are and what we’re passionate about. AND of course, we want our work to speak for itself. So for the immediate future, that’s our plan.

That’s the recap!

One good way to do this was using the iPhone Simulator, but you typically get at that by launching Xcode with an appropriate project. I’ve been using Alfred ever since I was introduced to it at SecondConf by Phillip Bowden, and I realized it’d be really convenient if I could kick off the simulator using just a couple of keystrokes.

Here were the steps I used:

1. Find the path the iPhone Simulator. I did this by launching the sim from Xcode, then right clicking on the Dock icon and selecting Options->Show In Finder. Once I had that, I right clicked on the Applications folder showing at the top of the Finder window’s toolbar. This showed me the full path to the current folder.

2. The next thing to do was add the path to Alfred so it knew where to find the sim’s executable. I did this by hitting option-space bar, and then clicking on the gear icon in the upper right hand corner of Alfred’s popup window.

1. You can add the path by selecting the Features tab from the Alfred UI, then hitting the plus button at the bottom of the Search Scope area.

After that, you’re done. Invoke Alfred by hitting option-space bar again, then type ‘io’

Boom:

Strategy — Some of our favorite projects have been ones where the client approached us with the spark of an idea, looking to us for guidance. We sit down with the client’s team, talk through their needs, advocate for their users, and develop that idea into a functional blueprint, often with sample wireframes or even full-color mockups.

Wireframing — Usability is everything from how fast the app launches to the color of a button. We all stress on this, and we all take responsibility if something doesn’t feel right. But happily, we have someone on the team whose job it is to make sure that the blueprints account for all of the possibilities.

Visual Design — This is what people typically think of when they refer to design, and it’s easy to see why. Most of what we process consciously about an app’s presentation is what we see. Making software pretty is one of our favorite things in the world, so naturally it’s very important that we consider every pixel.

Production — When we hand a finished design over to developers, we give them a complete set of assets (including @2x for iPhone projects) and style guide, which includes annotated and documented full-resolution mockups. We don’t like leaving anything to guesswork.

Iconography — To ensure that even the tiniest details in our apps looked great, we hired a guy whose username is “Iconmaster“. Talk about focus. We also have a passion for creating app icons, because they’re often the user’s first experience with an app.

Design Reviews — Because another set of eyes can make all the difference, every project we touch at Black Pixel goes through an internal review process. Even if you have your app designed elsewhere, we’re happy to offer our perspective.

We provide these services à la carte, and we’re excited to work on interesting projects with anyone who is passionate about good design and making their users happy. If that’s you, get in touch.

As some folks will know, in June 2011 I left an amazing role as the Sr. UX + Product manager on the Zappos mobile team with the intent of starting my own UX strategy + design consulting agency. Thusly, soon after began some dialogue with Black Pixel about how we might find ways to collaborate.

You know how it is when you love something a super whole bunch? Like Trekkies and Star Wars fanatics love their respective sagas? Black Pixel ARE those people. And not just for sci-fi. They are those people for apps. They love this stuff. They know this stuff. They can’t get enough. And they LOVE to share what they know. They want their products to be the best possible things they are humanly capable of making. And they ache for projects that hurt their brains while working through possibilities and options and ultimately, solutions.

There’s that on the work side but then there’s this equally amazing human side to them. The individuals that collectively create BLACK PIXEL. Sincere, passionate, ridiculously smart, humble… people you want to be around in hopes that some of their smarts will rub off and also just because they say things that make you happy.

So, while my heart was out to follow my dream of building my own thing, when I learned how aligned the goals of this sweet shop was with everything I believe about design and everything I hoped to build AND they wanted me to join them on the design side of things, I was honored, floored and absolutely thrilled. And I leapt right into the opportunity.

So… passion, passion, love, fanaticism, passion, passion, love = what am I getting at here?

Design! It’s a passion we share. Now when I refer to Black Pixel, I say WE. And WE are in it for the end-to-end experience, folks. I think Black Pixel has been more widely known for their dev chops but did you have any idea they have some AMAZING designers on staff here? Who knew? If you knew, just humor me and go with the excitement. Because that’s what I am. EXCITED. And I get to work with them!

While the mobile space is in constant growth + change, I’m working with a team that is moved by the opportunities we get in collaborating with our clients to define their unique approach, from ideation, strategy and content, through design and development. Holy. Moly!

I’ve joined a team that pours everything they’ve got into the quality of a product. A team that genuinely understands the importance and breadth of DESIGN throughout the entire cycle of a product! Thinking BIG and distilling into refined focus.

We are Black Pixel. WE DESIGN THINGS.

When Sofa was acquired by Facebook a few months ago, the decision was made that the Sofa team would retain ownership of their flagship products in order to sell them separately; Facebook acquired an amazingly talented group of people, but they’re in the business of making Facebook. Having already been through the process of taking over a beloved set of apps with NetNewsWire, we approached Dirk and his team to see if Versions and Kaleidoscope would be a good fit with us. Much like NetNewsWire, we’re all users and admirers of Sofa’s work, and the opportunity to be a part of that legacy was too interesting to pass up.

Recently we talked about our growth and our intentions to continue growing. Our design staff has doubled in the last two months, and Black Pixel as a whole is on track to follow suit. We have worked diligently to build our internal products group in anticipation of this announcement: I (Dave) will be leading the product roadmap and design efforts, and we’ve scaled up our existing product team in order to take on these new applications without having to dilute our efforts on NetNewsWire.

We are, of course, still hiring, so if you think you may be a good match for our team, please contact us.

We’ve had some very interesting conversations with Dirk and company in the course of this acquisition, and are working closely with them through the handoff to ensure that current and future customers continue to see the level of care, quality, and service that they’ve come to expect. Sofa has set a very high bar. We intend to meet it.

Versions and Kaleidoscope join the NetNewsWire suite as the Black Pixel family of products. We will love them and care for them as if they were our own, because they are.

More than one person thanked me for the reminder.

Our fearless leader, Daniel “Kung Fu Rocket Scientist” Pasco shared this on Twitter, and some folks asked if we’d make it available to the public. Sure, why not? Here you’ll find a .zip with variations sized for iPhone, iPad, and 13 and 27 inch displays.

Carry on.

Change

Black Pixel now has a full-time internal products group with dedicated design, development, support, and QA staff. The group, which was formed in mid-June, is actively engaged in supporting the existing NetNewsWire applications and will be rolling out additional applications in the months ahead.

Note: We’ve had a lot of inquiries for product status updates over the last few months, but we’ve adopted Apple’s policy of not commenting on products we haven’t shipped, so we’re not going to be able to satisfy anyone’s curiosity at the present.

Questions about existing NetNewsWire features and issues can always be directed to our support staff.

Design

Despite our passion for great design, our company has still been very much a development company with a comparatively tiny design staff. We have known for a long time that we’d need to make a much bigger investment in design in order to have the culture we ultimately wanted to see: a balanced community of designers, artists, and developers, all united in the desire to create some of the best user experiences possible.

We are very happy to announce that we have already begun to actively shift this balance with the addition of some wonderful and talented people to the team, including Phil Letourneau, John Marstall, and Jaimee Newberry.

Growth

We’ve brought several new people on board in the last few weeks but we definitely need at least a few more. We are still seeking additional developers, designers, and artists to meet the needs of our product group and the growing demand of top-tier consulting customers, as well as project management to help us stay on top of everything.

We are, however, far more interested in growing better than we are in growing simply bigger.

A little bit about the culture at Black Pixel

Although we have a very skilled group of people, we learned a long time ago that one of our biggest assets was actually our culture. Our unique blend of talented, disciplined, and empowered individuals allows us to handle a variety of challenges easily, efficiently, and effectively. On the outside, it probably looks like we run fast and loose like a startup, but most of us have enough big company experience to work together effectively without the big company management infrastructure that we’ve collectively outgrown.

Likewise, outside parties have nearly gone crazy trying to fit labels on our methodology, including “waterfall” (after prototyping, we develop pixel perfect comps of every view in our applications, which allows us to create detailed and accurate project plans before we ever start coding), “agile” (once the project plan is in place we break it into several small milestones, which we then attack in sprints, and we love issue trackers), and “extreme” (we often program in pairs, sometimes in packs, and we make intelligent use of unit tests).

We were asked once what we called our methodology. I said “an evidenced-based methodology that efficiently draws on several different effective practices, without any of the dogma.” Kind of a mouthful. Oh well.

…and the coming cultural revolution

We have also identified at least a few different ways in which we want our culture to grow. As an example, years of working closely with Apple designers and engineers has given us a strong appreciation for many things about Apple’s culture that we’d like to see more strongly represented at Black Pixel. Our time in the Apple ecosystem has reinforced those same values at Black Pixel, and we want to attract people who want to produce that caliber of work.

As a result, we are specifically looking to hire people with previous, deep experience at Apple (or, for that matter, NeXT) to help lead our team and champion those qualities to help them more fully flourish here. On our end, we’re offering great pay, a high profile position at a company in the process of transitioning from good to great, and a great team.

Experience working with distributed teams has shown us that distance is not a factor for the right person, so we’re indifferent to physical location as long as they have the qualities and skills required to help make this company the best it can be.

If you are interested in the idea of working with some top tier clients and some great applications, please contact us at [email hidden] or, ideally, reach out to us directly or through someone who knows us.

For many of us, NetNewsWire was the inspiration to quit our jobs, get serious about learning Objective-C, and go indie. The fact that we have the opportunity to become a part of its story is a dream come true.

In addition to loving NetNewsWire and its history, we see a lot of potential for its future. It is our hope that the work we do moving forward will inspire others as NetNewsWire and Brent have always inspired us.

NetNewsWire will continue to be developed on iOS and Mac OS X Lion. Formal announcements about roadmap and future releases will be made after Apple’s World Wide Developer Conference has wrapped up. If you are planning on coming to WWDC this year, please look for us. We’d love to meet you.