Max Rudberg
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.


Jan 20

✎ Flat UI is not the only way forward

It’s curious how Apple’s hardware and software have taken such divergent paths. Looking at iOS hardware and software separately, one might think they were produced by different companies. The drop-shadows and textures of iOS stand in sharp contrast to the clean lines and invisible seams of Apple’s hardware. Comparing major models of either the iPhone or iPad line, Jony Ive’s industrial design team seems to be on the march, creating devices that feel ever more like they’re carved from a single block of magical stone. So why is it that Apple would ship these devices with software featuring deep shadows and visible stitching?

The above quote from Dave Wiskus was used by John Gruber to argue that the future of UI design is one without textures and effects that mimic real world objects or materials. I would argue that they are observing design decisions in one craft, industrial design, thinking that it applies to UI design as well. But industrial design and UI design have very different characteristics, just like print has different characteristics compared to screen design.

The hardware and UI also have different roles to play. The hardware is constant, not changing, and should take as little of your attention as possible. This goes perfectly in line with what Apple are doing; reducing the hardware to a minimum with clean lines and invisible seams. As technology gets better, the hardware gets out of the way even more. The hardware sets the stage for the user interface, and its content, to shine.

When you launch an app on your mobile device, the device essentially becomes that app. Screens are great at drawing fine details and subtle gradients. Its part of a UI designers toolbox to make use of textures, shadows, light effects, etched or embossed elements and so on to make the UI tangible and understandable. I don’t see them going away.

With Jony Ive now heading up Apple’s human interface group, in charge of both hardware and software, we will see some changes. But I think they will not be as drastic as some make them out to be. It will rather be a slight correction of trajectory that will steer clear of extremities such as Find My Friends in the future.

On a system level I hope to see more of the fine and subtle improvements we saw in iOS 6, where default elements with a glossy look was replaced with matte gradients, the pinstripes background was refined and subtle drop shadows were added to give more depth to navigation bars, making it clear that they are sitting above scrolling lists and that the list will move underneath the navigation bar. Sounds obvious, but it’s a subtle improvement that makes you understand behavior from looking at a static screen.

Jony Ive talks about being true to the characteristics of a material, such as the ability to make a sturdy unibody out of a single piece of aluminum. I wonder what that approach is when it comes to user interfaces? Some would say a “flat” look is “truly digital”, but I think the flat style is just that; a stylistic choice. There isn’t really anything to be true to, except the user and helping them understand the device and its apps as easily as possible. If you can use textures and UI effects to help you with that goal, I think you should.


Jan 5

✎ Will Apple Make a “Phablet”?

Mockup by Lorenzo Orlandi

The past week there has been rumors about the iPhone 5S coming in an array of color and more than one screen size. This could mean just 3.5” and 4”, the sizes that have been available previously.

But more interestingly it could be a new, larger size.

This principle was proven with the iPad with Retina and the iPad mini, that the iOS interface can have the same resolution and the same interface at two different screen sizes. The smaller iPad mini uses a 163 PPI screen, the same pixel density as the original iPhone. The corresponding Retina version of that screen is 326 PPI. The iPad with Retina uses 264 PPI, still plenty of pixels1 to qualify for the Retina brand.

We’ve learnt that displays are made out of larger sheets, then cut into the desired size. Apple are already making these sheets at 326 and 264 PPI. So what they could do is cut the same 640x1136 pixels used for the iPhone from the 264 PPI sheet, and get a 4.9” screen.

This would be both cost effective and would require no effort from developers; apps would just work. An interface that becomes larger only becomes more usable.

This way, Apple would enter the “phablet” market2. There is obviously such a market, likely people who figure they can get something in between a phone and a tablet instead of having two separate devices. If they can enter a new market segment this easily, why shouldn’t they?


  1. You might think Apple wouldn’t compromise the quality of the display by lowering the PPI. But Retina is just a brand, not a pixel density. It basically means double the density of what it was before. For example, the MacBook Pro with Retina use 220 PPI. So 264 PPI is still a high resolution screen and Apple could just say you will use it further away from your eyes, qualifying it for Retina. Changing the amount of pixels and introducing a new resolution is not likely since it would cause increased fragmentation. 

  2. You might think Apple wouldn’t make a phone you cannot easily use with one hand. They made a point of this when introducing iPhone 5. But what Apple says is always in support of their current lineup; it doesn’t mean they won’t do something else in the future. For example, Steve Jobs said 7” tablets should ship with sandpaper so the user could sand down their fingers to be able to use them. But now we have the iPad mini, although to be fair it’s closer to 8”. 


