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
Pro
Prathyush
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
Pro
James ✌
Only thing i'd suggest is to centre the arrow with the icon. Nice work.
11 months ago
Pro
Sandrino Kelders
Looks very nice! And you're right about the dead pixels.
11 months ago
Pro
Kartik Mahant
Nice words :) All the best enjoy the stay on the next level :)
11 months ago
Pro
Prathyush
@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
Pro
Haziq Mir
I've seen something this sexy before :P
11 months ago
Pro
Sultan Tarimo
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
Pro
Charles Riccardi
@Prathyush Pramod This is beautiful. What did you make the prototype in?
11 months ago
Pro
Timmy Chau
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
Pro
Ben Bate ⚒
Wow man, so awesome!!!!
11 months ago
Pro
Marshall Bock
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
Pro
Davlikanoff Design
perfect!
11 months ago
Pro
Alex Parker ⇢ ☁
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
Pro
Mani
great job @Prathyush Pramod
11 months ago
Pro
Paresh Khatri ::::✈
Superb work @Prathyush Pramod
11 months ago
Pro
Dhiren Adesara
WOW !
11 months ago
Pro
Andrea Cau
Really beautiful project Buddy! Nice effect on the mov.
11 months ago
great!
11 months ago
Pro
Prathyush
@micronaut @Charles Riccardi CoreGraphics.
10 months ago
Pro
Charles Riccardi
@Prathyush Pramod Is that something you download, a part of the developer sdk, or something that comes on your machine?
10 months ago
Pro
Prathyush
@Charles Riccardi CoreGraphics is the drawing engine for the iOS/Mac platform. More info here.
10 months ago