Role
Lead designer and developer
Team
Rastin Rassoli, Ishika Arora
Tools
Figma, Three.js, React, GLSL
Skills
Web Development, Design
Background
Smile is a student mental health and inner-life enrichment club focused on promoting campus wellness. As the lead of the design team, I am developing a design system (WIP) to simplify creating posts for non-designers and am working on revamping website to ensure consistent branding across all platforms and establish a clear design direction.
Typography
Our primary typeface is Neue Montreal for its versatility. For Instagram posts, we mixed fonts such as playground, instrumental serif, Mondwest, to make content decorative and engaging.
Font pairings
Colours
Since we try to aim for a vibrant look, we avoided limiting the colour palette and we have larger emphasis on the pink, blue, and orange tones. We incorporate these tones in gradients against colours of similar, and occasionally, different hue.
Colour scheme
Designing the Website
The revamped Smile website is under development, the new design focus on involves animated gradients. CSS provides tools like radial-gradient,linear-gradient and layer-blue which can be animated using a keyframes, these methods are limiting when u want to create a more complicated gradient with patterns as in the hero section.
Wire frames
Shaders
Shaders allow us to fully customize the patterns of the gradient by using dynamic, noise-based or volumetric methods to compute them. It runs on the GPU and calculated the colour for each pixel rendered and is optimized to work independently from the React render cycle.
To generate the gradient we utilized the cosine gradient Library by Thi.ng/Color. The formula allows to create a smooth, continuous gradient based on the cosine function. It works by oscillating the intensity of RGB values using in the function where each wave represents a color channel, and their amplitudes, frequencies, and phases determine the gradients appearance.
Cosine visualizer
Cosine Function
vec3 cosineGradientColor(in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d)
{
return clamp(a + b * cos(6.28318 * (c * t + d)), 0.0, 1.0);
}Result
Fragment Shader
void main() {
vec2 uv = vUv;
uv *= uUvScale;
for (float i = 0.0; i < uUvIterations; i++) {
uv += noise(vec3(uv - i * 0.2, (uTime) + i * 32.0)) * uUvIntensity;
}
float colourInput = noise(vec3(uv, sin((uTime)))) * 0.5 + 0.5;
vec3 colour = cosineGradientColor(colourInput, uColourPalette[0],
uColourPalette[1], uColourPalette[2], uColourPalette[3]);
gl_FragColor = vec4(colour, 1.0);
}