If you’re a UI designer wondering how your app design will fit into Apple’s new operating system arriving this fall, we’ve got a treat for you: A retina-friendly Yosemite GUI kit to mockup your app. Recently, we recreated the new Android L interface, so today let’s talk about desktop!
Reproducing Yosemite’s UI from Scratch
It’s easy to mockup interactive, animated interfaces in Tumult Hype 2 and display them on virtually any screen. At WWDC ‘14, Apple introduced a completely revamped version of OS X: Yosemite. Prototyping an application without considering its surrounding UI is like designing a car without thinking about the road.
Below are some of the new aspects of the Yosemite design incorporated in this GUI kit.
Updated Native Fonts
Helvetica Neue replaces Lucida Grande as the default font in OS X 10.10. You can easily select Helvetica Neue from the Text Inspector’s font list. Using the correct font and Hype’s intuitive positioning controls gives you full control over how text appears in your mockups:
Using Flexible Layout we can easily recreate the multi resolution effect as in works in the real OS X. This gives you the power to create a single document that expands and contracts to look great on MacBook Airs and a 27” iMacs. You can see this in action on the ‘Finder’ scene.
Animating the UI
Once the UI is in place, let’s recreate some animations! In the new messages app we recreated the little bubble that appears when receiving a message. It is all made with native shapes; no images here:
Transparency & Shadows
The core element of the new OS X visual language is what Apple calls “vibrancy”: the blurry effects. Tumult Hype allows you to blur images, such as the wallpaper, by following these steps:
- First, duplicate the image you will be blurring.
- Create a group with the duplicated image in it. Resize this group as you want; then set the ‘Content Overflow’ setting to “Hidden” in the Metrics Inspector. Everything outside of the group edges will be cropped.
- Next, add the blur effect to the image inside of the group.
Here’s a quick video that demonstrates the technique:
Simulate the shadow behind windows by adjusting the ‘Shadow’ property in the Element inspector:
We hope you have fun with this kit! And don’t forget, since your interactive mockups work in any browser, you can even share your designs with friends running Windows.