The backdrop-filter property provides for effects like blurring or color shifting the area behind an element, which can then be seen through that element by adjusting the element’s transparency/opacity.
Have you seen Lovebird‘s top navigation? You will see blur effect to the area behind it. It’s cool right? The blur effect is introduced by iOS 7 and OS X Yosemite. Even Sketch also put it into its style panel.
Anyway, backdrop-filer has some options to manipulate the area behind the element. It’s not only blur option but also you can use brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related backdrop-filter on Codepen.
Have you heard about Peach? Peach is new social app created by Vine Co-founder Dom Hofmann.
The app is a sort of a mix between Twitter and Slack. After you create an account and a handle and add some friends, you view a stream of updates from the people you’re connected with. From the home screen updates look a bit like tweets or status updates, though tapping into a friend’s post reveals much more.
Chris Messina – Developer Experience Lead at Uber said, “Magic Words are the interesting differentiator here“. I think Magic Words is new cool UX, we don’t need use more icons to add something in your status. Peach just use 2 icons (actually one – camera icon, the other one is button “Post”) in your profile page. But you can add 20 actions with Magic Words, pretty cool, huh?
Ok, let me make a list What I Love from Peach;
Yes, Magic Words.
Un-timeline view. Peach home is doesn’t like the other social media like Twitter or Facebook with timeline view. It just shows list of my friend with their piece (not full) of their last update. It’s less distraction, we don’t be forced to read everything that everyone did with their Peach.
Peach is new social app. I love it because I can start over to choose anyone who will be my friend on Peach :peace
As we know, many UX designers suggest to not use hamburger menu anymore. The main problem is it lacks of information. So I try to use another solutions, make the menu clearer. How? I use the word “Menu” or/and add arrow icon beside it. More clearer, huh? Not really, people tend to not click it because they don’t see a reason to click it.
Some people argue that “we just have to wait for users to learn the new navigation convention,” but hopefully you can see how the principle of information scent invalidates that argument. Good design doesn’t require years of waiting for the general public to understand and start using a interface convention.
Marco: Uh yeah, so, final thoughts. I guess for me, it’s kind of acknowledging that the space of front-end development is kind of exploding right now, it’s a really exciting time to kind of be in this space. And I think people should kind of embrace how dynamic it is and how in demand it is, and just really kind of find where you fit, right? There’s really no rules for this—if there’s nothing else you got out of this, there’s no rules for this. Like, the thing that you like to do in the front-end is valuable. Learn it and then go find the people who are going to pay you money to do that, because this is the time.