The determination of the design parameters, the dominant colors and the layout structure, is exemplified with the landing page of the Bielefeld University website. In the following, the procedure from the calculation of the dominant colors to the dominant color wireframe is presented.
Screenshot of the landing page Bielefeld University
The landing page (screenshot and underlying HTML structure) is the starting point for the design analysis.
The screenshot of the Bielefeld University landing page is used as an example to illustrate the design analysis and was created by the author himself on 12.05.2023.
At the beginning, the five dominant colors are determined based on the screenshot of the landing page of Bielefeld University website. The calculated color distribution reflects the basic design of the 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 landing page of Bielefeld University. Each small box in the dominant color wireframe (right) represents an HTML element of the landing page (left).
The screenshot of the Bielefeld University landing page (left) is used as an example to illustrate the design analysis and was created by the author himself on 12.05.2023.
The reduction or abstraction of the landing page to layout structure and dominant colors simplifies the comparison of landing pages with each other. The determination of the design parameters «fonts in use» and «design similarity» is explained on the basis of landing pages of the consulting company Accenture. 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 Accenture landing pages
The dominant color wireframes (left to right) of Germany, the United States, China, Russia and Argentina.
