🎉 OMG,
@craftdocsapp
is the Mac App of the Year! 😱😍
To be honest, it’s pretty hard to find words to describe this feeling. So proud for the whole team and I feel incredibly lucky to work with them on a daily basis 🙌
#AppStoreAwards
Sticker Wall – Creating the holo effect in SwiftUI ✨
The holo effect is a linear gradient layer, which changes its offset values depending on the relative pitch position and its rotation depending on the relative roll position of the iPhone.
Here are the key takeaways, which I
Sticker Wall – Playing with SwiftUI for the first time trying to recreate
@Apple
iMessage holo stickers 😍
Huge thank you for
@philipcdavis
for his incredible course,
@jmtrivedi
and
@alexwidua
for the open source projects and
@Gavmn
for the inspiring prototypes! 🙌🔥
Sticker Wall – Working with combined gestures in SwiftUI ✨
Using gestures is so much fun not just for the core parts of the interface, but also as a way to quickly add config options to try out different variations without building a dedicated UI for it. 🤩
Here are the key
Sticker Wall – Mesh Transform using Metal Shader 😍
One of my favorite parts of
@Apple
iMessage Sticker interaction is actually the Mesh Transform effect and how you "peel" stickers on and off from the surface. It's so satisfying. 💯
Thanks to
@jmtrivedi
and
@alexwidua
's code,
🎉OMG,
@craftdocsapp
is an
@Apple
Design Award Finalist 😱😍
So honored to be included in such an amazing group of designers and developers and couldn't be prouder to our team 🙌
#WWDC21
🎁Unboxing the App of the Year Award along with a signature from
@tim_cook
😱
I'll let you guess the weight of the award in the thread 🧵 (hint: it's more than you think it is) 😉
🎉I'm so excited to share that I've decided to focus all my attention on building
@craftdocsapp
and continue working on it full-time with the most talented team I've ever worked with. 🥳
There is this magical moment when you try out your design and prototype for the first time. 😱 😍
👉Step 1: Download Studio:
👉Step 2: Grab source file:
👉Step 3: Have fun ✨
Made with
@InVisionApp
#InVisionStudio
Always test your designs on actual devices 👌🔥
👉Step 1: Download Studio:
👉Step 2: Grab source file:
👉Step 3: Scan QR code and have fun playing with your prototype 🙌
Made with
@InVisionApp
#InVisionStudio
🎉 Today is The Day!
@craftdocsapp
is available in the App Store! 🥳
After 2.5 years, 1000+ design artboards and 10,320 commits later the app is available in the App Store! 🚀
Ask us anything over on
@ProductHunt
👉
🎁
🎉 - craft amazing documents in seconds 🎉
I'm so excited to start sharing my side project I've been working on over the last couple of months 🔥
🏀
@dribbble
shot:
🎁Sign up for beta:
@craftdocsapp
The new
@designcodeio
site is so amazing! 😍
I still remember the day when I've found the very first Design+Code site and how it changed my whole view on designing and creating apps. 🤯
Huge congrats to
@MengTo
and the team and can't wait to see all the amazing new updates 🔥
Finder for iPad Concept Part 1 is finally live on
@dribbble
🎉
🏀Dribbble shot:
👉Prototype:
🎁Source file:
Made in
@InVisionApp
#InVisionStudio
Hope one day this will become a reality ✌️
OMG 🎉I never thought I'll be able to create a video like this within 10 minutes with just clicking a couple of buttons! 😱
@mortenjust
is a true magician! 👏
Video created in Design Camera
App design created in
@InVisionApp
Studio
For more:
First try of iOS system level dark mode interactive prototype ✨😍
👉Step 1: Download Studio:
👉Step 2: Grab source file:
👉Step 3: Turn off the lights 🌙
Made with
@InVisionApp
#InVisionStudio
Finder for iPad Concept Part 2 is live on
@dribbble
🎉
🏀Dribbble shot:
👉Prototype:
🎁Source file:
Made in
@InVisionApp
#InVisionStudio
It would be so useful to have this in real life 😍✌️
New multitasking on the iPad Pro Concept 🔥
I'm so excited about sharing this and hear what you think 🙌
🏀
@dribbble
shot:
👉Prototype:
🎁Source file:
Made in
@InVisionApp
#InVisionStudio
StickerWall – SwiftUI project Source Code & Bonus 🎁
Many of you has been asking for the SwiftUI project source code over the last couple of weeks, so I’ve cleaned up the code files as much as possible and uploaded everything to
@lmsqueezy
🎉
One of the best tips to improve the animations in your prototypes 🔥👇
Try to use ease-out instead of ease both or ease-in whenever you're animating new elements into your screen from opacity 0 to opacity 1.
See video for comparison 👇
Created in
@InVisionApp
#InVisionStudio
Probably one of the nicest animated
@Apple
website, no one knows about 👇
All the animations are built with code and images, not a single video is in there 😱 👌
New StickerWall app icon created in
@sketch
✨
It's been so long since I've practiced creating app icons 💎
Updated the
@lmsqueezy
for everyone, so you should be able to grab the new icon from the link below 👇
OMG, I just discovered
@InVisionApp
Studio now has the option the place the animation timeline on the bottom of the screen as I (and probably a lot of others) suggested during the feedback session. And its even resizable! 😱💯
These guys aren't joking with feedbacks! 👏
New Breathe app for iOS Concept published! 🎉
Play with the interactive
@InVisionApp
Studio prototype and download the source file from the post description! 🙌
👉
@dribbble
shot:
I got a lot of requests for some behind the scenes how I created my first video with Design Camera by
@mortenjust
. So here it is! 🙌👊
Turn on the sound for full experience 🔥 🤘
#uidesign
#design
The new React for Designers course by
@mengto
is my dream course since I started learning front-end dev as a designer!
I wish a similar course would have existed back in the days. Everything is in one place for designers, this is just pure gold! ✨
🎉Play with the brand new Cards in
@craftdocsapp
!✨
It’s been so much fun working on these new effects like Booklet, Sticky, Emoji Cloud and more 😍
Make your documents stand out! 🎉
It has been such an absolute pleasure working with
@Gavmn
on the new
@craftdocsapp
icons 😍
I couldn't be more excited about the next update coming soon 💯
Creating and working on these micro-interactions in
@craftdocsapp
Tables was such an amazing journey 😍
Now, I can finally manage all my favorite coffee brands in Craft 🎉
🥳 New
@dribbble
post is live! 🚀
Showing a complete flow of organizing, styling and sharing a note via a web link in normal, real-time speed without cuts in 24 seconds was a nice challenge in
@craftdocsapp
😍
🏀
@dribbble
shot:
🎁
SF Symbols by
@Apple
is definitely changed the way I work with icons during the last couple of days. Not worrying about alignments and weights feels magical 🎉✨
Have you ever noticed this little detail when you're adding a card to your doc in the Craft iOS app?
The card previews tilt and move in 3D space as you move your phone. 👀
Do you have another favorite design detail in Craft?
The "sparkle" layer ✨
Probably the most important layer in creating a compelling holo effect with the following details:
- changes its opacity value between 0-70% depending on the device relative pitch position
- uses Plus Lighter blending mode so it adapts more to its
✨In case you're a designer and you’d like to work with me designing the next phase of
@craftdocsapp
, it’s an amazing time to join the team and take Craft to the next level!
You can apply here or just send me a DM with your portfolio 🙌
I'm so excited to share that I have joined the amazing
@InVisionApp
team as a Product Designer to help designers, product managers and engineers collaborate better together! 🎉
You can read a lot more about this here:
#invision
Here is a screen recording with even more details ✨
Summary:
- Holo effect with additional white sparkle layer
- reacting to pitch/roll changes
- resetting motion values when the device rests for more than 2 seconds with minimal motion
- keeping battery and performance in mind
🎉Turn anything into a Confetti Fidget in
@framer
✨Play with it 👇
It's so incredible how capable
@framer
is, also huge shoutout for
@learnframer
and
@benjaminnathan
for all the resources! 🔥
Built on top of the amazing Canvas Confetti library 💯
New design case study published about my Breathe app for iOS Concept! 🎉
This was one of my design concepts, which was created entirely inside
@InVisionApp
Studio including all the animations.
You can even download the source files! 🙌
So happy to see my work being featured at the top of the iPad subreddit and so sad about not being credited at all. 😢
This is the 3rd time in a couple of weeks when my work went viral on Twitter or Reddit without any mention and credit in the original source. 🤦🏻♂️
The Finder for iPad Concept video is live! 🎉🔥
It still amazes me what's possible to create with
@InVisionApp
#InVisionStudio
Also don't forget to check out the
@YouTube
description for some additional bonuses 🎁
The new
@dribbble
looks amazing 😍🔥
So interesting to not being able to see the follower and like numbers immediately on a profile 🤔
Also social links and bio are a lot more hidden now.
The only things I miss are the grid view options and maybe dark mode ✨
#dribbble
Collaboration in
@craftdocsapp
is here 🎉
It’s such an exciting day! Collaboration, commenting, team activity and document activity are finally live 🔥
I’m using this for a couple months and it’s pretty incredible 😍
Open beta 👇
Freebie time! Download all my
@InVision
Studio source files! 🎉
In these source files you'll see examples for page transitions, swiping, secondary triggers, animating masked elements and a ton more 🔥
👉Grab the source files from here:
New InVision Studio interaction prototype published! 🎉
In this prototype I focused on the implementation of different parallax effects during card scrolls as well as the swipe & drag interactions. :)
@InVisionApp
@usemuzli
#design
#uidesign
#invision
This birthday animation on the Apple Watch still looks awesome 👌🎈
I love these simple and small touches in products that we use on a daily basis. Small details, but still means a lot. ✨
So this is how having superpowers really feel like 🤯
Inline unit conversions including time zones (which is definitely a game changer nowadays) and even live updating currencies 😱
Give it a try here 👉
@craftdocsapp
Reading Experience Filters Concept created in InVision Studio is live! 🎉
In this concept I focused on what if we could change the typography reading experience just like Instagram filters? 👇
@InVisionApp
@usemuzli
#uidesign
#invision
#design
I've been pushing card based interfaces for a while now in all my mobile based projects. 🤓
Thanks
@Apple
for helping me with this approach on a system level in
#iOS13
🙌
#iOS13Beta
🎉 Web Editor (Beta) ✅
🎉 Redesigned and more powerful macOS app ✅
🎉 iPadOS app with sidebar and tab support ✅
🎉 New and amazing app icons ✅
🎉 Series A funding ✅
🎉 Hiring announced ✅
This
@craftdocsapp
update is 😱🤯😍
In the upcoming days I'm planning to share more details about
- working with auto readjusting device motion
- combining gestures together
- config views
- auto z-index based on interactions
- using metal shaders for mesh transform
Consider following this tweet if you're
Oh, this is what I call a brave redesign 😱
I can’t even think about the adaptation period switching to such a new interface. It’ll be interesting to see for sure :)