ubuntu-touch-coreapps team mailing list archive

[Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>]

Hi! As we discussed in the RSS Reader hangout today, here is an example of
an organic grid. Consider this a wireframe and a tool to prototype and try
different approaches, not a final visual design:

https://docs.google.com/drawings/d/1S4uK3ajc5WoYwZXIpUsxD0rw5r40aVK-NcbUHJwzVwY/edit?usp=sharing

I have switched off comments for this doc, so that we can keep track of all
comments in this mailing list instead.

The example image is at the top, and the same image with a visible grid and
the item size in grid units right underneath. There are items in 3
different sizes, and each size has several variations.

For the first one, 21x14, you see the four possible variations of any item
consisting of text and image. The other ones only show one of the four
variations. There are also items that contain only text (we probably need
text-only items for all sizes to accommodate articles without images). All
items have one grid unit space between the text and image.

As for distributing items on the grid, we could explore 2 options.

Option 1 is to distribute items on the page roughly as they are distributed
in the example, and assign the appropriate item size and variation
dynamically and depending on the text / images that appear in the article.
As you can see, the 'end' of the grid example fits with the 'beginning', so
we can build a never ending grid that is as long as we need it to be. It
can also start at any point to make it look less repetitive.

Option 2 is to randomly distribute the items on the page. This is more
organic in principal (and might use the screen space in the most efficient
way), but we need to try if it results in readable and beautiful layouts.

As we discussed just now, option 1 is quicker to implement and will allow
us to test the grid with real content sooner.

Another thing to consider: what happens if the topic is refreshed and new
items are added to the page? If a user has been reading a topic, and new
items are added, it would be disruptive to find that the existing items
have moved, so once an item has been placed on the page, it should stay
there.

Let's see if this works with real content; can't wait to see more of those
awesome prototypes! :)

Lisette