iOS 11 App Store UI
Last Updated on August 26, 2026 by Editorial Team
The redesigned user interface of the App Store for iOS 11, crafted by Jakt in Sketch. Thanks to the author for sharing it.
Look closely at the four screens in the preview and you can see exactly what made the iOS 11 App Store redesign such a jump forward at the time: editorial-style cards, big photography, and a Today tab that behaves more like a magazine cover than a list of downloads.
The “Today” screen with its gradient background and rotated hero image of a figure mid-fall is the clearest example. It treats an app feature like a piece of narrative content, with a bold headline overlay and small metadata sitting quietly at the bottom.
The Apps and Games tabs behind it show the same discipline applied to browsing. Large thumbnail artwork for Airbnb and Injustice 2 sit above tight, left-aligned headlines, short description lines, and simple “GET” or “See All” actions that never compete with the imagery for attention.
This kind of layout is worth pulling apart if you design anything that needs to sell a product visually inside a scrollable feed: app store listings, content marketplaces, curated editorial apps, or any mobile screen where a hero image needs to carry the emotional weight while the UI stays out of the way.
The color palette itself is instructive too. Most of the interface stays neutral, white cards, dark type, soft grey backgrounds, so the one or two moments of saturated color (that pink-to-blue gradient on the Today card, the green Get button) actually register as focal points instead of getting lost in noise.
Studying the Today Tab Card Layout
The strongest design lesson here is how the Today card handles hierarchy with almost no visible chrome.
There is a small eyebrow label (“WORLD PREMIERE”), a large serif-adjacent headline, a short supporting line, and a date/time stamp, all stacked in a single left-aligned column over the image.
If you are adapting this for your own mobile mockups or pitch decks, the move to copy is restraint: pick one hero image, keep your type block to three or four lines maximum, and let generous padding around the text do the work that borders or boxes would otherwise do.
When editing the file, treat the photography as the variable and the type system as the constant. Swap in your own product shot or illustration inside the card, then nudge the gradient overlay’s opacity until your headline stays legible without flattening the image underneath.
For the list-style screens (Apps, Games), the reusable pattern is the row: thumbnail, eyebrow category tag, title, one line of description, and an action button aligned to the right.
Because that structure repeats predictably, it is easy to duplicate a row, drop in new artwork and copy, and rebuild an entire feed of your own app concepts, product features, or content cards without having to rethink spacing each time.
This screen set pairs naturally with an iPhone frame or device mockup if you want to present it in a portfolio shot, and it works well alongside app icon sets or a small UI kit of buttons and tab bars if you are extending the interface into new screens beyond what’s shown.
Because the tab bar at the bottom uses that same soft gradient treatment across Today, Games, Apps, Updates, and Search icons, it also gives you a ready reference for how to theme a bottom navigation bar with color without making it feel gaudy against an otherwise minimal white interface.
