3

A visual history of Playstation controllers — illustrated entirely in Figma

 2 years ago
source link: https://uxdesign.cc/a-visual-history-of-playstation-controllers-a98def71f480
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

A visual history of Playstation controllers — illustrated entirely in Figma

Late last Thursday, I was in bed scrolling Instagram and came across a stylized drawing of a Super Nintendo controller. I wish I’d saved the post to link here, because it was absolutely stellar. Seeing it must have triggered a dopamine rush or serotonin boost or—I don’t know, whatever hormone is responsible for motivation. It made me wonder if I could do that...in Figma, of course. Because, for whatever reason, every design challenge I tackle ends up being a way for me to push the boundaries of that software.

An stylized illustration of a Super Nintendo controller by Rachit.
For reference, while this isn’t the actual design, what I saw was something akin to this illustration by .

After pausing to debate whether it was really worth the effort, I reached down, pulled my Mac out from its cozy home under a pile of clothing, and loaded it up.

For whatever reason, I decided to illustrate a Playstation controller. At first, I tried to mimic the original artist’s stylization. It didn’t take long, however, for me to get distracted by the simple but magnificent power of gradients. Before I knew it, my focus had shifted from stylization to photorealism. Just how realistic could I make an object in Figma? Figma lacks sophisticated tools available to artists in Illustrator (such as perspective grids, gradient meshes, custom brushes, textures, and more). This means more pressure on your own sense of perspective and more tedious, manual labor.

The end result was five illustrations, seen below. Every element of each controller was drawn 99.999% in Figma. That remaining .001% accounts for the logo assets on controllers for PS 1–4, which I snatched off the interweb. I redrew the logo on the PS 5 in order to create that deboss effect.

When all was said and done, I have to say…I am damn proud of the end result. While not entirely photorealistic, the illustrations certainly warrant a double-take.

The older controllers were undoubtedly more challenging, since they’re made of a rougher material. To compensate for Figma’s lack of texturizing features, I used the Noise Figma plugin. By using multiple layers of light and dark noise, and mixing up the scale and density of the particles, I was able to create a semi-passing textured effect. I also blurred one of the noise layers on the PS 1 controller to create a slightly dirtier, aged appearance.

On top of all that, I aimed to match the marketing material that was prevalent for each device at the time it was launched. It was challenging to find reference material for the older consoles, but hopefully, for those who lived through the relevant eras, the designs hearken back to their roots.

Without further adieu, I introduce to you a visual history of Playstation controllers, as illustrated entirely in Figma.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK