Posts tagged with "design"

Creating Gradients with Your iPhone and an App Clip→

Recently on AppStories, I asked listeners to suggest apps for creating gradients. I’ve tried a few, but none have grabbed me yet, so I’d sort of given up for the time being. But then a listener suggested something totally different and amazing: a prototype App Clip that uses your iPhone’s camera to create gradients.

It isn’t a complete app. For instance, you can’t save a captured gradient to your photo library; instead, you have to take a screenshot of the gradient. That isn’t ideal, but the lack of functionality doesn’t take away from the concept, which I love.

A wallpaper made with Kandravy's App Clip.

A wallpaper made with Kandravy’s App Clip.

When the App Clip launches, it presents you with just three adjustable sliders that control things like the diffusion of the image your camera is recording and its saturation. Once you’ve framed a gradient you like, tapping the screen freezes the image so you can take a screenshot and start using the gradient as a wallpaper. Another option is to use an image from your photo library to create a gradient. Adobe has something similar baked into its Capture app for the iPhone and iPad, but it’s more complicated and only generates 640x640-pixel images that aren’t suitable to be used as wallpapers without doing additional work in another app.

The App Clip was created by Dominik Kandravy, a designer who is looking for a developer to turn the prototype into a full-blown app. I’m hoping Dominik can find someone to help because the simple elegance of the prototype is compelling.

Permalink

Building a Downtime Home Screen Featuring Louie Mantia’s Retro Gaming Icons

Louie Mantia has been making beautiful icons for many years, both as one of the owners of icon design studio Parakeet and as personal side projects. Recently, two of Mantia’s personal projects caught my eye because they combine my love of classic games with the technology I use every day.

The first set of icons includes eight Super Mario blocks. When these were released in October, I remembered I had an 8-bit Mario wallpaper tucked away somewhere that would work perfectly with the icons on my iPhone. I dug the wallpaper out (sorry, I don’t recall where I got it), set up four single-action shortcuts using the ‘Open App’ action, and assigned Mantia’s icons to them using ‘Add to Home Screen’ and the Files option for the images. I set the four shortcuts to open Lire, Apple Music, Play, and Readwise Reader. Then, I lined up the wallpaper to make it look like Mario was jumping to hit the last block in the row. I also added a large GameBuddy widget at the top of the screen to count down the days until the release of Mario and Luigi: Brothership.

I think the result, which you can see in the screenshot above, looks great. Mantia’s icons were designed for the Mac, which means they each have a white border around them on the iPhone, but it fits well with the wallpaper, so it worked out without any tweaking.

The second set of icons is based on Nintendo controllers, another of my obsessions. I was chatting with Federico about Mantia’s latest icon set, and he had a great idea: why not take advantage of Delta’s deep linking feature (also used by GameTrack) to create shortcuts that use Mantia’s icons to open individual classic games?

Retrieving a Delta deep link and setting up a simple shortcut with a Home Screen bookmark.

Retrieving a Delta deep link and setting up a simple shortcut with a Home Screen bookmark.

The process is simple. You can copy a deep link to a game in Delta by long-pressing it, selecting ‘Share,’ and picking ‘Copy Deep Link’ from the list of action extensions. After I did that, I set up more single-action shortcuts using the ‘Open URL’ action and again assigned Mantia’s icons to the shortcuts using the ‘Add to Home Screen’ option, adding The Legend of Zelda: The Minish Cap, The Legend of Zelda: Four Swords, Super Mario World, and F-Zero to my Home Screen. Then, so I could tell everything apart, I switched my Home Screen to use small icons so the labels I’d added to my shortcuts would be visible.

I’m pleased with the result and plan to tie this Home Screen to a Focus mode that activates in the evening for some downtime activities. I can always access other apps as needed via Spotlight Search or the App Library, but it’s sometimes nice to end the day with a simpler setup that invites me to play a game, listen to some music, read, or watch a video.

