Image Image Image Image Image Image Image Image Image Image

Bartlett School of Architecture, UCL

Scroll to top


No Comments

Developing Art Style and concept

Developing Art Style and concept


  1. Artistic directing role in collaboration with Sun who takes up the technical directing role
  2. Concept developing
  3. C4D and Blender (GLTF files)

Artistic directing role in collaboration with Sun who takes up the technical directing role

After project faire we realised that since we are in two different timezone and each have our strength, it is more efficient to have clearer roles between us.

We decided that Sun Yu will be taking the role of a technical director and I will be in charge of the artistic development. We meet weekly to discuss our design and share progress.

My role includes,

  1. developing the artistic style – gather reference and inspirations, colour scheme, font etc.
  2. realising these objects in 3D modeling software to be imput onto website that Sun is developing.
  3. learn basic html to insert items and have understanding of how they work in principle

Concept developing

Our virtual world consists of three parts:

  • Reality
  • the self
  • incentive to post


Our world is a place where reality is made of both the virtual and the actual. So we are creating a virtual environment that represents our world and focuses on the fact that our media is contructed with these mixed mediums. It is vibrant and loaded with mass information.

The media is consisted of news, social media, ads. These will make up the background of our virtual environment. For the start I looked a photo collage style to emphasise the realness of these information in contrast to the distortion of the self that later appears.

The contrast between clear and confusing, showing to the user the journey of distortion of the self.

The Self

The self goes on a journey from start to finish in our interactive website. Firstly the user enters the website and is able to contract an avatar, exploring this virtual world. Shown below (the elongated figures shown below).

Then as the get closer to the virtual walls (reality stated above), information breaks in pieces and is attracted onto these figures. They are information you learn, attentions you gained with followers, likes and subcribes, and ads that left an impression that changes and constructs your self.

Eventually the human shape avatar becomes more and more abstract and much like crystals with legs and arms.

Incentives to post

Twittering machine states that the incentives that drives us addictive to the online world are:

  • celebrity effect – quantified attention
  • sematic impact – emotionally triggering to raise opinions
  • survalent aspect – the algorithm that targets your interest

We are making a metaphor of these factors into saturated, eye catching graphic that users ends up attracting and carrying with them to become a part of their identity, and because of the sheer amount and sources of these information, we want to critique that they create a deficit in the user’s self.

This is why the figurative avatar is becoming more and more distorted.

art style reference:

Cinema 4D and Blender

After settling down with the concept I started to work on some 3D elements – the notification ‘crystals’ for Sun to place in the web environment and to test.

I started with the 3D modeling tool I am familiar with, C4D, and created some astroid/floating rock 3D objects as a base for the crystals.

I followed a tutorial here.

crystals in development
left: platonical crystal, right: spherical crystal, Guan, 2020

Choosing the crayon and colourful style to represent information online that grasps users’ attention. I develop the following patterns. Which I mapped onto the crystals shown below. Also Added some lighting to attract attention and create contrast to background.

Later I learn from Sun that to become an interactive element to be placed into a VR/AR environment these object need to be exported as GLTF. Currently only Cinema4D S22, which is not available for educational license, support the export of GLTF.

So I switched onto Blender to try to replicate the same effect. Below are some of my exploration. I manage to create a rock shape but realised that as soon as it is exported as a GLTF into A-Frame, the lighting, material texture and displacemnet is lost.

I will look into what properties can be transfered to an GLTF and develop our notification crystals accordingly.

GLTF viewer to see that only certain properties are exported

Submit a Comment