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
-- Mailing list: https://launchpad.net/~ubuntu-touch-coreapps Post to : [email protected] Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps More help : https://help.launchpad.net/ListHelp
