Silken
Prev
Contents
Jump To:
Link to Website:
Project Overview
Project Purpose
The purpose of this project and class was to teach ourselves an advanced topic or technology on our own and then design a website using it.
I chose to explore shaders because they seemed really cool but also really challenging.
The Goal
My goal, on top of teaching myself shaders, was to explore the concept of emotional design. The idea is that incorporating cool visuals, smooth animations, and a sense of wonder would make the user happy, and a happy user creates a smooth UX.
The Product
Silken is a silk/satin pillowcase brand selling their products in stores and on their website.
Project Duration
July-August 2025
Self-Study
Teaching Myself the Technology
First, I taught myself how to use the canvas element as well as shaders in web programming, and explored the topic of emotional design.
I hadn't taken any programming or JavaScript courses yet at this time, so teaching myself shaders was really jumping in the deep end and learning how to swim.
I started with this beginner friendly JS library called P5.js which has excellent documentation which teaches designers how to program. It gives access to the canvas element as well as shaders.
I also explored the concept of emotional design. The idea with emotional design is that providing a novel, delightful experience will make the user remember the brand, increase enjoyment, and give the brand a premium feel.
Understanding the User
Competitor Research
As always, I start the design process by researching similar brands and the target segment to see what other have already done well and what needs to be improved.
I found most of the brands barely talk about product specifics on their site, but rather mention all the benefits of using silk/satin pillowcases for your hair and skin.
There were lots of testimonials, dermatologist recommendations, and before/after images.
Target Audience
Next, I identified the target audience for the brand and created personas to represent key user groups.
The target audience is primarily women, especially women of color because of their hair, however this is a product that anyone can use. We are targeting people who are into skincare already. Many have satin pillowcases already, while some may be interested in trying their first one.
A common pain point is that it can be difficult to tell how good a pillowcase is just through images online.
Starting the Design
Paper Sketches
After researching, empathizing with the user, and defining goals, I moved on to sketching my designs. I started by sketching quick wireframes on paper to get all my ideas down and see which ones I liked.
I went for a dark color scheme to give a soothing nighttime feel, and made use of shaders and 3D waving pillowcases to delight the user.
I decided to use blues and purples to provide a relaxing, soothing nighttime feeling.
I had the idea to depict pillowcases in 3D to give users a cool interactive experience and help them remember the brand.
Refining the Design
Paper Sketches
Next I created high-fidelity sketches in Figma to nail down the finer details.
I picked a font that gave a luxury/premuim feel and used lots of gradients and shaders to give a "silk" look.
Based on my initial research, I added a testimonials section, a dermatologis recommended section, a before/after section, and more to help the user understand the benefits of silk/satin.
Coding
P5.JS
P5.js was a great introduction to JavaScript and programming procedural generative art.
This is a procedural art piece that creates an array of points and moves them with perlin noise to create a depiction of waving hair.
Each pillowcase is made procedually in a canvas element in WEBGL mode and has its own orbit controls.
I've since taken a JavaScript class and come a long way in that regard. I came back and refactored all the JS in the site because it was frankly a mess before.
Shaders
Shaders were extremely difficult to wrap my head around, considering my level of programming knowledge at the time. I thought they were really cool though, so I pushed through to try to understand them.
Resources like The Book of Shaders and many youtube videos were helpful in getting them set up.
These shaders were meant to depict silk. The idea is that it creates a unique and enjoyable experience for users that makes them happy and keeps the brand in their mind.
Going Forward
Takeaways
Impact:
The feedback from peers was that the site felt like a cool experience and was unique, and they thought the shaders portrayed silk well.
What I learned:
I taught myself a lot over the course of this project. Notably a JavaScript library and GLSL Shaders. I also dove deep into the topic of emotional design, making the design stand out from everything else by creating a delightful experience.
Next Steps
Going forward, I would add more content to the site and maybe some more product images as well.