Thoughts on the Rule of Thirds Applied to a Visualization

Note: An update of this project with a different layout is here.

I am in the middle of playing with a visualization, and after an update I wanted to take a look at how the "Rule of Thirds" may be coming into play to affect it, for better or worse.


Here is a screenshot with a "Rule of Thirds" grid overlaid:

I don't think that one necessarily is required to put items of interest at the intersection points themselves, just recognize that that is where a user's eyes will naturally fall first, and consider how this possibly impacts the viewer.

In this case, I can see right away why I might have been feeling like the little popup over there on the right was slightly too far to the right: the video image stretches slight past the right line.  Maybe the video element is slightly too wide.

Giving a little tweak to the width of the main player, and moving the "Now Playing" div over as well, results in the following:

It's not perfectly centered, but - and obviously this is subjective - there is slightly less feeling that things are "too far right".

The map itself is slightly off to the left relative to the lines, but this doesn't bother me as much.

What about all that space in the lower right?  At the moment, this is used for when the user shows the Vine tweets in a particular county.  Here's what it looks like before I make any changes:

It's perhaps slightly too far to the right (note that the list is scrollable), and my first inclination is to line up its left location with the div directly above it, resulting in this:

I am vacillating on whether the bottom right still feels too offset to the right, I assume because the internal spacing on the left is different, as well as the general form of the content itself.  But I'm not sure how aligned they should be, anyway.  The purpose of the list is different, and it needs to include the video itself in about the same amount of space.  I just don't want its placement relative to the div above to be a distraction.  And a bigger issue (to me) is that this list might not be used much, and the blank space when it's not shown is more of a concern (although I don't know how best to deal with it at the moment).

I feel like I could spend so much time working through this puzzle, and this is for only five elements(!), not include the header bar components. And it's only for position and sizing!  This doesn't include color, or little graphic nuance accents.

I have so much respect for designers.