Maws Beats

#prototyping

#UI

development

#html css js

Visit site

INTRODUCTION

I worked closely with beatmaker MawsBeats

to enhance the buyer’s user experience & immersion, re-imagine his artistic direction, develop and launch his new website.

PARTIES INVOLVED

1 Designer, 1 client

TOOLS

Figma, Vscode, Prepros, Github.

TIMELINE

July - August 2023

Design

The client already had a new overall brand theme in mind and wanted to go for darker, grainy tones, in contrast to his current website which looked more “Lofi” and playful. He created the Maws logo that is 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 was something that 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

Maws-2.0 • Repository 🔗

This part was done in HTML, SCSS, and some JS for the animations and certain interactions. Everything was written in VScode and I used Prepros to compile my scss into a main css file. I pushed my code to a Github repository so that I could access it from anywhere and easily create branches to add to it all whilst keeping a detailed history of merges.

Structure

The project followed a simple structure with separate scss folders for my base settings such as typography, colors, and a reset, and other folders for things like card, button, and navigation components. This allows me to make changes to components easily and makes for an overall fairly organised project.

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

$h2-display-font: 'Philosopher', sans-serif;
$h2-display-font-size: 1.5em;
$h2-display-font-weight: 700;

$h3-display-font: 'Philosopher', sans-serif;
$h3-display-font-size: 1.125em;
$h3-display-font-weight: 700;

$h4-display-font: 'Philosopher', sans-serif;
$h4-display-font-size: 1em;
$h4-display-font-weight: 400;

body-font: 'Montserrat', sans-serif;
$body-font-size: 0.875em;
$body-font-weight: 500;

$lineargreen: linear-gradient(90deg, rgba(36, 120, 110, 0.84) 0%, #2B8E82 50%, rgba(36, 119, 109, 0.84) 100%);
$greenstroke: #2F696D;
$green: #236C63;
$smokeywhite: #C7C7C7;
$divider: #403F3F;
$black: #13050B;
$grey: #222222;
$greystroke: #424242;
$white: #FFFFFF;
$headerbg: rgba(47, 46, 46, 0.5);

Animations & Interactions

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

MAWS - Macabre

B minor

li {
list-style: none;
height: 20px;
width: 4px;
border-radius: 10px;
background: #236c6481;
margin: 0 3px;
padding: 0;
animation-name: wave1;
animation-duration: 0.3s;
animation-iteration-count: infinite;
animation-direction: alternate;
transition: ease 0.2s;
}

@keyframes wave1 {
from{
transform: scaleY(0.2);
}
to{
transform: scaleY(0.5);
}
}

Mouse tracking parallax

document.querySelectorAll(".parallax-wrap").forEach((parallaxWrap) =>
parallaxWrap.addEventListener("mousemove", ({clientX, clientY }) => {
parallaxWrap.style.setProperty("--x", clientX);
parallaxWrap.style.setProperty("--y", clientY);
})
);

Copy email to clipboard

function myFunction() {
var copyText = document.getElementById("myInput");

copyText.select();
copyText.setSelectionRange(0, 99999); // For mobile devices

navigator.clipboard.writeText(copyText.value).then(function () {
// Show the snackbar when the copy operation is successful
var snackbar = document.getElementById("snackbar");
snackbar.className = "show";
setTimeout(function () {
snackbar.className = snackbar.className.replace("show", "");
}, 3000);
// Change 3000 to the number of milliseconds you want the snackbar to be visible
});
}