Layout for interactive infographic

[AntonioP]

Dear web UI designers and developers,

I have another tricky puzzle for you to solve. It would be challenge for you and you will help to make one nice project come true. I will briefly explain what I want from you.
Assume this sketch as a final product:


Here is grey picture with circle inside. Six buttons are placed around the circle. Each button is pointing on the circle with line. Here is button in detail:


Button consist of 3 different shapes. Inside first one will be placed icon, inside others some short text. The edge of the button should be limited by the geometry of shapes. User should know that by transformation of cursor. On hover the button should zoom in a bit. The line and dot preferably shouldn’t be a part of the button or background image and shouldn’t react on hover effect.

Also the whole menu should be scalable to fit different resolutions.
I would think for two ways of doing this buttons. First one is to make a whole button out of images, or as a second solution to make it from shapes with CSS. The lines probably should be also made as image or as CSS shape. And then everything should be assembled on top of the gray background picture using “absolute position” in CSS.

I would be glad to get any kind of solutions for this puzzle! Thank you for your time!

[Paulie_D]

Absolute positioning should be avoided IMO.

I wonder what work you have done on this so far?

[AntonioP]

mostly conceptual part )

[Paulie_D]

>mostly conceptual part

Hmm…although it’s a nice challenge there a LOT of options available.

What sort of browser support is required?

Are the dots supposed to reference something inside the circle or just visual ‘links’ to the circle?

Is the ‘item’ a link in and of itself and the ‘info’ section another link?

What does the whole thing look like at lower viewport sizes? Do you care?

[Kitty Giraudel]

If you are concern about putting elements along a circle, Ana Tudor did this a couple of times for StackOverflow. Here is one of them, I couldn’t find the others: http://stackoverflow.com/questions/12813573/position-icons-into-circle

[AntonioP]

I assume that IE definitely should be in the list. I know that IE have same issues with CSS, but the project is aimed to reach lot of people on various platforms and devices.

The dots and lines at least should be visual links, in scaling the dots probably could travel some short distance, but don’t live the circle.

all three shapes(icon, item, info) are combined in one button, witch will follow user to additional content.

[AntonioP]

> along a circle

thanks a lot

it should be possible to place buttons in random order somehow

[Paulie_D]

Hmmm….I’m feeling used here but perhaps it’s just me.

[Paulie_D]

>it should be possible to place buttons in random order somehow

NOT going to happen.

[Kitty Giraudel]

Random doesn’t exist in CSS. You would need some JavaScript.

Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

[AntonioP]

i’m sorry ) by saying RANDOM i mean not in circular, not like completely random ) .. i saw in example that they using rotate function..

[AntonioP]

yes.. i’m making a web site.. this is menu for one page. the link above is very useful. what about buttons?

[Paulie_D]

>Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

+1

[Kitty Giraudel]

My point is -even if a few things can be a little tricky- I don’t see anything that would require a huge amount of CSS skills except when it comes to optimize the way you position elements on a circle (see link above).

From there, there are 2 options:
* Either you haven’t started coding this, and my advice would be to do it cause I don’t think anybody here will do it for you,
* Or you have started but you happen to be stuck somewhere, so the best to do would be to show us your code in order to help us help you.

[AntonioP]

> Anyway, I really don’t see where you happen to be stuck in this whole thing. Did you at least start to code something?

please read the description of the problem above, the problem is not only in circular pattern of the icons.

[Author]

Posts