User Interaction design inspo

File: device.webm (412KB, 800x600px) Image search: [Google]

412KB, 800x600px

improved version

File: download_button.webm (100KB, 500x375px) Image search: [Google]

100KB, 500x375px

Baked this one just now. So proud.

File: attachment_upload.webm (96KB, 500x375px) Image search: [Google]

96KB, 500x375px

>attach file
The execution is not so great, but the idea is solid imo.
Does anyone care to C&C?

File: loading.webm (41KB, 500x375px) Image search: [Google]

41KB, 500x375px

>#samefag {
>level: calc(9*1000);
>}

>>244771
The spinning feels excessive to be honest, but I really love the idea!

File: 02-Visual_Complexity.jpg (407KB, 1110x706px) Image search: [Google]

407KB, 1110x706px

>>244713
>>244750
>>244785
Bake? how do you make those? After Effects and JS? (I work with 3d and video)

http://www.smashingmagazine.com/2015/06/fitting-after-effects-into-a-ux-workflow/

File: shot.gif (1MB, 800x600px) Image search: [Google]

1MB, 800x600px

>>245192
>>244785
tons of ui designs .gif
>https://dribbble.com/search?q=ui+gif

File: am-to-pm.webm (70KB, 500x375px) Image search: [Google]

70KB, 500x375px

>>245192
>After Effects and JS?
Precisely.

>>245179
Yes, I agree; the only thing I like about that one is the concept. I'll redo it.

File: validation.webm (32KB, 500x375px) Image search: [Google]

32KB, 500x375px

Input validation icon / button

>>245308
The speeding up is unnecessary to me but hey

these are great

>>245363
thanks, anon

These are amazing but my only complaint is that some (namely >>245308 >>244771 >>244750 ) are exaggerated. If it was a -bit- more low-key I'd give it a straight 10/10.

>>245456
Thank you!
I agree with you on the exaggeration, but I don't know how I could simplify >>244750 without hurting the concept.
>"Your download is ready."
>"OK"
>"O" from "OK" morphs to progress indicator
>"K" from "OK" morphs to a down-pointing arrow
>arrow is animated in case of slow progress (prevent that "frozen up" feel)
>button flashes at 100%
>arrow becomes check mark after validation (virus scan or whatever)
>back to "OK"

Do you think I could make the animation more subtle by just messing with the keyframes,
without changing the above?

File: 1448559719999 2.webm (75KB, 500x374px) Image search: [Google]

75KB, 500x374px

>>245472
Well, some things to consider:
• Most user interaction is always 60 fps, is the motion blur necessary?
• There's nothing wrong with things morphing, but _how_ they morph. Does the arrow's vertical bar need to go the extra mile?

I'm in a hurry so I couldn't redo it completely, but you get the idea.

>>245492
Also I forgot to add, notice how the O:s whip-like transformation is exactly the same as the K's rotation. It's as if they're part of the same motion.
In >>244750 there's a subtle O-grow, and THEN the K rotation. Two steps that could be one.

>>245492
that's sexy as hell anon

>>245495
Thanks but now that I look at it the final transformation from the down arrow to the checkmark is way too slow.

>>245492
>Most user interaction is always 60 fps, is the motion blur necessary?
No, you are right, it was an arbitrary aesthetic decision, everything in this thread are my very first attempts at UI/UX animation design.

>There's nothing wrong with things morphing, but _how_ they morph. Does the arrow's vertical bar need to go the extra mile?
Unless having something behind or in front of something else on the Z-Axis is functional (enhances legibility) (f.i.: >>244727 and >>245296
), I prefer not to overlap my shapes.

The original thesis for this particular animation:
(Now, please don't get me wrong, I'm not arguing against you, I just wish to clarify my thoughts)

>The “OK” on the button tells the user that their download is ready. When clicked, the body of the button flashes with a deep pink colour. After clicked, the download process begins, the “O” (of “OK”) becomes the progress indicator, and the “K” becomes an arrow.

>You can tell if your device is still working and downloading by the arrow’s looped animation (going out at the bottom and coming back in from the top) — otherwise if the app or your device freezes, the animation will fail.

>When the download reaches 100% the button flashes in deep pink again to regain the user’s attention, and once the downloaded file has been verified the arrow morphs into a checkmark. To wrap everything up, the “progress bar” and the tick then morph back into “OK”, to say that everything is, in fact, O.K.

>>245534
what fps do you use for webm's and gif's? the ones i render look like crap.

>>245549
24, simply out of the habit of working with multiples of 3, 4, and 6 all the time.
(mainly in web design and typography)

>>245534
Yeah, I get your idea, that's why I said
>I'm in a hurry so I couldn't redo it completely, but you get the idea.
But what I meant was that I didn't have the time to re-animate the parts I thought that were okay. The motions I omitted were the ones i thought were perfect as is, I apologise I wasn't clear.. I only was concerned about the beginning and the checkmark morph, everything else is okay.

Also your z-point is valid, never thought about it that way

File: loading.webm (38KB, 500x375px) Image search: [Google]

38KB, 500x375px

>>244785
I couldn't stand the imperfect loop, so I remade it.

>>244771
Replace the spin with a little in-out bounce and it's beautiful

>>245659
>Two clicks/taps to search

lolno

>>245668
three* sorry

>>245668
>tap to enter search query
>enter search query
>tap "Search" or 'Return' on keyboard to confirm
>see number of results based on screen size
>tap "More Results" to close app and open in browser

What's wrong with that?
This design doesn't utilize live search nor auto-complete
to minimize the number of items on the display so that
it could fit on anything from mobile phones to smart watches.

File: attachment_upload-revised.webm (186KB, 500x375px) Image search: [Google]

186KB, 500x375px

>>244771
>>245179
>>245456
>>245666
Behold, the revised version:

File: attachment_upload-revised.webm (419KB, 500x375px) Image search: [Google]

419KB, 500x375px

>>245707
Now with added failure!

>>245675
not that guy but

ideally the text field would not require a click to open (if it's the main focus it would ideally already be focused allowing you to type instantly)

>>245732
not op but what if it was a widget ?

File: add-to-calendar-01.png (87KB, 720x1280px) Image search: [Google]

87KB, 720x1280px

>>245734
yep, it could be sitting on the home screen of your smart watch, phone, or smart tv.

>new idea
This one's not animated, it's just plain and simple UX design.

Proposed feature for Google Hangouts:
Add to calendar

Wouldn’t it be awesome if the app recognized the way we
mention points in time that are ‘equal or greater than today+1’?

>>245732
I understand what you mean, and it's true that if you open an app to search for something, it's absolutely a minus in UX if you have to tap again after opening the app to operate the main function of it.

But as >>245734 pointed out, it's just an animation of a non-specific interface that could inspire anything.

Thanks for the critique and I agree, in the context that you mentioned, it wouldn't make much sense.

>>245737
That will be introduced in Android 6.0 soon if it isn't already available. Not integrated within an app, but instead any app.
Look up 'google now on tap'

What program are you guys making these in ?
Only animation software I've ever used is Adobe Edge Animate for some banner ads.

>>245894
Adobe After Effects.
+ Motion Script by Mt.Mograph