π 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! ππ₯
My bookshelf probably never looked this great! π
@craftdocsapp
Mac App of the Year and
@macstoriesnet
Best New App awards look amazing together π
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:
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! β¨
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
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 π―
π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! π
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 πβ¨
π Next in the
#InVisionApp
Studio Smashers round-up is this awesome Logo Motion by
@pmaulionux
π
π Hop over to
@dribbble
to see more of his work:
π Next in the
#InVisionApp
Studio Smashers round-up is this awesome onboarding flow by
@JordyArntz
ππ
π Hop over to
@dribbble
to see more of his work:
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
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
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
β¨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 π
π for iPad - craft structured documents on your iPad π
Supporting all iPadOS features π₯
π
@dribbble
shot:
πSign up for beta:
@craftdocsapp
π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 π
Photography Portfolio Concept - Dark Mode is published! π
π
@dribbble
shot:
π₯ Time-lapse video:
π»
@InVisionApp
Studio source file:
Made with
#InVisionStudio
βοΈ
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
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
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 π
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. β¨
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
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
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 π±π€―π
π Next in the
#InVisionApp
Studio Smashers round-up is this awesome bike landing page by
@ClemBSY
π
π Hop over to
@dribbble
to see more of his work:
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 :)
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