New Slick Prototyping Tool, Adobe Experience Design (XD)

I can say that now is the age of interactive prototyping. Designers tend to create prototype with animation instead of static image. If you search prototype on Dribbble, you’ll see that most designers posted GIF images. I myself usually use inVision or Marvel App to create interactive prototype with simple animation.

Have you heard about Project Comet? Initially demoed at Adobe MAX in October 2015, it got a new identity as Adobe Experience Design or Adobe XD, or just XD, for short. Creating visual design, prototyping, wireframing, testing, and demoing are all possible using XD.

So let me share you my quick glance review about Adobe XD.

Continue reading “New Slick Prototyping Tool, Adobe Experience Design (XD)”

Backdrop-filter, the New Way to Create Blur Background

Lovebird's top navigation
Lovebird’s top navigation

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.

developer.mozilla.org

Have you seen Lovebird‘s top navigation? You will see blur effect applied 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.

zV4qfDNPAq
Sketch – background blur

We can create that effect by using just 3-4 lines CSS, or even 1 line CSS (if we use mixins). Webkit introduced backdrop-filter in second semester of 2015. Unfortunately, up until now, the only browsers that support backdrop-filter are Safari 9+ and iOS 9.2+ (see the table). We have to wait until CSS Working Group finish working on it. Or, you can do it with Javascript hack. You choose. 🙂

Anyway, backdrop-filter has some options to manipulate the area behind the element. It’s not only blur option, you can also play around with brightness, contrast, drop-shadow, grayscale, hue-rotate, invert, opacity, sephia and saturate. Find some examples related with backdrop-filter on Codepen.

[Free] Lovebird Wedding Template

https://creativemarket.com/lieurco/483940-Lovebird-One-Page-Wedding-HTMLCSS
Lovebird – HTML/CSS Wedding Template on Creative Market

We have recently created Lovebird—a one-page HTML/CSS template for wedding invitation. This is our first product that we currently sell on Creative Market. We were kind of surprised (and happy too) because only three days after we launched the product, Creative Market staff chose Lovebird to become a part of Handpicked Product for HTML/CSS Themes. After that, we don’t have to wait too long to became a part of Popular Product for HTML/CSS Themes on Creative Market. Alhamdulillah!

To celebrate this happiness, we share Lovebird design mock-up in Adobe Illustrator (AI) format for FREE!

Download Now

PS: Let us know if the download link doesn’t work by send us an email.