z-design's avatar

Star Citizen - Roberts Space Industries Ship UI

By z-design
333 Favourites

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
© 2013 - 2020 z-design
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
Xenosystems's avatar
Very nice UI.
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!
ThetaHelion's avatar
Great work. :)
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
m-ettema's avatar
Very nice
Vectortrance's avatar
VectortranceProfessional Digital Artist
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? Log In