Responsive Game Interfaces

Nathaniel Inman analyses UX inside of game interfaces and uses codepen to attempt mocking up something you would see in a responsibly user friendly rpg.

Responsive Game Interfaces
A couple minute codepen thrown together with Vue.js

game_interface

It's abundantly clear that making interfaces for portals, single page applications, analytics or CRUD apps is so much easier than creating applications for games. UX within games is much more complicated. Now add upon that complication a responsive design.

It took the better part of 8 hours to get a design mock-up that worked on the smallest iphone device (man they're tiny!) and that scales up to the largest phablet. I still need to work on detaching the pane and having a more 'diablo-esque' two-pane character panel / inventory approach for desktop users.

The largest surprise in this day endeavor was how easy 'Vue' was to implement with mock data. My usual stack for a spa is some form of 'angular2/ember/react+jade+stylus' but vue was so much easier to hookup inside of 'codepen'. I'll be using it from now on for initial mock-ups and perhaps low-interface heavy applications that could merit from data binding.