*Replies in-line*
*
*
*Jared Zimmerman * \\ Director of User Experience \\ Wikimedia
Foundation
M : +1 415 609 4043 | : @JaredZimmerman<https://twitter.com/JaredZimmerman>
On Mon, May 20, 2013 at 8:09 AM, Brion Vibber <bvibber(a)wikimedia.org> wrote:
On Mon, May 13, 2013 at 3:22 PM, Brion Vibber
<bvibber(a)wikimedia.org>wrote;wrote:
On Mon, May 13, 2013 at 3:21 PM, Brion Vibber
<bvibber(a)wikimedia.org>wrote;wrote:
On Sun, May 12, 2013 at 2:18 PM, Brion Vibber
<bvibber(a)wikimedia.org>wrote;wrote:
Here's a quickie alternate mockup of the
gallery & detail screens:
https://brionv.com/misc/commons-mockup/
Source at
https://github.com/brion/commons-mockup
Oh and I totally forgot this now has a 'rotate' button to show a
landscape concept. This scrolls horizontally.
New version of <https://brionv.com/misc/commons-mockup/> mosaic layout
concept, now with selectable simulated devices at phone and tablet sizes.
Photos are oriented along the 'long' side of the screen, with even
column(s) and scrolling along that direction -- vertical for portrait,
horizontal for landscape. That's one column for phones, two for 7-inch
Android tablets, and 3 for other tablets. Photos that would be "longer"
than the screen are shrunk down a bit and centered in the column; this
keeps extreme panoramas and such from going too crazy, but doesn't break up
the mosaic flow the rest of the time.
*
Jared —
I think this design direction is good, still not 100% sold on the
multi-column, but need to investigate more.
*
In RTL, the horizontal layout/scrolling could be flipped, but I haven't
mocked that.
The layout algorithm isn't quite perfect and sometimes leaves uneven
columns, but it's just a demo. :)
The small green numbers are sequence numbers and are just there to get a
feel for the layout's order. They wouldn't be shown 'for real'.
Questions:
* Is this generally good? Should we continue to pursue this design?
*
Jared —
yes, a few notes, right now there is a gap between images which is medium
grey, would like to see this in black, and gone all together as options
*
* This mosaic layout attempts to put chronologically
adjacent items near
each other across the columns, but things don't always scan in order
because there aren't even rows that cut across the columns. If this is too
confusing, we could switch to a Google Image Search style mosaic for tablet
view, where we have even rows instead of columns. This would be
inconsistent with the phone view, then.
*
Jared —
Gotta play with this more on tablet to have an informed view
*
* Any feedback on the detail page? Should everything be overlaid or should
there be a drawer, or a swipe, or?
*
Jared —
I
actually like the overlay more than i thought i would, however the blue
links are nearly impossible to read, couple design notes here
*
- *
is the image being blended to (overlaid on) a black background or a dark
grey one? black my be better
*
- *
Perhaps try an additional black to transparent gradient overlay from the
top of the screen to further increase the readability of the text at the
top
*
- *
For the text, at a 1px black hard drop shadow for further contrast and
**read
ability
*
- *
Can we set the background image height to the screen height of the
device, and anchor left, so the image overflow goes to the right? then set
the background to fixed so it does not scroll with the page?
*
- *
lack of left margin on text makes me uncomfortable, perhaps equal too or
half the top margin
*
-- brion
_______________________________________________
Design mailing list
Design(a)lists.wikimedia.org
https://lists.wikimedia.org/mailman/listinfo/design