Home > Web Designer Wall > Block Reveal Effect, a New Design Trend for Entrances and Exits

Block Reveal Effect, a New Design Trend for Entrances and Exits

For all those who adore the beauty of simplicity obtained by regular geometric shapes and modular layouts, there is an excellent solution. It is the block reveal effect and it is pretty trendy. It ideally refines interfaces as well as adds a subtle dose of interactivity.

Being blocky, a bit rigid and in some way bold, it also owns characterstics of minimalism, elegance and neatness. It is a good and fresh alternative to the hackneyed and trite fade effect, which increasingly overpopulates websites. The main application is to intensify entrances of various blocks in the design. It works well with headings, chunks of text, images and even sliders.

This compilation demonstrates 12 wonderful examples of the block reveal effect.

Boxy Vibe

We start our compilation with La peau de lours.

The team behind the project goes for a popular usage of block reveal effect. It is used to enrich the transitions between slides in the homepage carousel, making the component look trendy, interactive and engaging.  It also completes the tone and attitude of the main line of design, contributing to the prevailing blockish aura.

As a follow-up to the boxy aesthetics, the website of Baugeld Spezialisten can be considered to be the king in this sphere.

The design screams with an overpowering geometric feeling that lies at the core of every detail of the interface. Here, the block reveal effect fits like a glove. Although, it is used only in combination with visual elements, beautifully opening images and enriching hover states of buttons; yet still that is sufficient to feel its charismatic presence.

Read Full Article

The WebRecital is a dedicated User Interface/User Experience professionals who come together to provide design and research workshops, portfolio reviews, and educational outreach to the greater Seattle area.

Leave a Reply

Your email address will not be published. Required fields are marked *