Making a giant robot builder with CSS art, drawing a blank on the UI design

Making a giant robot builder with CSS art, drawing a blank on the UI design
0

#1

Hi

In the spirit of modularity, I want to create a webpage where someone can pick and choose CSS robot parts which will then assemble. It’s at its early stage - so far I’ve only done one part, which is a samurai-themed head.

What I’m having trouble with is designing the interface for the user to pick out a part. I feel like I could do just about anything once I’ve committed to a design, but I’m drawing a blank on what would look ‘cool’ - what colors to use, icons maybe, or making the tabs have different parts.

Interactivity-wise, I want tabs that open up and then container carousels for different parts. Ideally this functionality will transfer to smaller screens, but I anticipate that I’ll create an entirely different interface for mobile.

Here’s my current design for the tabs: https://codepen.io/jx2bandito/pen/PJjgop

If anyone has any design tips, it would be greatly appreciated.

Project Page where the tabs will go: https://jx2bandito.github.io/robotBuilder/

Thanks in advance


#2

Update:

I can’t decide if this design is cool or annoying.


#3

I like your new tabs generally, they’re very cool.

I think the animation on hovering would benefit from being a bit faster, it would feel more dynamic.

I’m not convinced by the slanted look for head and legs. It’s a cool idea but functionally they are the same as the other tabs so why should they look different? Also I’m wondering how this will impact the carousel. Will you have slanted images or will you have vertical images in a reduced space? Maybe it would be better to give them a unified look.

Random note: Have you thought about how it will work on mobile/tablets? I tried accessing your CodePen on my tablet because I couldn’t see the colours correctly on my computer (graphics card problem). But of course you can’t mouse over on a tablet. What I mean is: When you eventually write the code for clicking, on a computer the tab will be open when you click but on mobile it won’t be. Just something to keep in mind when you get there.


#4

Hi, thanks for your feedback.

I went ahead and sped up the width transition to twice as fast and I agree that it does look neater.

The slanted tabs are definitely tentative and might be scrapped. I wanted to give the impression of a crooked multi-screen setup reminiscent of 80s technology, or maybe something you’d see at a cockpit. I’ll keep your opinion in mind as I continue experimenting.

If I do decide to go through with the slant, I’ve redesigned the inner .preview boxes so that the left sides maintain 90 degree corners, while the right sides continue with the slanted corners. This would allow me to have a vertical image on the left side without restricting its space. A text description on the right would appear slightly slanted. I’ve decided to add left and right buttons but instead of a true sliding carousel the information inside the box will just re-render accordingly. Kind of like switching a TV channel.

Sorry about the lack of mobile support yet. I’ve set the CSS pseudo-selector to hover since it was the most convenient for PC and I didn’t want to do any JS just yet. I’m eventually transferring this over to a React where I’ll have more events to work with. I did a quick-fix and used jQuery and bound click and touchstart to toggle the tab on if you want to check it out again.

At the same time I’ve also thought about creating a solution for mobile where the tabs are permanently open, but I’m not sure I would have enough space to work with. It might either permanently cover the robot or be too small to be read.

Thanks again for your insightful feedback.


#5

Fair comment for a solution on mobile, I didn’t really think it through. You’d need a different interface I guess. That is, if it even makes sense to use the app on mobile.

I tried your modified version on my iPad. It’s quite nice, although for some reason it tends to select the text (and sometimes the preview box) in the tab with the “Copy | Look Up | Share…” menu appearing. I think it’s what happens by default when you keep your finger on text for a while. Not sure if it’s worth worrying about for now, you’re probably better off focusing on your PC design.

Did you remove the hover behaviour completely? I just re-tried the PC version and the cool hover effect is gone. Was it interfering with the quick fix for mobile? Definitely bring it back, it was very good.


#6

I never intended the hover permanent but I suppose I could do a hover on PC and a touchstart on touch devices. Previously, the whole style changes to the tabs were set in ::hover in CSS but I’ve changed it to the class toggledOn.

I typically don’t have Apple devices to test with but usually the user-select CSS rule or event.preventDefault in JS takes care of any unwanted interactions. I definitely wouldn’t have caught that otherwise, though.

Thanks again.