Max Rudberg
Jan 28

✎ Obsidian Menu Bar dot com

Obsidian Menu Bar is back from limbo!

In an effort to make this hack more approachable, I’ve bought a domain for it – www.obsidianmenubar.com – where I can more easily explain what you need to do in order to set it up, what the risks involved are, and how you can go back to the system default should you change your mind.

With the guidance of Alex Zielenski, Obsidian now installs through an AppleScript rather than a package installer. This way, it can get to the system files it needs to. In a way it’s also a more transparent process, since you can easily look in the Install Content folder to see what it will install.

Needless to say, a lot of time has been spent making this hack. So if you use it, show your support by donating and keep Obsidian alive and kicking.


Jan 21

✎ iOS 7 Icon Template

Big update to my iOS 7 icon template, so big I decided it worthy of its own domain – www.iosicontemplate.com

The template now lets you view your icon in a Home screen and App Store mockup, as well as select any of the default wallpapers to make sure your icon always looks its best.

I felt it wasn’t right to just include screenshots of those screens, so I redrew them pixel for pixel. This means you can study the default iOS 7 icons and borrow shapes and layer styles for your own icon.

They’re very close to the original icons, a few pixels differ here and there, but probably not something most people would pick up on. In some places they are superior, as I noticed the Passbook icon had uneven distributed cutouts in one the orange shape. Not so in my version. And the settings icon is better conformed to the pixel grid.

As before, the template is made for Photoshop CC, optimized for Retina displays and ready for Slicy.

If you find this to be a valuable resource, be sure to make a donation to keep it alive. Thank you!


Jan 6

✎ Static, animated and the future of UIs

There’s a lot of talk about how the lessened focus on UI chrome brings greater importance to motion and animations in UIs. This is definitely true, but let’s not forget the importance of the static appearance.

Animations are great for explaining a flow and making a UI come alive, but are also easily missed by a less experienced user. This is why the static appearance still carry great importance.

The trend of less focus on UI doesn’t mean the UI that is there is less important or easier to make. Quite the opposite.

A stylistic and minimal approach means that each piece of UI carry more weight and tells a larger part of the story. Clarity brings greater exposure to the fewer elements on screen.

This in turns brings more importance to choice of colors, fonts, functions and craftsmanship of elements.

So while it’s a great time to be a designer and or developer, it’s probably also more difficult that ever before.

Marc Edwards of Bjango chimes in: I completely agree. Great caution must be taken when stripping away detail. I find lots of recent examples have gone too far. In that useful features are taken out, and it is promoted as a good thing. And UI cues are stripped out, and promoted as a good thing. Balance is needed.

As computing becomes more and more mainstream, I think there’s a movement to make software as accessible as possible. I see that as a positive, but not everyone wants a watered down experience. Lots of people still need pro features.

I guess if anything, I’m suggesting being very mindful of who you’re targeting, and how.

Me again: I’ve definitely seen this in Filibaba, where users at one time easily missed that you could swipe the screen horizontally. This despite an animation. Now the animation is emphasized until you’ve viewed the ingredients part once.

Marc: Gestures can be so powerful and handy. So hard to teach when there’s little or no visual cues. And, my solution is usually to be ultra-conservative and obvious. We rarely have issues, but our apps can be boring for it.


Dec 24

✎ Obsidian Menu Bar in 10.9.1

Update 28th of January 2014: Visit www.obsidianmenubar.com for a resurrected version of Obsidian Menu bar!

It seems Obsidian’s installer is now restricted through sandboxing and cannot change the system files it wants to. There’s a discussion on MacRumors on the topic.

This is why if you had it installed pre 10.9.1, you cannot restore the regular menu bar with black text but end up with white text on a grey bar.

And if you try to install under 10.9.1, it cannot change the text color nor menu items to white.

Using a tool like Pacifist you can force installation of the Extras2.rsrc and menu items to change them. This is useful if you upgraded from 10.9 to 10.9.1 and want to either install or uninstall OMB.

But the issue remains, and I suppose I’ll need to find an alternative to a package installer to make Obsidian work from now on.

Any ideas on alternative installation methods are welcome!

Update January 5th:

I’ve had a look around at the alternatives to PackageMaker which was deprecated in 2012 already, but which I’ve been clinging onto.

Packages seems to be the most up-to-date utility, however it doesn’t yet support settings 10.9 to the minimum installation target. I’m also not sure it would circumvent the sandboxing issues on installation.

I also tried running the installer package as root (sudo), but it still doesn’t manage to install successfully.

The best way to get Obsidian working at this time is still to use Pacifist and manually install the meta packages you want. I’ve highlighted the default packages below, the rest is for third-party menu items you might have. Cmd-click each one and then hit Install in the toolbar.


