iOS 11 GUI

Last Updated on July 24, 2026 by Editorial Team

A useful .Sketch freebie with the newly released iOS 11 GUI. Created and shared by Takahashi Alex.

What you’re looking at is a genuine slice of the iOS 11 interface, rebuilt screen by screen rather than just mocked up as flat panels.

The Control Center with its dark, rounded glass cards sits next to the Contacts list, the numeric keypad from the calculator, the App Store’s editorial feed, and the lock screen with its oversized number pad.

Each one carries the exact visual signature Apple shipped that year: the soft gradient blues and greens on toggle icons, the orange calculator buttons, the crisp black status bars, and that distinctive Helium app card with its pink-to-orange gradient header.

This is the kind of GUI kit you reach for when a project needs to look like it lives on an actual iPhone, not an approximation of one.

If you’re designing an app that has to visually integrate with system screens (a music player that hands off to Control Center, a contacts-based utility, a keypad-driven tool), having the real iOS chrome on hand means your mockups and flow diagrams read as authentic rather than invented.

It’s equally handy for portfolio case studies, client presentations, and app store screenshot compositions where stakeholders need to see a concept sitting inside a believable phone environment instead of a generic frame.

Working With the Screens

Because the kit is broken into full, distinct screens rather than one fused illustration, you can treat each one as a separate artboard to build from.

Duplicate the screen closest to what you need, then swap out the content layers: contact names, app icons, calculator labels, notification text.

Keep the surrounding chrome (status bar, carrier text, time, battery icon) untouched so the frame still reads as authentic iOS rather than a custom skin.

The Control Center panel is worth pulling out on its own. Its rounded dark cards and toggle icons make a great isolated element for tutorials, feature callouts, or annotated walkthroughs explaining a gesture or setting, without needing the full screen around it.

When you’re placing these screens into a larger composition, group them with a device frame or bezel if you have one, and keep the background neutral so the screen’s own gradients and icon colors stay the focal point.

Because the palette here leans on Apple’s signature blues, greens, and warm oranges, it pairs cleanly with minimal, white-space-heavy layouts. Avoid dropping these screens onto busy or heavily colored backgrounds, since the icon gradients already do a lot of visual work on their own.

For anyone documenting an app redesign, running a UX audit, or building a slide deck that references native iOS patterns, having this GUI on hand saves the time of redrawing status bars, keypads, and list views from scratch every time a new screen is needed.

Similar free resources