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.
Looks very nice! And you're right about the dead pixels.
Nice words :) All the best enjoy the stay on the next level :)
@James ✌ It's a screenshot while the arrow's in motion ;)
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?
I've seen something this sexy before :P
The animation of the icons fading in/out seems a bit too slow though.
This is beautiful :)
Loving this a lot, although I'd prefer the animation to be a bit faster.
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! :)
@Prathyush Pramod This is beautiful. What did you make the prototype in?
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.
Wow man, so awesome!!!!
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 :)
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 job @Prathyush Pramod
Superb work @Prathyush Pramod
Really beautiful project Buddy! Nice effect on the mov.
@micronaut @Charles Riccardi CoreGraphics.
10 months ago
@Prathyush Pramod Is that something you download, a part of the developer sdk, or something that comes on your machine?
@Charles Riccardi CoreGraphics is the drawing engine for the iOS/Mac platform. More info here.
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
Follow Dribbble on Twitter