Thank you for enjoying Designers.how!
Please enter your email address to unlock the rest of this episode.
Don't want to see this? Become a Designers.how member now.
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 email@example.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:
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:
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.