Algorithmic Design of Web Pages

The democratisation of the Internet imposed a paradigm shift in our society. Nowadays, when someone opens a web browser and searches anything, one has access to an immeasurable quantity of knowledge and resources thus making web pages perform an important role in the contemporary world since they are the main interface for accessing the data available online. This way, we developed a generative design system that explores the use of algorithmic design processes in order to generate data-driven web pages with the goal of reflecting the semantic meaning of its content.


The system gathers data from the Wikipedia API in order to populate the page with content, then the system analyses the content using a Natural Language Understanding network and lexicon-based approaches, retrieving from the content a series of usable parameters such as sentiments, emotions, colours, words and HTML tags count and frequency. After that, the system generates styles according to the previous analysis and applies those styles to the final generated page. This system may be accessed online here. Video 1 displays the generative process of the system and some results.



Video 1

Demostration video of the system runnig.

Figure 1


The generation process is described as follows. First, the user inputs a text (i.e. a search term) and the Data Processing module performs a search in Wikipedia API to obtain the content. If the returned content satisfies the user, the information is processed by the Content Analysis module, for this analysis, the module employs a Natural Language Understanding classifier and lexicon-based approaches with the aim to recognise emotions, sentiments, and colours associated with it. Based on the results of that analysis, the Content Styling module defines a set of visual characteristics according to the semantic meaning of the content. This way, the visual characteristics of the generated web pages convey, as much as possible, the semantic meaning of its content. Finally, the Placement and Design module employs the necessary means to render the output. During the generation process, users may change the displayed content as well as fine-tune the visual characteristic of the generated outputs, in a parametric way, according to their desires and tastes.