Layout for interactive infographic
# February 12, 2013 at 9:10 am
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!# February 12, 2013 at 10:01 am
>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?# February 12, 2013 at 10:06 am
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# February 12, 2013 at 10:15 am
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.# February 12, 2013 at 10:44 am
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.
You must be logged in to reply to this topic.