[Clipart] Reg clipart detail page design

ryan sukale ryantechnical at gmail.com
Sun Jul 17 08:10:01 PDT 2011


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
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.freedesktop.org/archives/clipart/attachments/20110717/2921b1ae/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: OCAL_1.zip
Type: application/zip
Size: 136851 bytes
Desc: not available
URL: <http://lists.freedesktop.org/archives/clipart/attachments/20110717/2921b1ae/attachment.zip>


More information about the clipart mailing list