New blog
Follow along at blog.maxrudberg.com
Cosimo Galluzzi
Acquired Stardust

Love Begins
KIROKAZE

❣ Chile in a Photography ❣

Andulka

#extradirty
2025 on Tumblr: Trends That Defined the Year
dirt enthusiast

Product Placement
Game of Thrones Daily

titsay
hello vonnie

Kaledo Art
Xuebing Du

tannertan36
Sweet Seals For You, Always

pixel skylines
styofa doing anything
Jules of Nature

seen from United States
seen from United States

seen from Belgium
seen from United States

seen from T1

seen from Malaysia

seen from France
seen from Türkiye
seen from Germany

seen from United States

seen from United States
seen from Australia

seen from United States

seen from United States
seen from United Kingdom

seen from South Korea

seen from Malaysia

seen from Malaysia

seen from Japan
seen from Germany
@maxrudberg
New blog
Follow along at blog.maxrudberg.com
How much was really lost in the great calamity that was iOS 7? For a UI designer like myself, quite a lot. I wandered around aimlessly for s
My iOS design & development company got a new blog:
Applaud Studio is your one-stop shop for beautiful, user-friendly apps, crafted with care. Learn more about our thoughts and ideas on app design and development.
Handla Grocery Shopping List App
Our new app is out! A lot of work has gone into creating this seemingly very simple utility app.
It’s a truly native iOS experience with some extra design sensibility sprinkled on top.
Handla has a huge built-in library of grocery items that makes it very convenient to quickly create a categorized grocery shopping list. One of the main features are the eco-conscious indicators that gently make you more aware of how your grocery shopping is affecting the world around you. We find that this often takes you by surprise; something you though was sustainable might actually have a high climate impact.
Handla syncs your lists across devices using iCloud. Sharing with other users is coming soon.
Download on the App Store
We’ve carefully and thoroughly re-engineered Plantry for the big screen. I'd love to write in more detail on how we approached designing a universal app that works from 4" up to 12.9". I'll consider that for a followup post. In the meantime, be sure to grab this update and try Plantry for 2 months for free: www.plantry.app
Looking for an Android Developer
At Filibaba we're looking for an experienced developer to help us build a new veggie cooking app for Android, with several product flavors.
Preferably you are located in Stockholm, Sweden, but remote is also OK.
The app should be built native with a minimum support of Nougat, but it's up for discussion. Contact me for more details.
Designing Plantry for Dark Mode in iOS 13
Plantry started out with a different name and a true black look. Designed for the new OLED of the iPhone X, having the background blend with the hardware and recipe photos pop off of that screen was too tempting to resist.
After a while the novelty wore off and we wanted a less heavy handed look. Plantry went white and got its new name.
Come iOS 13, it’s no longer up to us to choose one look for you. You may pick one or the other, or have it go dark during night time to avoid that retina blasting white screen in a dark room.
Offer a Light Mode
I feel strongly that if the user has chosen to use the light mode, you should provide that for them. Even Apple is at fault here; Calculator, Activity and Clock are examples of apps that only provide a dark mode. There’s always the brand excuse — that your brand and app was meant to be dark. But I feel it’s a lazy one.
Adapting Colors
There’s no easy rule for how you translate your colors from light to dark. If there’s any, I’d say go for what feels the same with the dark background. For us, that meant that highly saturated colors stay the same, and pastel colors are overlaid on black rather than white.
Fewer Colors
Possibly reduce your use of color overall. Not only is it a strong UI trend adopted by apps like Instagram and Apple Wallet, it will make dark mode a lot more straight forward. Users can often tell by placement alone if something is tappable, or you can show that in other ways, such as with a disclosure arrow or a button shape.
Low Contrast Colors
Watch out for low contrast colors. Blue against black can be troublesome. In certain cases having as low a contrast ratio as 2.75, where a white color would have scored 10.11.
Dark and Light Elements
If you have dark elements in your light theme, you may want to change them to be light, and keep the dark look for the dark mode. Examples of this are the Safari Privacy mode which in iOS 13 has a black tint and dark elements as opposed to a full dark mode, and the Lock Screen Do Not Disturb banner which is now a light element instead of a dark one.
Gradients
Don’t just invert gradients, that will make them look like they’re indented. Instead, use a darkened gradient that matches your light mode. Apple TV app does it wrong, where as Books gets it right.
Have Fun With It
You can’t assume that the user has a dark mode on only during night time, but some will, and I find it fun to swap photos or train illustrations for ones that depicts the same location during night time, and giving that train lit up windows and headlights.
Tag Light Mode & Dark Mode in Zeplin
If you use Zeplin to share your designs, you can shift-click tags to combine them. This lets your pick a device and see mockups for it in either dark or light mode.
Design in Dark Mode
Sounds obvious, but I find it helps a lot to set your Mac to dark mode when designing for dark mode.
Learn More
There are lots of good tidbits on dark mode in What’s New in iOS Design from WWDC '19.
Wallpaper by Jean-Marc Dennis
Lita App Icons
In version 2.3 of Lita we added the ability to change app icon. Can you tell the inspiration for each row? For a free user, besides the default app icon, only the 1st icon on the 2nd row is unlocked 😅💎
Oh, and we made the app white. In the midst of dark themes, this felt the right way to go for the purpose of our app; cooking. Makes it more kitchen-esque, cookbook-like and more approachable. My bet is that iOS 13 will bring a system wide dark theme that apps can opt into, then we'll be happy to bring that look back.
Get Lita for Free
Designing and Developing for Siri Shortcuts
iOS has been on a path since its inception to allow apps to become more than just a world hidden behind an app icon. Apps have been carefully allowed to seep into the OS itself.
We’ll be using our app Lita as an example throughout this post. Lita lets you easily plan a week of vegetarian cooking. It has one main use-case that’s relevant to access outside the app; checking and being reminded about today’s meal during a planned week of cooking.
A Brief History of OS Integration of Apps
Push notifications for third party developers shipped in iOS 3, allowing third party to surface events directly on the lock screen. The most current inception allows for Rich Notification that upon a 3D Touch reveal a glimpse into the app along with a few select actions.
A few years later, when iOS 9 came around, we got Quick Actions and Widgets that allows you to see bits of information of an app by 3D-touching the app icon. Widgets can also live to the left of the home screen and home screen, in the Today view.
Widgets have a clear drawback since the user has to actively add them to the Today view, otherwise they remain hidden in hard discover menus (Quick Action or the round Edit-button).
Widgets also occupy space when they have no value except as a shortcut to open the app, displaying only an empty state to the user. This is by design as Apple’s own widget does the same. In our case however, we could’ve presented a random recipe to keep it relevant. Something for a future version, perhaps.
There are additional areas where apps seep into the OS such as Spotlight where you may surface relevant search results, or the Share sheet where an app may offer to perform a very specific task.
Siri Shortcuts
With Siri Shortcuts in iOS 12, Apple continues this trend. Siri has effectively been opened up to all apps — before, only a select few type of apps were allowed (such as messaging, ride booking and workouts). The only caveat is that it’s up to the user to record the activation phrase.

