Part of the usability efforts is coming up with some Drupal specific icons. Icons show up here and there in Drupal core but more often in contributed modules. We should try to connect and align these efforts. Make them more consistent in application and look/feel.
Styleguides and design tips:
- updated for Leopard: Apple Human Interface Guidelines
- Excellent: http://wiki.kde.org/tiki-index.php?page=Icon+Guide
- good list at point 5: http://www.hceye.org/HCInsight-KATRE22.htm
- Usability checklist for an icon request: http://www.sapdesignguild.org/resources/icon_cookbook/
- Use of icons http://drupal.org/node/35416
- Designing effective icons http://developer.gnome.org/projects/gup/hig/2.0/icons-design.html#icon_d...
- Styleguide for Echelon, successor of Bluebreeze http://fedoraproject.org/wiki/Artwork/EchoIconGuidelines
- About sizing/scaling icons http://mezzoblue.com/archives/2007/02/21/icon_design/
- Making of lullacons http://www.lullabot.com/articles/creating_awesome_new_icons
Potentially huge project, but we can start small. So here's a first link-dump of icon talk on drupal.org and links to other resources, articles and iconsets.
Icontalk on drupal.org
- Drupal needs GPL icons. General discussion http://drupal.org/node/13911
- http://groups.drupal.org/node/6923#comment-20088 and below (http://groups.drupal.org/node/6923#comment-20209 , http://groups.drupal.org/node/6923#comment-20109
- Icons for D7 wysiwyg editor GHOP task http://drupal.org/node/200557
- Call for icons for g.d.o nodetypes http://groups.drupal.org/node/6422
Issues
- new forum icons http://drupal.org/node/102743
- icons for panels.module http://drupal.org/node/179690
- icons for views.module http://drupal.org/node/179845
- icons for CCK (reusing the views icons) http://drupal.org/node/201798
- icons for userpoints.module http://drupal.org/node/201106
- watchdog icons http://drupal.org/node/218674
mortendk's iconify iconset
- http://drupal.org/node/130782
- http://morten.dk/blog/mortendk/iconyfi-alpha-pixels-dot-03
- http://morten.dk/blog/mortendk/icons-drupal-late-night-note-collection
icon related modules
- http://drupal.org/project/iconizer (see http://thepanz.netsons.org/blog/wp-content/preview_part.png )
more d.o. icon talk: - http://drupal.org/node/196774
- http://drupal.org/node/200557
Theory, research and critiques:
- On evolution of icons in graphical interfaces (very nice timeline) http://www.guidebookgallery.org/articles/onethousandsquarepixelsofcanvas
- Icon Analysis | Evaluating Low Spatial Frequency Compositions http://www.boxesandarrows.com/view/icon_analysis
- Icon naming specification http://standards.freedesktop.org/icon-naming-spec/icon-naming-spec-lates...
- Common icon representations http://www.lukew.com/ff/entry.asp?142
- Icon genres and families http://developer.apple.com/documentation/UserExperience/Conceptual/OSXHI...
- Designing accesible icons http://developer.gnome.org/projects/gup/hig/2.0/icons-design-accessible....
- A Semiotic Approach for Analysing Icons in Graphical User Interface http://galileo.cincom.unical.it/pubblicazioni/editoria/period/Numeri/qua...
- Seeing the World in Symbols: Icons and the Evolving Language of Digital Wayfinding http://www.uxmatters.com/MT/archives/000154.php
- Leopard stupidity http://www.thinkmac.co.uk/blog/2007/10/leopard-stupidity.html
- Designing an iconic language http://turbomilk.com/truestories/cookbook/usability/designing-an-iconic-...
links to other GPL icon sets
- Lullacons Pack 1 http://www.lullabot.com/articles/free_gpl_icons_lullacons_pack_1 , made by quicksketch: http://quicksketch.org/node/90
- Joomla icons: http://joomlacode.org/gf/project/docman/scmsvn/?action=browse&path=%2Fdo...
Bluecurve, with sourcefiles: https://hosted.fedoraproject.org/bluecurve/browser - Echo, with sourcefiles http://fedoraproject.org/wiki/Artwork/EchoDevelopment
More inspirations, not always GPL
- http://www.kde-look.org/index.php?xcontentmode=27
- http://linux.softpedia.com/get/Desktop-Environment/Icons/
- http://www.intersmash.com/300images/
Comments
very comprehensive. great work!
WOW. You pulled everything together on one sitting. I must say this is a very comprehensive guide on the how-to's of icon development.
I specially like the Icon Naming Convention (never thought there's a whole site for that) and the Leopard icon stupidities.
Thanks for these. You definitely know your icons. :)
Marckee for Short
Wow, this is a great foundation!
As marc.robinsone said before - WOW! This is a very important page and a great foundation for upcoming actions and discussions.
I truly believe that Drupal needs a dedicated icon set for system sections and actions. One question is, do we create our own set, or do we use free (GPL) icons? From my perspective I would prefer an icon set especially created for Drupal (core/contrib) and Drupal.org. What do you think?
More Questions:
Is this wiki page complete or do we need to collect (even) more information?
What are the next steps from here?
Are there any concrete (release) plans?
Is someone responsible for this usability subtask?
Is there a dedicated team for this project?
Who are the members?
I would really like to support this this project.
Drupal needs it's own icons, I think.
I agree with you, Hailstorm, about the importance of this page/project.
I would be inclined to say that a Drupal would benefit a lot from having its own dedicated icon set. I've tried to repurpose things like the Tango icons in the past, and don't find them all that well suited to very small web icons. As a result, I'm already working on some basic Drupal icons for a couple of themes I hope to contribute.
I also would be very pleased to offer time to help out here. As well as having some vector design skills, I could contribute to usability discussion/development.
Yes, let's create new Drupal icons
Thanks for your feedback, it's great to see peoples offering to help!
Indeed, I also feel we should create new icons from scratch for Drupal. It's hard to repurpose existing ones as wiggleroom says. There's often licensing issues and we have quite a few very Drupal specific concepts that you just won't find in existing iconsets.
And well, Drupal just deserves it's own library of GPL'd icons don't you think?
This page is just a first linkdump of resources etc. and so Hailstorm's list of questions are all things that should be adressed. There is no official project, roadmap, dedicated team etc. There's this post and you guys responding, let's take it from here!
Possible next steps:
As far as "responsible team", well, that would be us then! :-) I'd love to see this taking off! Let's do it.
I say y.e.s.
One thing is for sure: we've got talent!
You're absolutely right about the next steps. We just need to figure out the standards, guidelines and other formalities for this one and we're all set. I think this is the most delicate of all. At this point, we have all the paint we need but we don't have the canvas yet.
-- It's never too early nor too late to start this now. But I think we could get more interest by showing the concepts very early. We've got an arsenal of communication tools to our disposal: wikis, polls, voip, chat, plus our creative juices. What's next to do?
Marckee for Short
Gabor posted an interesting
Gabor posted an interesting blog recently about using UTF-8 icons. This means no graphics are required.
If this is something that is scalable and supported in all browsers and OSes well enough, then I think it is a good alternative (sometimes) to graphic icons which are difficult for a floss project to maintain.
What do you think?
Bevan/
smart but limited
Thanks for the link. That's a nice way of adding basic pictograms to an interface. There are obvious limitations of course; available icons and options for coloring are limited to textcolor and background. I wasn't aware of the amount of "dingbats" available in UTF, there's quite a lot of them. Scalability and browser-support are a big plus, though image support in browsers is quite allright too :-)
Funny thing is, I've been thinking it'd be cool and usefull to make a font of any newly designed icons too. That wouldn't be usefull on the client side (the font would have to be installed on the client) but it makes for a nice and portable way to distribute the pictograms. If they are designed in black-and-white that is.
So, interesting and usefull technique. We should match some of these to the graphic icons and use the UTF equivalent as the "alt'-text in the img tags.
I think there are techniques
I think there are techniques in CSS3 for defining a font-file's URI which would enable the use of an icons-for-drupal font to be included and used in drupal core or contrib modules. However I expect support for this feature currently very limited -- worth keeping an eye on though.
I think alt tags would need alphabetical text in addition to 'dingbats' (those are the special chars in a font right?) Think about blind folk with text readers. e.g. How does a text-reader know what these mean, especially considering their meaning could be subtly different in different contexts; ● ▸ ◾ ◼ ■ ☀ ✔ ✘ ☺ ✎ ✂ ☎
Bevan/
Unicode support
I posted a comment on Gabor's site, I'll just copy+paste it here..
Keep it in mind, but graphics for now.
For example, I had a go at updating the forum icons that come with core Drupal (http://drupal.org/node/102743), I don't think we'll find unicode equivalents for those. There's a few arrows in Views module, there's quit a lot of icons in Panels. It would be useful to have a look at those and come up with an integrated design-approach.
I think there's enough interest to have a Drupal iconset available and I'm positive we'll find enough people who can help with actually designing them.
I'm interested in assisting
Yoroy, you can count me in for the design team.
yay!
yay!
Is no one here familiar with
Is no one here familiar with Lullacons? I know these are a little old, but they have a set of icons already developed along with a post and video showing how to make more. They have established style guidelines, too... any reason not to start on their (GPL) foundation and go with it?
Yes, I have linked to the
Yes, I have linked to the lullacons in the list above. There's some useful icons in there but the sourcefiles are 16x16px photoshop files, which is hardly a foundation to build upon, we'd need vectorfiles for that. Maybe those are available somewhere but couldn't find them.
There's good pointers in the guidelines, though I don't agree with the advice to design the icons at the smallest size and scale up for larger sizes. I'm thinking we should design the icons at 512x512px in a vector format. This allows for more detail at different sizes and these could double as useful illustrations in other contexts.
(It would also be nice NOT to restrict ourselves beforehand to solid outlines without transparency just because of a certain version of IE doesn't support it)
On that note, much better to
On that note, much better to assume iepngfix is available and have it either in contrib (or even core, although too late for D6 and I hope IE6 is on it's last legs by the time D7 is released). There's a jQuery plugin: http://plugins.jquery.com/project/ifixpng
looks yummy
This jquery plugin is an interesting find. It would be very nice to have this on contrib modules though.
Hmm, I think we could also create a module that will override icons for core/specific modules. This way, we can control which icons should be loaded. At the same time, it makes it more extensible if we have different "icon packs" in the future.
marc.robinsone
Marckee for Short
It's probably something that
It's probably something that could go into the D6 javascript module - which is supposed to be a central repository for jQuery plugins.
I totally agree with you
I totally agree with you here. On a side note; why does the resolution (you suggested 512x512) matter if it's in vector format?
Also, which vectore format would we use? .ai, .eps, .svg. AI is the probably the 'industry-standard', but is proprietary. SVG is the open standard but has terrible support. and EPS is like the RTF of text documents but is old and outdated (I think). Any others worth considering that I'm missing?
Bevan/
SVG/Inkscape
The only option available to me would be to develop the icons with Inkscape in SVG. I can't afford "industry-standard" software, and it doesn't fit into my workflow in any case.
I hasten to add I'm just speaking for myself here, and I know little about how good Inkscape's SVG format is under the hood. But Inkscape does seem to provide plenty of bells and whistles for icon development, to my mind, anyway. And it's freely available to anyone on almost any platform, so there'd be no barrier to getting involved?
Resolution
Resolution matters because a small image blown up to a large size will lack detail and texture, and so look very flat. An image designed for a large resolution and then shrunk will tend to have too much detail and subtlety that you won't be able to discern, so you will end up with an image that lacks definition. In smaller images, then, you will generally use relatively bolder and simplified shapes to make the image.
When you get to smaller sizes the grid also becomes more of a concern, so you may shift elements of the image around a bit so that they align better with the screen pixels. Blow this up, and the image will just seem misaligned.
So ideally you want to design for the size you are going to use the image at. Or if you really want to do a thorough job you create different versions which are tweaked for each resolution.
-
www.alanpritt.com
found another good style guide
http://wiki.kde.org/tiki-index.php?page=Icon+Guide
Everybody interested should read this page, it tackles everything we're discussing here so far and more.
this one has good observations too: http://www.hceye.org/HCInsight-KATRE22.htm (both added to the wiki above as well)
I mention 512 px because that's the full size of the icons in Mac OS X, in Windows it's 256 px (?). The KDE doc linked above talks about 128 px. Either way, if we work on a larger canvas than actual usage, then 16px (24?) and 32px versions will always need repair because of blurs etc. from scaling. What's good about working an a large canvas is that we are creating illustrations that can be used in other contexts as well, e.g. marketing materials like the what's new in D6 doc Goba's proposing (he points to this Apple page, see? :-)
Maybe 256 or 128 px are a better middle ground, to prevent adding too much detail but still a nice size that can handle some scaling to larger sizes. When I work in a 512px canvas, I set up my grid at 32 pixels, thus every box in the grid represents one pixel.
Re: file format: I think there's no way around SVG being the common ground. We'll have to experiment with illustrator and inkscape compatibility. Illustrator users should definately also keep their .ai files around.
I think it makes sense to
I think it makes sense to adapt KDE's Icon Guide for Drupal and publish it in the d.o handbook. This will help standardise, formalize and collaborate icon efforts. It will also make it easier to get an icon library into core if there is a standard documented process for maintaining and adding to the icon library.
WDYT?
Bevan/
Adopt SVG as standard icon format...
In terms of working practices for all drupal artwork I suggest adopting SVG as the standard way of storing the icons and graphics. That means creating vector artwork for all graphics. It shouldn't matter how you create the artwork (or in which app) because all apps should at some point be able to import and export SVG.
Browser support for SVG may be a bit varied right now and in the meantime we may need to pre-render server-side to bitmaps. But SVG browser support will get better soon.
I'm assuming here that we've all agreed that bitmap graphics are a thing of the past in terms of source material. Soon, it'll become clear that really high DPI screens and devices will need to display icons at different pixel dimensions to low DPI screens and devises - in order to take up similar space on a page. We should be ready for that scenario.
We should use vector graphics as source material. Sure, graphics can be pre-rendered server-side to bitmaps but the sources need to be vector. The decision, for what dimensions to render a graphic, could be defined by the user, the device or the web server. This is future stuff really but it's good to get us into a clear working practice now.
So, SVG should be the standard source for all graphics and icons from now on in Drupal...hmm?
Cheers Daniel
Not adopting SVG as standard for icons...
I'm sorry, but I'm going to have to disagree with adopting SVG as a standard icon format at this time. Although I fully understand - and believe - in the importance of this format, there is rather poor support for it within browsers at this time. First of all, which version of SVG are we talking about here? The full SVG 1.1 Basic, or SVG 1.1 Full? It is a well established fact that browsers based on the 1.8 version of the GECKO layout engine has rather poor support for SVG. (Firefox, Netscape, Camino, SeaMonkey and Epiphany) Support within IE is even worse, as a plug-in is required.
As one of the beauties of Drupal is its accessibility, I would hate to see any movement that is going impact on that in an adverse manner. I'm using the word 'accessibility,' in this sense, referring to uniform support within browsers. Once we have a firm browser support based, by all means I'd back that idea.
Irene M. Kraus a.k.a. The Computer Lady!
Design Works Internet (http://designworksinternet.com/) - Web Development/Multimedia Productions
CEBUG (http://cebug.org) - President/Webmaster
Source in SVG, output to PNG
I don't think we should be SVG's to the browser but use it as the format to design in and export PNG's of different sizes for use in Drupal. I don't think dahacouk is proposing to push SVG's to the browser either, just that it should be the format they are designed in. Rendering PNGs can be automated, but will almost certainly need manual touchups for versions 32px and smaller.
As it is, using SVG's for design exchange will be hard enough as it is, because AFAIK layers don't stay intact between Inkscape and Illustrator.
cross-pollination, sprites, & more links
Maybe once we have some design guidelines created, how about co-sponsoring a contest over at the Open Source Clip Art Library? Last I checked, the Drupal association was still putting together its marketing budget, so maybe they could help out with prizes somehow. It might be a way to help spread the word about Drupal with some open-source-minded designers.
I also want to second ximo's idea of compiling sprites. Something like the Silksprite plugin for Blueprint would be a great asset for Drupal.
Finally, please forgive me if I missed this link in the list above, but I ran across a Brazilian site with a great list of links to various open source icons sets along with their licenses. I haven't yet investigated all of the GPL icon sets, but at the very least there might be some additional inspiration.
Some might find this
Some might find this inspirational: http://www.intersmash.com/300images/
Yes I added it to the wiki. :)
Bevan/
Bevan/
excellent stuff
This kind of very small icons might be the ones we could try to find UTF-8 equivalents for? There's a few of those in core Drupal as well:
http://www.yoroy.com/elders/drupal/core-graphics.jpg
I was just admiring http://docs.google.com/images/toolbar.png , another area we should look at, considering the plans to build a WYSIWYG editor in Drupal7.
WYSIWYG: there could be
WYSIWYG: there could be considerable crossover between the work and research on icons here and a core-editor.
On the note of the google toolbar: it's interesting how they do the sprite. See what Wim Leers and an articale on websiteoptimzation.com say about this: http://wimleers.com/article/improving-drupals-page-loading-performance#r... http://www.websiteoptimization.com/speed/tweak/css-sprites/
Bevan/
Bevan/
Hopefully I'm not hyjacking
Hopefully I'm not hyjacking this thread, but we really really need some decent calendar icons and none of the icon sets I've run across have them. I need something to use for an iCal feed to replace that ugly little tiny calendar I have now. And it would be nice to have icons that represent a month, a week, a day, and a year. (What would they look like? I don't know!) And I've seen nice icons on blogs to show the blog date that look like a torn off individual calendar page with the current day and month on them (how do they do that? overlay the current day on some background image?).
Anyway, just thought I'd toss that into the mix :)
Karen, I think that's
Karen, I think that's something we'd definitely try to include in an iconset. I'll put my thinking cap on to think up month/week/day/year icons.
Those fancy blog posting images can definitely be done in the fashion you've mentioned.
Advanced Forum icons
I already snagged the forum icons that didn't make it into core for advforum, but there's a lot more that could be iconified. Here's a list of the ones I can think of, though there may be others. It would be great to have sets to match default garland blue and maybe green and others that are common.
Other possibilities would be user related icons. I'm thinking icons for roles ("admin", "moderator", etc) and things like "PM" and "Online".
Thanks,
Michelle
See my Drupal articles and tutorials or come check out the Coulee Region
Designing an iconic language
Added Designing an iconic language to the meta document, which I found very interesting.
Formating Bar
I've been working on a set of buttons for the BBCode formating bars like Quicktags.
It's a first draft but I wanted to show them here.
I think we have plenty of good inspirational and educational links here. Isn't it about time to start working?
Michelle did a great job of making a list of the icons needed. Shouldn't we make a list of icons needed.
We then could collect available icons we like in a list.
Icons and Sizes
I can make icons for Drupal. I've been looking at a way to contribute back to the community. What sizes do we need for Drupal? I agree with keeping it vector for easy editing and potential for SVG compatibility in the future. Sounds great. I use Illustrator CS3.
I also agree that we need to design for the sizes we need the icons at. So, a different version for 16px by 16px and 32px by 32px. Do we need anything larger?
We should really shoot for bare minimum to get this off the ground. What icons do we need? Where do they go? And what sizes? Has that list been compiled yet? If someone is willing to put a list together I'll help with building the icons. I run a Illustrator dedicated design blog http://aiburn.com that is driven by Drupal. I wouldn't mind writing a tutorial on making some of the icons as well as its an educational blog. Let me know how I can help out with design. Thanks.
would you consider creative commons by-sa ?
hi seanHodge,
wow... you have great material on your blog !!! but...
"Any artwork distributed in sample files are included solely for demonstrating the tutorials unless explicitly stated otherwise. Please do not redistribute them in any way."
would you consider re-licensing part of it or all of it under a free license such as the creative commons by-sa for example? that would allow for the community to use and build upon your work...
cheers, giovani
http://www.tvgio.com
http://www.webyes.com.br
Love your theme
Totally off topic, but I love your theme. Is that totally custom? It doesn't look familiar.
Michelle
See my Drupal articles and tutorials or come check out the Coulee Region
Icons
@Giovani & @Michelle
For the icons for Drupal whatever license is recommended is fine. The idea is to give the icons to the community. I think the same philosophy as with other parts of Drupal should apply. So, if someone takes the source image and uses Illustrator or another program to improve on the existing graphic no problem. Or if someone creates a better icon to replace any of them that's great too. Having some icons in Drupal's system would be cool.
We should probably create some sort of guidelines though so that the criteria for judgement are clear. I would rather leave that part to someone else though. I'm more interested in helping make the icons. I'm happy to use my blog to promote the project as well. It might get other designers involved.
I'll get started by reading more of the links above to see what existing icon projects are out there. Though if someone wants to suggest a icon set to get started with just let me know.
Thanks for the compliments on my site. I started working with Theming Drupal around the time Drupal 5 came out. The AiBURN theme is custom. I plan on using views a bit in the future and adding more. In regard to licensing related to my site I'm working towards building a subscription program where design students pay maybe $7 a month (something reasonable) to get access to the source files and keep learning to design vector graphics. So, for most of the graphics on the site are for education purposes. I've also released a freebie through vecteezy. It had a license attached to it. I don't know licenses too well though. http://www.vecteezy.com/vf/362-Circular-Halftone-Patterns
In regards to building sites in Drupal 5 I wrote a tutorial series for a popular design blog Create a Killer Band Site with Drupal - Introduction. The idea of the series is to help web designers that are good with graphics and xhtml/css, but not great with php to get up to speed with basic theming with Drupal.
I can state a license though for anything related to building icons for Drupal that works best for the community even when writing about it on my site. What you recommend is fine with me. Whatever makes sense.
Thanks.
Garland
Should we target the icons set for Drupal core to fit with the Garland Theme really well? While still attempting to make them broadly adaptable?
SVG support poor indeed
+1 for Irene Kraus comment from me. Though: how about using SVG as a working format so everyone can edit it with inkscape and sticking with png as long as no better solution arises?
Life is a process
Life is a journey, not a destination
SVG for working format and PNG for presentation format...
+1 for eigentor's comment from me. Use vector (SVG) as the working/source/archive format and bitmap (PNG) as the presentation/rendered/browser format.
That's actually what I was saying too but went off on future tangent saying that Drupal will be ready when browsers get better native SVG support. But it's good that we start the methodology of originating icons as SVGs now, eh?
Cheers Daniel
Great to see so many people
Great to see so many people willing to work on this. I just posted an icon design starter kit with some suggested specs and guidelines. Let's continue the discussion there and more important: let's start designing some Drupal icons!
http://groups.drupal.org/node/9739
Hey all, come check out
Hey all, come check out ximo's Gsoc proposal for the icon module and give him some feedback: http://groups.drupal.org/node/9836#comment-33211
Also, there seems to be a bit of silence after I posted the icon starter kit. Anything we can do to get back on track? :-)
Got lost in the threads
Hi,
Seems to me, there are too many threads to dig for one common goal imho. What did I or we miss?
As of July 2008, is there a list of "actual developments" that we can refer too? (I've been reading about the icon.module but somehow I still feel that there's so many to catch up with)
If pushed through, how can we properly segregate the tasks for Designers, Coders, Testers and other job titles in-between?
My apologies for such inquisitive tone. I just feel curious about this matter although I'm guilty of alienation (got too busy since June is the end of summer for us --back to work but not a good excuse I'm afraid).
I'm wishing good things turn out for this before D7 comes out.
Best regards,
Marc Robinsone
from the Philippines
Marckee for Short
How to Implement
I'm just wondering once we get these icon packs developed, how are the end users going to implement them? There are a lot of icons now that you have to edit the css for, and even then it may take hours of tweaking to figure it out. Are you thinking of creating modules, too? And where are we starting the list of suggested icons to get started?
EDIT: Disregard about how to implement it. Just found the icon module link.