Dec 28

✎ If you see a UI walkthrough, they blew it

Clear, Rise and Solar are three examples of a trend of “gesture driven” apps with a flat UI. These are novelty apps for people lusting for the very latest in app design. Besides using a more flat UI style, which is a topic for a different discussion, all apps contain non-standard interactions. This means users don’t know how to use them beforehand, and all start with a multi-step UI walkthrough before you get to use the app.

image

image

image

These apps have chosen to reduce details to achieve a minimal UI, but in the process the UI has also become harder to use. Unfortunately a UI walkthrough is quite an inelegant way to explain the core functionality of an app. It can be a frustrating obstacle before you can dive into an app, and you have to remember all of those new ways of using it once you get in. 

The problem is mainly the lack of visual cues; there is no way to tell that sliding the main screen to the left will toggle the alarm on in Rise, or pinching a list in Clear will minimize it and take you up a level in the hierarchy. It’s not obvious, and what’s often called mystery meat.

Arguably a less intrusive way compared to a walkthrough is to guide the user in the situation with UI hints. This can be done through slight visual cues and animations. A hint should not be a popup (it’s probably even more disruptive than a tutorial).

Some examples of clever explanation of UI gestures include Apple’s own camera lock screen sliders. Just tapping on the camera icon makes the screen jump, briefly revealing the camera UI behind the lock screen. This combined with the ridges above and below the camera tells the user to slide the lock screen up. Before this behavior the camera was activated by a mystery meat action; double tap the home button and a camera button would appear to the right of the Slide to unlock well. There was no way to find it unless you knew that double tapping the home button was possible in this screen.

image

A more hands on approach can be found in games which often deals very well with progressive disclosure, revealing game mechanics as you move further into a game. In Pudding Monsters, if you sit idly by when facing a new scenario, an animated hand will appear and make a sliding motion. It’s inherent in humans to mimic actions we see and it immediately becomes clear how to proceed.

image

In our own iPad cooking app Filibaba Meals, which is soon to be updated for the iPhone, we have adapted the recipes to work equally well on the smaller screen. To do so effectively we have the ingredients in a separate layer to the left of the description. To make it obvious that there is something more to the left of the current screen, there is a subtle animation that moves a piece of paper into the left part of the screen each time you pick a recipe. It’s subtle enough not to get annoying over time, but still serves as a UI hint the first time. We allow both tapping the piece of paper, as well as a horizontal swipe anywhere on the screen to move to the ingredients view.

image

When it comes to teaching users to use your UIs, I would recommend to do so mainly by progressive disclosure with slight visual cues and subtle animations - only use a walkthrough as a final resort.

Update 2012-12-28:

I just wanted to clarify my thoughts a little. It’s easy to pick on a few apps and present a few solutions that worked in other cases.

First off, the headline I picked for this article is a nod to late Steve Jobs “If you see a stylus, they blew it” and there is a disconnect between it and what I present in the article. I used it because I thought it would provoke a reaction, which it clearly did. If I were to do it again, I’d probably pick something more descriptive of my point.

I like Clear and understand the need for a walkthrough in that app. Clear brings many innovative features and tries to improve on the foundation of iOS through a more gesture based navigation that minimizes UI elements. And that’s a hard thing for a single app to do without giving the users some pointers. So I think the walkthrough is justified in Clear’s case, although perhaps given some iteration it could be transformed into a more gradual discovery. They already have an excellent starting to-do list that teaches the user basic functionality of the app.

Phill Ryu, from Impending, said:

"I … consider it a suboptimal solution we rushed in to fix a more broken situation (without [the walkthrough])"

Phill Ryu:

"I agree with your point Max btw, it’s just extra tricker to do! I hope we can improve on it someday"

I don’t have any solutions for Clear and consider myself a fan, so if anyone can do a good job improving on an already excellent app, it’s them.

What’s ironic is that Rise and Solar so closely follows Clear’s formula. Without the walkthrough, they are hard to explore on your own.

Phill Ryu agrees of the irony:

"… It’s definitely a weaker spot. those apps taking inspiration should try to innovate there!"

Jeremy Olson of Tapity has an interesting follow up article; “Are UI walkthroughs evil?


Dec 20

✎ iOS Icon Template

I made this template out of necessity and quickly realized it would be useful for the community. It has the following features:

