← Back to team overview

ubuntu-phone team mailing list archive

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

 

Joey, do u mean flickable?


2013/5/31 Joey Chan <qqworini@xxxxxxxxx>

> Thanks for sharing  :)
>
> Next step I will try not to use listview to display those content, because
> listview is not "random" enough  :P
>
>
> 2013/5/31 Lisette Slegers <lisette.slegers@xxxxxxxxxxxxx>
>
>> Thanks! :) Ping me if you want a re-cap of anything.
>>
>> Joey shared a great looking prototype on his screen with us, that is what
>> I was talking about.
>>
>> Thanks,
>> Lisette
>>
>>
>> On Fri, May 31, 2013 at 4:49 PM, Roman Shchekin <mrqtros@xxxxxxxxx>wrote:
>>
>>> Looks great!
>>> Someone now must develop a prototype?
>>>
>>> P.S. sorry, I again missed our meeting due to work :(
>>>
>>>
>>> 2013/5/31 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
>>>>
>>>> --
>>>> Mailing list: https://launchpad.net/~ubuntu-touch-coreapps
>>>> Post to     : ubuntu-touch-coreapps@xxxxxxxxxxxxxxxxxxx
>>>> Unsubscribe : https://launchpad.net/~ubuntu-touch-coreapps
>>>> More help   : https://help.launchpad.net/ListHelp
>>>>
>>>>
>>>
>>
>> --
>> 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
>>
>>
>

Follow ups

References