Louie Mantia’s icons are free to download, but there’s an option to make a name-your-own-price donation, which I highly recommend you do if you download these wonderful icons.

Dezeen Highlights The Observatory, a New Event Space at Apple Park→

Architecture and design site, Dezeen has an exclusive first look at The Observatory, a new events space built into the side of a hill at Apple Park. The building, which is near the Steve Jobs Theater, will open officially later today, presumably for the iPhone media event.

Apple’s global head of design (real estate and development) John De Maio told Dezeen:

When we built Apple Park, we wanted the entire campus to be seamlessly integrated into the landscape, and this building follows that same approach,

With its stunning views of the campus greenery and the mountains ringing the horizon, The Observatory truly is an extension of Apple Park, showcasing the best of California and the best of the natural environment around us,

The building brings in the natural stone, terrazzo and wood elements that are featured in The Steve Jobs Theater and across Apple Park. It’s a design that complements both the landscape and its neighboring buildings on campus.

The Observatory looks spectacular. Don’t miss the photos shared by Dezeen on its site.

Permalink

The Sound of Apple→

I thoroughly enjoyed this two-part series on the Twenty Thousand Hertz podcast about sound design at Apple and the care that goes into crafting sound effects and alerts that complement the user experience (speaking of the parts of Apple I still love).

I’ll be honest: like many other people these days, I don’t often hear sound effects at all since my iPhone is constantly silenced because I don’t want to bother people around me. However, sound plays an essential role for accessibility reasons and is an entire dimension of software design that is not treated like an afterthought at Apple. I especially appreciated how both episodes went into explaining how particular sounds like Tapbacks, Apple Pay confirmation messages, and alarms were created thanks to members of Apple’s Design team, who participated in both episodes and shared lots of behind-the-scenes details.

I hope we get a third episode about sound design in visionOS eventually. (I listened to both episodes using Castro, which I’m using as my main podcast client again because its queue system is unrivaled.)

Permalink

Interview: Game Developer Zach Gage on Pile-up Poker and Resisting Dark Patterns→

Jason Snell has an excellent interview on Six Colors with Zach Gage one of the creators of Puzzmo and a ton of other games we’ve covered on MacStories over the years. Federico and I interviewed Zach ages ago on AppStories, and more recently at WWDC, and the only thing I like more than hearing him talk about game design and theory is playing his games.

As I read the interview, I was struck by the thoughtfulness with which Zach’s games are made, including this tidbit about Pile-Up Poker, the most recent addition to Puzzmo:

We have a lot of games on the website right now that are very cerebral and based on you and trying hard and being at your peak. And for me, thinking about how we balance a portfolio of games, I really wanted to have something in there that would be a lot more random every day and would still fit the guidelines that we have for Puzzmo. The game should be healthy. It should be a thing where you are creative and clever and improve your strategy. It should be something that anybody at any skill level can play and win, but people who are really highly skilled can play at a super high level and really compete.

Poker is one of my favorite games ever. I think it’s a magical game. For me, the biggest trick of poker is that you can play poker with your friends for 20 years and then someone can show up and have never played poker before and win. And that is something that doesn’t exist with, I don’t think, any other game. So it felt like the right kind of game to bring to Puzzmo to find something that fits that space. It would be super approachable, but also there’s a depth.

If you haven’t tried Puzzmo yet, I highly recommend it.

Permalink

Shareshot 1.0: Pixel Perfect Screenshots, Beautifully Presented

I’ve used Federico’s Apple Frames shortcut to add device frames to screenshots for years. It’s a great way to quickly process multiple screenshots and upload them to the MacStories CDN with minimal effort. But as great as Shortcuts is for simplifying this sort of task, there are advantages to using a native app instead.

Editing screenshots on the iPad.

Editing screenshots on the iPad.

