User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I am making a website in which the home page will have 5 circles each linking to a category of items (e.g. cities, phones, etc.). The user will click on circle to go to the specific page for that item. These 5 circles are arranged equidistantly on the circumference of a bigger circle

enter image description here

I can think of the following methods to make it, with pros and cons I can think of, but not sure whether my experience is enough to choose the correct option:

A) Create a circle graphics. Place it properly with some programming in CSS on the page.
B) Program everything including circles and their position. Potentially animate them with better effects.

Pros of A) Relatively easy code for others who might join development

Cons of A) Animation and adding other features might need other images, slowing the load time

Pros of B) Easier to add animation and other features with less graphics and load times.

Cons of B) Harder to read and maintain.

Some Example of Animation which I found might be interesting is this: What pros and cons or other methods do you suggest? while I aim to learn whatever method is best, I believe simplicity and elegance is a highly desired goal.

share|improve this question

closed as off-topic by JonW Oct 20 '13 at 22:16

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – JonW
If this question can be reworded to fit the rules in the help center, please edit the question.

I don't believe that this is a UX question. You've already determined what you want the User Experience to be, what you're asking here is how to implement it effectively / efficiently. Implementation questions aren't on topic for this site, i'm afraid. – JonW Oct 20 '13 at 22:18
Simple enough to do with plain CSS (border radius) – DA01 Oct 20 '13 at 23:53
Hi, thanks for your help. Can you advise where implementation questions are posted? – hi ji Oct 28 '13 at 3:18

Depending on the which browsers and and their versions you need to support, consider using svg elements. They're not too bad in weight, easier to animate (e.g. with Adobe Edge) and adapt to well to different screen sizes.

share|improve this answer
Thanks so much. I would be using only freeware though. If I go the SVG way what is a good freeware animation tool? – hi ji Oct 20 '13 at 22:09
You would be limited but you can use Adobe Edge's trial version. – screenmarks Oct 23 '13 at 0:46

Not the answer you're looking for? Browse other questions tagged or ask your own question.