Oct 2

✎ Follow-up: Designing for an inverted navbar in iOS 7

When you design an inverted navbar for iOS 7, there are no examples from Apple to follow. Many opt to simply color all the items in the bar white. But making static and interactive items the same color makes it harder to understand what you can tap.

The fact that interactive items are placed in the corners help, but there’s also a point in visually grouping items to make the information quicker & easier to parse. You could argue it’s a choice of form over function. But I don’t see why you cannot have both in this case.

I’m going to use Facebook’s navbar as a an example to clarify what I mean.

Actual Facebook iOS 7 navbar (interactive elements are not obvious)

Group interactive elements with 70% white (subtle, but enough – less opacity and they might be mistaken for inactive)

Group interactive elements with 50% linear dodge (not on brand?)

Separate by using black statusbar (very clear grouping, less visually appealing).

The aesthetic result of using a black status bar is heavily dependent on the color of the bar, in this case the Facebook blue doesn’t work very well together with black. It’s still worth considering as this gives a very clear grouping with an effect similar to that of the black status bar in iOS 6.


Sep 20

✎ Designing for the unified navigation bar in iOS 7

In iOS 7, two bars have become one and the separation between system and app has been blurred. Apple has set an example with the white navbars in their apps. They recommend you to set a tint color for your apps, which helps separate the navigation items from the system status. But it still tends to get a bit cluttered at times.

The white navbars with tint color will probably soon feel like the default blue in iOS 6. It’s something Apple can use, but it will feel generic for a third party app. At least that’s my guess.

Therefore, when updating the Filibaba recipe apps, we tried a few variants.

We decided to go with a tint color for the whole bar, rather than just the navigation items. Since you’re given a preset transparency value by Apple, it’s likely that you can’t make the colors as strong as you’d initially would have liked. It seems it uses around 60% opacity, and this means you can’t have a saturation value stronger than 60%. The resulting color looks a bit like it has faded in the sun. What using the tint color gives versus setting an image is that you get to keep the blur effect, which we really like. And after a while we started to like the less saturated color as well. It looks almost like colored plastic, they way the content shines through.

Since the release, I’ve learnt it’s possible to work around the faded color by, and I quote Steve Troughton-Smith, “add a colored view on top of a blur bar”. Mike Rundle adds that “it seems to be every iOS developers new “hack” technique”. Steve was then kind enough to link me to this code snippet which is one method you can use to get a more saturated bar. I’ll see if it’s something we end up doing.

Anyway, back to our bar. We kept our custom navigation bar title font, as it’s part of our branding. The outlined icons didn’t match our style, and the cog in particular worked less well in this style, so we stuck with the filled icons. While Apple has set a strong example with their outlined icons, we believe it’s a style that you don’t have to use if it doesn’t suit your app.

What we finally did was to set the status icons to black. And this is important, because this groups the system information from the app, similar to the way the black statusbar did in iOS 6. This was suggested to me by Jenny and it really does work well. This might be something worth trying in your app as it makes it easier to parse the information in this unified bar.

We feel the result kept the personality of our apps, while still feeling at home in iOS 7. Here’s Filibaba Spreads & Filibaba Smoothies for iOS 7:

And now that iOS 7 is released and we start to see what third party developers are doing, we can see that colored bars are definitely still a thing. To prove our point about the black status icons, compare the original version against a photoshopped one with the black icons (Facebook’s color is borderline too dark to work with the black status items though – what’s up with like 90% of apps going with a blue color anyway?).

Which do you like the best?


Jul 9

Jun 26

✎ iOS 7 Icon Template

I’ve updated my previous icon template to work for iOS 7 b2.

It’s meant to be as true as possible to the on-device look and give you a context of the surrounding that particular icon size will be used in. That way it won’t feel as tedious when you’re working your way through all the variants.

It works beautifully with Slicy, which means you can just drop the PSD on Slicy and it will spit out the PNGs for you.

Furthermore, this template gets rid of deprecated sizes. But from the looks of it, Xcode 5-DP2 does not yet handle the sizes for the Spotlight icons.

Download the template here.


Jun 18

✎ How you should look in iOS 7

iOS 7 puts its emphasis on motion, and the visual UI design recedes to let the content and feel take room. While the OS itself isn’t finished, the thinking behind it and the direction they’re headed is clear.

We’re working on a new app and updates to our existing apps in Filibaba. During this process I’ve consider every detail again, and it felt right to share some of my insights & thoughts with you.

Strip away details. Get to the core of each element in your app. Consider everything from font choices, iconography to UI elements.

The same goes for home screen icons. The default apps does nothing to decorate their rounded shape. No highlights, no borders, no forced perspectives. Consider dropping all of those. Think of it as a peephole into your app.

