z-design's avatar
Star Citizen - Roberts Space Industries Ship UI
By z-design   |   Watch
325 37 64K (4 Today)
Published: March 16, 2013
© 2013 - 2019 z-design

This was a rather quick (2 weeks) UI demo I whipped up as a "test of capabilities" when I was interviewing for a position at Cloud Imperium Games, the company responsible for the highly anticipated Star Citizen space sim.

It is built entirely in HTML5/CSS/JS, but might not work on some devices as well as IE8 or lower (not enough time for compatibility testing!).

Basically, this is supposed to be a ship catalogue viewer to display each ship's hardpoints, specs, upgrade capabilities, etc. in a full-screen FUI/OS'ish style interface. You can rotate / flip the ship to see all angles and where everything is located. A more polished version would have a dropdown to switch to another ship, but I was only required to display the Hornet.
Image size
1480x824px 824.96 KB
Adobe Photoshop CS4 Windows
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
jaedenstormes's avatar
Would you be willing to license this general design (not the game content obviously) for use on another site?
CYnder1111's avatar
You sir are full of AWESOMENESS
Ronnin2012's avatar
So did you get the job or not? Cause pledge page still sucks. Oh snahp, it's Zane!
TheDigitalDiamond's avatar
He works on the game, not the website, that's outsourced.
Alextro's avatar
Looks really serious game interface for space sim
Graphic43guy's avatar
Graphic43guyHobbyist General Artist
pretty awesome
boot-cheese-3000's avatar
This was done on HTML5/CSS/Js? REALLY? This is impressive! You gotta show/explain to me how you did this, I love how that works! This definitely gets my patented "Thumbz Up Award"!:iconthumbsupplz:

Even Felly Fel is impressed!:iconhappyfellaavatar:
z-design's avatar
z-designProfessional Interface Designer
Thank you! I had actually explained it to one of our members a while back (last year), and was able to dig up an old post of mine:


Unfortunately, the image I attached in it no longer appears as a result of a forum software migration, but I hope at least some of it helps.

boot-cheese-3000's avatar
Well I'm still a beginner so everything went over my head. :laughing: What kind of forum is this--is it yours? Something tells me I'm going to have to ask more questions before I get the hang of it, like what software in general (Bootstrap, Django, Joomla, or a combo or none of those) and other stuff.

Another template work that blew me away besides yours was this here:


and this:


I would love to know your secrets, I want to design my own templates not use some cheesy pre-made ones unless a job requires something so Simple Simon. Did you follow any tutorials or have any of your own?
perriwing's avatar
Awww, that is so much better then the current SC pledge page, why didn't they choose it? 
TheZeis's avatar
TheZeisProfessional Interface Designer
The interactice Demo link leads to a 404 page now :(
z-design's avatar
z-designProfessional Interface Designer
Yep, that happened after the new site launched. I suppose I should update the link since I still have the demo on my own site. :)
ManganMan's avatar
ManganManHobbyist Photographer
Nice Job! Cutie Thumbs Up
Bhiqm's avatar
cool & fresh design, I like it :)
eddt67's avatar
This is damned awesome!
Kxmode's avatar
really looking forward to the new site!
grinchfox's avatar
grinchfoxStudent Digital Artist
I miss doom3 like styled windows...
Junkan7's avatar
Junkan7Professional Interface Designer
Dae-K's avatar
Dae-K Digital Artist
Vectortrance's avatar
Nice work.
Makes 2Advanced seem so antiquated. Seriously, why are they still on Flash?!
AlphonseCapone's avatar
AlphonseCaponeHobbyist Traditional Artist
You can tell your supervisor that your UI work _alone_ is reason enough for me to buy the hell out of Star Citizen!
anonymous's avatar
Join the community to add your comment. Already a deviant? Sign In
©2019 DeviantArt
All Rights reserved