BLACK AND WHITE ALL OVER
DATE COMPLETED:
PROJECT TYPE/MEMBERS:
TOOLS USED:
COURSE:
LOCATION:
ABOUT THE ARTICLE:
The following narrative provides insight into Jean-Michel Basquiat's artistic
journey, capturing the profound impact he has had on the art world. The article
explores various aspects of Basquiat's creative endeavors, including his unique
style, notable collaborations, and the deep connection between his work and
black culture. Francesco, the author, reverently characterizes Basquiat's creations
not as mere objects, but as embodiments of "gifts" or "formal harmonies," highlighting
their uniqueness. Pellizzi further illuminates Basquiat's artistic essence,
portraying it as a fusion of Pop, Minimal, and Conceptual styles, imbued with a modern
yet minimalist aesthetic that distinguishes it from contemporary art. Reflecting on
Basquiat's gritty and graffiti-like aesthetic, Pellizzi recounts the artist's punk-inspired
beginnings, which eventually evolved into groundbreaking art installations.
THOUGHT PROCESS (BEGINNING STAGES):
readability and engagement
a unique perspective
to enhance user interest
reminiscent of Basquiat's style, such as rough and gritty text effects
GOALS FOR THE WEBSITE (DESKTOP/MOBILE SITE):
THE PROCESS:
INSPIRATIONAL IMAGERY:
Once the message and idea were solidified, I decided to look into some of
Basquiat’s work for typographic insporation and possible photos for the website.
TYPEFACE RESEARCH & RATIONALE:
Throughout the beginning stages of this project, I started to do some research on various
typefaces that would work for Basquiat’s style. For the written sections of the article, I wanted a
typeface that was clear and readable.
These were the choosen typefaces for the website!
Throughout the beginning stages of this project, I started to do some research on various
typefaces that would work for Basquiat’s style. For the written sections of the article, I wanted a
typeface that was clear and readable.
These were the choosen typefaces for the website!
Orbitron
This is a San-serif typeface that displays very futuristic tendencies and
creates this look that leaves the viewer in speechless. I believe this font is
good for titles, subtitles. Very modern looking font overall.
Lacquer
Lacquer is a paint like typeface that can be seen as a statement piece.
This font is very expressive and powerful. The typeface might not be ideal
for the large bodies of text. It can still be used for pull quotes, titles, or subtitles
to add visual interest.
Rock Salt
The typeface is similar to calligraphy/cursive. It’s a very thin font that has
the apperance of hand written print. It’s a nice contrast to see it along side
a san-serif typeface. You tend to get that beautiful balance between the
two typefaces.
Roboto Slab:
Serif font that almost portray’s itself as a san serif. It’s very thin typeface,
along with the shape of the letters gives it a very modern feel. I believe this
typeface is very easy to read in small and large text format. This typeface
resembles rockwell and gives off the same vibe as the well known typeface.
COLOR SCHEME & ADD ONS:
The color scheme for this website is black, grey, and white in attempts
to display Basquiat’s work in a unique and serious matter. Basquiat’s pieces
will also follow the same black and white theme for creative exploration and
copy write reasons.
To complement the colors, I wanted to incorporate small details that
complemented Basquiat’s style. For example the hand drawn crown, is one of
his iconic marks which symbolizes his artwork.
#000000 #D9D9D9 #FFFFFF
WIREFRAME SKETCHES & MOCKUP:
These were my beginning website sketches. Each segment/frame has a little written note to
jott down my thoughts and possible interactions that may occur throughout the website.
The first mockup was very experimental in terms of spacing and layout. The text was placed randomly
all over the page, and the images were rounded for a different visual appeal. I eventually went with a
staggered text from left to right and changed the images from a rounded edge to the regular straight
edge the image intented to have for a cleaner look.
all over the page, and the images were rounded for a different visual appeal. I eventually went with a
staggered text from left to right and changed the images from a rounded edge to the regular straight
edge the image intented to have for a cleaner look.
GRID USE:
For the laptop screen, I decided to go with the 12-column grid system with gutters and margins both
set at 24px. This choice provides me with the flexibility to design various layouts for the website. As for
the phone screen, I also chose a 12-column grid, but I adjusted the gutter and margins to 12px. This decision
was made because of the smaller screen size, which allows for more flexibility and space for images. By
reducing the size, it allows for more design freedom and creativity.
set at 24px. This choice provides me with the flexibility to design various layouts for the website. As for
the phone screen, I also chose a 12-column grid, but I adjusted the gutter and margins to 12px. This decision
was made because of the smaller screen size, which allows for more flexibility and space for images. By
reducing the size, it allows for more design freedom and creativity.
FINAL WEBSITE (MOBILE & DESKTOP):
FINAL THOUGHTS:
In summary, I found my article website to be effectively organized and visually engaging, with attention to spacing,
aesthetics, and typographic elements. This project provided valuable insights into creating loading interactions and
presenting content dynamically. Looking back, I realize I could have enhanced the project further by incorporating
additional interactions for the images. For instance, adding a hover effect to revert the images to their original colors
would have added a nice touch to the overall presentation.