One of my greatest dissatisfaction with myself was that me as an user interface designer was only able to push dead pixels on screen. I could make a black navigation bar, a blue header, verbal buttons with three states or metaphorical icons for use in the interface but UI design consisted of much more than those dead pixels. Dead pixels adds to the overall visual appeal – the look of the UI – but in the end they are dead, having no life in them.
It was in that realm of 'feel' I found that the interface turned from just good looking to a great functional UI. It's the details of the app considered in a holistic manner, where even the subtlest of the animations contributes to a user's experience.
Mike Matas puts it best in this interview when he said that user interfaces should be emotional. Made By Sofa has mastered this craft and it can be seen in the new Facebook Camera application.
What I was doing till now was producing interfaces that were non-expressive and I continued to assign myself the label of user interface designer. But now, finally I can happily say that I have found a way to escape out of that hypocrisy. I am now able to set the look and then prototype the interactions of a complete application.
I think I am now one step closer to bringing the things I envision to life. Although, Bret Victor's argument still stands. I'm not a designer in it's all sense. But things are progressing on that end as well.
Feels so happy to level up from the world of gloss and gradients to the world of quadratic, cubic and, sinusoidal ins and outs. Hope you guys enjoy the result as much as I enjoyed the process.
An upcoming second part is in the making which contains a few touches that I think will make it truly unique.
More than the animation (which is great!), I love your approach to the issue of development vs design and how both things work better when "together". Keep it up! :)
Very nice! I'd definitely speed up the animations and use an ease-out for entrances and an ease-in for exits. That'd solve your jitteriness problem. Great work, man :)
25 Responses
After a week's work, finally it's ready :
Check the demo video
One of my greatest dissatisfaction with myself was that me as an user interface designer was only able to push dead pixels on screen. I could make a black navigation bar, a blue header, verbal buttons with three states or metaphorical icons for use in the interface but UI design consisted of much more than those dead pixels. Dead pixels adds to the overall visual appeal – the look of the UI – but in the end they are dead, having no life in them.
It was in that realm of 'feel' I found that the interface turned from just good looking to a great functional UI. It's the details of the app considered in a holistic manner, where even the subtlest of the animations contributes to a user's experience.
Mike Matas puts it best in this interview when he said that user interfaces should be emotional. Made By Sofa has mastered this craft and it can be seen in the new Facebook Camera application.
What I was doing till now was producing interfaces that were non-expressive and I continued to assign myself the label of user interface designer. But now, finally I can happily say that I have found a way to escape out of that hypocrisy. I am now able to set the look and then prototype the interactions of a complete application.
I think I am now one step closer to bringing the things I envision to life. Although, Bret Victor's argument still stands. I'm not a designer in it's all sense. But things are progressing on that end as well.
Feels so happy to level up from the world of gloss and gradients to the world of quadratic, cubic and, sinusoidal ins and outs. Hope you guys enjoy the result as much as I enjoyed the process.
An upcoming second part is in the making which contains a few touches that I think will make it truly unique.
Hat tip to @Bjango ✎ Marc Edwards on Skala Popover which I drew inspiration from.
11 months ago
Only thing i'd suggest is to centre the arrow with the icon. Nice work.
11 months ago
Looks very nice! And you're right about the dead pixels.
11 months ago
Nice words :) All the best enjoy the stay on the next level :)
11 months ago
@James ✌ It's a screenshot while the arrow's in motion ;)
11 months ago
Totally agree! You have to feel how an interface works, to decide wether it is good or not.
@Prathyush Pramod What tools are you using to create prototypes?
11 months ago
I've seen something this sexy before :P
11 months ago
Nice...
The animation of the icons fading in/out seems a bit too slow though.
11 months ago
This is beautiful :)
11 months ago
Loving this a lot, although I'd prefer the animation to be a bit faster.
11 months ago
More than the animation (which is great!), I love your approach to the issue of development vs design and how both things work better when "together". Keep it up! :)
11 months ago
@Prathyush Pramod This is beautiful. What did you make the prototype in?
11 months ago
I'm not feeling the rotating animation of the entering and leaving of the icons on the ends of the slider; it feels jittery.
I love the rest of the animation and the UI is gorgeous.
11 months ago
Wow man, so awesome!!!!
11 months ago
Very nice! I'd definitely speed up the animations and use an ease-out for entrances and an ease-in for exits. That'd solve your jitteriness problem. Great work, man :)
11 months ago
perfect!
11 months ago
even your cursor is cool :)
Very slick. Love the animations, but yea what @Marshall Bock said, speed em up a bit, feels a bit like its slowmo interaction.
Great work
11 months ago
great job @Prathyush Pramod
11 months ago
Superb work @Prathyush Pramod
11 months ago
WOW !
11 months ago
Really beautiful project Buddy! Nice effect on the mov.
11 months ago
great!
11 months ago
@micronaut @Charles Riccardi CoreGraphics.
11 months ago
@Prathyush Pramod Is that something you download, a part of the developer sdk, or something that comes on your machine?
11 months ago
@Charles Riccardi CoreGraphics is the drawing engine for the iOS/Mac platform. More info here.
11 months ago