For Lita we designed and developed the ability to record the phrase "What's for dinner" as a shortcut. Now we can respond to user requests via Siri.
The interface presented to the user should be quite simple as you cannot interact with it except to tap it and go into the app. This is similar to the Rich Notification presentation and we opted to use the same UI, which is based on the cards we use for today's meal.
Onboarding is Important
Siri Shortcuts isn’t something a regular user will likely be familiar with. Hopefully Apple will improve the awareness through advertising and a system level onboarding.

We try to make users aware of the feature already on the App Store with an additional screenshot. The new max number of ten screenshots help here.

Most importantly, we wanted to inform the user of this new feature using an onboarding screen in our app. We tend to stay away from modal onboardings unless we really think that the users might benefit from the interruption.
The Siri sphere and large header quickly informs the user of the feature. A short paragraph explains the feature in more detail. The call to action is obvious. And of course the user can skip creating a shortcut if they don't want it.
This version has been approved for the App Store and for now our fears of app rejection for using the Siri sphere has been extinguished. Our fallback would be a generic microphone icon, but we far prefer this approach and we hope this is a signal that it’s OK to use the sphere in your explanation of the feature to users.
We're not doing any special logic to decide when to show the user this onboarding. It pops up a couple of seconds after launching the app for the first time after updating to the latest version of Lita on iOS 12 (or the second launch if the user is new to the app).
Tapping "Add to Siri" opens up the built in INUIAddVoiceShortcutViewController (or INUIEditVoiceShortcutViewController) system interface where the user can record, edit and delete a shortcut.
Show It Prominently in the UI

