iOS Lockscreen

Pixate is a new prototyping tool that involves no code on the user's end making it very easy to use. I wasn't able to get in on the beta release so I only got to start playing with it a couple of weeks ago but within a few days I was able to go through and create some powerful things. Over a weekend I recreated the iOS 8 lockscreen complete with animating buttons, the emergency call keypad with slideshow-style animation for the language changes, the Medical ID page, and even the notification center and control center with working brightness adjuster.

It was a big project but a very fun challenge to figure out. Before you get started you'll neeed to download the assets package. Inside of this folder is the PSD used to create each asset so that you can update anything should you want to and all of the assets. After you've set up your project in Pixate just drag and drop all of the assets from the asset folder into Pixate and you're ready to go! If there is something that I didn't explain well enough or you have trouble with any portion of the project feel free to reach out to me. Enjoy!

Download assets

Part 2 - Emergency Call Screen

Part 3 - Medical ID Screen

Part 4 - Notification Center

Part 5 - Control Center

Similar tutorials
  • Subsequential sticky headers

    This tutorial teaches you how to create subsequential sticky headers in Pixate. Subsequential headers are common within contact, messaging, photo, calendar, ...

  • 3D Force Touch peek & pop

    In this tutorial we're rebuilding Apple's new Force Touch "peek and pop" interaction in Pixate. We'll cover a lot of timed animations and reactions as ...

  • Top comments
    1. Oleksandr Pronskyi 3 years ago

      Thanks! You're doing a great job with creating helpful step-by-step tutorials. Hope pixate team will add gifs.Look forward for new videos. Thumbs up!

    2. Dom Murphy 3 years ago

      Re: the bug with the swipe value not updating, you can sort of get round that by adding an additional Fade interaction with it set to Drag Release. You then test the position and if it's over the threshold set via the main panel complete the Fade transition. It's extra work, but it does work. Great tutorial BTW.