Need help/ideas for layout

[mild bough]

I can't think of anyway to make its layout look good and meaningful.

1. So first left block contains a sequence of letters, every letter is clickable, and each letter opens a different bar graph. (sequence may be upto 500 -1000 letters sometimes).
2. Below it are the 20 atoms (it will always be 20), when any letter is clicked out of these 20, that atom gets highlighted in the 3D structure at the right side.
3. At last comes a bar chart. (can we show this bar graph data by any other way? data is coming from some algorithm running in backend).
4. If we can show any of the above by any other way, plz let me know. Thank you.

[trail crystal]

hi, I don't really get it, but is this perhaps for dashboard design?

[mild bough]

@trail crystal Yess

[trail crystal]

okay, I'm also kinda new to dashboard design, so maybe that my opinion could be wrong, but have you heard about bento box design? I think that will help with the layout. also, quick question, in the case (1) that's mean the bar graph will appeared in the same page like the 3D atom ones?

I think we could arrange it like the way you did, with the tools (I assume the clickable components are tools) on the left side and the canvas, or section to show the results of the clickable tools, on the right side. or you could just make different page name dashboard/infographic etc to contain all the graph/infographic, like this app called 'Flow Insight'

its adjustable too, so its easy for us the re-arrange the graphic card order freely

or maybe you could just make the tools on the top and the blank page on the bottom (for show the graph,etc). That perhaps works too

[mild bough]

Yes, the bar graph will come on same page as 3D atoms. The 3d structure will remain same, just the atoms highlighted will change upon clicking the sequence letters (also the bar graph will also change upon cliking seq. letters).

earlier it was like this

so I have to scroll aagain and again to see what atoms are highlighted in 3d part

so I want to keep all information on one screen

[trail crystal]

ahh i see. so the 3rd, i mean the bar chart are like changing based on the seq letter clicked. I thought it will open or like show another bar chart, like another bar chart card. okay I understand now

wait a moment

I assume you make it for like normal desktop screen. So I think you could use this approach. It's all in one screen, and i think it's all right

[mild bough]

Okay, let me design it this way

Thnx!

[last quest]

This is a cool project! From a "making it prettier" perspective, I would

• align the fonts. I think the mono font is fine, but a single sans serif to replace the serif fonts would improve the look. There's a sans serif being used, so that should work if it's flexible (bold, italic options).
• Also, consider giving space around the dropdown at the top.
• I see some font colors that would probably fail a contrast test, so would consider running that and fixing as needed. The letters in the circles in particular.
• I wonder if you can give the circles a fixed circle size (or rounded square) that fits all letters, so you're not getting the variation.
• Instead of green as a selected/active value, use red? Something that's easier to connect, as it's getting lost in the blue bg. I don't see any way around the bar graph tbh.

IDK if that's helpful, but good luck 🙂

[mild bough]

thnx, that will surely help

how can i make it look more professional

changed few things

making something like this:

those letters in the circles, I have removed them for now. But I will put them on left side of 3D structure box as in the above layout.

Also, I will remove that text coming top of 3D structure

[last quest]

The fields for structure name and View (dropdown), need to have matching border radius''. The groups in blue, do they need to be right aligned? Maybe make the number above the groups of letters bold to differentiate. I would also try to group them in some way. Maybe a light gray background for the larger box (where it's light blue now) and all groups have container with a white bg. Just some thoughts. It's looking better tho! I like the lofi direction

[mild bough]

I have made some changes in the layout:

I am working on aliging things right now

what else can i do, to make it look more professional? also, any idea about themes (light/dark) any reference I can work on?

@last quest the group on blue needs to be right aligned.