I chose this African Queen song because it has been my favourite song for long. Judging from the name of the song and its lyrics, you will understand that it has African vibes, so I decided to give my website an African style. Since we are not allowed to use images, I decided to choose elements that will enable me to achieve this using just colours and typography. Details about my mood board and page mock-ups can be found on my Whimsical and Figma pages respectively.
Colours:
I created my mood board using several portraits of beautiful African women as well as selected African scenery. From my mood board, I chose dark brown because it was the primary colour I got when I extracted the colours from my mood board. I also chose mild brown, cocoa butter, butter yellow and off-white colours because they had the African look and feel that I needed. I also wanted my website to have high contrast and each section of lyrics arranged using high pitched colours. For this reason, I chose light brown, yellow, lemon green, sky blue, pinkish purple. I finally used orange from my mood board for the links as it also had an African feel.
I made the headings yellow so that it can complement the dark brown background I chose and gave the body text a slightly off-white colour to enable easy reading.
Fonts:
I also wanted my heading typeface to represent the beauty of the African woman just like this song was tying to explain. So I chose “Londrina Shadow” for the headings and for the body I chose “Oldenburg” because it had this classic and easy to read feel. Since both of them were cursive fonts, I had to choose differnt cursive fonts to serve as fall back incase the fonts fails to load for any reason. While “Londrina Shadow” has a very strong African fell, “Oldenburg” on the other hand was more subtle and less distracting.
Layout:
I chose different layouts for different viewports to make the page more interesting for the readers. The mobile layout was quite simple because there was not so much real estate to play around with. But the other screen sizes had me experimenting different irregular layouts as well as trying my hands on CSS Grid.