Schedule Screen

This design is our Design of the Week for April 15th, 2022, and a companion to Issue 27 of UI Designer Weekly. Check out the latest issue on the DetailsPro blog!

This design is an exciting example of a schedule screen with a timeline-style area. With a layout system that starts with a vertical stack for the whole thing, then adds in horizontal stacks that are each row in the timeline (each one has a circle SF Symbol with a thin rectangle making up the continuous line on the left), this design seeks to adapt what a timeline would look like on an iPhone, which would most likely work best as a vertical timeline.

Schedule Screen imagines the initial screen of a planning app for a music festival in town, with awesome features like adding your own personal events to the timeline to see your whole day’s plans. Check out the usage of vertical stacks within each row, like the piece-by-piece continuous line that gets put together on the left by each row. Also, check out how using the alignment “First Text Baseline” helps keep the timelines perfectly aligned at the top. This works great because the circles are really SF Symbols so they have smart text alignment built in. We added in the overboard shadows and the bigger-than-necessary corner radius on the images and kept it in because we liked it 😉

Try changing this design into something entirely new, or experiment with the hero area elements to see what other looks you can find. And see you next week for the next issue of UI Designer Weekly!