Cubical - website with an interactive 3d user interface


Since this is my first post, please allow me to introduce myself first. I’m a 3d artist who also likes to program a bit. I’m more or less fluent in html, css, javascript and java.

About cubical, this is a website that I started developing for a personal project. Unfortunately that project is now in stand-by, but I continued to develop the site because I really liked the idea and wanted to see if it worked. So, the base idea was to build a site with an interactive 3d user interface that worked seamlessly across all devices. I think I got it, because I tested and found that it works well in IE11, Chrome, Safari, Opera and Firefox and respective mobile browsers. The site is very simple and has a somewhat retro and minimalistic approach towards the design and the amount of information shown. The heart of it is the javascript engine that joins it all together, giving the user a fun and intuitive experience. The javascript engine is based in the HTML5 canvas experiment “You See” developed by Gerard Ferrandez, who kindly allowed me to develop cubical.

Since my initial project is in stand-by, I developed a template. It has 3 base user interface engines. You can check site template 01, running user interface engine 01 at You can also check the other two engines. Just replace in the url engine01, by engine02 or engine03.

During testing I found there’s a problem with the site running on older mobile devices. Since it uses a 2d canvas to render the cube, and that’s a bit computationally expensive, some devices prior to 2013 with lower hardware may have difficulties running the site.

So, please let me know what you think. Constructive comments are very much appreciated!

Best Regards!

Love the look of it! That’s javascript???
Usability, not so keen.
Initially assumed I needed to right-click to turn the cube (maybe played too many old-school desktop games - always a right click to spin) .
Takes an extra click to get into a page (tho didn’t really mind that).
After landing on a page wanted to use the back button to get your ‘menu-cube’ again. Took a few refreshes to realise the bottom link would do that.
Love the idea, but for usability (on a serious site) can’t beat an old-fashioned in-a-line menu.

Think it would work really well on kid’s/school site or a gaming site. Reminds me of a n64-type menu.

Btw, I’m on a laptop with FF39.

Hi! Thanks! :slight_smile:

That’s all Javascript, but I’ve only written part of it. The base code was developed by geldoot at codepen.

Yeah, the UX is not very good in these versions.

I reposted this in another thread in the “Design and UX” category where it has undergone a few updates since then. The UX has been changed quite a bit. It isn’t “on the spot” yet, but I’m working on it. Please, feel free to check it out.

Going from one of the last posts on that thread, currently I’m making several other changes because there were many more problems that weren’t initially apparent. It seemed It required only some brushing up on the code, but actually it is more challenging than that. Unfortunately, I’m a little short on time (have to work at the same time), and can’t dedicate to it as much as I wanted, but eventually I’ll figure it out (hopefully). :smile:

:slight_smile: Those are two of the base ideas, to have a retro look and a different navigation system that’s fun to interact with. Although, I guess it could have a few more applications than those, but only when it’s completely finished.

Thx for your feedback!

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.