Design + Coding (HTML & CSS)

In order to experiment with different ways to use code creatively, I designed and coded several experimental typographic designs for an excerpt of the song "Floating" by Alina Baraz ft. Khalid, a dreamy love ballad about two people who are fantasizing about each other and thinking about what the other person said. I played around with slightly different interpretations of the tone of the lyrics and also explored different ways of representing similar interpretations.

​

Variation 1

For one of my variations, I tried to go for a bold, passionate, in-your-face aesthetic with a red, white, and black color palette and text that looked like it was scrawled out in permanent marker. in this variation, I experimented with falling letters and overlapping text.

​

Variation 2

In my next variation, I went for a more dreamy, romantic feel with a combination of pale pink and white. I chose a bubbly font with gaps in it to go for a lightweight, floaty look, and paired it with a handwritten cursive. I experimented with drop-shadow to give the text a 3-D effect that would make it look like it was literally floating up from the background and tried interweaving some of the text in the two different fonts.

​

Variation 3

In the next variation, I also went for a more dreamy feel with a combination of pale blue and white, and a story-book like serif. I tried to make the words like like they were floating up as the user scrolls down the page and played around with deconstructing the words to create a feeling of movement with the letters.

​

Variation 4

In the next variation, I played on the water imagery in the lyrics and created flexboxes of cursive text to look like waves.

​

Project completed for my Fundamentals of Website Design class.

​

​