Blendle Trending design details

Published in

On Blendle

4 min readMar 26, 2015

Eight months ago I joined Blendle — a startup which aims to be the iTunes of journalism. I was really looking forward to be able to work on a project where there’s time for incredible amount of details. In Blendle Trending you’ll find a curated selection of the 10–15 best pieces every day. You only pay for the articles you actually read. And if you don’t like the article you can get a refund.

1. Opening the app

Opening the app for the first time we build up the entire screen.

2. Floating labels

Placeholders are great. But we wanted to make sure it is always clear what field you’re editing and still keep it clean.

3. Buttons turning into loaders

We want to give users direct feedback on anything they do. So whenever they press a button — that needs to load something — we turn the button into a loader.

4. Going to the next article

So many (subtle) animations are happening here. The title is moving up, profile pictures are moving and taking up more space, every user that posted a comment will get a nice little bouncy ‘quote’-icon on top of their picture and everything but the menu button and the cover photo is fading. The combination of these animations make the app feel alive and fun.

5. The menu button

As we sometimes have articles without a photo, and therefore a white background, we need to able change the color of the menu icon as you swipe through to app. Changing the color like this won’t make you even notice the color did change and every little pixel of the icon will always be visible. You can imagine a crossfade will really draw a lot of attention when you’re swiping through the app t0o enthusiastic.

6. Pull-to-Buy

We wanted to make it really easy to buy an article. People should feel a barrier yet not be able to buy an article without noticing. We basically used the Pull-to-Refresh gesture upside down. The filling circle indicates your drag progres, and eventually will buy you the article.

And a slomo

7. Share an article

Just a nifty little detail after you’ve succesfully shared an article.

8. Write a recommendation

As you press ‘Recommend’ you can add a recommendation to it. Notice how how your comment seem to dissappear into the heart.

9. Read a recommendation

Tapping a users profile picture will let you read their comment or recommendation about the article. Notice how he angle of the triangle is getting steeper.