Prototyping For Days

In the recent year or so (since joining Mossio) we’ve seen a generous amount of awesome and helpful prototype tools emerge from the demand of our frequent evolving industry.

This article isn’t about comparing ALL of these cool and different tools, it’s simply comparing the 2 apps that WE use at Mossio. They also seem to be easiest to learn and offer a one-sided service which is prototyping only (not bundled with wireframing, mockups and other features).

My goal is to simply shine light on both these apps based on what I’ve experienced and hopefully teach you something new :)

Types of Prototypes

There are 3 main categories I would say that most, if not all, prototyping tools would fall under:

1. Flat Screen-To-Screen (Invision, Marvel, Flinto, Justinmind) — This is great if you have a whole website that you’ve designed or wireframed and want to create a clickable page to page prototype. It’s normally very basic. inVision offers Overlays which gives you more control over certain elements layers over your screen.
2. Layered (Principle, Atomic, AfterEffects, Pixate, Proto.io) — You would use these apps if you’d like a little more fidelity in your prototype. Normally if you’d like to show more detail on a transition or some kind of movement with multiple layers not just single pages.
3. Coded (Framer.js, Origami, etc) — this one is a bit out of my league. But this is basically creating prototypes with actual code. This is the closest you’d get to the FINAL product and I believe you can even reuse some of the code. I’ve fiddled around with framer and origami but there is something about code that intimidates the little designer in me.

Principle and Atomic both fall under category #2.

Shall We Begin?

Both the Principle App and Atomic App do their job really well. Of course there are pros and cons on both ends but at the end of the day, its what you need and sometime just a user preference. Here is where they both shine:

1. Auto Animate — When your done creating ScreenA, you duplicate it, call it Screen B. Whatever you change on Screen B will automatically animate then you fine-tune the timing, easing and layer styles (opacity, size, rotations, etc)
2. Small Learning Curve — Both of these apps are relatively easy to get the hang of. I would start off with Atomic if you’re very new to this but Principle has the familiar feeling of Sketch / Mac apps. The drivers section in Principle is more challenging to wrap your mind around so don’t feel like you have to learn that right away.
3. Easing, Timing & Style Control — Very important and both do this well
4. Sketch Shortcut Keys — I’m a Shortcut (hotkey) MASTER, I love learning shortcuts to speed up my workflow. Amazingly, both these apps use the same shortcut keys as you would expect coming from sketch.

Principle App

Principle is an amazing desktop app that has a familiar sketch app interface which makes it easy to learn and navigate. Overall it feels fast, smooth and independent (you don’t need to rely on the internet).

Their Official Site

Strong Features

1. Native App — Installed locally makes it smoother and more reliable.
2. Sketch Import — Its as easy as that… import and start prototyping.
3. Record / Export — Once you’ve completed your prototype you can press the record button and start clicking and swiping. Once you’re done you can export as a .GIF or .MOV
4. Drivers — This is a BIG one! You can control animations INSIDE a page (ex: when scrolling up and down) not only when transitioning from page to page.
5. Mobile Preview — You can open your prototype live on your phone and start experiencing how it feels. Changes show instantly.
6. Pricing — Principle’s pricing wins in terms of long term, $99 vs $25/mo with atomic. In 4 months Principle will pay itself off.
7. Community — Seems like there is larger Principle community where people share their work and ask questions (Facebook, etc) than Atomic, but I haven’t really looked for it.

Things It Lacks

1. Share Prototype via web — Most of my projects are WEB related, there is currently no way to share a clickable prototype via a link. Atomic does this very well.
2. Frame-By-Frame Animator Preview — I totally just made that phase up, but I’d love to be able to move the animation left/right with my cursor to see how the animation plays out. Currently I can only see the animation within the preview window in real time (think AfterEffects, you can move to any frame)

Built with Principle by me:

I created a product selector for Bevs. It was a simple concept and it took about an hour to build.

Source Link

During the redesign of Mossio, I had the opportunity to play around with some transition ideas from the home page to the case study page.

Source Link

Using Peter Deltondo’s original design, I had the opportunity to take it a step further and visualize how the animation would work. Took about 3hrs (first project)

Source Link

Atomic App

The Atomic App is dear to my heart. The logo and branding is really what drew me in. I started using it while it was in BETA and they’ve progressed greatly since then! Very simple to use, cloud based, web app and share you interactive prototype with a share link!

Their Official Site

Strong Features

1. Share & Feedback — Easily share your clickable prototype with anyone by generating a simple link. Users can then comment on each screen to leave specific feedback.
2. Cloud Based — You build your prototype inside the webapp. Everything is in the cloud, access anytime and anywhere (requires internet).
3. Animation Frame-By-Frame — Creating animations from screen to screen seems to be way easier in Atomic. You see exactly what the animation will looks like, no need for guessing. Also the easing seems easier to work with.
4. Custom Fonts — This is a fairly new feature which allows you to your own fonts to use in your prototype. This is really good for a web app but with Principle you already have access to your fonts locally.
5. History Slider — I don’t use this feature often but its good to know that its there. I can quickly slide back into previous versions if I want to go back or simply see how the design evolved.
6. Project Management — Its nice to see all your projects and sub-projects super organized visually, easily find anything.
7. Customer Service— It seems that Atomic is more socially active and quick response time when I’m asking a simple question. They actually duplicated my project to help me diagnose an issue!
8. Constant Updates — One thing I noticed is that there are constant updates and refinements to the app. They are constantly improving and innovating. I’ve suggested a few features which they’ve already implemented!!!

Things It Lacks

1. Native App — To me, having a native app has its pros. It just feels smoother overall and less buggy. Both would be awesome!
2. Export / Record — This seems pretty vital as well… currently I have to record my screen with a third party tool to showcase my prototype. However the fact that it was a share link is good when I need to quickly share an idea!
3. No Sketch Import — This would totally save some time… I don’t feel like its super duper necessary, since it’s fairly quick to copy and paste things in. Either way would be neat to have.
   UPDATE: Sketch Import Coming VERY Soon
4. No Drivers — To portray a simple idea, you don’t need to get into the details… so maybe this wouldn’t be necessary and might just clutter the clean direction

Built with Atomic by me:

This was an earlier concept of one of the new redesigns of Mossio’s website. I explored the menu and page transitions. This took about 2 hrs to build.

Source Link

Side menu navigation transition for a schedule iOS app. This took about 30min to build.

Source Link

I created a product selector for Bevs. It was a simple concept and it took about an hour to build.

Source Link

Final Statements

So in conclusion both of these apps work and do the job. I would say CURRENTLY Atomic is more for the quick rapid prototyping / sharing idea via link, but if you want something with some extra fidelity and polish and interacting on it on mobile, you should go with Principle.

Let me know if you guys have any questions or think I might have missed some important elements!

Thanks for reading and hope you enjoy your week.

Mossio / Check out our work