It’s been two years since Elementor’s team started the tradition of a monthly showcase.
Every month they select 10 the most inspiring websites built by non-professional designers and novice Elementor users.
We have decided to test the top 10 sites of the month – May 2020. The screenshots of landing pages were uploaded to AI-driven design analytics Attention Insight. In seconds, we received website heatmaps revealing how these sites look through the eyes of users.
Which objects do visitors notice first? What could be improved in these designs? And what can we learn from them?
Site #1: Manufacturer of High-End loudspeakers for home use Marten
Design & Development: Patrick Smith
Insights:
- It’s a unique solution to place the cookie usage notification in the top right corner. However, it attracts more attention than menu bar or logo.
- The hero text is the first thing visitors notice. The second – a lamp in the image.
- However, brand sells not lamps, but loudspeakers which are left in the bottom of the image. You need to scroll down to see them. The simplest solution could be to crop image so as loudspeakers could be seen without scrolling.
Site #2: Video production company Suited and Booted
Design & Development: Something Familiar
Insights:
- All the attention is concentrated on animated hero text and video background showcasing their work at their best.
- Clarity score – 82% (100% indicates the most clean and clear design). Meanwhile, clarity score of other 8 sites varies between 64-76%.
Site #3: Printing company Jentzsch
Design: Pedro Portugal
Development: Fabian Todt
Insights:
- Attention is well distributed between the main elements.
- Visitors eyes move from a hero text (which gets 21% of attention) to an explanatory text (16%) and finally – a product image (44%).
Site #4: Portfolio Bersus Design
Design & Development: Den Sabrov
Insights:
- It is designer’s portfolio. No wonder why the name grabs the most attention (52%).
- The minimalist design scheme of black and white, along with abundant negative space between elements leads to optimal clarity (clarity score – 76%).
Site #5: Unconventional travel agency Lùleka Experience
Design & Development: Vittoria Mannu
Insights:
- Attention is well distributed between two main elements – text and image presenting what company does.
- Hero text and image related to services are the first things users notice and grab the most attention (30% and 19%).
Site #6: French film production company Goodman et Compagnie
Design & Development: Guillaume Verdon
Insights:
- As readers’ eyes tend to move from left to right and then down, logo, video background, and explanatory text are objects that users notice first.
- Due to its white color that draws attention, logo pops up and gets 5% of attention.
Site #7: Event in Italy – a craft fair Factory Market
Design: Beatrice Valoti
Development: Andrea Fogliata
Insights:
- It is a unique method of structuring a website’s layout – menu is located in the footer’s position.
- However, it manages to grab relatively large amount of attention (15%). Besides, based on a website heatmap, it is among the elements that visitors notice first.
- It is a well-designed users experience. Visitors read paragraph about the event, then notice its name and finally are directed to menu bar for more information.
Site #8: Creative agency Komini
Design & Development: Arvid Lindstedt and Erik Stenman (Komini)
Insights:
- If you want yo avoid distractions, this is an example to follow.
The elements are arranged in exactly the same way as the users tend to read – from left (hero text) to right (extra hero text) and then down (CTA buttons). No other distracting objects. - Despite its white background, “Tjanster” is not the most catchy CTA button, “Portfolio” is.
- If “Tjanster” is the main one, agency should consider re-arranging buttons.
Site #9: Timber furniture Forest To Home
Design & Development: Ross Merritt, Content Coms
Insights:
- It is a product-focused site. Visitors’ attention is concentrated on a hero text about product (39%) and product image in the background. In total, this part grabs more than 82% of attention.
- Logo text emphasises company’s uniqueness (“Forest to Home”). That makes sense why it is larger than other elements in the menu bar and receives the most attention (4%).
Site #10: Portfolio Daniel Muñoz Tattoo
Design & Development: Daniel Muñoz
Insights:
- Interestingly, attention is focused on an eye-grabbing call-to-action button. It is the first thing visitors notice. Besides, due to its size, CTA manages to grab 15% of attention.
- The most attention is taken by a hero text (62%) and video background presenting service.
- Menu bar on the left side could be improved, as it gets no attention.
