Algorithmic Design of Web Pages

Nowadays, Algorithmic Graphic Design processes are increasingly explored to generate generative and/or data-driven artefacts that allow the exploration of new visual and communication concepts, especially in digital media. These approaches have an urge potential in Web Design since in the last decade there is an increase in the quantity of knowledge and resources available online. This way, we experiment with an algorithmic approach to create a system that generates web pages algorithmic.

 
 


 

Video 1

Demostration video of the system runnig.

Figure 1

 
 

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.

 
 

Example outputs generated by the system
Figure 2

 

Figure1

Example outputs generated by the system

 


 

Video 2

Examples of web pages generated algorithmically by the system.

Figure 3

 
 

The process of generating a web site is following. 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. Video 2 and figures 1–6 presents some output generated by the system.

 
 

output-fire
Figure 4

Figure 2

Output generated using content gathered from the search of the term “fire.”

 

Figure 5

Figure 3

Output generated using content gathered from the search of the term “Seneca the younger.”

 

Figure 6

Figure 4

Output generated using content gathered from the search of the term “pizza.”

 

Figure 7

Figure 5

Output generated using content gathered from the search of the term “Joker.”

 

output-mercury
Figure 8

Figure 6

Output generated using content gathered from the search of the term “Mercury.”

 
 

Publications

  • J. Rebelo, S. Rebelo, and A. Rebelo, “Experiments in Algorithmic Design of Web Pages,” in Joint Proceedings of the ICCC 2020 Workshops (WS 2020), 2020.
    • Bibtex
      • @inproceedings{jarebelo2020a,
      author = {Jos\'{e} Rebelo and S\'{e}rgio Rebelo and Artur Rebelo},
      booktitle = {Joint Proceedings of the ICCC 2020 Workshops (WS 2020)},
      editor = {Kreminski, Max and Eisenstadt, Viktor and Pinto, Sofia and Kutz, Oliver},
      title = {Experiments in Algorithmic Design of Web Pages},
      year = {2020}}
    • |
    • PDF

Author

José N. Rebelo

Sérgio Rebelo

Artur Rebelo