KeyNote 2.0: Graphics
Version: 1.01 / 07 Feb 2003
The latest version if this file is available at http://www.tranglos.com/free/knt2devgraph.html
See also: KeyNote 2.0 Development FAQ
This documents lists various graphics- and design-related needs for KeyNote 2.0. All this is too much for one person to handle. If you would like to help with visual design, please pick the item(s) that you would like to work with, and let me know
. Thank you!
Website buttons (also for Help, documentation, About boxes, etc.). These could use any of the typical sizes, such as 88x32, perhaps not bigger than about 100x40. I don't have any particular idea, except to say that I have a preference for shaded (3d) buttons rather than flat ones. Ideally, the text on a button could be replaced with another text, so that the same button could be used for KeyNote and PhoneDeck. I was also thinking of putting the program's icon on the button, which kind of makes sense, but we'll need the icons first. (Format: preferably GIF, not jpeg.)
Icons. At least a 32x32 and 16x16 version of each icon, 16 and 256 color versions, if possible. KeyNote uses a 256 color icon, which looks fine on Windows95, but looks really bad on my Win2000, which seems to display only 16 colors in the taskbar tray area, so KeyNote's standard icon looks very bland there. Again, no particular preferences here, except that the "note" aspect needs more emphasis than the "key" part.
The 16x16 icon, used for the taskbar tray, also has a special need. KeyNote displays (or rather, should display) a slightly different version of that icon when the "clipboard capture" feature is active. At the moment, KeyNote does flash an alternate icon for half a second each time text is captured. It could be a different color version of the original icon, or the original icon with some well-visible indicator added (a red dot, a clip, something along these lines). Two icons are sufficient: icon A for normal state, and icon B for "clipboard capture active". To indicate the moment of capture, KeyNote can flash icon A, rather than using a separate, third icon.
Bitmaps for the status bar. Right now, KeyNote has statusbar indicators for these states: no file open, "native" file open, encrypted file open, Dart Notes file open (for compatibility with a program which originally inspired KeyNote), and one indicator used when the current file is read-only. Basically, this will stay the same for version 2.0, although an improvement would be to have a separate "read-only" icon for each file format or type. These are 16x16 bitmaps, 16 colors.
Bitmaps for the tree. There's the standard set of glyphs KeyNote uses to indicate the kind or state of tree nodes. They come in pairs: one used when a node is selected (e.g. an open folder), one when the node is not selected (closed folder). Version 2.0 needs more glyphs, because there's a greater variety of nodes to account for. I used the folder icons for lack of a better idea, but KeyNote doesn't have a true concept of folders (each tree node contains data, there are no nodes which are ONLY folders), so it's perhaps better to retire the folder icons. I'll need:
These are 16x16 bitmaps, 256 colors would be nice, but 16 would do as well.
- normal node (rich text editor, what KeyNote has now)
- plain text node (a separate edit control will be used
for plain text data; it will be more suitable for
editing HTML or code than the RTF editor is)
- grid node (this will look like a very simple spreadsheet)
- web browser node (this will be either IE or Mozilla,
so perhaps the standard blue IE icon should not be used).
- image viewer node (an image is displayed in the editor area)
- virtual node. Each of the node types above can be a virtual node,
the node points to a file on disk, or a URL, rather than storing
its data in the KeyNote file. This could perhaps be done as an
overlay graphic, like the tiny "hand" Windows uses to indicate
shared directories, or the shortcut overlay. (Delphi can handle
such overlays.) An overlay would be nice because just one icon
would indicate a "virtual" node for all the actual node types
Bitmaps for tabs (16x16, 16 or 256 colors). They are also used for the tree nodes, if user prefers them over the standard bitmaps (4). I am listing these for completeness, but because they are customizeable, there is perhaps no need to have a special new set of these images; users will add their own anyway.
Toolbar buttons (16x16 bitmaps, 16 or 256 colors). Perhaps it's best to use standard images here, so that it's clear to all users which button saves, which button cuts text, etc. Still, I may need buttons for a few functions which specific to KeyNote, where none of the existing standard images fits the purpose. I'll send you a (preliminary) list of functions in a separate email.
Some applications have their own, custom set of toolbar buttons, but it doesn't always work well. The download manager GoZilla used to have truly horrid buttons, it was hard to tell which one did what. On the other hand, the new Mozilla has a sweet and effective design, so does TheBat (a mail client). I'm attaching screenshots of both. But one thing to notice is that whenever such truly custom sets are used, the buttons are large. I don't think I want to have buttons of this size on KeyNote, because very few will fit on the toolbar. Delphi has a good example of a toolbar (included) which mixes standard icons for common functions with custom icons for program-specific functions, and I suppose KeyNote should be going that way.
Splash screen: a bitmap, about the size of the current "About" dialog box in KeyNote, or a little smaller.