← Back to team overview

ubuntu-touch-coreapps team mailing list archive

Re: [Ubuntu-phone] [Design][RSS reader] Organic grid example

 

Hi Lisette,

I think this article maybe useful for you if you haven't seen it yet.

http://www.poynter.org/how-tos/newsgathering-storytelling/visual-voice/191875/new-poynter-eyetrack-research-reveals-how-people-read-news-on-tablets/

Best wishes,

Tingting


On Fri, May 31, 2013 at 4:12 PM, Lisette Slegers <
lisette.slegers@xxxxxxxxxxxxx> wrote:

> 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-phone
> Post to     : ubuntu-phone@xxxxxxxxxxxxxxxxxxx
> Unsubscribe : https://launchpad.net/~ubuntu-phone
> More help   : https://help.launchpad.net/ListHelp
>
>

References