Alright I admit that I may be a big dork, which is how I wound up here writing this for a living, but I really do think that user interfaces for games are quite interesting. The tiniest tweaks can separate amazing from abysmal and designing for keyboards versus gamepads is a bigger gulf than most people realize. I am one of at least two people in the entire world who feel this way, I’m pleased to find, because one developer has put together a whole searchable database of the stuff for other UI artists and designers to use as a reference. It’s very neat, I promise!
Senior UI artist Edd Coates of Double Eleven has put together the Game UI Database website where you can search for images of various menus and interfaces from all sorts of games. The database went up earlier this month but was briefly slain by an abundance of traffic. Apparently it’s more than just the two of us interested in these things. Imagine! It’s now returned for you to peruse at will.
So far, the database includes over 12,000 screenshots from 339 games. You can search by particular game or look for a bunch of screenshots of pause menus specifically. You can even filter by certain visual design elements like menus made to look like wood or paper. Here are a bunch of examples of radial menus.
It’s quite a neat project, and valuable too. Cataloging how games look and work is a priceless resource for future development. It reminds me of the museum of lockpicking from several months back. Although this database is just images, not gifs or recreated interactions, having a reference for visual design is such a wonderful idea.
Coates is now accepting screenshot contributions to the database too, which is a challenge I think I may just have to lend my hand to. I have oh so many feelings about user interface design in MMOs and it looks as though the database doesn’t yet have references for the several that I’ve played.
Go on and take a gander and maybe holler down here in the comments about one of your favorite game interfaces.
function appendCarbon() { !function(a,l,b,c,k,s,t,g,A){a.CustomerConnectAnalytics=k,a[k]=a[k]||function(){ (a[k].q=a[k].q||[]).push(arguments)},g=l.createElement(b),A=l.getElementsByTagName(b)[0], g.type="text/javascript",g.async=!0,g.src=c+"?id="+s+"&parentId="+t,A.parentNode.insertBefore(g,A) }(window,document,"script","//carbon-cdn.ccgateway.net/script","cca",window.location.hostname,"04d6b31292"); }
function runMormont() { var s = document.createElement('script'); s.type="text/javascript"; s.async = true; s.onload = function() { triggerMormont() }; s.src="https://cdn.gamer-network.net/2018/scripts/mormont/v2.23.0/mormont.js"; document.getElementsByTagName('head')[0].appendChild(s); }
function runSAK() { var s = document.createElement('script'); s.type="text/javascript"; s.async = true; s.src="https://sak.userreport.com/gamer-network/launcher.js"; s.id = 'userreport-launcher-script'; document.getElementsByTagName('head')[0].appendChild(s); }
function runSkimlinks() { var s = document.createElement('script'); s.type="text/javascript"; s.async = true; s.src="http://s.skimresources.com/js/87431X1560958.skimlinks.js"; document.getElementsByTagName('head')[0].appendChild(s); }
function youtubeParser(url){ var regExp = /^.*((youtu.be/)|(v/)|(/u/w/)|(embed/)|(watch?))??v?=?([^#&?]*).*/; var match = url.match(regExp); return (match&&match[7].length==11)? match[7] : false; }
function runBBMVS() {
jQuery('article main iframe').each(function(){ src = jQuery(this).attr('src'); if(src) { check_yt = youtubeParser(src); if(check_yt){ jQuery(this).attr('id', 'yt-' + check_yt); jQuery(this).attr('data-yt-id', check_yt); jQuery(this).addClass('yt-embed'); } } }); var promises = []; jQuery('article main iframe.yt-embed').each(function() { check_yt = jQuery(this).attr('data-yt-id'); (function(replace_yt) { promises.push(jQuery.getJSON( "https://gamernetwork.bbvms.com/json/search?query=%22" + replace_yt + "%22&context=all", function( data ) { if(typeof data['items'][0] !== 'undefined' && typeof data['items'][0].id !== 'undefined') { yt_video = jQuery('#yt-' + replace_yt); jQuery(yt_video).attr('data-bbvms-id', data['items'][0]['id']); }; })); })(check_yt); }); Promise.all(promises).then(function( data ) { first_yt = true; jQuery("[data-bbvms-id]").each(function() { yt_video_wrapper = jQuery(this).parent(); if(first_yt) { playout_id = 'rock_paper_shotgun_autoplay'; first_yt = false; } else { playout_id = 'rock_paper_shotgun'; } jQuery(yt_video_wrapper).after('