steam design
拡大する // enlarge
Website
feb 2024 - now

steam design

A steam redesign made by Juxtopposed brought to life through code.

framework
nextjs·react
services
steam api·figma
ui
tailwindcss
概要// about

About The Project

I came across this video when watching one of my favourite design youtubers Juxtopposed, with me using Steam as a daily driver for all my games I just knew I had to try and bring this to life. Using the original Figma design she provided as a foundation, I rebuilt the entire interface from scratch with React, Next.js and Tailwind. I built every component myself and tried to make them as responsive and re-useable as I could. This is a current work in progress and I still have to try and add mobile responsiveness too.

Challenges

Some challenges I had was trying to get some of the styling correct due to the styling not being so clear in Figma without having to pay for the dev mode feature through premium.

A lot of steam assets are hard to come across and use without legality issues

Solutions

For the styling challenge I had my two go to ways was to either eyeball the style and mimic as best as I could or inspect element the component if I couldn't make it correctly there is probably a better way to do this but I don't know how if you know of a way please contact me!

For the assets I had to improvise with some of the assets from websites online that provide copyright free assets to use for projects.

機能// key features
01real time info
02store with animations
03community hub
04user profiles
課題// challenges & solutions
problems

solutions

画廊// gallery
steam design | michael connor