Basquiat Ui Style Guide
How could Basquiat be if he were an UI Style guide?
This is a story that begins some time ago in the train that go to San Giovanni a Teduccio, where Nina, Maria and me, three Apple Developer Academy students, used to go back and forth from the university complex.
Our common passion for design and arts brought us to collaborate and create a teamwork named POP UP.
To inaugurate the birth of our group we decided to take on a challenge:
Convert an Artist’s style into an UI Style Guide for an IOS App.
Our goals for this challenge are:
- Create a guide that respects artist’s identity
- Be more proficient on creating UI interface elements
- Share our work with other designers that could use it for their projects
- Experiencing a new way of working during quarantine 🙂
Now, imagine that you are a famous artist and someone ask you to convert your style and your way of expressing yourself into a Ui style guide.
Which color would you choose? Which font could be closer to your style and at the same time appropriate to your style guides? How would you convert your sign and your art in clear icons?
Why Basquiat?
We were looking for someone that was strongly connected to the world of graphic art and with a great expressive and recognisable ability.
We found in Basquiat all the characteristics that we were looking for; an artist that through its sign combines pictorial, iconographic and typographic elements.
We tried to get into the head of Basquiat studying his life to empathise with the author allowing us to get our answers.
Which are the elements that we need to get to develop a clear UI style guide and how could them be consistent with artist’s identity?
We started studying and analysing the main components of different UI Style Guides, the parameters to be respected in order to obtain a clear and concise design, the colours on the UI Design and how to apply them to better organise our project and understand how to combine them with the artist’s work.
We proceeded examining Basquiat’s works of art and we focused particularly on signs, iconography and colours that belongs to his creative process, that gave us the basis to develop a set of illustrations, symbols and glyphs.
We analysed the main colours of the artist’s works, then we chose a colour palette that could respect his personality and at the same time be efficient in generating balance and contrast.
From these colours we separated two different palettes for two device’s appearance:
One for a light mode:
And the other for a dark mode:
Analysing, or simply admiring Basquiat’s art, you can notice that words appears very often in his works, so we decided to realise a font from his letters, following his style and we named it “Samo” like the pseudonym that he used to sign his graffiti.
We used this font only in our poster and logo; for our style guide, instead, we decided to use an existing font that could match his strength so we decided to adopt “Titillium web”.
From the study of his font and iconography we created also a set of
Glyphs:
Illustrations:
And the App Icons:
We decided to represent the crown because it’s one of the most iconic elements that has an high symbolic value for the artist.
You can download our work HERE and use it.
Thank you for reading
Credits
