3D Progress Bars

Progress

These are rough designs created to help express a 3D style progress bar for a client's website. The website is somewhat similar to Kiva or Kickstarter and these progress bars help users understand, at a glance, how the project is performing. These won't be used on the final site because they're too complex to quickly convey a project's status but I think they are interesting nonetheless.

The top bar shows a popular project. We want to highlight projects that reach a certain level of popularity based on a variety of factors (donations, views, shares, etc). In this example, we are showing each of these with a line on top of the progress bar and as activity increases the lines begin to clump and create hot spots.

The bottom bar shows a project that has completed its funding but can still collect additional donations. Instead of just showing a completed green bar as others have, I wanted to express the additional progress beyond the 100% point. The solution was to use the top area of the bar to further track each additional 100% markā€”and restart at the beginning at 100%, 200%, 300%, and so on.

As I mentioned above, these are rough mockups and will not be used on the project, but I'd love to hear your thoughts and experiences with more complex and informative progress bars.

Happy Friday!

keyboard shortcuts: previous shot next shot L or F like Z toggle zoom