Max Rudberg
Sep 23

✎ I’m Getting the 6 Plus

I’ve read a lot of coverage and today I held both phones. I’ve decided to go for the Plus, this is my reasoning.

• It has become clear that this size is a new class of device, a hybrid between a phone and a tablet. This device requires slightly different mindset, you should approach it as a really portable computer, not a huge phone. As a designer I want to figure this one out. So far this manifests itself mostly by an improved landscape mode, but it will be far more interesting to see what third parties does with it and how it evolves over time. For people looking to own just one device to replace any combo of phone/tablet/laptop, this is the device they’ll pick. Apparently this size device is all the rage in Asia.

• The iPhone 6 Plus covers both new resolutions introduced by the 6 and 6 Plus through Display Zoom where it uses the same resolution as the iPhone 6, but scaled to 5.5”. As a freelance who wants a minimal device park, this is a big deal because I can own one device instead of 2.

• It’s the only device with @3x graphics, and the highest PPI device Apple makes. Although being downsampled, this is the first way to try how @3x graphics turns out.

• Compared to the 6, the 6 Plus has slightly better specs; longer lasting battery, camera with optical image stabilization and slightly faster CPU (1.4 GHz compared to 1.2 GHz, probably negligible, but still).

As far as colors go, I’m getting the black once again. White ruins the screen blending with hardware look that’s been a thing since the original iPhone. It also looks like the antenna lines are more discreet on the black, but still not good looking. The gold one looks horrible in this regard.

I’m opting for 64 GB of storage, I have 32 GB on my iPhone 5 so it’s a big step up. I don’t sync music, I stream it, so that’s fine for me. I’ll have to unload photos occasionally but it’s no big deal. 16 GB is a joke nowadays, I’m sorry for my wife has that in her 5s – we should have gotten 32 GB for her. 128 GB is too much for me and a reason to save a little bit of cash. I’ll be buying mine unlocked just to have the flexibility to change carriers or move abroad. It’s an expensive device. With these specs it’ll be $849 – for $50 more you can get an entry model MacBook Air.

The device is big, but I think I had a good understanding of just how big it is and it just confirmed my thinking that this was the right size for me. Maybe I just have Slender Man-sized hands. The 6 Plus fits just fine in my front left pocket. The slimness and rounded edges makes it easy to slide out even when I’m sitting. And I have regular fit jeans. Not slim nor baggy. However, I’m getting a case because this thing is not only shaped like a soap, it’s also almost as slippery. And having a kid in the house makes a case a must have. I’m hoping it’s still OK in the pocket even with a case.

Oversized apps looked big, but perfectly acceptable. I was surprised to find that the scrollbars are much thicker on the 6 Plus compared to the 6 and 5s. Thicker than on an iPad, too. I would imagine this is something that will change in an software update. It just looks like something straight out of iOS 6.

Thinking ahead to the Apple Watch, this is a scenario where I imagine the phone becomes something that more often sits in your pocket or bag and you only take it out when you have a moment. That could also speak for the phone being bigger, perhaps.

Now is a good time to get a Touch ID device, with third party apps being able to use it in iOS 8. I’m upgrading from an iPhone 5 and an iPad mini combo. I stick by my every-other-year iPhone upgrade cycle. I think even people who work with these devices should think twice before going on a yearly upgrade cycle. It’s not a very environmentally acceptable approach. Waiting two years, and the leap will also be that much bigger. Every year is incremental.

Two laptops ago I had a MacBook Pro 17”. That was a truly niche device. Almost too big to fit in a backpack. Apple abandoned it once the MBP went Retina and could cover the 1920x1200 resolution with the 15” screen. I think the 6 plus is not an oversized device, as the 17” MBP was. But I was wrong about that device, so the jury is still out on that one. But to think about that you can now have nearly the same resolution in a phone, is pretty astounding.

I’ll place an order for my phone online this Friday when it’s available here in Sweden, queuing at midnight is not an option for me and I’ll patiently wait for it to come to my door instead.


Aug 12

iOS Launch Image: An Alternate Approach

The launch image is the piece of graphic that is briefly displayed on a cold launch of an app. The recommended approach is to display a placeholder image with things like the navigation and tab bar, but without any seemingly tapable icons. This primes the user for what’s coming next.

iOS 7 added a fade from the icon on the springboard to the launch image, followed by a fade from the launch image to the starting point of your app. This makes for a smooth transition and will gently fill the blank bars with tappable elements.

For a third party apps, the launch image can be a way to extend your branding. This should be done in a tasteful manner, and without any artificial delays. Adding even just a few milliseconds of extra launch image time will frustrate users.

Twitterrific is a nice example of tasteful launch image branding. It has a frosted glass look, with a blurred version of the app icon behind it. “Twitterrific” is shown in see-through letters. The resulting transition from the springboard is that the icon is being zoomed into and blurred.

What’s lacking from this launch image is the priming achieved by placeholder elements. This has bothered me a bit and was reason enough for me to steer clear of a similar approach in our own Filibaba cooking apps.

However, what we’ve done in our recent updates feels like a nice middle ground. The launch image is a combination of an enlarged high definition icon and outlined elements. This way you have something nice to look at, while still primed for what the UI will start out like. The outlined grey visual style more strongly clarifies the inactive state, compared to colored bars.

After the launch image we present each recipe with a scaling animation, which makes the transition from the springboard pretty seamless.

tl;dr

I feel like I’ve found a nice middle ground between branding and priming the user for the starting point of an app.


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.


Page 1 of 6
Copyright