AI art and frictions in translation: it's the female-focused December Double Click

Double Click, a series bringing you the best of web and digital design, is supported by Wix.

For December's edition of Double Click, we focus on five female-identifying coders who bring us some of the best creative digital projects that we've found over the past few weeks. For the uninitiated, Double Click is our monthly round-up of some of the best digital designs we’ve stumbled upon over the previous four weeks.

This month, we feature a mix of sites with varying aesthetics and techniques applied to each. We've got DIY AI art that turns your body parts into princess grunge aesthetics for use on a digital canvas, sites that lose you in the code, as well as a playful screensaver-like site for this year's Typojanchi.

Olesya Chernyavskaya: princess-parts.glitch.me

As machine learning libraries become more robust and accessible, more and more creative web applications of AI become possible. For Princess Parts, creative coder Olesya Chernyavskaya creates a project full of unusual interactions that detects body parts that the user can use to draw on a digital canvas. "Princess Parts is about grunge aesthetic. What is grunge for me? It’s acid colours, Windows XP, neon and a little piece of Tumblr. It’s something opposite of what usually people mean by the word 'princess'," Olesya tells It's Nice That. "I wanted to create something that breaks all stereotypes about princesses and their pink castles with a bunch of cute unicorns in a flower garden."

"Everything in this project is about an unusual interaction: drawing with body parts. An AI model I used allows detection of 17 parts of the body," she says. "It was a big temptation to use all of them for drawing, but it could look messy and spoil the drawing experience. Therefore, I used parts of body that couldn’t be in camera view at one moment: eyes, hands, chest, and knees. This combination is the best in this case because an artist is able to choose which brushes to use."

The project, whose code and design is open for all to view and learn from, is just one example of the possibilities of the power of machine learning for creative uses. "I experimented with colours a lot using different layer filters like difference or overlay and the power of randomness," she says.

Languages used:

“The site was created with HTML, CSS and Vanilla Javascript. For detecting princess body parts, I used TensorFlow.js PoseNet model. By the way, this model doesn’t detect the chest so I had to use some maths to solve this problem. Also, p5.js helped me to draw on a canvas and access a web camera without too many lines of code, and ml5.js made working with PoseNet easier."

Yehwan Song: www.typojanchi.org/2019

For Typojanchi, the international typography biennale based in Seoul, the event's website had to be just as creative and eye-catching as the works being presented in the exhibition. The site, which features a series of grid structures interspersed with playfully shifting graphic elements, captures the spirit of the biennale perfectly. Created by New York City-based Yehwan Song, she tells us about how this site was created to reflect the different aspects of the biennale.

"When you are on the site you can see that the objects start to gather on the site, which becomes a button linked to the artwork description page. The repetition and patterns of icons show the huge amount of artworks at the exhibition and the small movements of objects that show up when you mouseover the icon shows the liveliness of each artwork," Yehwan says. The design works slightly differently on mobile, so any interaction with the mobile screen also means an interaction with the design elements. "This conveys the concept of the exhibition as well, where you can actually see the archived objects in real life, which you can hear and read if you were at the exhibition."

Regarding the navigational elements of the site, Yehwan notes that the icons also work as a screensaver if the user doesn't explicitly interact with them. "If you do not move your cursor for a certain amount of time you can see the objects start to flock on the page which then work as buttons linked to the artists' description," she says.

Languages used:

“I used plain HTML, CSS and Javascript but used Google Sheets as a database and exported JSON file from it, and linked that JSON data directly to the website!”

Hilda Wong and Ellen Lo: lostcode.info

As a trilingual resident of New York City, graphic designer Hilda Wong is often asked to translate between English, Chinese and Japanese. With a series of posters and a website that displays them in an enlarged, nondescript manner, Hilda and developer Ellen Lo take this concept and translate it into the Lost Code website. "I find myself struggling to find the right words to convey meanings precisely. Common phrases in one language can come out as nonsense in another. I’m sure a lot of people who speak more than one language can share this struggle," Hilda says.

On the site, a blue line follows the cursor, which the user can use to drag the oversized posters around to examine in their entirety. For Hilda, code takes on a double meaning: both as computer code as well as the linguistic element that allows speakers of multiple languages to introduce syntactical elements from one language to another, as it occurs in code-switching.

"I displayed my posters full size, so obviously it won't fit on your screen. You're meant to drag it around, and you can't resize anything to see the full image," Hilda says. "On top of that, your cursor is followed by a trace. Everything adds up to a very frictional digital experience, which resembles reading a translated text."

Languages used:

“The site uses Paper.js for the trace that follows the cursor and depth sorting with CSS and Javascript for the drag-and-drop of the posters."

Lisa Moura: www.alien-magazine.com

Though you might be more familiar with Lisa H. Moura's graphic design work, she has also ventured into code and digital design out of necessity. Alien Magazine, her editorial venture, required a website that could showcase a publication that aims to provide a "safe haven to those who feel like they have none."

"I'm not a full-time developer, but I learned how to develop and code to help me out on my daily needs as a designer and as a way to learn the basics of this language to better communicate my thoughts to other hardcore developers," Lisa tells It's Nice That. "The website and the project as a whole is basically a 'one-woman show' at the moment. Not exactly by choice, but by necessity."

With the site split into two, the content of each half scrolls in opposing directions – one going up and one going down. Accompanied by some simple text animations, a stretching red font that grabs the user's attention, it's clear that this is the work of a designer.

Lisa tells us that the website is meant to reflect the idea of being an outsider. "Having this in mind, the website is built on contrasts: some are "rough" and almost unwelcome to the touch. The Avara font is a clear example of this, as it is a classic serif font hardened by its rough edges. Then the website is also being vertically divided in two, softened by the gradients which slowly show the website's contents. I would say the website is basically a soft punch," she describes.

Languages used:

“The website is pure HTML5, CSS and some basic Javascript with Shopify's integration to work as an online shop as these are the languages that I currently speak and with which I am pretty familiar with. I feel that knowing the basics forces me to compensate with some extra creativity on the design or with unusual design solutions."

Rifke Sadleir: www.helleaux.world

Outside of making microsites for the Selfridges and Depop collaboration and running coding workshops for Digi-Gxl's Ctrl Your Future, London-based Rifke Sadleir recently created Hellaux World, a single-serving website that pushes the web to be weird again.

"I built the site during a coding meet-up in the Netherlands called Creative Coding Days, hosted every year by an amazing creative coder Ria Stroes. We stayed at Ria’s house for a few days and all worked on individual projects, but everyone shared ideas and helped each other a lot, so the site is definitely the product of that," Rifke tells It's Nice That. On the site, your face is tracked and mapped onto a cartoon face with a large red nose that wipes off the orange gradient background. "If you use it with a friend, another smiley face will appear and you can work together to wipe away the background!" she adds.

"I wanted to use a simplified face – something that doesn’t make the user feel as self-conscious as footage straight from their webcam, but still feels kind of anthropomorphic. I wanted to give it a cartoon style mainly because I found it funny at the time," Rifke says. "I think the use of webcams holds a lot of negative associations of surveillance for people, so making it funny and unthreatening was also an attempt to counter that." For some reason, like an animal seeing its reflection for the first time, Rifke manages to capture our attention using a simple concept.

Languages used:

“I built it using PHP, CSS, Javascript and a face tracking library called Pico.js, which enables you to track faces from webcam input in only 200 lines of JavaScript, which is insane. Originally I’d been using ML5 Posenet, which offers more in the way of body tracking and pose detection but is a huge library and was unnecessarily large for what I was trying to achieve."

With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick” at checkout.