We prominently display Siri Shortcuts in our Settings UI to help with discoverability.
After a few iterations, we decided that tapping the Shortcut Phrase would take the user to a separate screen where we had room to explain the feature to the user.
Apple provides a UIButton subclass, INUIAddVoiceShortcutButton, that you can use to display a button that shows the recorded phrase for any given intent. Unfortunately one cannot style that button from what we could find, and we wanted the design of our Siri related elements to blend in better with the rest of the app.
Let us introduce you to INVoiceShortcutCenter. It’s a singleton class that you can query for intents related to your app. You can also give it suggested shortcuts, so that the user don’t have to trigger the intent in your app to have it show up in the “Siri & Search” section of Settings.
We wrote a little wrapper around the shortcut center to easily fetch the recorded phrase for a specific intent type. That made it easy to:
Show the user’s recorded phrase in the UI to remind them of the feature and their Siri trigger.
Display the correct view controller, add or edit, when the user taps the button to record a phrase. Otherwise the user might end up with duplicate shortcuts, which is confusing.
We won’t go into too much technical detail here. But feel free to checkout the linked Gist and comment with any questions or suggestions you might have.
Surfaced on Lock Screen
As we mentioned at the beginning, iOS widgets occupy space even when displaying just an empty state. Shortcuts are smarter than this and will only surface to the user when deemed relevant. This relevance is determined by previous user behavior. So if a user goes into Lita to look at their planned dinner each day around 17 pm when they leave work, eventually Siri Shortcuts will just present that action directly on the lock screen.
Shortcuts inside Spotlight Search

Shortcuts are presented in search results, but may also be presented directly in the top level of Spotlight if the system deems it relevant, based on previous user behavior. Tapping a shortcut may lead into a relevant part of the app, but may also present an interface directly — the same UI that is shown in Siri.
Settings App

