← Work

Interface Design on iPad



What does it mean to design on an iPad? On the desktop, design tools rely on using a mouse and keyboard to draw shapes that form a design on the screen. On the iPad, however, we can take advantage of the Apple Pencil to more naturally sketch out designs.

One such area, where Sketching is a fast way of designing is interface design.

This prototype imagines an interface design tool that allows users to draw wireframes that then result in hi-fidelity interactive UI Elements. A much faster way of designing interfaces on an iPad:




Progress

This summer I started building a proper design tool for iPad that uses this interaction model.
Here's a glimpse of that tool in time-lapse:


Drawing Rectangles

Simply drawing rectangles is one of the most frequent tasks for a designer, This is how the interaction models handle that:

Selecting SF Symbols

A simple way to select UI Symbols for the interface using SF Symbols.

Selecting Dynamic Type

A modern way of adding text labels to the UI. Instead of point sizes, by default the interface lets user select dynamic type classes that scale based on the user's accessibility needs:

Styling UI Controls

This example shows styling of a UI Switch control from iOS. Here you can change the thumb color and the "on-tint" color.