Minimalist Bug-Details Mockups

Trying out the avatar+byline from Mashable. The votebox on the left side is a bit out of place.

ScreenShot112

If the votebox owns a column, it seems to not ruin the flow so much. I also like having it right under the “bugvote” branding (there should be an icon there too), as it reinforces the whole point of the site. And I like how the title of the bug aligns with the title of the app/game that it’s for, reinforcing context. But the bug-title overlay over the featured image is kind of gaudy.

ScreenShot113

Complex image layout under a summary/excerpt

Nice and simple. Lots of space for the bug title, the byline is composed of parts: “posted by”, followed by a status like “need feedback”, “scheduled”, “under development”, and finally a nice glowing green “implemented!”

The poster’s avatar and their bug-description own the space above the fold.

ScreenShot111

Trying the more modern/trendy image-above-the-fold style used by Mashable, Wired, Engadget, Gizmodo, The Verge, Medium, DNAinfo, Inc, and Gigaom:

ScreenShot110

Large image above the fold

This one works well except the images will tend to be 16:10 or 16:9, so they will take up a lot of vertical space. Photos used by those trendy-designed news sites are usually quite narrow. But cropping screenshots is.. risky since it can remove the areas of interest and requires effort from the poster. (though that would be a nice power-user feature for the future.. ooh I wish I could link to a bugvote.com issue RIGHT HERE :D)

ScreenShot109

Color

Owning the color on the page is really dramatic, I love how easy it is to spot a bit of color when everything else is black.

But while grayscale filter keeps screenshots from stealing the show, I’ll probably drop it.

A simple two-column layout with screenshots on one side looks weird when the bug-report itself is very short:

ScreenShot108

Leave a Reply

Your email address will not be published.