Revamping a Student Led Brand for a Growing Community

Smile is a student mental health and inner-life enrichment club focused on promoting campus wellness. As the lead of the design team for a year, I have been responsible for revamping the current website, designing posts for the Instagram page and establishing a clear visual Identity for SMILE.

I created a design guideline for our social media team to simplify and streamline the process of creating posts. The guideline highlights our typography, color palette, and key visual elements to maintain a consistent look across all our content. You can read more about it on thisNotion page.

Similar to our Instagram, the web designs features vibrant gradients as the key visual element aligning with SMILES positive values.

CSS has properties likeradial-gradient,layer-blurandlinear-gradientwhich can be used to create gradients and then animated using a keyframes transformation. While these methods work well for simpler effects, they are not ideal for creating layered gradient patterns as seen in the hero section.

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 byThi.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.

View the code for the fragment shader onGithub