Shareshot is an app for iPhone, iPad, and Vision Pro that occupies a lot of the same feature space as Apple Frames, using Apple hardware to frame screenshots. However, the app simultaneously does more and a little less than Federico’s shortcut. That one missing feature means that I won’t be abandoning Apple Frames, but because of the things the app can do that Apple Frames can’t, Shareshot will be joining the shortcut as a utility I expect to use a lot.

Let’s dig into what makes Shareshot shine.

Read more

Designing for Today’s App Interactions→

Yesterday, Vidit Bhargava, the developer of LookUp, Word of the Day, and other apps, published an excellent story on Pixel Posts about designing for today’s app interactions. Vidit makes the excellent point that the way we use apps is changing. They’re no longer iPhone-only islands that are siloed off from other apps and devices. As Vidit explains:

Not only is the iPhone app not the center of a user’s interaction on the phone. It’s increasingly becoming one of the many parts of an ecosystem where apps are expected to scale both in terms of interface and functionality starting from something as small as an Apple Watch and going all the way up to an unbounded experience like Vision Pro.

Not only do apps exist in the larger ecosystem of products, they are constantly interacting and communicating between them.

I couldn’t agree more. Today, I expect apps to be available on every device I use and to let me move my data between apps.

Vidit also explores the practical effect of the evolution of apps, arguing that it no longer makes sense to start by designing for the iPhone. Instead, Vidit suggests that we:

…think of “apps” as clusters of actions that help us reach or present information, and carry out processes (i.e. other actions).

The post is full of practical examples that are worth browsing through and an exploration of how to effectively design for actions. Vidit’s apps are among the best-designed apps I use, so I consider this post is a must-read for developers, designers, and anyone who is interested in where app design is heading.

Permalink

Designing Dark Mode App Icons→

Apple’s announcement of “dark mode” icons has me thinking about how I would approach adapting “light mode” icons for dark mode. I grabbed 12 icons we made at Parakeet for our clients to illustrate some ways of going about it.

Before that though, let’s take some inventory. Of the 28 icons in Apple’s preview image of this feature, only nine have white backgrounds in light mode. However, all icons in dark mode have black backgrounds.

Actually, it’s worth noting that five “light mode” icons have black backgrounds, which Apple slightly adjusted to have a consistent subtle black gradient found on all of their new dark mode icons. Four of these—Stocks, Wallet, TV, and Watch—all seem to be the same in both modes. However, no other (visible) icons are.

Fantastic showcase by Louie Mantia of how designers should approach the creation of dark mode Home Screen icons in iOS 18. In all the examples, I prefer Mantia’s take to the standard black background version.

See also: Gavin Nelson’s suggestion, Apple’s Human Interface Guidelines on dark mode icons, and the updated Apple Design Resources for iOS 18.

Permalink

Lickability on the Design of Apple’s Sports App→

A few weeks ago on AppStories, Federico and I surveyed recent Apple system app updates to get a sense of where the design of iOS is heading. Part of the inspiration for that episode was a thread that Lickability posted on Mastodon, breaking down Apple’s recently-released Sports app.

Yesterday, Lickability’s Sam Gold expanded on that thread with a post on the company’s blog that’s a must-read for anyone interested in iOS design trends because, as Sam says:

We once heard someone say, “design your app for the current iOS version + 1.” So with that lens, we’ve been looking at what the design of Apple Sports can tell us about iOS 18.

That’s good advice, and there’s a lot to learn from Sports, such as how it continues a recent trend of using gradients in the nav bar:

Gradients are used a LOT in this app. This nav bar gradient effect is becoming pretty common throughout first-party apps as well — first with the iOS 17 Health app, then Journal, and now Sports. watchOS 10 is also full of gradients.

There are many other things going on in Sports besides gradients, including Metal shaders applied to textures and interesting uses of animation and typography.

I fully expect that when I sit down to watch the announcements at WWDC, much of what Lickability has highlighted in Sports will be apparent across many more of Apple’s apps.

Permalink