Smooth transitioning. If you use the same background in the icon as you do in the default.png & the starting point of your app, the transition from the home screen will be near seamless. It now zooms into the icon, which transitions into the default.png and in turn fades out to reveal the starting screen.

Flatten out buttons. You don’t need to go completely flat and strip away all the personality of your app. But buttons don’t need heavy gradients and shadows to communicate that they’re a button. In fact, navbars has no buttons any more, they are just text. Make sure to use a differentiating color to stand out.

Icons can stand on their own. There’s no need to have a button shape around a glyph, the glyph itself is enough to make users understand that they can tap it.

Use shadows sparsely, and make them subdued. With the general lack of shadows in iOS 7, you don’t need much to make an element stand out. Consider new levels of subtlety.

Same goes for textures. There is still a use for textures, but make them subtle. Again, consider new levels of subtlety to the point where you can feel the texture, but barely see it.

Avoid decorating text with etching or shadows. Instead, make sure the color choice works well with the background. If it doesn’t, consider adjusting the background. In Filibaba’s case, we opted to use a gradient effect to darken photos rather than add shadows to text.

Work in Retina resolution. iOS 7 has many elements redrawn to take full advantage of the Retina display. Perhaps adjust certain details to be just 1 Retina pixel. Apple has plenty of hairline dividers of that size.

Be true to the screen. Gone are the efforts to make the screen look as if it has rounded corners. Navbars are square and blends together with the statusbar. iOS 7 lets the content continue underneath navbars and the statusbar. And sometimes you might not even need a navbar, you could just let it blend with the rest of the screen. Think of this on a screen per screen basis. You can have a navbar in one screen, and get rid of it in another.

Edge to edge. Let elements such as photos reach the edges of the screen, realizing that your app is already framed by hardware.

Contrast. iOS 7 is filled with contrast, from pure white apps to utter darkness in apps such as the compass. Consider the contrast of your app, tinker with the brightness of backgrounds.

Don’t be skeuomorphic when it doesn’t hold up. There was never such a thing as a leathery utility to locate your friends. But there are still uses for skeuomorphic designs. Filibaba has an egg timer to invoke that sense of nostalgia or the feel that your smartphone can replace a physical thing. It works close to the real deal, but you can wind it several times, control it with a start & stop button and it displays the exact time.

I’ve questioned design decisions I’ve made previously, and I feel the result is better for it. By considering the new thinking in iOS 7, you can make your app feel right at home when autumn comes.

Update Jun 27: Jeremy Olsen has written an interesting article on the same topic, called Responding to iOS 7. There’s also a Branch with some commentary.


Jun 10

✎ Choose your constraints

Design is about constraints. Either you set constraints for yourself to follow, or you follow existing ones inherent to the medium you’re working in. Then you do the very best you can within those constraints.

When it comes to UI design on an OS level, complete flatness1 doesn’t qualify as a constraint you should do. It takes away too many tools for a UI designer and becomes a hindrance for them to do a good job for the user.

Flat design is novel and it has its places, but an operating system is not one of them.


  1. Lack of shadows, highlights & gradients. 


Jun 9

✎ This is the reaction I’m hoping for when I see iOS 7

Did some motion tracking to this gif. I think it sums up how I hope to feel when Apple reveals iOS 7 tomorrow.


May 29

✎ Spinners

You know what you’re in for when you see this. The default spinner screams “WAIT!”. You’ve seen it hundreds of times and laying eyes on it makes you hold you breath as you wait. And wait. How frustrating.

But a spinner fills an important purpose. Apps often make calls to servers or in other ways have loading times, and a spinner clearly indicates to the user that something is going on and you just need to hang in there.

In fact, lack of spinners can be a usability problem. Twitterrific is an overall very polished app. However, when tapping the retweet button there is no indication that anything happened. I’ve done the same thing several times where I tap it again, and I’m presented with an error. Turns out the retweet did go through the first time, it just needed a few seconds. Replacing the retweet button with a temporary spinner while this is happening would remedy the issue.

A spinner is an excellent opportunity for branding, that little extra touch that sets your app apart from the rest. A custom spinner doesn’t send the same frustrating signal that you’re in for a wait. A well done, polished spinner can be mesmerizing and make time fly. An excellent spinner is one that you wish won’t go away. You might even go back and repeat the action just so you can get a second look.

To be fair to Twitteriffic, they have an excellent custom spinner of Ollie the bird flapping his wings when you do a pull-to-refresh in the app. It’s a terrific example of a spinner you don’t mind watching over and over.