All available shortcuts can also be added, edited and deleted from Settings > Siri & Search. This will help with users discovering the new functionality inside your app.
Shortcuts App
Shortcuts will also be able to form powerful combinations that the user can create through the Shortcuts app. Shortcuts app will be an optional download from the App Store. If you want to dive deeper into the possibilities, we recommend keeping your eyes peeled on MacStories.
Accessible from AirPods, Apple Watch and HomePod
In addition to these different areas of iOS, your app will also be accessible from other Apple hardware. You can speak the shortcut phrase to Siri using your AirPods and she will speak the response or you. The HomePod will get a software update to allow the same functionality. You could be biking from work and prepare yourself for what to cook when you get home. Or ask HomePod in the morning.
Apple Watch will surface shortcuts on the Siri watch face, as well as respond to the recorded shortcut phrase.
Final Words
Siri Shortcuts feel like the most powerful OS integration of apps yet, and we look forward to seeing how other apps seep in the OS. Feel free to download and try Lita and our Siri Shortcuts functionality.
Wallpaper in screenshots is from Simon Stålenhag and Marc Edwards of Bjango.
We hope you enjoyed this post! Feel free to tweet at us with your comments.
Simon & Max of Filibaba
Say hello to Lita
This is something we've been working for for the past one and a half years, and we hope you'll like Lita as much as we do. It's simulatenously a collection of everything we've done in Filibaba over years past, and a new foundation for things yet to come. But we're mostly figuring this out as we go, so we're really hoping to hear from you, and your thoughts on Lita. And if you like what you see, we hope you're willing to put your money where your mouth is (seems fitting for a cooking app, no?).
Here is is a quick summary of what Lita is all about:
What's for dinner?
Families stress about dinner on a daily basis. Planning your meals with Lita helps you save time, eat healthier, and save money. Enjoy tasty dinners with our exclusive recipes that are good for you and our planet. Lita is Swedish for trust.
Plan
By making a conscious choice of what to eat for dinner for the coming week, you’ll also eat healthier.
Shop
Export a ready-made shopping list to an app of your choosing.
Cook
Lita has over 400 exclusive recipes you won't find by googling, from famous Swedish veggie chefs such as Very Veggie and Vegourmet. All recipes in Lita are vegetarian or fully plant-based.
Lita is free to download and use. Lita Premium gives full access to great recipes and meal plans.
Download Lita on the App Store
Coming soon
On July the 6th, we’re launching our new app, Lita. We hope to answer the everyday question: What’s for dinner?
Veggie Meals cooking app evolves for the iPhone X
We launched Veggie Meals back in 2011 and it has stuck around for the evolution of the iPhone hardware as well as the iOS platform. As the design of iOS shifted during the years, so has the design of Veggie Meals transformed. It has gone from a fun and quirky app, heavily using real-life cooking metaphors, to a more subdued, illustrated look, while still retaining some of the quirkiness that made the original great.
Not only is Veggie Meals updated, but all of Filibaba’s cooking apps have received the same suite of updates. They’re ready and waiting in the App Store for the iPhone X.
Here's a rundown of how Veggie Meals has evolved:
iPhone 4 and iOS 5
iPhone 5 and iOS 7
iPhone 6 and iOS 9
iPhone X and iOS 11
UI Design for iPhone X: Top Elements and the Notch
In the same spirit as the first post (UI Design for iPhone X: Bottom Elements), this post will deal with designing for the iPhone X. I use findings in our own apps in some of the examples.
The Notch (Sensor Housing)
You can't talk about this topic without first addressing the controversy the notch has caused.
John Gruber said “It offends me. It’s ungainly and unnatural”, and Joshua Topolsky went as far as “It is, put plainly, a visually disgusting element”.
Regardless of your feelings for the notch, the reality is that to do a near edge-to-edge screen on a phone in 2017; you need to make place for sensors and speaker. The technology to hide them behind the screen simply is not here. We’ve seen different manufacturers choose different solutions to the problem. This is the one Apple chose, so let’s work with what we got.
So how should you deal with it?
Apple writes in the HIG: “Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen.
In the Designing for iPhone X video, posted by Apple after the X's announcement, Mike Stern says: “Your app or game should always fill the display that it runs on. Placing black bars at the top or bottom of the screen makes your app feel small, cramped, and inconsistent with other apps on iPhone X”.
Apple is choosing to highlight the fact that the screen reaches the top left and right corner of the device. So the recommendation is clear. As a good platform citizen, one should follow their lead. By doing so, you likely have better chances to be highlighted by Apple in the App Store, or even win an Apple Design Award.
Carrot Weather
Eventually, they will get rid of the notch. It could be 2, 5, or even 10 years, but it's a stop gap, not a permanent design solution. In the meantime, treat it like the elephant in the room. We all know it's there, but for the most part, you should design as if it's not.
Status Bar
Because of the notch, the status bar has gone through a significant change on iPhone X.
The familiar 20 pt tall status bar, the same height it's been since the first iPhone…
…is now 44 pt tall on iPhone X.
The number 44 pt is found once again in the screen's corner radius. That number has been with us since the first days of the iPhone, as a 44 pt sided square has been used to represent the smallest touch target that can be hit easily.
Scrollbars stop before the screen radius begins. So by using a status bar background like this, scrollbars have a visual stop.
Apple points out: "If your app currently hides the status bar, reconsider that decision on iPhone X". I always thought apps that hid the statusbar did the wrong thing as you're hiding important information from the user.
Navigation Bar
Customized navigation bar for Vegourmet. Black bars works especially well on the iPhone X. The notch stands out less, while the blur effect still allows content to shine through.
The taller status bar is combined with the height of the navigation bar for a total of 88 pt. As a developer, you should use the Safe Area Layout Guides.
Transparent Navigation Bar
When viewing a recipe, we let the recipe photo take up most of the screen, and a transparent navigation bar is a natural way of doing that. The effect works well for iPhone X, too.
We use a gradient divided into navigation bar image and shadow image for an extra tall and smooth gradient overlay. By letting the navbar image stretch, the same asset works well on older devices as well.
Cards
Music and Mail are two examples of Apple apps with card UIs that leave the status bar area against a black background. These are used to highlight the modality of a screen, such as now playing or composing an email.
This style goes against Apple's guideline of letting content reach the corners and should be used sparingly.
Still, it's a good look when the UI blends with the hardware, I always thought.
Large Titles
Large titles work well to present a section of your app. Typically it can be used at the root level of a tab, but in some cases, it may be warranted further down in the navigation hierarchy.
The lost screen real estate is reclaimed as soon as you scroll.
Going with a black UI is one way your app could blend more nicely with the hardware, while still following Apple's guidelines.
Landscape
In landscape, the Safe Area Layout Guides pad your content 44 pt from the left and right edge, effectively avoiding both the sensor housing and rounded corners. It also pads away from the home indicator at the bottom of the screen.
Table view cells and background colors reach the edges, giving a kind of faux full-screen experience.
Safari makes extensive use of padding. By default, content will be inset 44 pt from the left and right edges. Web developers can adjust their sites to reach edges of the screen if they desire.
To better utilize the full width of the screen you can look to Apple's revised video player UI. Its floating elements are tucked a bit into the corners of the screen.
Apple's video control actually uses a superellipse shape. It's also an excellent example of how to harmonize UI with the screen corners. Distance, 27, plus radius of the control, 17, equals 44.
Apple Maps do a similar thing, where some of the controls will go close to the edge of the screen, but unfortunately they don't harmonize with the screen's corner radius.
If you rotate the device 180°, the controls are pushed away by the sensor housing, which ruins the symmetry. It's not a perfect solution.
Remember that this first iPhone X is derived from the 4.7" screen size and don't use landscape views as extensively as the Plus phones do, with their 5.5" screens.
Landscape on this size phone has always been a compromise, and likely most users will only use landscape for browsing or playing video or games. I find it kind of annoying when apps rotate to landscape, as that's almost never something I desire.
Status Bar Tidbits
There can be a location arrow next to the clock and an animated dot above the status indicators to indicate network activity.
The consolidation of the status indicators to the right makes a bit more sense when you realize you can swipe down the right side to reveal Control Center with the old status bar. This is what you have to do see all your status items and battery percentage.
The in-call status bar which previously doubled the status bar height is now a simple button shape around the clock. Recording and background location usage are treated in the same manner, with a red and blue button shape respectively.
The home screen edit mode for rearranging icons uses a curious solution where the status indicators are replaced with a Done-button.
And Finally… What NOT To Do
Don't use the status bar area to animate rainbow colors shooting out of the notch.
Don't use the notch as a UI element…
…nor as a pull-to-refresh spinner.
(These were not unprompted, ideas like these are floating around…)
Further Reading & Resources
High level insights with relevant documentation and videos can be found on Apple's Update Apps for iPhone X page.
Read the first post in the series; UI Design for iPhone X: Bottom Elements.
Get my iOS 11 app icon template for Sketch, it's free.
Update November 7
Sebastian de With shows an clever solution for his camera app Halide:
“Initially we had controls up there but we ended up with this solution, showcasing functional non-interactive readouts in the 'ears'. I think it plays to the strengths of the screen, and we now really use every pixel on the screen that's available.”
A camera app is probably immersive enough that hiding the status bar is an OK tradeoff.
UI Design for iPhone X: Bottom Elements
iPhone X and its curved screen is the most exciting iOS UI design challenge in many years. However, there’s not a lot of time for developers to adjust their apps to this new form.
These are explorations on how certain design patterns can be adapted to the new screen. I’ll use findings in our own apps as an example.
Edge-to-Edge Buttons
This kind of button treatment was introduced around iOS 7 when Apple wanted to make the most out of small screens.
The solution can be to pad them and give them a floating treatment. Gradients are optional, but boy are they nice.
32-36 pt from the bottom edge is similar to the distance used in Apple's tabbars. 44 pt is the corner radius of the screen. Harmonizing the radius of the element with screen radius makes it more pleasant. The spacing from the bottom of the screen helps avoid interfering with the home indicator.
Banners
Again, I'd suggest pad them and float them.
Bottom Progress Bar
With a running timer, we push the rest of the UI up to present a progress bar that's visible throughout the UI. This now collides with the home indicator and screen corners.
Pad and float.
For views with a tab bar, the progress bar could instead float above them.
Further Reading & Resources
Read the second post in the series; UI Design for iPhone X: Top Elements and the Notch.
Get my iOS 11 app icon template for Sketch, it's free.
iOS 11 App Icon Template
Meticulously crafted icon template for iPhone, iPad, Apple Watch and iMessage apps for use with Sketch.
Change one Smart Object and see your icon in all needed sizes. Each shown in its context.
Get if for free 👉 iosicontemplate.com
iPhone Pro′s edge-to-edge screen and what it could mean for the UI
Apple's accidental release of the HomePod firmware prompted Steven Throughthon-Smith's to go digging through and uncovering a lot of exciting pieces on the upcoming high-end iPhone, codename D22. Allen Pike then had an interesting take on what that new form factor could mean for the UI.
Allen's idea of how the UI will change on the new phone match many of my own thoughts. iOS 11's large navbars seems like the biggest hint of upcoming change, and moving the left and right navbar items next to the home button allows for a much more convienient bottom oriented navigation. And everything just seems to fit.
I wanted to explore how this could look with a little more graphical polish, to try and figure out which way Apple would be most likely to go. I've used the same App Store Top Charts-screen as Allen did.
iPhone D22, embracing the notch
iPhone D22, hiding the notch
iPhone D22, hiding the notch & blending the bottom bar
Side-by-side comparison
It'll be fun to see how wrong this was when the actual announcement comes around. Either way it's impressive how much more UI will fit in the same form factor.
Beforehand I was fond of the idea of blending the statusbar with the hardware, but seeing the mockups like this, I'm not so sure. Blending the statusbar with the hardware makes the screen seem smaller than it is and the result is less striking. I'm now leaning towards that Apple will embrace the notch.
Update 10th of August
The white front bezel goes well with Apple embracing the notch:
iOS Stiffness: The Neglected Touch Down State
When iOS 10 was introduced, I had hoped to see more borrowed from watchOS, because it does a great job of providing animated feedback to taps of buttons and other elements.
Android also does a better job at it, with its ripple effect on table cells, for example.
In comparison, iOS feels stiff to the touch.
Granted, watchOS has more defined button shapes that make it more obvious than if they'd only be text based. Even so, there's no reason why we can't have the same nice feeling of touching the UI on iOS. Even to text-only buttons.
Perhaps the push down state could even reveal the button shape? As if it was sitting flush with its surface, but your finger revealed the button shape as it was pushed down and temporarily shaded.
Developers can make good touch down states on their own, but they are often neglected because it's so downplayed in the system.
Good examples of developers going out of their way to give a nice feeling to the UI are Instagram filters and the Spotify tabbar.
I would love to see iOS 11 bringing subtle touch down animations to standard system elements, such as navbar buttons, table view cells etc. By doing it to the default components, third party apps would be affected by it as well. This would make for a consistent and more compelling experience when touching iOS. And that sense of stiffness would be replaced with a much more fluid experience.
Update Feb 7
Federico Viticci adds that Apple Music has a great touch down state, which is also very similar to what I proposed. So maybe this bodes well for the future.
Apple Siri Remote – Fixed It
One of the feet fell off my MacBook Pro, and I used Sugru to mold a new one. Once you open a pack you need to use all of it or it'll dry up. So I used part of the remainder to mold a simular foot on the Siri Remote. This helps orient the remote in the hand and makes it easier to grab it from a table.