Maws Beats.

I worked closely with beatmaker MawsBeats to enhance the buyer’s user experience & immersion, re-imagine his artistic direction, and develop and launch his new website.

Design

The client already had a new brand theme in mind and wanted darker, grainy tones, in contrast to his existing site, which looked more “Lofi” and playful. He created the Maws logo present on the hero banner, and from there I went to work building a design that fit these new vibes.

Prototyping

The original website’s structure and overall user flow were something the client wanted to keep, so no user research was done for this project. Several iterations of higher-fidelity prototypes were built and improved through the client’s regular feedback. After a few back-and-forths, the final prototypes were ready to be implemented.

The main text and color styles were defined and implemented throughout the entire prototype, so that they could later be turned into CSS variables.

Development

This part was done in HTML, SCSS, and some JS for the animations and certain interactions. Everything was written in VS Code, and I used Prepros to compile my SCSS into a main CSS file. I pushed my code to a GitHub repository so I could access it anywhere and easily create branches, all while keeping a detailed history of merges.

Structure

The project followed a simple structure, with separate SCSS folders for base settings such as typography, colors, and a reset, and other folders for components like cards, buttons, and navigation. This makes it easy to change components and keeps the project fairly organised.

Simple variables were written at the start of the project to match the text and color styles set in Figma.

Animations & interactions

I like to add simple animations to websites to enhance the user’s immersion when possible, and make the page more stimulating and fun to interact with.

{{ waveBars }}

MAWS, Macabre

♭ B minor

li {

height: 20px; width: 4px;

border-radius: 10px;

background: #236c6481;

animation-name: wave1;

animation-duration: 0.3s;

animation-iteration-count: infinite;

animation-direction: alternate;

}

@keyframes wave1 {

from { transform: scaleY(0.2); }

to { transform: scaleY(0.5); }

}

Mouse-tracking parallax

Copy email to clipboard

function myFunction() {

var copyText = document.getElementById("myInput");

copyText.select();

copyText.setSelectionRange(0, 99999);

navigator.clipboard.writeText(copyText.value)

.then(function () {

var snackbar = document.getElementById("snackbar");

snackbar.className = "show";

setTimeout(() => {

snackbar.className = snackbar.className.replace("show", "");

}, 3000);

});

}