{"id":12299,"date":"2018-11-23T19:05:49","date_gmt":"2018-11-23T13:35:49","guid":{"rendered":"https:\/\/email.uplers.com\/blogs\/?p=12299"},"modified":"2024-03-12T17:11:47","modified_gmt":"2024-03-12T11:41:47","slug":"visual-hierarchy-vs-visually-aesthetic","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/visual-hierarchy-vs-visually-aesthetic\/","title":{"rendered":"Email Template Design: Visual Hierarchy vs Visually Aesthetic"},"content":{"rendered":"

\u2018Beauty lies in the eyes of the beholder.\u2019<\/span><\/p>\n

People usually go for the looks before venturing into the purpose. This may be accredited to the low human attention span (~8 seconds) and therefore, most brands adopt eye-catching designs. This way, once you capture the attention of your target audience, they will be curious to gain information.<\/p>\n

In the email marketing domain, the subscribers’ attention is caught by a craftily written subject line. The subject line acts as a hook and makes the subscriber inquisitive enough to check out your email copy. Next comes how you present the information in your email template<\/a>.<\/p>\n

By placing information to aid the eye scan pattern, the subscriber can collect the information relevant to them and move forward to the CTA or next email.<\/p>\n

\"\"<\/a><\/div><\/div>\n

On the other hand, a visually appeasing email design (breaking the visual hierarchy) intrigues the subscriber to read further in the email copy.<\/p>\n

Let\u2019s see email examples<\/a> from brands who followed the visual hierarchy and brands who bent the rule to give importance to visual attractiveness and understand the impact of each design.<\/p>\n

Adhering to Visual Hierarchy<\/h2>\n

Residents of English speaking countries follow a \u2018F\u2019 pattern while browsing through content,<\/p>\n

\"F-shape<\/p>\n

or a \u2018Z\u2019 pattern.<\/p>\n

\"Z-Pattern<\/p>\n

So, email designers design their emails in such a way that the most important content is accommodated in the first fold in a systematic manner. The content flows according to the normal eye scan path.<\/p>\n

\"\"<\/a><\/div><\/div>\n

The following email by connected devices creator brand \u2018Withings<\/em>\u2019 (formally called Nokia Health) follows visual hierarchy. Make an observation of your eye movement throughout the email and compare the results below.<\/p>\n

\"Withings<\/p>\n

Here is the order of how a general viewer of the email shall see each email element<\/p>\n

    \n
  1. Pre-header text in lime green background<\/li>\n
  2. Brand logo<\/li>\n
  3. Product name<\/li>\n
  4. Product tagline<\/li>\n
  5. Product image<\/li>\n
  6. Product description<\/li>\n
  7. Rest of the email copy along with accompanying images<\/li>\n<\/ol>\n

    No matter how much you try, every time you see the email, your eye automatically checks the topmost pre-header.<\/p>\n

    \"\"<\/a><\/div><\/div>\n

    Let\u2019s try another example<\/p>\n

    \"TunnelBear<\/p>\n

    In the above email by VPN provider \u2018TunnelBear<\/em>\u2019, the attention first goes to the brand logo followed by the offer announcement before you see hero image of the brand\u2019s iconic bear sitting under the umbrella.<\/p>\n

    You will agree that in a layout following visual hierarchy, the time you spent to go through the content of both the emails was less. The design is seamless & distraction-free and the CTA is placed at a point where the subscribers are well-aware of the content, thereby making them more inclined to click-through.<\/p>\n

    The disadvantage of this email layout<\/a> is that the design is not distinct enough to be remembered later.<\/p>\n

    Pros<\/strong>:<\/p>\n