Task:Improving maemo.org/Graphics

(New Icons)
(Page Design Status: wikify image links)
 
(35 intermediate revisions not shown)
Line 5: Line 5:
We want 2 versions of a member profile badge: one with a small hackergochi and name, and maybe karma, for a usecase like in a news item, comment on a story/application, etc. and a second version for a stand-alone badge type thing, with a bigger photo + name + some details of the profile. The big version should fit nicely on a sidebar, or in a profile page.
We want 2 versions of a member profile badge: one with a small hackergochi and name, and maybe karma, for a usecase like in a news item, comment on a story/application, etc. and a second version for a stand-alone badge type thing, with a bigger photo + name + some details of the profile. The big version should fit nicely on a sidebar, or in a profile page.
-
Current small version: [[Image:GA_mini.png|Comment on application]]
+
The information needed for the small version will be the avatar, the real name or maemo.org username of the person, their karma rating and online status. Other decorations will be added depending on the application (whether the person has given the post a thumbs up or down, the rating the person has given an application, the date the comment was added, etc).
-
No big version currently.
+
Current small version:
 +
 
 +
[[Image:GA_mini.png|Comment on application]]
 +
 
 +
Suggested information laid out (badly) by [[User:Dneary]]. The unshaded bits make up the generic template, the shaded bits are context-specific content (comments, ratings, thumbs up/down, date, ...):
 +
 
 +
[[Image:Small_user_profile_color.png|Comment on application]]
 +
 
 +
Proposed small version:
 +
 
 +
[[Image:Wide_person_template.png]]
 +
 
 +
Bigger version:
 +
 
 +
[[Image:Large-person-template.png]]
 +
 
 +
Bigger version(sidebar):
 +
 
 +
[[Image:Person&App-Templates(sidebar) 03.png]]
 +
 
 +
 
 +
For the large version of the profile template, there is some required information, and some optional information, that we could add to the template. The main use of the template will be to allow us to feature people from the community in the same way that we currently feature applications on the front page and the downloads page.
 +
 
 +
Required:
 +
* Big avatar
 +
* Name/user name
 +
* Link to profile
 +
* Online status
 +
* Karma
 +
 
 +
Optional available information:
 +
 
 +
* Projects
 +
* Interests
 +
* Description
 +
* Karma breakdown by category
 +
* Joined since...
=== Small Application ===
=== Small Application ===
 +
 +
This template will be used in small lists of applications, sorted by rating, popularity, freshness, or (when available) application karma.
'''Current:'''
'''Current:'''
Line 20: Line 58:
=== Large application ===
=== Large application ===
 +
 +
Elements required in the application template are:
 +
* Screenshot
 +
* Downloads
 +
* Popularity (karma/stars)
 +
* Application name
 +
* Short application description
 +
 +
Other elements which might be useful for the application profile are something like a [http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR sparkline] showing download trends, or a percentile rating of the application according to application karma, popularity, or whatever. To give you an idea what I mean by a sparkline, here's an example: [[Image:Sparkline.png|Simple sparkline]]
 +
 +
This template will be used on the new front page, as well as in the downloads page, to link to specific applications. A nice generic template will allow for this to be reused even more widely later, if done right.
[[Image:Aisleriot_pearl.png|Large application profile]]
[[Image:Aisleriot_pearl.png|Large application profile]]
 +
Application Profile[[Image:Wide_app.png]]
== Graphics resources required for maemo.org ==
== Graphics resources required for maemo.org ==
 +
 +
The following are icon files required for the new maemo.org.
 +
 +
There are also image file resources which will need their backgrounds changed for the new site. A list of these should go here.
{| class="wikitable"
{| class="wikitable"
! Name !! Current !! New
! Name !! Current !! New
|-
|-
-
| Thumbs down on  || http://static.maemo.org/net.nemein.favourites/bury.png||
+
| Thumbs down on  || http://static.maemo.org/net.nemein.favourites/bury.png|| [[Image:Bad_over.png]]
|-
|-
-
| Thumbs down off || http://static.maemo.org/net.nemein.favourites/not-buried.png||
+
| Thumbs down off || http://static.maemo.org/net.nemein.favourites/not-buried.png|| [[Image:Bad_Normal.png]]
|-
|-
-
| Thumbs down rollover || http://static.maemo.org/net.nemein.favourites/not-buried-hover.png||
+
| Thumbs down rollover || http://static.maemo.org/net.nemein.favourites/not-buried-hover.png|| [[Image:Bad_rollover.png]]
|-
|-
-
| Heart on || http://static.maemo.org/net.nemein.favourites/favorite.png||
+
| Heart on || http://static.maemo.org/net.nemein.favourites/favorite.png|| [[Image:Good_over.png]]
|-
|-
-
| Heart off || http://static.maemo.org/net.nemein.favourites/not-favorite.png ||
+
| Heart off || http://static.maemo.org/net.nemein.favourites/not-favorite.png || [[Image:Good_Normal.png]]
|-
|-
-
| Heart rollover || http://static.maemo.org/net.nemein.favourites/not-favorite-hover.png||
+
| Heart rollover || http://static.maemo.org/net.nemein.favourites/not-favorite-hover.png|| [[Image:Good_rollover.png]]
|-
|-
-
| Star on || http://static.maemo.org/style_maemo2007/orange_star.gif ||
+
| Star on || http://static.maemo.org/style_maemo2007/orange_star.gif || [[Image:Star_Over.png]]
|-
|-
-
| Star off || http://static.maemo.org/style_maemo2007/grey_star.gif ||
+
| Star off || http://static.maemo.org/style_maemo2007/grey_star.gif || [[Image:Star_Normal.png]]
 +
|-
 +
| Star Rollover || || [[Image:Star_rollover.png]]
|-
|-
| List Bullet 1 || See front page ||
| List Bullet 1 || See front page ||
|-
|-
-
| List Bullet 2 || http://static.maemo.org/style_maemo2007/arrow.png  ||
+
| List Bullet 2 || http://static.maemo.org/style_maemo2007/arrow.png  ||[[Image:Bullet.png]]
|-
|-
-
| Online || http://static.maemo.org/net.nehmer.account/online.png ||
+
| Online || http://static.maemo.org/net.nehmer.account/online.png || [[Image:on.png]]
|-
|-
-
| Offline || http://static.maemo.org/net.nehmer.account/offline.png ||
+
| Offline || http://static.maemo.org/net.nehmer.account/offline.png || [[Image:off.png]]
|-
|-
-
| Default buddy icon || None? ||
+
| Status on/off Rollover || || [[Image:Status_rollover.png]]
|-
|-
-
| Default application || http://static.maemo.org/style_maemo2007/no-screenshot.png ||
+
| Default buddy icon || None? || [[Image:DefaultAvatarProfile.png]]
|-
|-
-
| Add new application || http://static.maemo.org/style_maemo2007/add-application.gif ||
+
| Default application || http://static.maemo.org/style_maemo2007/no-screenshot.png || [[Image:DefaltApplication.png]]
|-
|-
-
| Click to install || http://static.maemo.org/style_maemo2007/install_button_small.png ||
+
| Add new application || http://static.maemo.org/style_maemo2007/add-application.gif || [[Image:AddApplication.png]]
|-
|-
-
| OS2006 on || http://static.maemo.org/style_maemo2007/os2006-green.gif ||'''deprecated'''
+
| Click to install || http://static.maemo.org/style_maemo2007/install_button_small.png || [[Image:ClickToInstall.png]]
|-
|-
-
| OS2006 off || http://static.maemo.org/style_maemo2007/os2006-grey.gif ||'''deprecated'''
+
| Missing .install || || [[Image:MissingInstall.png]]
|-
|-
-
| OS2007 on || http://static.maemo.org/style_maemo2007/os2007-green.gif ||'''deprecated'''
+
| OS2006 on || http://static.maemo.org/style_maemo2007/os2006-green.gif ||[[Image:OS2006_over.png]]
|-
|-
-
| OS2007 off || http://static.maemo.org/style_maemo2007/os2007-grey.gif ||'''deprecated'''
+
| OS2006 off || http://static.maemo.org/style_maemo2007/os2006-grey.gif ||[[Image:OS2006_normal.png]]
|-
|-
-
| OS2008 on || http://static.maemo.org/style_maemo2007/os2008-green.gif ||'''deprecated'''
+
| OS2006 Rollover || ||[[Image:OS2006_rollover.png]]
|-
|-
-
| OS2008 off || http://static.maemo.org/style_maemo2007/os2008-grey.gif ||'''deprecated'''
+
| OS2007 on || http://static.maemo.org/style_maemo2007/os2007-green.gif ||[[Image:OS2007_Over.png]]
|-
|-
-
| Maemo 3 on || ||
+
| OS2007 off || http://static.maemo.org/style_maemo2007/os2007-grey.gif ||[[Image:OS2007_Normal.png]]
|-
|-
-
| Maemo 3 off || ||
+
| OS2007 Rollover|| ||[[Image:OS2007_rollover.png]]
|-
|-
-
| Maemo 4 on || ||
+
| OS2008 on || http://static.maemo.org/style_maemo2007/os2008-green.gif ||[[Image:OS2008_Over.png ]]
|-
|-
-
| Maemo 4 off || ||
+
| OS2008 off || http://static.maemo.org/style_maemo2007/os2008-grey.gif ||[[Image:OS2008_Normal.png]]
|-
|-
-
| Maemo 5 on || ||
+
| OS2008 Rollover || ||[[Image:OS2008_rollover.png]]
|-
|-
-
| Maemo 5 off || ||
+
| Maemo 5 on || ||[[Image:Maemo5_Over.png]]
|-
|-
-
| Hot overlay || || [[Image:Hot_overlay.png]]
+
| Maemo 5 off || ||[[Image:Maemo5_Normal.png]]
|-
|-
-
| Fresh overlay || || [[Image:Fresh_overlay.png]]
+
| Maemo 5 Rollover || ||[[Image:Maemo5_rollover.png]]
|-
|-
-
| PC on || http://static.maemo.org/style_maemo2007/pc-green.gif ||
+
| Maemo 4 on || ||[[Image:Maemo4_Over.png]]
|-
|-
-
| PC off || http://static.maemo.org/style_maemo2007/pc-grey.gif ||
+
| Maemo 4 off || ||[[Image:Maemo4_Normal.png]]
|-
|-
-
| Default avatar || http://static.maemo.org/style_maemo2007/hackergotchi-notfound.png ||
+
| Maemo 4 Rollover || ||[[Image:Maemo4_rollover.png]]
-
|}
+
-
 
+
-
== New Icons ==
+
-
 
+
-
{| class="wikitable"
+
-
! Name !! New !
+
|-
|-
-
| Delete Normal  ||[[Image:Delete_Normal.png]]||
+
| Maemo 3 on || ||[[Image:Maemo3_Over.png]]
|-
|-
-
| Delete Over ||[[Image:Delete_over.png]]||
+
| Maemo 3 off || ||[[Image:Maemo3_Normal.png]]
|-
|-
-
| Do not Abuse  ||[[Image:notAbuse_normal.png]]||
+
| Maemo 3 Rollover || ||[[Image:Maemo3_rollover.png]]
|-
|-
-
| Do not Abuse Overl  ||[[Image:notAbuse_over.png]]||
+
| Hot overlay || || [[Image:Hot_overlay.png]]
|-
|-
-
| Good Normal ||[[Image:Good_Normal.png]]||
+
| Fresh overlay || || [[Image:Fresh_overlay.png]]
|-
|-
-
| God Over  ||[[Image:Good_over.png]]||
+
| PC on || http://static.maemo.org/style_maemo2007/pc-green.gif || [[Image:PC_Over.png]]
|-
|-
-
| Bad Normal  ||[[Image:Bad_Normal.png]]||
+
| PC off || http://static.maemo.org/style_maemo2007/pc-grey.gif || [[Image:PC_Normal.png]]
|-
|-
-
| Bad Normal ||[[Image:Bad_Over.png]]||
+
| PC Rollover || || [[Image:PC_Over_rollover.png]]
|-
|-
-
| LittleBuddy Normal  ||[[Image:LittleBuddy_Normal.png]]||
+
| Default avatar || http://static.maemo.org/style_maemo2007/hackergotchi-notfound.png || [[Image:Avatar_Planet.png]]
|-
|-
-
| LittleBuddy Over ||[[Image:LittleBuddy_over.png]]||
+
| Delete Normal|| ||[[Image:Delete_Normal.png]]
|-
|-
-
| Star Normal  ||[[Image:Star_Normal.png]]||
+
| Delete Over|| ||[[Image:Delete_over.png]]
|-
|-
-
| Star Over  ||[[Image:Star_Over.png]]||
+
| Delete Rollover|| ||[[Image:Delete_rollover.png]]
|-
|-
-
| Online  ||[[Image:on.png]]||
+
| Do not Abuse || ||[[Image:notAbuse_normal.png]]
|-
|-
-
| Offline ||[[Image:off.png]]||
+
| Do not Abuse Over|| ||[[Image:notAbuse_over.png]]
|-
|-
-
| Bar Normal ||[[Image:Bar_Normal.png]]||
+
| Do not Abuse Rollover|| ||[[Image:NotAbuse_rollover.png]]
|-
|-
-
| Bar Over ||[[Image:Bar_Over.png]]||
+
| LittleBuddy Normal || ||[[Image:LittleBuddy_Normal.png]]
|-
|-
-
| PC Normal ||[[Image:PC_Normal.png]]||
+
| LittleBuddy Over|| ||[[Image:LittleBuddy_over.png]]
|-
|-
-
| PC Over ||[[Image:PC_Over.png]]||
+
| LittleBuddy Rollover|| ||[[Image:LittleBuddy_rollover.png]]
|-
|-
-
| Click to Install ||[[Image:ClickToInstall.png]]||
+
| Bar Normal || ||[[Image:Bar_Normal.png]]
|-
|-
-
| Add Aplication  ||[[Image:AddApplication.png]]||
+
| Bar Over || ||[[Image:Bar_Over.png]]
|-
|-
-
| Default Application ||[[Image:DefaltApplication.png]]||
+
| Bar Rollover || ||[[Image:Bar_rollover.png]]
 +
|}
 +
 
 +
 
 +
== Page Design Status ==
 +
 
 +
These are the links which we have designed already. If you need any page to be designed, please feel free to put its name here:
 +
 
 +
{| class="wikitable"
 +
! Page name !! Wireframe or link reference !!  Designed page Link
 +
 
|-
|-
-
| Default Profile Avatar ||[[Image:DefaultAvatarProfile.png]]||
+
| Login || || [[:Image:Login_page.png]]
|-
|-
-
| Default Planet Avatar ||[[Image:Avatar_Planet.png]]||
+
| Profile List || || [[:Image:Profile_List.png]]
|}
|}
 +
[[Category:Tasks]]

Latest revision as of 11:13, 1 March 2011

Contents

[edit] Templates required for maemo.org

[edit] Member profile

We want 2 versions of a member profile badge: one with a small hackergochi and name, and maybe karma, for a usecase like in a news item, comment on a story/application, etc. and a second version for a stand-alone badge type thing, with a bigger photo + name + some details of the profile. The big version should fit nicely on a sidebar, or in a profile page.

The information needed for the small version will be the avatar, the real name or maemo.org username of the person, their karma rating and online status. Other decorations will be added depending on the application (whether the person has given the post a thumbs up or down, the rating the person has given an application, the date the comment was added, etc).

Current small version:

Comment on application

Suggested information laid out (badly) by User:Dneary. The unshaded bits make up the generic template, the shaded bits are context-specific content (comments, ratings, thumbs up/down, date, ...):

Comment on application

Proposed small version:

Image:Wide_person_template.png

Bigger version:

Image:Large-person-template.png

Bigger version(sidebar):

Image:Person&App-Templates(sidebar) 03.png


For the large version of the profile template, there is some required information, and some optional information, that we could add to the template. The main use of the template will be to allow us to feature people from the community in the same way that we currently feature applications on the front page and the downloads page.

Required:

  • Big avatar
  • Name/user name
  • Link to profile
  • Online status
  • Karma

Optional available information:

  • Projects
  • Interests
  • Description
  • Karma breakdown by category
  • Joined since...

[edit] Small Application

This template will be used in small lists of applications, sorted by rating, popularity, freshness, or (when available) application karma.

Current:

Stars: Top rated application

Popular: Popular application

Fresh: Fresh application

[edit] Large application

Elements required in the application template are:

  • Screenshot
  • Downloads
  • Popularity (karma/stars)
  • Application name
  • Short application description

Other elements which might be useful for the application profile are something like a sparkline showing download trends, or a percentile rating of the application according to application karma, popularity, or whatever. To give you an idea what I mean by a sparkline, here's an example: Simple sparkline

This template will be used on the new front page, as well as in the downloads page, to link to specific applications. A nice generic template will allow for this to be reused even more widely later, if done right.

Large application profile

Application ProfileImage:Wide_app.png

[edit] Graphics resources required for maemo.org

The following are icon files required for the new maemo.org.

There are also image file resources which will need their backgrounds changed for the new site. A list of these should go here.

Name Current New
Thumbs down on bury.png Image:Bad_over.png
Thumbs down off not-buried.png Image:Bad_Normal.png
Thumbs down rollover not-buried-hover.png Image:Bad_rollover.png
Heart on favorite.png Image:Good_over.png
Heart off not-favorite.png Image:Good_Normal.png
Heart rollover not-favorite-hover.png Image:Good_rollover.png
Star on orange_star.gif Image:Star_Over.png
Star off grey_star.gif Image:Star_Normal.png
Star Rollover Image:Star_rollover.png
List Bullet 1 See front page
List Bullet 2 arrow.png Image:Bullet.png
Online online.png Image:on.png
Offline offline.png Image:off.png
Status on/off Rollover Image:Status_rollover.png
Default buddy icon None? Image:DefaultAvatarProfile.png
Default application no-screenshot.png Image:DefaltApplication.png
Add new application add-application.gif Image:AddApplication.png
Click to install install_button_small.png Image:ClickToInstall.png
Missing .install Image:MissingInstall.png
OS2006 on os2006-green.gif Image:OS2006_over.png
OS2006 off os2006-grey.gif Image:OS2006_normal.png
OS2006 Rollover Image:OS2006_rollover.png
OS2007 on os2007-green.gif Image:OS2007_Over.png
OS2007 off os2007-grey.gif Image:OS2007_Normal.png
OS2007 Rollover Image:OS2007_rollover.png
OS2008 on os2008-green.gif Image:OS2008_Over.png
OS2008 off os2008-grey.gif Image:OS2008_Normal.png
OS2008 Rollover Image:OS2008_rollover.png
Maemo 5 on Image:Maemo5_Over.png
Maemo 5 off Image:Maemo5_Normal.png
Maemo 5 Rollover Image:Maemo5_rollover.png
Maemo 4 on Image:Maemo4_Over.png
Maemo 4 off Image:Maemo4_Normal.png
Maemo 4 Rollover Image:Maemo4_rollover.png
Maemo 3 on Image:Maemo3_Over.png
Maemo 3 off Image:Maemo3_Normal.png
Maemo 3 Rollover Image:Maemo3_rollover.png
Hot overlay Image:Hot_overlay.png
Fresh overlay Image:Fresh_overlay.png
PC on pc-green.gif Image:PC_Over.png
PC off pc-grey.gif Image:PC_Normal.png
PC Rollover Image:PC_Over_rollover.png
Default avatar hackergotchi-notfound.png Image:Avatar_Planet.png
Delete Normal Image:Delete_Normal.png
Delete Over Image:Delete_over.png
Delete Rollover Image:Delete_rollover.png
Do not Abuse Image:notAbuse_normal.png
Do not Abuse Over Image:notAbuse_over.png
Do not Abuse Rollover Image:NotAbuse_rollover.png
LittleBuddy Normal Image:LittleBuddy_Normal.png
LittleBuddy Over Image:LittleBuddy_over.png
LittleBuddy Rollover Image:LittleBuddy_rollover.png
Bar Normal Image:Bar_Normal.png
Bar Over Image:Bar_Over.png
Bar Rollover Image:Bar_rollover.png


[edit] Page Design Status

These are the links which we have designed already. If you need any page to be designed, please feel free to put its name here:

Page name Wireframe or link reference Designed page Link
Login Image:Login_page.png
Profile List Image:Profile_List.png