{"id":2001,"date":"2025-03-12T14:47:50","date_gmt":"2025-03-12T14:47:50","guid":{"rendered":"https:\/\/sites.wsagames.com\/ab15g23\/?p=2001"},"modified":"2025-03-19T12:58:47","modified_gmt":"2025-03-19T12:58:47","slug":"buttons","status":"publish","type":"post","link":"https:\/\/sites.wsagames.com\/ab15g23\/buttons\/","title":{"rendered":"Buttons"},"content":{"rendered":"\n

When looking for references for buttons I found a community of people who create their own custom button panels<\/a> for games, one niche I found was for flight simulation games, Elite Dangerous <\/em>in particular. I also had a snoop around itch.io and the asset packs that were available, I did this to get a feel for style and to get an idea of how to layout my own assets when I finish with the UI.<\/p>\n\n\n\n

\n
\"\"
Custom button panel reference<\/figcaption><\/figure>\n\n\n\n
\"\"
Control room machine reference<\/figcaption><\/figure>\n<\/figure>\n\n\n\n

I’d also gone around and taken pictures of buttons and panels I found that were good references for the design.<\/p>\n\n\n\n

\"\"
Buttons in the studio for the projector<\/figcaption><\/figure>\n\n\n\n

Itch.io packs that I most found interesting: Doomsday Button Panel<\/a> and Sci-Fi UI<\/a><\/p>\n\n\n\n

Round or Square?<\/h2>\n\n\n\n
Circular Buttons<\/strong><\/td>Square\/rectangular Buttons<\/strong><\/td><\/tr>
\u2714 Best for:<\/strong>
Minimalist, futuristic, or touch-friendly interfaces
\u2714 Pros:<\/strong>
– Looks sleek and modern
– Takes up less visual space
\u2714 Cons:<\/strong>
– Less space for text\/icons
– Harder to align neatly<\/td>		\u2714 Best for:<\/strong>
Traditional, structured, or text-heavy UIs
\u2714 Pros:<\/strong>
– More space for labels and icons
– Easier to arrange in menus
– More familiar and readable
\u2714 Cons:<\/strong>
Can feel rigid or outdated if too sharp-edged<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

To reflect the retro-industrial, analog machine aesthetic<\/strong> I’ve decided on square\/rectangular <\/strong>with rounded edges \u2013 like older industrial control panels with large mechanical buttons.<\/p>\n\n\n\n

For design & feel I’m going to aim towards:<\/p>\n\n\n\n

    \n
  • Chunky, tactile-looking buttons<\/strong> with metallic or plastic textures.<\/li>\n\n\n\n
  • Flickering indicator lights<\/strong> (light up for active, no light for inactive).<\/li>\n<\/ul>\n\n\n\n

    Following the tutorial below, I adapted the steps to create something more alike to what I was aiming for:<\/p>\n\n\n\n

    \n