[Clipart] Reg clipart detail page design

[Jon Phillips]

Check out Andy's original mockup...attachment on the bug

https://bugs.launchpad.net/openclipart/+bug/758051

Would be ideal to match that up style-wise rather than change the
layout all around...

Still, Ryan, great to get you making waves on this...excellent!

Jon

On Sat, Jul 23, 2011 at 7:56 PM, chovynz <chovynz at gmail.com> wrote:
> Or even...
> Why do we have two download buttons?
> Why not just have one download button and you can choose your options from
> there in a JS panel that appears?
> "
> What format do you want to download this file as?
> SVG - scalable
> Small PNG size ### x ### pixels (this should be filled out to the file
> ratio) - We recommend 600 x 600."
> Medium PNG #### x ####
> Large PNG #### x ####
> Custom PNG size   ____ x ____ pixels
> Ok         Cancel
> "
>
> On 23 July 2011 23:49, chovynz <chovynz at gmail.com> wrote:
>>
>> I think the one that you have just done is pretty good. I like the rounded
>> corners, and simplicity of the interface. Could I ask that you do some
>> Javascripty hide and show thing for the about informational section? I've
>> been trying to imagine the page without all the visual clutter (from ages
>> ago, not your design.) My theory is that people have come to this page to
>> see the clipart in more detail, not more information about the clipart or
>> who drew it. If they are further interested, they can click the "Show
>> Details" thingjammybob. My Ideal would be a large thumbnail of the clipart
>> and the Download button only. The rest would be hidden inside the show/hide
>> button. If I can describe it in words and build on what I see here, I would
>> say, move the buttons underneath the information, have the download button
>> at the top, the rest at the bottom (hidden), The clipart fills up the entrie
>> left side where the buttons used to be. So, there is
>>
>> One large clipart preview
>> Only one visible button for downloading Svg
>> Show more information /  Hide more information that is hidden by default.
>> The rest of the buttons and info are contained in that section.
>>
>>  Also remember the png autosizer script that Jakub did?  That would be
>> great to include near the download png button.
>> Was there a reason that you removed the upload/download/favourite/collect
>> images? I quite liked them. Without them the buttons almost seem bland. Is
>> there something you can do for it?
>> I do like what you have done with the information. I like the aligned both
>> sides and structured feeling that it gives. Is there now, too many pixel
>> lines on the page? And too much line spacing in between the information?
>>
>> On 23 July 2011 23:16, chovynz <chovynz at gmail.com> wrote:
>>>
>>> This is what it looks like.
>>>
>>> On 18 July 2011 03:10, ryan sukale <ryantechnical at gmail.com> wrote:
>>>>
>>>> Hi All,
>>>> I redid the design.
>>>> Rewrote the entire html and css for the content. And tiny bits of js.
>>>> I am uploading it in a zip file right now so you can see it from your
>>>> local system, because doing the same changes in the project aiki would take
>>>> a lot of time.
>>>> Since i wrote the entire html, it does not contain the custom
>>>> javascript. For example, just images for the 'social icons' .
>>>> There is only one html page in the zip file. "6 hexagons 6 diamonds -
>>>> OpenClipArt.htm". The others are the supporting css and images.
>>>> Things that i was looking to achieve in this design
>>>> 1) A single action menu, for all the actionable items.
>>>> 2) Increase in the image size to 350x350, to effectively reduce the
>>>> empty space.
>>>> 3) sidelined the image details to the right in its own panel so that it
>>>> does not strike out, but is still prominent enough if a user wants to take a
>>>> peek.
>>>> 4) Tried to make it look more symmetrical than what i had submitted
>>>> earlier.
>>>> Some more thoughts
>>>> 1) I was thinking, the additional information associated with a png
>>>> download, can appear as a modal dialog, like the facebook message dialog,
>>>> when the user clicks on the button.
>>>> 2) A similar idea can also be extended for the collect button where the
>>>> content for the user's lists can be downloaded via ajax and shown in the
>>>> modal dialog itself instead of a complete page refresh. That way, the layout
>>>> of the original page will remain intact when the user is trying to add a
>>>> clipart to his collections and will also reduce latency due to page refresh.
>>>> I designed it in Firefox
>>>> It renders properly with IE7 and chrome as well, but without a few fancy
>>>> effects like the rounded borders because i did not use any browser specific
>>>> css for now.
>>>> Check it out and let me know if the design is ok. I believe this is much
>>>> better than the previous one that I had done.
>>>> --
>>>> Regards,
>>>> Ryan
>>>>
>>>> _______________________________________________
>>>> clipart mailing list
>>>> clipart at lists.freedesktop.org
>>>> http://lists.freedesktop.org/mailman/listinfo/clipart
>>>>
>>>
>>>
>>>
>>> --
>>> Cheers
>>> Chovynz
>>
>>
>>
>> --
>> Cheers
>> Chovynz
>
>
>
> --
> Cheers
> Chovynz
>
> _______________________________________________
> clipart mailing list
> clipart at lists.freedesktop.org
> http://lists.freedesktop.org/mailman/listinfo/clipart
>
>



-- 
Jon Phillips
http://fabricatorz.com/
chat/skype: kidproto | irc: rejon
+1.415.830.3884 (global) | +1-510-499-0894 (sf)
+86-187-1003-9974 (beijing)