Designs made in code
The original goal was to create one interactive design every day in 2018 using only code. Though it's not daily anymore, I'm still creating whenever I feel inspired. Here are some questions that I'm frequently asked:
Ultimately, the idea is a bit silly. Design software is definitively better suited for designing. However, combing the design and development process by designing in code could potentially leave more time to create cool interactives and animations.
As a developer my goal is to improve my skills in technologies I rarely use, such as repeating gradients, 3d effects in the browser, and some day maybe even cool high-performant WebAssembly powered graphics.
As a designer I want to get better at composition, try out new color combinations, learn how abstract and organic shapes are made, and explore new animation techniques.
As a developer and designer I have the silly goal of being able to tell which color I'm looking at when seeing for instance #2cefcb or rgb(255, 68, 137)
The simplest ones are just made with HTML, CSS, and SVGs. For the 3D looking ones I'm using WebGL through three.js. Three.js has certain 3d shapes, such as spheres, boxes and planes, built-in which I use a lot with modifications. I'm adding color and textures to those shapes by coding fragment shaders.
All you really need is a text editor and some patience. A good place to start is to learn some basic CSS and HTML. Create boxes and circles, overlay them, experiment, and see what happens.
If you're interested in making 3d scenes, I would recommend looking at three.js and learn how to write fragment and vertex shaders. Here are some cool tutorial and useful resources:
Follow DailyCssDesign on Instagram
Contact me at bjorndailycssdesign.com