Explanation

Framing IDs allows to compare the design of corporate landing pages based on layout structure, dominant colors and used fonts. These comparisons can be made between landing pages of one company or with the comparison function between landing pages of other companies.

The focus of the design comparison is to visualize industry- and culture-specific similarities and differences in the design of landing pages. For this reason, 35 countries from 9 cultural areas were selected. These countries and cultural areas form the basis for the selection of landing pages, which are subjected to a design analysis.

Design parameter

To make landing pages design comparable, certain criteria or design parameters have been defined. These design parameters are colors, layout structure and used fonts. Colors and layout structure are the most meaningful for a design comparison and thus form the basis. In the following, the design parameters mentioned are explained in more detail using examples. Finally, a design comparison between two companies is presented.

Colors and layout structureDesign parameter I: Dominant color wireframes

The calculation of the design parameters, the dominant colors and the layout structure, is exemplified with the consulting company Accenture and with the u.s. landing page of the company. In the following, the procedure from the calculation of the dominant colors to the dominant color wireframe is presented.

Screenshot of the landing page Accenture United States

The landing page (screenshot and HTML structure) is the starting point for the design analysis.

The screenshot of the u.s. Accenture landing page is used as an example to illustrate the design analysis and was created by the author himself on 29.07.2020.

At the beginning, the five dominant colors are determined based on the screenshot of the u.s. landing page. The calculated color distribution reflects the basic design of the u.s. landing page. Based on the color distribution, additional conclusions can be drawn about the corparate color and the use of white space.

The five dominant colors of the landing page

The distribution of the dominant colors gives a basic information about the landing page design.

The calculation of the dominant colors results in a characteristic color distribution of the landing page and first clues for the design of this landing page. The characteristic color distribution is not meaningful enough for a more in-depth investigation of the design of the landing pages or a comparison of the design of individual landing pages with each other. For this reason, the layout structure based on individual HTML elements is included. The combination of layout structure and dominant colors of each individual HTML element generates a dominant color wireframe.

The landing page and its dominant color wireframe

Layout structure and dominant color of each HTML element of the u.s. landing page. Each small box in the dominant color wireframe represents an HTML element of the landing page.

The screenshot of the u.s. Accenture landing page (left) is used as an example to illustrate the design analysis and was created by the author himself on 29.07.2020.

The reduction or abstraction of the landing page to layout structure and dominant colors simplifies the comparison of landing pages with each other. A comparison of the dominant color wireframes of Germany, the United States, China, Russia and Argentina provides information about commonalities and differences in the design for different countries.

Dominant color wireframes of different landing pages

The dominant color wireframes (left to right) of Germany, the United States, China, Russia and Argentina.

Fonts in useDesign parameter II: Fonts and identity levels

The font analysis shows which different fonts are used on the landing pages and to what extent these fonts are used. In order to obtain a precise assessment of the use of the fonts, a weighting takes place according to the amount of text. In addition, the font analysis only considers fonts that are displayed on the landing page. So-called fallback fonts are not part of the font analysis.

With regard to non-roman fonts, only fonts that have been declared in the CSS can be included. Some landing pages that use non-roman fonts do not have a CSS declaration. These landing pages are not included in the font analysis.

01 core

02 open

ヒラギノ角ゴ

03 pay

Graphik

04 corporate

The identity level is based on the following hypothesis: The higher the identity level, the more fonts there are to choose from. The more fonts there are to choose from, the more pronounced the possibility of strengthening the identity by means of differentiation.

Measuring design similarityDesign parameter III: Landing page length

The length in pixels is used as a rough measure of the similarity of a company's landing page design. The measurement of design similarity based on landing page length is based on the following assumptions: A deviation in the content of landing pageof one and the same company content entails a deviating design of this content. If the landing pages of one and the same company have different content, this will affect the length of the web page. It follows that a different length of landing pages indicates a different design.

In addition, image analysis algorithms for calculating color similarity and structural similarity were used to measure the similarities of landing page designs. It turned out to be extremely problematic that the similarities between two landing page designs calculated by the algorithms sometimes deviate strongly from the similarity of the landing page designs as perceived by a human being. For this reason, no further experiments on measuring design similarity based on image analysis algorithms will be continued for the time being.

Similarity by length of landing pages

Each individual circle represents the length of a landig page for each country at a width of 1350px.

Based on the assumptions made in advance, the low variation in the lengths of the landing pages indicates a rather uniform design. A comparison with the dominant color wireframes confirms this. The "similarity by landing page length" method is a very rough approximation to measuring the similarity of landing pages and requires further investigation.

Comparison of corporate designs

The comparison function of Framing Identities makes it possible to compare the design of two companies. As an example, the design of the two consulting companies Accenture and Price Waterhouse Coopers is compared. In the center of this design comparison are the dominant color wireframes, which represent layout and dominant colors. Furthermore, fonts in use and the similarity of landing pages among each other are shown.

