The movie site stuff.

Say something.

The film is no stranger to us, looking back over 2014 years of blockbuster films, sci-fi, action, suspense, horror, and so on, after watching the film, we tend to discuss the film's plot, characters, music, posters and so on with our little friends.

In fact, the film site in the early days did not pay attention to, in addition to some special cattle movies may be in the promotional period will be some official website, with the rapid development of Internet media, film manufacturers in recent years to the Web site design began to pay attention to the form of the site from the previous one to focus on

　　One, full video/panoramic display

This kind of Web site can display the most intuitive content, user participation is high. How do we design to capture the user, and then we'll take a look at how this site is done

Case: The Quiet Ones (death cult) Click to view

The film tells of a university professor and his student aides who are targeting a young woman in the hope of healing her mental illness and proving that there is no supernatural presence in the world. But in this process, they encounter unimaginable dark forces of fear.

As a horror movie, the site uses a full video to show the way, showing a few story plots, through the video interaction points, so that users feel the movie plot. Site style to retro-oriented, background music with the sound of film interspersed throughout the station, video progress of the form of sound waves, reflecting the sense of terror.

Interaction points: The site through a number of interactive points of design, so that users understand the story at the same time, participate in, improve the user experience

With the rapid upgrade of the network, the continuous upgrading of hardware equipment, the whole video design way, is undoubtedly a design direction, but how to grasp the rhythm of the site, how to improve the user's sense of participation, as well as the loading of video becomes particularly important.

There are also two movie sites also in full video design format, we are interested to see:

"Night-People" click to view

Noah's Ark Noah click to view

II: Minimalist style website/details or details

Simplicity does not mean simple, such sites pay more attention to the details of the design, level of design, page dynamic effect, so that the page has a tall feeling.

Case: "Waterloo Waterloo" click to view

Because there is no introduction to the film, so in this first introduction to the relevant historical background: The Battle of Waterloo (the famous campaign in Europe) June 18, 1815, by the French army to the anti-French coalition in the Belgian town of Waterloo in the decisive battle. The battle ended with a decisive victory for the anti-French coalition. This battle ended Napoleon's empire. The battle was the last Battle of Napoleon I. Napoleon was exiled after his defeat and withdrew from the stage of history.

Although the background of the story is happening in Europe, but the website design does not use the thick European pattern material to embody the historical feeling, but has done the subtraction, refines the key element, uses the low saturation color, in order to highlight the historical feeling page added a layer of old paper texture, the text color to white and the earth yellow mainly. The form of the button is also relatively simple. The site gives people a sense of simplicity but a sense of history.

It is worth mentioning that the navigation of the design, the Web site to make a complete page of navigation, and then the navigation content of the classification, a number of important sections separately extracted for two times designed so that users can quickly browse the desired content.

Detail design: Dynamic design of the button, dynamic design of mouse following and dynamic effect of navigation

Case: "Lincoln" click to view

Black and white color so that the page has a quiet feeling, simple background, the left-right layout, as well as the page to leave the page to improve the instant style, smooth transition between the plates, in order to allow users to browse more convenient, the page also supports the rollover effect of the mouse. And in the switching time level two content will have a gradual effect, avoids the switch blunt.

"Jurassic World" click to view

Jurassic World is the fourth part of the classical film Jurassic Park, although the film has not been released, but from the official website design style we can see that the film has some futuristic sense of science fiction, the whole station to use the full terminal adaptive performance form, from the PC, tablet, mobile phone full adaptation, page UI style has been flattened mainly, A hexagonal border embodies a sense of modernity.

"Interstellar Crossing" click to view

The "Star Trek" website uses a more conventional approach to the left and right versions, at first glance it looks more common, but the effect of the page switch is very special, dim background, to remove the screen next to the background followed by moving from the bottom of the screen to the middle, zoom in to brighten, in the dynamic speed is also very elegant, first slow after fast, Let the whole page have a sense of rhythm.

What are some of the inspiration for this kind of minimalist design site? For example, in the design of the game website design, can all terminal adapt to design? Can you change the way navigation is performed? Can I design the buttons dynamically? Can the page switch effect design and so on, even if it is a small element of innovation can improve the overall design quality of the page.

　　Three: Disparity expression form

This kind of Web site is the most common form of expression, pay attention to visual impact, the main performance of the film characters and stories, to see this kind of movie site we can learn from what ideas?

Case "Godzilla" click to view

The movie "Godzilla" website uses the disparity form to combine the movie scene, with the video special effect, causes the website the visual impact force to be stronger.

"Rio Adventure" click to view

The "Rio Adventure" website is also a false 3D effect of the scene through parallax representation.

"Pacific Rim" click to view

The website uses the horizontal screen scrolling form to show the content, here is worth mentioning is, when we scroll the mouse, the background dynamic effect will not appear, but we through the navigation to browse the plate, the background dynamic effect will appear. The advantage of this is that it avoids the problem of too long loading time.

"The fantasy drift of the youth pie" click to view

The cool performance of the situation, the perfect combination of technology and creativity. The page uses the Parallax technology, the mouse slides down at the same time layers reveal the film's production process. The video that is interspersed in the page lets the user experience the movie plot during the browsing process.

Above to provide you with a train of thought, next let's see how the game website is applied to the above ideas:

The Batman game website click to view

The website uses the simple design technique, applies a large number of dynamic effects, the four-piece chart switch will have the slow amplification effect, as well as the navigation icon dynamic effect, the data graph dynamic effect even has the left and right direction key to have the dynamic effect.