#06 – It's never been so easy to use code as a design tool
3 very simple exercises with the help of ChatGPT
Disclaimer: this is not a tutorial, nor anything advanced. It’s for newbies of code.
I’m not a proper web developer, I’m just a designer who loves to code. So not very technical.
When I started coding, I didn’t know what I was doing.
I used to sketch layouts or imagine interactive behaviours and tried to find ways to achieve them. It was all copy-paste: heading to stackoverflow, mixing jQuery and vanilla JS, asking pieces of code to friends that actually knew what they were doing.
The only tutorial that actually helped me was Javascript30, which is not really a tutorial, but a collection of 30 exercises, and it’s free.
With Javascript30 I finally got what I was looking for: how to write Javascript instructions to change or even create the HTML and CSS on a webpage (basically what JS is meant for).
For non-coders: think about books, HTML is the content (titles, paragraphs, images, quotes and so on), CSS is the style (typography, spacing, color and so on)
Those Javascript instructions can be things like:
if I scroll the website, change the background color
if I click on a button, create and place some images on the page
while I hold my finger on a image, make the image follow me
when I type on the keyboard, play some sound
Below are three exercises I usually do with my students. They’re simple, but not so much if one has never used code. Writing it can become frustrating very quickly at the beginning, you just miss a ) or a “ or a > and everything stops working.
Luckily, a good thing about AI is that it writes this kind of code quite well while also explaining it, one just needs to be careful in writing the prompt.
For those who want to play with the code and change some things, I created a project on Codepen for each exercise.
1. An image brush
This is the simplest example we usually share with our students. It follows this simple question: what if, when moving my mouse, the website does something?
If you change does something to places an image where I put the mouse, the output of moving the mouse around should look something like a brush, but instead of color there’s a picture.
So I asked ChatGPT to write the code for me, here’s the prompt:
a website where the mouse places images every time it moves on the page
I also added two more rules, which you can include in the prompt: 1) change image each time I click, and 2) remove the images after 2 seconds (otherwise my mac explodes).
Here’s the result:
2. A type tester
Since I teach to graphic designers, the most successful exercise is usually the type tester, like the ones you find on type foundries’ websites, where you can test fonts.
A type tester is typically composed of 1) an input for text and 2) a series of tools to change the font size, the line height, the weights and so on. An additional feature could be to have the possibility to set 3) a custom background.
So again, just prompt:
A website to test fonts, I want to be able to change the text
I want to change the font size, the line height and the letter spacing
A button that randomly changes the font
A button that randomly changes background color (only bright colors)
ChatGPT makes horrible styling by default, so I changed it to make it simple.
3. A spinning wheel of images
This is a nice one, it’s similar to what we did on the website of Spaziale Presenta. It’s a set of images arranged on a circle, distributed evenly.
I added two more things: 1) when I scroll the page the circle spins like a wheel, 2) the more the images are far from the horizontal center the more they scale up (to 2x).
As always, ChatGPT does the hard work for me:
A website where a series of images are arranged in a circular layout
When I scroll make the circle rotate and scale the images up to 2x when they are at the highest and lowest horizontal positions
Hope you enjoyed. If you’re interested in the topic, if you want to know more or if you already have the basics and want to experiment with more advanced code, subscribe to our Substack below, we may organize a workshop at our studio very soon.
If you have specific questions on the exercises, reply in the comments.