Web Design Reference: WEBJX collection of Web page Video player interface design case

Source: Internet
Author: User
Tags interface reference

Article Description: 20 Video Player Interface appreciation and comments.

Web Design in the very details of things, such as a stroke, sometimes caused by the user's psychological differences, and thus affect the user's use of preferences, until the overall design of the success and the business value of the work has a very big impact. Similar to the "sink" and "Butterfly Effect" feeling. Is it exaggerated? Absolutely not! The power of detail I think has an infinite fascination in web design. Think about what you personally think is good design, and what has touched you? Really a lot of time is a description does not come out of color, some 1 pixels of the high light, or a texture.

For example, the following 20 web-page Video player interface design, seems to look very different, but if you have to choose one of the most preferred, and paid to buy, I think everyone can make their own choices. And then you think about why you chose this, not the other? So what I want to say here is that as a web designer, or a UI designer, we need constant effort, often asking ourselves a question, "Do I have the ability to control the details of visual design to more accurately achieve the goal design, and thus guide the user's psychological feelings?" "I think this is something we can learn from these 20 designs," he said.

A sharp edge.

Subtle light gray gradients, an edge 2-pixel inner glow, control-button shadows, and a 1-pixel edge high-light combination are one of the most common designs, classic and make the player look sharp on the edge and cut through the fingers.

Second, brisk

Rounded black control bar background adjusted to translucent, the control button did not add more layer style, when the mouse left the screen when it disappeared, look simple and brisk feeling.

Third, remote control

Glass-like light control bar background, thicker line strokes, each control button adds a 1-pixel dark stroke. Reminiscent of a wire control device on a headset.

Iv. Clear and concise

This is my personal favorite design style, all elements are surrounded by dark 1 like sketch edges and subtle inner glow effects, highlights, strokes, luminous effects are controlled within 1 pixel, right angle design, and add the noise of the material, so that the entire control bar does not look like a bare feeling, but clear, tough, The psychological feeling of having a sense of texture.

V. Wide Background panel

The wide panel makes this design has a whole feeling, like a simple remote control, glass texture, high saturation of blue so that important control button eye-catching, the volume control interface design is very characteristic.

Six, metal, drawing of the texture

A closer look at the control bar background has a metal-like drawing texture, the progress bar of the sliding button is also the metal texture, the bottom of the 1-pixel high light so that the edge has a bulge of the feeling, playing progress bar in the middle of the deeper 1-pixel sag to the design added a richer detail

Seven, the rich black

The Thick of the black is the design of the intuitive feeling, the top of the concave panel to the panel thick, really feel. The three design scenarios let us see the different combinations of control buttons.

Eight, the refreshing taste

The translucent background design gives the player a refreshing taste.

Nine, coarse, sloppy.

I personally think this is a negative case, with a width of 1 pixel strokes that make the design interface look awkward and delicate, much like a casual one.

Ten, the style is not unified

The high saturation and brightness of the yellow in the dark gray background exceptionally eye-catching, but the player color and background color contrast is not enough to make the two have a vague feeling, in addition, looks like the display of brightness, contrast, and color adjustment icon of the glass texture and the overall design of the texture is not uniform. So the work on the dribbble is not perfect impeccable, individual design, such as I randomly picked the nine and 10 should be said to do is not good design.

[1] [2] Next page



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.