SciFi Graphical User Interface for Desktop/Mobile

SciFi GUI for Desktop and Mobile



Intro

Hi, i recently started working on a User Interface asset. I played with a couple of different art styles ranging from lowfi to futuristic. I think i have finally settled into what i want to achieve and that's some clean hard surface 3d main elements combined with lowfi - terminal like controls. I decided to create this thread mainly as a reason to continue working on this so that it doesn't end up in the continuously growing abandoned projects folder.​

Workflow

As a (mainly) 3d artist i always start working inside 3dsMax (sometimes Blender3d too). The render no matter where i model the elements is done with VRay inside 3dsMax. Having the GGX shading model in VRay 3.0 and above helps a lot with the hard surface ui elements i have in mind for this package. Having the elements modeled before rendering them out to import in Photoshop and then Unity3d helps a lot because this way you can render not only the basic image but also additional elements like a specular/glow/normal maps which you can use with the Unity UI shaders to make your UI react to lighting. ​

​

Inside Unity
​

The images created and are destined to be used for UI elements are imported as sprites and are sliced so that they can suit different window and button sizes. For the desktop version of the elements i use also the normal maps with the UI/Lit/Bumped Unity shader. In addition to that i created a sprite dissolve shader to achieve the effect you can see on the opening .gif buttons and some simple scripts to move lights around according to the selected element. All these effects however obviously produce a couple of draw calls so in addition to the Desktop version of the UI i replicate the functions but this time without using lit shaders and dissolve effects. You can check the visual difference in the screenshots bellow. ​

UI element with lit shader​

UI elements with default settings for high performance​

Conclusion

I plan to work this a lot more, but i am confident that now that i have decided on the general ui aesthetics the progress will be quite quick. I want to create most of the commonly used ui elements together with a nice demo scene for both Desktop and Mobile versions. Also in the final package all the 3d models (in their 3dsMax scene ready to render with VRay) will be included, so that anyone that wants to make custom adjustments and optimizations will be able to do it in the raw source material.​

Feel free to reply with any suggestions or requests, thanks for reading

​

 

Work continues with some additional UI elements.

Gif Imgur link​

 

I like the way you've combined meshes with ui, and also that it's low-key but very sci-fi, a lot of assets are just too noisy in terms of color and style.

 

Thanks for the input! Just to be clear, there are no meshes imported in unity or anything, just plain sprites and textures. The meshes are created in 3dsMax to render out the various sprites and their normal maps.
Could you elaborate a bit on the noisy term? I actually thought they were maybe a bit too simple.

 

Ah right ok, normal map then.

Well I find a lot of UI pretty gaudy, in the sense that they have overdone animations, too many colors and too much contrast. Maybe I'm a bit of an outlier, and most people like flashy stuff, but I liked the clean-looking presentation of your UI.

With sci-fi stuff in general, I think that quality rather than quantity of special effects is better. No matter whether you're doing sci-fi or anything else the UI still has the purpose of facilitating player interaction and too much distraction doesn't help.