Svbtle

 

Svbtle

Design Details: Paper by Facebook

Paper by Facebook has been out for a day now and the reviews are, for the most part, quite divided. I haven’t been an avid Facebook user for some time, but the design and attention to detail on Paper is unmatched, and is worth sharing with other designers.

The Design Details for Twitter post I wrote yesterday received some great feedback, so I thought I’d quickly compile some of my favorite interactions in Paper - pardon the low-quality GIFs!

Follow me at @brian_lovin for tweets about design, startups and technology.

Get emailed with future Design Details posts: Subscribe by Email

1. View Pages and Groups - View Original Resolution

Notice the ‘hamburger’ menu flipping into an X, with the most subtle bouncing effect. I love the slight delay on the sliding animation as my pages and groups come into view.

1.gif

2. Closing a Popup - View Original Resolution

Just about every popup or menu in Paper can be closed by pulling up or down when there’s no more room to scroll. You can see this implemented on the publicity setting here when composing a new post.

2.gif

3. Glossy Headings - View Original Resolution

Just about every heading or title in Paper has this beautiful shine effect to it, which reminds me of iOS’s ‘Slide to Unlock’ text. Turns out that this shine doubles as a loading indicator.

3.gif

4. Closing Messages (or Friends, or Notifications) - View Original Resolution

Watch this one a few times and pay attention to everything going on. When you pull down, the background slides down just a tad, the arrow at the top of the message bubble stretches and ‘pops’, and everything bounces lightly back into place. Amazing.

4.gif

5. Background Loading - View Original Resolution

I noticed that as you’re opening a card to view a webpage, Paper starts to load things in before you’ve fully expanded the card. This beautiful little bit helps keep browsing fluid and fast.

5.gif

6. Closing a Web Page - View Original Resolution

Again, pay attention to the light bounces in different parts of this view as you flip a web page closed. Did you see that little sheen of light go across the top of the card as it closes? Stunning.

6.gif

7. Panorama Photos - View Original Resolution

This one was highlighted in Paper’s debut demo video, and has certainly gathered a lot of attention. I love the small scroll bar that shows your current position on the photo. Someone has already replicated this effect with HTML/CSS/JS - here’s the tutorial.

8-1.gif

8. Searching - View Original Resolution

No animation in Paper is jerky or unrefined. When I start to type out a search, notice the subtle fading, with a slight delay on each list item as they disappear into the background.

8.gif

9. Typography Matching - View Original Resolution

Notice the typographic changes on web cards, as Paper changes its own style to reflect those of the origin website.

9.gif

10. Peek - View Original Resolution

When you’re viewing content cards at full-screen, you can pull them up to reveal the hidden timeline in the background. Interestingly, you can’t keep pulling up to return to the timeline.

10.gif

11. Swipe to Close - View Original Resolution

Yep, you can even swipe left/right to close a news story, with the card folding neatly and bouncing back into place.

11.gif

12. Chat Heads - View Original Resolution

Chat Heads aren’t new to the Facebook ecosystem on iOS, but it’s still a delightful little interaction to see the person (or page’s) avatar slide into view with a familiar bounce.

12.gif

13. Delete a Draft - View Original Resolution

If you’re composing a post, you can pull down once to reveal the ‘Delete’ button. If you start pulling down again, we get this beautiful interaction that allows you to delete the draft by completing the ring.

I was surprised that you had to pull down twice to activate this interaction, rather than having it be one longer-pull. Perhaps in user-testing the designers found that it was too easy to accidentally delete a draft with one pull.

13.gif

14. Page History - View Original Resolution

I still haven’t figured out the utility of this detail, but swiping left/right when viewing a page or profile lets you navigate back in time through the timeline of updates.

17-1.gif

15. Viewing/Dismissing Photos - View Original Resolution

We’re used to seeing this interaction on the main Facebook app, but it still remains fun to play with. Flinging pictures around the page toggles them open/closed. I love how easy, and fun, Paper makes it to interact with photos.

15.gif

16. Toggles - View Original Resolution

This is one design detail in Paper that had me scratching my head. Which one is off? Which one is on? iOS toggles are turned ‘On’ when moved to the right, but for some reason this doesn’t feel obvious on Paper.

16.gif

17. Add/Remove Photos in Composer - View Original Resolution

I love everything about this view. When adding or removing a photo from the composer, we are met with all sorts of subtle bouncing animations, paired with the text resizing/relocating.

17.gif

18. Manage Categories - View Original Resolution

Tap + hold on the large photo that covers the top-half of the screen to open the customize view. I love how the cards slide around, just ready to be moved, rearranged, added and deleted.

10-1.gif

19. Search Details - View Original Resolution - via @ScottGoodson

Pull the search results side-to-side to see a beautiful rubber-banding of the list items.

10-1.gif

20. Expanding Likes - View Original Resolution - via @ScottGoodson

Click on the “more likes” box on a popular post to see people’s names fly out into a long list.

20.gif

21. Fading Title - View Original Resolution - via @klavr

This one is super slick. Watch the category title fade out as it gets closer to the icons in the upper right corner. And then right as the category title hits the right side of the screen, it fades smoothly back in.

3.gif

22. Status Bar Reveal - View Original Resolution - via @lewisking

I love the way that the cards slowly peek out from behind the front card. Even the status bar fades in and out of view, another small but beautifully executed detail.

4.gif

23. The Like Fireworks - View Original Resolution

Tapping the ‘like’ button on a post results in a colorful explosion of blue fireworks, coupled with the signature Paper bouncing effect. I love this one!

23.gif

Did I miss any? Let me know on Twitter!

If you enjoyed this list of design details, follow me at @brian_lovin for more posts in the future!

Browse More Design Details:

 
1,140
Kudos
 
1,140
Kudos