Back

Web 3

Hide the Pain Harnold

9GAG

Hide the Pain Harold is a collection of 10 unique meme NFTs celebrating the project of “Hide the Pain Harold: The Movie.” Each NFT is a real storyboard picture from the pre-production of the “Hide the Pain Harold: The Movie”, featuring the legendary meme star András Arató.
/ Role
UI Design
/ Software
Figma, Photoshop, Lottie
/ Design Concept
# Adoption of 9gag elements into new design
/ Visual Element
The layout of 9GAG Meme is well known to author+name+time+title,
Hence, the same design was used to remind the memory of watching memes on 9GAG.
/ Layout
Memes are standard 1:1 square size,
Thus, a Split layout with a square module was applied to achieve coherence in the design
(Left: Split Layout with square module) (Right: Size Proportion of each section)
/ Compositional Flow And Rhythm
To keep a smooth flow and good rhythm for users,
images are set in diagonal spots sequentially along the vertical axis in this Split layout design.
The landscape image in the center (where Harold face is in the image center) breaks the flow a little to increase visual interest without pausing users from skimming.
The distance between each pause spot is designed in descending order to keep up the reading speed.
(Left: Directional Flow & Pause Spots) (Middle: Distance between Pause Spots) (Right: Vertical Distance)
/ Color
Black, White and Grey are the main color theme of 9GAG.
Here, we used 2:1 proportion to minimize cognitive load.
(Left: Black: 66.5%) / (Middle & Right: White+Grey: 33.5%)