Firefox 4 - HTML5 Video UI Mockup - Developers

Here's my mockup for the HTML5 video interface. What do you guys think? [img]http://anyhub.net/file/1html-5-video-mackup-2.png[/img] Without glow: [img]http://anyhub.net/file/html-5-video-mackup-4.png[/img] -- Just seeing if I could make something better than this: [url]http://indolering.com/usability/movie-player-mockup/[/url]

The pause icon looks stretched, and the volume control and fullsize button don't look very good and don't complement each other very well in terms of size [editline]06:44PM[/editline] And also it looks like someone just found out about the glow blending option

[QUOTE=a2h;23324854]The pause icon looks stretched, and the volume control and fullsize button don't look very good and don't complement each other very well in terms of size [editline]06:44PM[/editline] And also it looks like someone just found out about the glow blending option[/QUOTE] Haha. I knew you'd say something about the glow. Glow makes everything look better, and you know it. I couldn't get the volume thing to re-size right. The pause button, yea, I just make two parallel lines and said hell with it. I'll try to fix the size.

Too much glow. Icons look too large too beside that small font. The scrubber is hard to see too, especially the track.

Glow makes things good.

Crap. I guess others don't share my thought that minimalistic looks good.

[QUOTE=Lerlth;23325064]Crap. I guess others don't share my thought that minimalistic looks good.[/QUOTE] There's a difference between minimalistic and minimalistic done right

Updated the image.

[QUOTE=Lerlth;23325064]Crap. I guess others don't share my thought that minimalistic looks good.[/QUOTE] Minimalistic does look good, making everything glow doesn't make something minimalistic :P

[QUOTE=KmartSqrl;23325172]Minimalistic does look good, making everything glow doesn't make something minimalistic :P[/QUOTE] I just put the glow to make it stand out. What I mean by minimalistic is this, compare: [img]http://indolering.com/wp-content/uploads/2010/07/movie-player-mouseover-bunny-e1278108612272.jpg[/img] [img]http://anyhub.net/file/1html-5-video-mackup-2.png[/img] [img]http://indolering.com/wp-content/uploads/2010/07/Screen-shot-2010-07-02-at-4.05.25-PM.png[/img] [img]http://4.bp.blogspot.com/_5fbEcKCBnFw/RnyEMkevDBI/AAAAAAAABYc/vZhkL54uGFI/s640/YouTubeOniPhone.PNG[/img]

Note how in all except yours, glow isn't applied everywhere

Vimeo got it right.

Oh well. At least I tried. Like I stated before, glow is there to make it stand out.

[QUOTE=Lerlth;23325421]Oh well. At least I tried. Like I stated before, glow is there to make it stand out.[/QUOTE] It doesn't need that to stand out though really. Think about the context in which it's showing up. It's a static UI over a moving background (video in this case). It's inherently going to stand out just by being the only stationary object. [editline]02:48AM[/editline] [QUOTE=MUFC2007;23325391]Vimeo got it right.[/QUOTE] Except, imo, they should have made the play button the same height as the area behind the scrubber. It looks weirder on the site when the tooltip isn't there to make them look like the match up.

[QUOTE=KmartSqrl;23325501]It doesn't need that to stand out though really. Think about the context in which it's showing up. It's a static UI over a moving background (video in this case). It's inherently going to stand out just by being the only stationary object. [/QUOTE] True. Well try this... [img]http://anyhub.net/file/html-5-video-mackup-4.png[/img] Well, it does still look good to me.

Looks alright, aside from the fact that you somehow got the opacity/blending wrong so the controls aren't distinguished from the video enough. Vimeo got it right indeed.

[QUOTE=brooo;23326923]Looks alright, aside from the fact that you somehow got the opacity/blending wrong so the controls aren't distinguished from the video enough. Vimeo got it right indeed.[/QUOTE] It's the dark brown from the tree. If you were on a brighter video, it'd be more distinguishable.

Your controls are overlapping the video. Instant failure right there.

[QUOTE=BmB;23327136]Your controls are overlapping the video. Instant failure right there.[/QUOTE] Well, if it were done, it would fade away. You know? Like every overlapping video player in existence. (Of what I know)

[QUOTE=Lerlth;23327093]It's the dark brown from the tree. If you were on a brighter video, it'd be more distinguishable.[/QUOTE] That's also something you need to take in to account though since dark colors aren't any less common than light colors, you're theoretically going to have controls that are very hard to see 50% of the time.

It seems like there aren't very many people complimenting your design at all. I think it's great. Just make sure the pause icon height is capped at the other button's height in comparison to the right. That's really all that needs fixing, besides *maybe* the opacity of the seek bar. Looks sleeker than most, if not all of the designs. Vimeo isn't the be-all and end-all here, so chillax and don't let folks give you a hard time about it.

With Glow looks more clean : )

Looks as if AnyHub is down. :/

[QUOTE=Lerlth;23349679]Looks as if AnyHub is down. :/[/QUOTE] It's back, I dicked with the config and forgot to close a tag.