Svbtle

 

Svbtle

Design Details: Secret for iOS

Secret is the latest app making waves on the web, already being coined as Silicon Valley’s latest obsession.

While I don’t see myself as a user for this type of app, I thought that this would make for another excellent Design Details post. Secret does several things quite well, making sure to keep the interface and interactions super lightweight and wonderfully minimal.

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

Get emailed with future Design Details posts: Subscribe by Email

Here are a few of my favorites design details within Secret for iOS:

1. Viewing a Secret - View Original Resolution

Tapping a secret to view the comments section has a wonderful little animation - the card slides to the top of the screen, gently pushing the status bar out of sight.

1.gif

2. Scrolling on a Secret - View Original Resolution

When viewing a secret with just a couple comments, we get a nice preview of what happens when you start to scroll. The image starts to fade, the text blurs, and the ‘rubberband’ tightens up, giving the user an almost physical resistance to the scroll.

2.gif

3. The Full Scroll - View Original Resolution

Here’s the same interaction as above, but this time we get to see the full effect. As we scroll through the comments, a tiny piece of the secret is blurred out but remains at the top of the screen - a subtle reminder of what content the user is looking at.

3.gif

4. The Composer - Colors - View Original Resolution

I really like what Secret has done with the composer. The traditional approach here would have been to add toggles or dropdowns for users to select background colors or textures. Secret does away with this completely, making the background color change with a horizontal swish of the finger.

4.gif

5. The Composer - Textures - View Original Resolution

Swiping up and down within the composer lets users toggle the texture for their post. Again, I love how this visual preview is so tactile, doing away with traditional sliders or toggles.

5.gif

6. Slide to Blur - View Original Resolution

I thought that this detail was quite clever, and something that could have easily been overlooked. If you upload a photo for your post’s background, sliding horizontally with your finger allows you to adjust the blur of the photo. This is a nice way to add subtle, artistic touches to your posts.

6.gif

7. Slide to Saturate - View Original Resolution

Along the same lines, sliding vertically within the photo view allows you to quickly adjust the saturation of your photo. Why don’t more photo editing apps have these little details?

7.gif

8. Hide and Report - View Original Resolution

When you first use Secret, the app guides you through many different interactions and walks you through all the different buttons and their meanings. Tapping on the ellipsis, next to the comments and hearts, brings up a window to hide or report that specific post.

I found that this same window can be activated by swiping horizontally along the post, rather than tapping the ellipsis. I love how the post itself is blurred out in the process, helping you to focus on the current dialog.

8.gif

That’s all for now! If I missed any details, don’t hesitate to tweet at me.

Browse More Design Details:

 
592
Kudos
 
592
Kudos