• See each icon size accurately in its context and make sure it looks its best.

• The icon-small sizes are a bit tricky since they actually crop out part of the icon. If you want a perfect matching inner rounded rectangle, this template will help you.

• Rounded corner radius noted for each icon size. 

• Made for Slicy, just drop the PSD on Slicy and get PNG assets ready for Xcode.

• Optimized for viewing on a Retina screen, i.e. future proof.

Download here

image


Nov 1

Inspired by the more living home screens of Windows Phone and Android, this concept video shows how the iOS home screen could become more. 

In this concept, an app icon can be resized from 1x1 to 2x2 or 4x2, similarly to how you would on Windows Phone 8. The increased size can house widget like functionality and provide easy access to core features of that particular app. For example, you could expand the Settings icon into a widget with a brightness slider, and quick toggles for WiFi, Bluetooth, Personal Hotspot and Do Not Disturb. 

The newfound space could also be used to give a miniaturized window into the app, showing content already on the home screen. This could be useful for Phone, Messages or Mail. Instead of a glaring red badge, you’d be able to see the messages or calls directly on the home screen.

To launch the app, you can press the shrunken app icon in the lower left. 

The expanded icons can be moved around like regular icons and placed in the manner you like. But for obvious reasons, you cannot place an expanded icon in the dock; it would just slide back onto the home screen. 

One could imagine that this functionality would also be available to developers, who could include it for their apps.

This would rather nicely complement the existing feature set of iOS and make the home screen more engaging.


Sep 8

✎ Corner Radiuses of iOS Icons at Different Sizes

I still see icons getting this wrong, and there is some misinformation about which numbers to follow. Hicksdesign has the accurate numbers, and they are as follows:

Icon512.png                   512px           89.825

Icon.png                         57px             10

Icon@2x.png                  114px           20

Icon-72.png                   72px             12.632

Icon-72@2x.png            144px            25.263

Icon-Small.png               29px             5.088

Icon-Small@2x.png        58px             10.175

An easy rule of thumb if you want to create a matching inner radius is to subtract the spacing from the outer shape from the corner radius. Ie, if I make a roundrect at 57x57 with 10 px radius (the standard iPhone shape), then make an inner shape that’s 49x49, 4 px from the edges, the matching corner radius would be 6 px (10-4 = 6).


Aug 23

✎ Black Status Bar in iOS 6 Gives Apps Slightly Rounded Corners

Jordan Borth noticed that apps such as Tweetbot running under iOS 6 b4 (Mitch Bernstein says it’s been in all betas) got a 2.5 pt corner radius added on top of it. Jordan says this only happens when the developer has chosen the black status bar style.

I’ve written about this previously:

The black status bar has become increasingly popular among app makers and designers such as myself because it blends nicely with black hardware, and allows for nice rounded corners around the app, making the app feel like it’s own “unit”. This thinking was pioneered by Palm with the Palm Pre which made heavy use of this design choice throughout the OS, making things like notifications appear to happen on the hardware bezel.

Apple must agree with this thinking. What both Jordan and me found a bit disappointing is the exact radius the’ve chosen; 2.5 pt or 5 retina pixels, which is really quite tiny. I’ve always kept the radius to 5 pt (10 retina px). Sparrow even has double that, 10 pt (20 retina px). So this slight corner radius won’t be very noticeable. Dean Mayers hopes for some added consistency:

The radius size is stranger because notification centre has bigger corners. 10px I think

But since they’re essentially forcing this on apps with the black status bar, they probably wouldn’t want to make it too in-your-face as it does change the character of an app quite a bit. 

And if you prefer the larger radius, you can still add it manually like you’ve used to.

Worth noticing is that the corner radius is on a system level, so if the app allows you to move the navigation bar out of place, it will become obvious that it’s not the bar itself that is rounded. Such as in Safari:

Thanks to Jordan Borth for the discovery and screenshots!

Erik Olsson adds:

This will end with completely round apps in a few years :)


Jul 8

Jul 7

Jul 6

Jul 5

✎ Podcasts app and skeumorphism

I don’t know why people get so upset over Apple’s Podcasts app with a reel to reel deck on the new playing screen. It’s a beautiful illustrative element for a screen that otherwise would be quite dull. Watching it is almost hypnotic.

You could argue it doesn’t make sense as a metaphor for podcasts, but it’s fun. It’s that simple. Get over it and carry on.


Jul 5

Jul 5

Copyright