Wireframes

The design comparison starts with the dominant color wireframes. For this purpose, the dominant color wireframes of the countries (from left to right) United States, China, Argentina and Germany were selected and compared.

Landing pages and dominant color wireframes

A selection of dominant color wireframes for the countries (left to right) United States, China, Argentina and Germany for left: Accenture and right: Price Waterhouse Coopers.

The selected dominant color wireframes clearly show the difference in design when comparing the two companies. Furthermore, it is evident that Accenture has a rather uniform design of the landing pages. Price Waterhouse Coopers is characterized by a rather varying design of the landing pages.

The uniform design at Accenture and the deviating design at Price Waterhouse Coopers could indicate different strategies in addressing and attracting customers. At Price Waterhouse Coopers, it seems likely that content is specifically adapted to individual countries.

Fonts in use

The fonts in use comparison shows which fonts or typefaces are used by Accenture and Price Waterhouse Coopers. The differentiation of the fonts in use takes place according to the identity levels. The respective identity levels should provide information about the extent to which the font selection creates a differentiation to the competition.

Fonts in use and identity levels

Distribution of fonts used on the landing pages of Accenture and Price Waterhouse Coopers.

01 core

02 open

ヒラギノ角ゴ, 微软雅黑

03 pay

Graphik, Helvetica Neue, ITC Charter, メイリオ

04 corporate

Accenture and Price Waterhouse Coopers essentially use identity level 3 (iD-L 3) fonts. This indicates that the fonts were selected from a wide range of commercial fonts to strengthen the differentiation from the competition. Price Waterhouse Coopers also uses the ITC Charter font (iD-L 3). This font mix supports the differentiation assumption.

The graphic below gives an insight into the extent to which each font was used. Since Accenture uses only two fonts, ヒラギノ角ゴ for the Japanese landing page and Graphik for the rest of the landing pages, the font distribution is clear. Price Waterhouse Coopers shows that Helvetica Neue is the dominant font. ITC Charter plays a minor role.

Website and dominant color wireframe

Distribution of fonts used on the landing pages of Accenture and Price Waterhouse Coopers.

The comparison of the fonts in use by Accenture and Price Waterhouse Coopers shows that the font choice seems to play an important role in the design of the landing pages and thus in the differentiation from the competition. The lack of core fonts (iD-L 1) and open fonts (iD-L 2) seems to support this assumption.

Measuring design similarity

The length in pixels is used as a rough measure of the similarity of a company's landing page design. The measurement of design similarity based on landing page length is based on the following assumptions: A deviation in the content of landing pageof one and the same company content entails a deviating design of this content. If the landing pages of one and the same company have different content, this will affect the length of the web page. It follows that a different length of landing pages indicates a different design.

In addition, image analysis algorithms for calculating color similarity and structural similarity were used to measure the similarities of landing page designs. It turned out to be extremely problematic that the similarities between two landing page designs calculated by the algorithms sometimes deviate strongly from the similarity of the landing page designs as perceived by a human being. For this reason, no further experiments on measuring design similarity based on image analysis algorithms will be continued for the time being.

Similarity by length of landing pages

Each individual circle represents the length of a landig page of Accenture and Price Waterhouse Coopers at a width of 1350px.

Price Waterhouse Coopers has a high degree of variation in the length of its landing pages. The high degree of variation indicates that the design of the landing pages varies from country to country and from culture to culture. Accenture, on the other hand, seems to have a more consistent design across the respective countries and cultural areas due to the low range of variation in the length of the landing pages.

On the one hand, the wide variation in landing page lengths and different landing page designs could indicate that Price Waterhouse Coopers is targeting customers in different countries and cultures. Accenture, on the other hand, seems to be using a one design fits all strategy with a low spread of landing page lengths and consistent design, which also results in a uniform customer approach.

Conclusion

Accenture uses a more globally consistent landing page design across all countries and cultures. The strong uniform design makes the landing page a single core design element and promotes a strong visual identity.

Price Waterhouse Coopers seems to combine core design elements (e.g., colors, header and footer elements) that define visual identity with content that varies from country to country. This varying landing page design is reflected in the dominant color wireframes and in the similarity by length page length. Regardless of the varying landing page design, Price Waterhouse Coopers achieves a global landing page design that reflects the visual identity across countries and cultures through the use of core design elements.

By using commerical fonts (iD-L 3), it can be assumed that Accenture and Price Waterhouse Coopers specifically strengthen the visual identity. The absence of core fonts (iD-L 1) and open fonts (iD-L 2) reinforces this assumption.

Accenture and Price Waterhouse Coopers Accenture ✕ Price Waterhouse Coopers

Impressum Datenschutzerklärung
© Marcel Gemander 2021