The more basic kind of spinners can be easily made with Photoshop’s animation palette, just by tweening position or alpha channels. More advanced spinner are better made with a tool such as After Effects where you have finer control. A personal favorite is to draw a shape in Photoshop or Illustrator, then animate it in After Effects and apply layers styles imported from Photoshop. Once made, export it as a series of PNGs with at least 30 frames per second. Both iOS and Android can step through PNGs, resulting in a high quality animation.

Here are a two examples of spinners that I’ve designed.

Wrapp is a social gifting service I designed and branded for its first year. The spinner was an important element, using a ribbon shaped as a repeating “W”.

Filibaba is our personal venture where we make vegan & vegetarian cookbooks. Each recipe can be shared freely. When tapping the share button, the app asks a server for an URL and the button turns into a tasty spinner.

So don’t use the default spinner if you can avoid it, instead seize the opportunity to add that extra touch of delight.


May 16

✎ iOS subdued

If Apple redesigns iOS, think about the conditions for that design. A screen with vibrant colors, wide viewing angle, and a resolution where individual pixels disappear. That screen is laminated to the glass that sits in front of it, blending with the hardware.

It’s very likely these improved conditions would make the result different, and much more subdued, than what iOS 6 is.

I mean, have you seen a 2G, 3G or 3GS screen recently? You’d think you have some kind of eye disease. That screens sits at the bottom of a well with water covering it. No wonder a design made under those conditions is starting too look a little heavy handed.

While the default UI has changed some to accommodate the Retina display, bits and pieces of iOS still look the same as they did when the first iPhone came out.

This is one aspect of what the iOS 7 graphical overhaul will bring; a design set in today’s conditions.


And yes, people are more accustomed to touch, so let’s course correct and steer clear of forced real world metaphors.


Apr 2

Photoshop action: Remove compositing artifacts & banding

A while back, Marc Edwards tweeted:

8 bits per channel really isn’t enough colour resolution, even for fairly basic compositing (note the banding)

Only now I realized I should probably share one of my daily actions I use in Photoshop. Like Marc, I work in 8-bits/channel, which I think most designers still do. With this bit depth, you will eventually run into compositing artifacts such as banding.

What this simple action does is convert the selected layers into a smart object, then change that smart object to 16-bit depth. When a 16-bit smart object is placed inside an 8-bit document, Photoshop compensates for the lower bit rate with dithering and your banding likely disappear. The last thing the script does is add a subtle noise – but this is entirely optional and often you get just as good as a result or better if you disabled the noise filter.

A downside to this method that each smart object you create this way will increase the file size of the document.

The upsides to this way of working is that you get the speed benefit & filters from working in 8-bit, with the compositing benefits of 16-bit.

Download the action here


Feb 14

Yum! This is what an iOS cookbook should be

At long last, Filibaba Meals (formerly Veggie Meals), is available on the iPhone. It’s been built from the ground up as universal app and it works great on both your iPhone and iPad. This update bring 4 new recipes, bringing the total up to 63 simple vegetarian & vegan recipes.

The original iPad only app has been available since January 2012 and has allowed us to collect essential feedback from early adopters, as well as arriving at conclusions we wouldn’t have made otherwise.

Such improvements includes an iPad landscape mode with an independently floating ingredients list, allowing you to efficiently see both ingredients and cooking instructions at the same time. We also increased the dimension of the recipe photo and added the ability to set recipe language (English, Swedish or Brazilian Portuguese) independent of your device settings.

Going from the big iPad screen to something that fits in your pocket was a refreshing perspective. I think this added to a bolder design for the iPhone.

Launching the app, you dive right into a two column grid with 9 categories. Picking a recipe brings your to the recipe view, with a recipe note sliding into the screen from the left. You can tap the edges of the screen or swipe anywhere to move side to side. Tap the recipe photo and it will rotate into fullscreen.

The most clever feature is the egg timer. It presets to any cooking time mentioned in the recipe – all you have to do is tap it to begin. I think it’s an excellent example of a simulated object working really well in an interface. It sounds like the real thing too, but luckily the ticking sound goes away when you return to the recipe.

Going universal, we’re slashing the price in half. The app wasn’t expensive to begin with, but to be a competitive on the iPhone, we feel we want to make it affordable for everyone at just a $1.99.

We think we’ve found a format for an iOS cooking app that’s better than anything we’ve come across out there. We hope you feel the same, and we’re hoping for your support as we continue our Filibaba endeavor. We’re planning several more cooking apps and your support will inspire the confidence we need to get there.

We’re a small team consisting of me, my girlfriend Jenny, her brother Viktor and our friend Robert Dougan. So far we’ve spent an unreasonable amount of time doing something we really believe in and we hope to be able to continue doing so.

You can learn more on Filibaba, or go download it directly from the App Store.

If you’re a journalist or blogger or if you have feedback, feel free to contact us. We’re happy to answer your questions over email or a call.


Page 1 of 6
Copyright