After seeing the latest Apple WWDC with the introduction of the new design system, it was surprising to see how their redesigned ‘Liquid Glass’ interface shown in the live stream was exactly consistent with their developer build. It wasn’t just a screen recorder thing either; the presentation demonstrated individual components and multiple screens with morphing and other custom animations that couldn’t reasonably be simulated in an app. On the other hand, animating the interface with normal video editing software would be equally impractical when replicating the behaviour of the actual software for displaying example cases of apps.
Is it just a thing of ensuring impeccable QA in producing renders like this or do they have some specialised software for these purposes?
I’ve presented a few WWDC sessions including two video sessions, though nothing as huge as the keynote or platform state of the union. I can answer most questions you have about the process.
The screens shown in WWDC sessions are usually screen captures from real devices. Development of the slide decks starts with a template deck that has the styles, fonts, and color themes for that year’s sessions. It includes slides that look like the latest devices, with precise rectangles the right size where screen captures will fit. As people develop their sessions they use these slides as placeholders for screenshots, animations and videos.
During development of the OSes the code branches for what will become the first developer seed. Before WWDC, one of the builds of this branch gets marked as ready for final screenshots/videos. The idea is that the UI is close enough to what will ship in the first developer seed that the OS and sessions will match.
Once that build is marked, the presenters take their screenshots and those get incorporated into the slides.
You wrote “It wasn’t just a screen recorder thing”. What makes you say that?
You asked about specialized software. Apple OS engineers have to use what are called “internal variants” of the OSes during development. These have special controls for all sorts of things. One fun thing to look for in WWDC sessions: the status bar almost always has the same details, with the same time, battery level, Wi-Fi signal strength, etc. These are real screenshots, but the people taking the videos used special overrides in the internal variants to force the status bar to show those values rather than the actual values. That makes things consistent. I think it avoids weird things like viewers being distracted by a demo device with a low battery.
Part of the answer is that the UI is “designed first” and coded to follow the design. If changes are seen as necessary when coding the UI, the design is updated first then the code made to follow.
So any UI behavior will already have a lot of accurate design and animation resources for them to work with.
UI designs are rarely exactly the same as the final product. There’s many tweaks that occur after the design is implemented. Sometimes doing exactly what the design requiress is too difficult or requires too many resources.
Apple makes photo realistic renders of all of its products to use for commercials and reveal trailers. They have for a long time now.
Everything Apple does, hardware and software, is visually realized in a computer first. They take those concepts and CAD drawings and polish them into fully realized CG models that they can do anything with.
Then you get footage of the new iPhone flying through a fountain of liquid metal with realistic collision and particle effects. It would be harder to film a real phone and composite CG into it in post.