1. Use ContextKit to Add Realism to Your Origami Prototype

    5:21FreeDone
  2. 2

    Set Up Custom Fonts in Origami Studio

    1:53FreeDone
  3. 3

    Create Scatter Designs with the Random Patch in Origami

    7:06ProsDone
  4. 4

    Animate a Splash Screen in Origami with Repeating Animation

    6:38ProsDone
  5. 5

    Build Screen Transitions in Origami Studio

    6:31ProsDone
  6. 6

    Build a Card UI with Components

    9:30ProsDone
  7. 7

    Add Missing Patch Options

    1:29ProsDone

Use ContextKit to Add Realism to Your Origami Prototype

Published by Chris Slowik

Episode Notes

Extra tips from the author

I recently read an article by Danny White that discussed the idea of giving your audience context when you present a prototype. Giving an app prototype context helps to put your audience in the mindset of a user of the app. Danny says in his post,

[The] more exposure (and feedback) a person has around the core app experience, the better.

I love this idea! The post inspired me to give it a try, and I think it's a great way to start building this full chat app prototype. Let's strive for realism out of the gate!

Open Terminal, navigate to the directory you want to save ContextKit in. Clone the git repo:
git clone git@github.com:dannyalright/contextkit.git

In Finder, open the downloaded file in Origami. You'll want to click the Install button and make sure you do it from the current location. Now in the future you can make sure the components are up-to-date by pulling any changes from the repo: git pull

Installing an Origami System enables you to use the included components in your prototypes. Make a new project in Origami and click the + to add component and search for Springboard App. You'll see that in the list along with the other included components, if you search for them. Those are the Notification template and Deep Link.

The default Springboard App component gives a few options to play with - set those:

  • app tint: 157BF8
  • app name: Msgr
  • app icon/wallpaper: export from Sketch

If you change the background image, you'll notice that the blur no longer matches. The blur is actually just a gradient and not a live effect. It's easy to edit - just right-click on the Springboard App component and select "Enter Component". Change the blur layer gradient stops to match a light background blur effect.

Click on SpringBoard App and select the app launched trigger. Add a text layer, and call it Msgr. Make sure to drag it under the Springboard App component as a child. It behaves like a Screen component, which we'll also be using lots of later on! Set a chain of patches to animate based on the app launching.

Now you've built the context upon which the rest of this realistic app prototype can be built! In the next episode we'll take care of some business and get the font we're using loaded onto a test device.

Additional Resources

ContextKit for Origami Studio (Github)
Nunito Sans
Sparks UI Kit (design inspiration)

Episode Topics: