View Full Version : [UX-WEEK 2] Icons (Application icons and icons in the UI)
This week I got the suggestion by someone that we should focus on icons. I'm not a graphic artist myself, but I know there are lots of helpful and able designers on this forum - it's your chance to help out here and make the UI more prettier.
We do not concentrate so much on layout and text, but directly on the icons. Here's a draft of how it could look like (suggestions always welcome):
Browse the app menu and find apps without icons ("blue square")
Browse HAM ("App. manager") in the "Uninstall" view and find apps with no icons / bad icons / icons that are too small / icons that are not "cut out correctly"; also check if command-line apps have the "$" in the upper left corner
Find icons in use inside applications (toolbars, buttons, etc..) - check that they fit the general style of icons in the UI and if they appear "sharp" (not blurry)
Designers should then help out with fixing the icons or creating new ones and sending them to the application maintainer who can then hopefully easily replace the icons without having to do much coding.
Icon sizes are documented here (http://wiki.maemo.org/Developer_frequently_asked_questions#What_icon_siz e_should_be_used.3F):
App manager icon size: 48x48
Task manager icon size: 64x64
Please also make sure to re-use existing icons in the icon theme (or from other applications) if they describe the same behaviour/action (e.g. the "share" icon, general_add, etc..). You can find the icons in /usr/share/icons/
Add application/menu icons to this wiki page where we can more easily track progress (also upload new icons there and change the status if you are working on icons: http://wiki.maemo.org/UX/Icons
Let me begin with the apps I've installed.
App menu (edit: I've added these to http://wiki.maemo.org/UX/Icons now)
Brain Party (http://maemo.org/packages/view/brainparty/) - Blurry icon, square without rounded edges (new icons are on the way (http://talk.maemo.org/showpost.php?p=613581&postcount=118))
Numpty Physics (http://maemo.org/packages/view/numptyphysics/) - Icon looks blurry, "dirty" in upper left corner
GLtron (http://maemo.org/packages/view/gltron/) - Pixelated bike - definitely needs rework
Fahrplan (http://maemo.org/packages/view/fahrplan/) - A good metaphor, but it's blurry
liqflow (http://maemo.org/packages/view/liqflow/) - Also a good metaphor, but again blurry (some alpha blending on the edges might look good, too?)
Wiicontrol (http://maemo.org/packages/view/wiicontrol/) - A very cool app, but it's missing an application icon (maybe the upper part of the WiiMote? Or the WiiMote as a whole?)
(As a short side node, the emulators have really good, high-quality icons - I really like all of them!)
App manager
Brain Party - too small; but is already being fixed (see above)
Extra Decoders Support (http://maemo.org/packages/view/decoders-support/) - White square background - the white could be transformed to be transparent
Fahrplan (http://maemo.org/packages/view/fahrplan/) - the icon looks a bit blurry - at least at the edges
Feedhandler (http://maemo.org/packages/view/feedhandler/) - Missing an icon (a RSS icon or something would be nice)
FeedingIt (http://maemo.org/packages/view/feedingit/) - Good icon, but too small
GLtron (http://maemo.org/packages/view/gltron/) - Same problem as Extra Decoders Support: White rectangle background that could be transparent
Headphone Daemon (http://maemo.org/packages/view/headphoned/) - Icon too small; maybe it could also have a better metaphor (right now, it's a bus because headphoned prevents "public transport situations")
Jamaendo Player (http://maemo.org/packages/view/jamaendo/) - Icon too small
liqflow (http://maemo.org/packages/view/liqflow/) - Icon missing
Mapper (http://maemo.org/packages/view/maemo-mapper/) - Icon too small
MPlayer (http://maemo.org/packages/view/mplayer/) - Icon missing
Numpty Physics (http://maemo.org/packages/view/numptyphysics/) - Icon looks blurry
OpenSSH (http://maemo.org/packages/view/openssh-client/) - Client, server and "client and server" packages - all of them have a icon that's too small and that has a white square background that should be transparent
Panucci (http://maemo.org/packages/view/panucci/) - Icon too small
Petrovich (http://maemo.org/packages/view/petrovich/) - Icon missing
rootsh (http://maemo.org/packages/view/rootsh/) - Icon missing
Simple Brightness Applet (http://maemo.org/packages/view/simple-brightness-applet/) - Icon missing
Theremin (http://maemo.org/packages/view/theremin/) - Icon too small
Unzip add-on for the FM (http://maemo.org/packages/view/unzip-fm/) - Icon missing
vncviewer (http://maemo.org/packages/view/vncviewer/) - Icon too small; could have white background (or get rid of the white lines above and below?)
Wiicontrol (http://maemo.org/packages/view/wiicontrol/) - Icon missing (see above)
Well, I'm willing to lend hand on designing some of these, as soon as I get back home, I'll see about it.
I've now populated the wiki page with some icons + description in a nice table: http://wiki.maemo.org/UX/Icons
This should hopefully make it easier to track progress and see a comparison of current icons and proposed icons. Please set the status to TAKEN if you are working on an icon, then upload both sizes to the wiki, link them from the page and set the status to FINISHED and then contact the application maintainer. If you have found another app with bad/missing icons, please add the current icon and a short description to the table as "NEW".
noobmonkey
2010-04-18, 13:50
Thank you THP - very much appreciated!
I'm not the greates at icons eitehr, but i would lvoe to see some of them redone. I'm not going as far as to suggest minimum standards, but i hope you all agree, some standards are useful! :D - nice icons, make more a nice desktop etc :D
Following on from THP's List, They are a good set to focus on :)
Will go away and try and come up with some suggestions/solutions :D
Would also be helpful to mail any authors if you want them to assist in either replacing/agreeing/commenting etc!! :D
My thoughts. All of these are from application manager.
No icons at all:
Call forwarding applet
Custom Operator Name Widget
KMPLayer
liqtorch
maemo-geolocation
maemo-org
nmap
orrery
Pidgin Language Support
proximityd
pypianobar
worldtv99
Icons that are blurry:
cpumem-applet
Icons that could be larger:
anarchism
belltower
DateJinni
DiceJinni
DiskUsage
eCoach
EightyOne
Extended Call Log
FindMine
free42
freecell4maemo
Gboggle
GiveMeFive
Gnuplot
GPSJinni
htop
Irssi
Kandis (also too dark so can't see outline against dark backgrounds)
Mad Bomber
maelstrom
MathJinni
MGutenberg E-Book Reader
Mirror
MMagnetic
nspeed
Ogg Support
OMWeather database for gismeteo.ru
PackageView
Password Safe
Pidgin Extra Protocols (Bonjour and Sametime)
Pidgin Internet Messenger
Pidgin Status Menu Plugin for Maemo 5
PushIt
Puzzle Collection
QStarDict
Recorder
robotfindskitten
RulerJinni
Scopa
Sharing Plugin for Picasaweb
Simple FMTX desktop widget
stopish
TabletBridge (also too dark so can't see outline against dark backgrounds)
Tennix 2009 World Tour
Thai fonts
The Milky Way Wallpaper
TimerJinni
Tuner
tweakr
ussd-widget
Vagalume
vncviewer
WhoAmI
WifiInfo (also too dark so can't see outline against dark backgrounds)
Wormux
xkblayouts-rx51-ru
zoutube
Other problems, like icons that don't seem to match applications, or are unclear:
AccDisplay: nice clean icon, but it looks like a synchronisation app icon rather than anything to do with accelerometers. Sorry I don't have any better ideas.
Conky: Unsure why the icon is a person!
Conversations Inbox Desktop Widget: Odd icon.
Currency Converter
Desktop Activity Manager
Easy Chroot: Not sure what to suggest instead, though!
QuickNote: bit too messy
This thread is right up my street, i used to make icons for s60 alot, i also used to mod alot of apps, change the apps UI etc, iv also made some icons for my N900 to match the Maemo 5 UI as i hate having dif style icons, will post some later and i will work on some new icons.
Im not sure how to add icons etc to the wiki page, i dont want to mess it up.
Here are my proposed icons for Unzip add-on for the FM ...
9031 9032
Regards,
Biggzy.
noobmonkey
2010-04-18, 15:13
Thanks Bigzy.
Also scary to see just how many do not have icons :|
I can forgive the blurry ones, whilst the rest actually get icons! hehe
The wiki page is pretty hard to add images, i did try, but also wasn't sure....
Going to work on some this week and throw my two pence in in the middle of the week :D
All help is welcome :D
Im not sure how to add icons etc to the wiki page, i dont want to mess it up.
Here are my proposed icons for Unzip add-on for the FM ...
9031 9032
Regards,
Biggzy.
Nice, although maybe the blue square should look more like a folder icon?
Nice, although maybe the blue square should look more like a folder icon?
Looking better?
9034 9035
:D
biggzy: Yes, looks good :) I've added this to the Wiki page. Here are instructions on how this can be accomplished if it isn't clear:
Log in to the Wiki
Upload the files at http://wiki.maemo.org/Special:Upload
Copy the row markup from the existing Wiki markup and customize it for the application you want to add
Add [[Image:Filename.png]] to the Wiki where "Filename.png" is the filename of the uploaded file (with the first character in upper case, can be seen in the address bar after the image upload)
(...)
Extra Decoders Support (http://maemo.org/packages/view/decoders-support/) - White square background - the white could be transformed to be transparent
(...)
No, I already tried it, the icon became invisible in the App Manager :) I would love if someone could design a completely new icon with rounded corners, while maintaining the audio/video metaphor.
My thoughts. All of these are from application manager.
zoutube
Actually, I have already designed a new icon for it and it's implemented in the newest version:
http://i41.tinypic.com/23jsxn5.jpg
No, I already tried it, the icon became invisible in the App Manager :) I would love if someone could design a completely new icon with rounded corners, while maintaining the audio/video metaphor.
How about something like this?
9084 9085
Fits with the current Maemo 5 UI icons :D
I can always fit it into a background with rounded corners etc.
Some wiicontrol icons iv created...
with connected status LED's
9086 9087
or...
without connected status LED's
9088 9089
;)
noobmonkey
2010-04-19, 18:56
Wow Bigzy i love the wii ones!! could do with the shadows being a little darker, but i love the idea!!
Wow Bigzy i love the wii ones!! could do with the shadows being a little darker, but i love the idea!!
All the shadows bro or..? not sure what you mean lol, thanx for the input :D
noobmonkey
2010-04-19, 19:20
well, just looking from here (on lappy screen) i can only just make out the buttons, so was thinking the the grays that make up the button could be a bit darker?
And maybe the red led part a bit redder? hopefully it should just make the icon a bit bolder :D
Really am impressed!
Any better?
9090 9091
and
9092 9093
I tried making the shadows even darker than these but looked a bit naff.
noobmonkey
2010-04-19, 19:36
Perfect! alot more defined, and can instantly tell what it is now :D
a new icon for numptyphysics would be much appreciated.
What about icons for desktop widgets? For example, I currently have Recaller, Bluezwitch, DateToday and shutters. Their icons vary greatly.
Recaller's icon is too small.
The dimension of Bluezwitch and DateToday look slightly different from those of the official application.
shutter is unique in shape.
Reflektorfalke
2010-04-20, 06:09
Hi Designers,
if you want to help with the icon development for the FIFA World Cup / Football app you are very welcome ;-).
See http://talk.maemo.org/showthread.php?t=49508 for current drafts /status of app- and in-app icons...
I'm gonna take a single shot on all apps listed, for you to have something to chose from :)
How about something like this?
9084 9085
Fits with the current Maemo 5 UI icons :D
I can always fit it into a background with rounded corners etc.
This is great. By the way, I only need the 48x48 icon, since there is no application in the menu :) Not sure if this needs rounded corners, I think it's good as is. Thoughts?
This is great. By the way, I only need the 48x48 icon, since there is no application in the menu :) Not sure if this needs rounded corners, I think it's good as is. Thoughts?
Yes i think its fine the way it is, it matches and blends with the hildon icons, i can resize it to 48x48 but am not at pc now, by all means resize it if you can in gimp etc, if you cant i will hapily resize the icon later this evening.
*edit* i see iv posted a 48x48 already lol, NM im not with it today lol
Some stuff:
Extras decoders:
http://s44.radikal.ru/i104/1004/ee/e9a9693d7b8b.png
Fahrplan:
http://s48.radikal.ru/i121/1004/cb/dc6ec1cd71ff.png
RSS Handler
http://s51.radikal.ru/i131/1004/34/4570022d4cc7.png
GLTron
http://i023.radikal.ru/1004/e2/67caf67e5aa5.png
Headphones daemon
http://i066.radikal.ru/1004/a3/703534fb9d3a.png
rootsh
http://i018.radikal.ru/1004/a6/1d8a3f6ca028.png
Petrovich
http://s54.radikal.ru/i143/1004/be/7c9cc750e3ba.png
VNC Viewer
http://s12.radikal.ru/i185/1004/9f/9cb3ce07d4ce.png
Numpty Physics
http://s39.radikal.ru/i086/1004/f4/ea41f1706c79.png
I personally think a metaphor like this would work better for the headphoned:
http://joppu.22.fi/f/headphoned.png
But excellent work on all the icons, wazd.
I still cant edit the wiki, i just nt want to mess it up lol
I personally think a metaphor like this would work better for the headphoned:
http://joppu.22.fi/f/headphoned.png
But excellent work on all the icons, wazd.
If you make that 48x48 and silver instead of gold (gold plugs are so expensive :p), I'll use it in the next release of headphoned :) Maybe also make a white outline around the plug, so that its silhouette is visible on a dark background (think: H-A-M lists).
Fahrplan:
http://s48.radikal.ru/i121/1004/cb/dc6ec1cd71ff.png
I really like this one! Can you create a 48x48 version of it too?
Numpty Physics
http://s39.radikal.ru/i086/1004/f4/ea41f1706c79.png
The basic idea (brown paper background + the star) is good, but the star should probably be more hand-drawn (not a perfect star) and maybe just the outline (as in the game). I wonder how it would look if you included both the red circle and the yellow star in the icon. And we'd need a 48x48 version of it for the app manager.
Thanks for all the great icons so far - I'm impressed! :)
davidmaxwaterman
2010-04-22, 02:50
Is this thread only for apps in testing, or is someone up for making me a decent icon for my app which is in extras-devel?
It's called ZouBa and is an app to make it easy to see how to take Helsinki public transport from (primarily) where you are to (primarily) home. It's still under development and I knocked up some icons myself but have never really been satisfied with them. They're supposed to be the back end of a bus heading off, representing missing the bus...
Any suggestions?
Max.
PS. I'd also love to have some really small icons to represent the walking and bus legs of a journey.
Is this thread only for apps in testing, or is someone up for making me a decent icon for my app which is in extras-devel?
I'm not the OP, but I think this thread is for all community-developed apps, whether in -devel, -testing, or already released in extras.
vkv.raju
2010-04-22, 09:27
A wonderful initiation by @thp here. While we are it, shall we also look at the apps that lack proper descriptions too.
Is a separate thread necessary or shall we track them down here itself?
EDIT: I wanted to add few app to the wiki for which icons were missing. But can't login to wiki. I have an account already at garage.maemo though. Is this a common issue?
Anyways, apps whose icons are missing (from App Manager):
(Simple)Media Player Status Area Applet
aptly
camkeyd
d-feet
dbus-scripts-settings
healthcheck
joikuspot
less
longpress
macchanger
Maemo 5
morphquickpanaroma
Mplayer Movie Player (command-line only)
mussorgsky
Now Playing Notifications
pc-connectivity-manager
Petrovich
pool
powerlock
proximityd
pychecker
rootsh
Sharing plugin for fMMS
Simple Brightness Applet
speedy
tutorial-home-applet
Unzip add-on for the File Manager
usbcontrol
x11vnc
Apps whose icons probably need a small touch (from App Manager):
FM RDS Notify (Problem: nearly invisible on a black/dark background)
freecell4maemo (Problem: icon too small)
gFTP (GTK) (Problem: icon too small)
GiveMeFive (Problem: not clear on a black/dark background)
htop (Problem: icon can be made more informative)
maemo-periodic (Problem: icon is small and also not too informative)
maemo-recorder (Problem: icon can be made better)
Mirror (Problem: icon small)
PackageView (Problem: icon not clear on a black/dark background)
python2.5-py2deb (Problem: icon can be made more informative)
Recorder (Problem: icon can be made more informative)
Speech record and playback (Problem: icon is small)
symfonie (Problem: icon not even visible on a black/dark background)
App Menu:
CuteExplorer (Problem: icon can be more informative)
dbus-scripts-setting (Problem: icon can be more informative)
EightyOne (Problem: icon looks bit dull)
FM RDS Notify (Problem: icon not visible on a dark/black background)
Freecell4Maemo (Problem: icon looks bit pixelated)
gFTP (Problem: icon looks bit pixelated)
Maemo Periodic (Problem: icon not visible on a black/dark background)
MussOrgsky (Problem: icon looks bit pixelated)
myDicto (Speech record and playback) (Problem: icon is small)
Pendulum (Problem: icon not descriptive as name is)
Pool for maemo (Problem: icon missing)
Speedy (Problem: icon looks bit dull)
symfonie (Problem: icon missing)
USBControl (Problem: icon missing)
x11vnc (Problem: icon missing)
P.S. I will keep modifying this thread. So people who can edit the wiki, please keep an eye on this post.
noobmonkey
2010-04-22, 11:12
I apologise for the healtcheck icon missing - it seems to randomly chuck out my icons when it wants... was working until last week!
Will add a new one in this week!
While we are it, shall we also look at the apps that lack proper descriptions too.
Is a separate thread necessary or shall we track them down here itself?
I think that should be a separate thread. I too am interested in the descriptions.
I think that should be a separate thread. I too am interested in the descriptions.
Maybe we can do this next week? Application names and descriptions. It's Thursday already, so let's get some more icons ready and focus on the descriptions starting with Sunday :)
noobmonkey
2010-04-23, 07:52
Maybe we can do this next week? Application names and descriptions. It's Thursday already, so let's get some more icons ready and focus on the descriptions starting with Sunday :)
Another superb idea - can we extend the names + descriptions idea to screenshots on the downloads page too please :D
Another superb idea - can we extend the names + descriptions idea to screenshots on the downloads page too please :D
Yes, I agree. This is all part of the "user interface" of searching for and downloading new apps.
Another superb idea - can we extend the names + descriptions idea to screenshots on the downloads page too please :D
Yeah - sure.
The next UX-Week thread is now available: UX-Week 3: Names, descriptions and screenshots (http://talk.maemo.org/showthread.php?t=51053).
Please feel free to continue providing and requesting ICONS in this thread.
kent_autistic
2010-12-12, 08:10
how do i change some of the icons for applications shown in the menu and desktop? what pixel size should i use?
noobmonkey
2010-12-12, 21:35
i think you probably want to go to one of the theme customising threads :)
This thread was created so the authors could get involved. - There are however many packs of icons available, and the authors of those threads should easily be able to help you :)
vBulletin® v3.8.8, Copyright ©2000-2024, vBulletin Solutions, Inc.