Interactive bar chart


2 Attachments

4 Responses

  1. Rich McNabb Rich McNabb

    The reason I originally signed up to Dribbble was to become a better designer. The only way I can think to achieve this is to practice, participate and be more involved in the design community. With this philosophy in mind I am trying to complete more design exercises and experiments in an attempt to make the process of designing quicker and easier.

    With this shot I was playing around with the interactivity of a minimal bar graph. When you hover over the graph the x and y values appear. And when you hover over an individual bar the percentage would appear so you wouldn’t have to try and guess the value.

    View complete project: View

    Feedback welcome :)


    almost 2 years ago

  2. Dan Burgess Dan Burgess

    Great man! I love the colour scheme and the interactive elements let a complicated thing like a graph look clean and minimal. Very clever, you can have an A+ :)


    almost 2 years ago

  3. Rich McNabb Rich McNabb

    Thanks very much @Dan Burgess appreciate it.

    almost 2 years ago

  4. On Rich's recent shot, he mentioned that he's looking to the Dribbble community to help him improve as a designer. I love that attitude, so I wanted to show how I would approach some of the final polish. I really liked his overall vibe, but I felt a few tiny details could be tightened up. There's obviously a million aways to approach and build this stuff and it all comes down to personal taste, but here's what I'd suggest:

    Try to be as subtle as possible when it comes to gradients. I toned down the grey gradient (aka greydient) in the top bar. Same approach applied to that divider in the top bar.

    Similar to the subtle gradient, I tend to approach highlights the same way. I want them to be there but not really noticeable. I also keep the angle at 90°.

    I'd try to keep text shadows as "crisp" as possible.

    almost 2 years ago

keyboard shortcuts: previous shot next shot L or F like