Maemo UI improvements blog.

December 28, 2008

New Year Countdown Series: #7

Filed under: Design guidelines — Tags: , , , , — Andrew Zhilin @ 18:56

Hello there. Today I’m continuing to post about UI and I want to talk about one of the most important things for UI (and basicaly most other types) designer – guidelines.

Every big project have its own guide(brand)book. No matter if it’s OS or Oil Company. As company always have some special designed things like cars, planes, banners, t-shirts, pens or whatever you want, OS have windows, bars, icons and other stuff. When designer is making corporate style he knows that other people that will decorate cars, format documents and paint planes really knows nothing about design. So he makes a special book of design guidelines, or simply “how everything should be done from the designer’s point of view”. And there he describe all stuff that can be made in details, all margins, colour and font schemes and all other stuff. He draws guides how pictures in the document should be formatted. And this helps a lot for people that are not designers to produce corporate styled stuff that looks well.

Now let’s return to to the Maemo world. Honestly it has some description of design guidelines but it’s too basic. And developers can sometimes ignore even that small amount. Tim Samoff have tried to write good guide for Maemo UI design but it covers not all spheres of UI design.

The worst thing is that lack of guidelines document affects Maemo Team itself, cause they have problems like 10 different styles of arrows in one theme, icon style inconsistency and some others. And it affects community developers too cause they are not designers so they do what they want :)

What I propose is to make one central Uber Guideline Document with some basic templates for editing. I’ll show you an example on my “application icons guideline” test document.

15

So, here’s an example of standard guideline document. Hope something like this is already made for Maemo 5 in some Secret Underground Helsinki Lab :)

Tomorrow you’ll see more examples of icons that were built according those guidelines cause we are coming to the hottest stuff in my series!

14 Comments »

  1. Andrew, Could you email me your email address? I can’t seem to find it anywhere.

    Comment by timsamoff — December 28, 2008 @ 20:44

  2. How about vector based icons? Scalability should be important design rule on handheld devices.

    Comment by mve — December 28, 2008 @ 22:00

  3. Hi Andrew,

    As you may know with my code design within the boxes is not important to me and I often leave UI elements with placeholders, it is the feel and the experience that counts.

    I hope by following what you have to say something will sink in and help me to build consistent visually appealing applications :)

    In any documentation you produce, could you emphasise that by using simple layouts and patterns instead of complex intricate designs it allows a far greater variance of scale and will allow a design to be recognisable in both reduced miniature form as well as at full size.

    This is especially important if the interface is to allow semi arbitrary scaling of components.
    We won’t have space to store every single pre-scaled and tweaked variation of an icon.

    Its not such an issue with SVG (or my sketches) but its just a common sense opener before people start to produce intricate works of art which look rubbish when scaled.

    Keep up the splendid series, I look forward to seeing more.

    Comment by lcuk — December 28, 2008 @ 22:12

  4. Vector icons were always one of the most tricky things for UI designers and it was always a great theme for holy-wars. I can tell what I think bout them. Let’s compare pros and contras:

    Pros:
    – Scalability

    Contras:
    – CPU load (vector graphics’n’stuff, the worst thing in .svg)
    – Lose in icon details (a little less that critical disadvantage)

    Now let’s see if we can replace pro’s with raster icons. Scalability can technically be replaced with number of different sizes (that’s done now). Exact number of sizes depends on designers skill. For example iPhone needs only one. Maemo can use only 2 and it won’t eat much space.
    So you can compensate scalability but you can’t deal with CPU and details problem. That is why .svg icons are not an answer for handhelds, I think.

    To Lcuk: Well, vector-based interfaces are great cause they give you infinite scaling, but again, you’ll face CPU power eating, and the more elements there will be on the screen, the more power would be eaten. Just check some Flash cartoon on n800 to see what I mean. So I think interface is the last think that you’ll want to spend CPU on.

    To Tim: Strange, I thought it’s here in the profile :) Well, it’s: drew.zhilin(a)gmail.com

    Comment by Andrew Zhilin — December 28, 2008 @ 23:34

  5. Thanks, I’ll email you. ;)

    Re: vector-based graphics… It seems like if vector-graphics were the end-all-be-all of UI design, everyone would be building their architectures within Flash (or some sort of derivative) — or some sort of system that reads vector like AI. But, I have yet to see that. Vector has been available since the beginning of computational graphics and yet most systems are still using bitmap UIs. Interesting, no?

    Comment by timsamoff — December 29, 2008 @ 16:55

  6. even if your example page is probably an example, having rounded icons and getting rid of the shape makes the icons look more equal, and makes it harder for the user to distinguish different icons.

    if every icon has its own shape, the user will “learn” the shape and detect the icon just by its shape. when all icons are rounded, the user has to look at and parse the icon contents.

    that said, a unified icon style (e.g. tango) is important. and having human interface guidelines as well.

    of course, it’s just an example, but i just wanted to point this out.

    Comment by thp — December 29, 2008 @ 17:09

  7. > …when all icons are rounded,
    > the user has to look at and
    > parse the icon contents…

    Thomas, this is true to a point — or maybe just for a period of time (i.e., learning curve). Adobe did this with all of their icons: http://www.adobe.com/products/creativesuite/mastercollection/ (roll-over all of the links on the left of the page). This was annoying for about…a day. After learning the colors, navigating to different apps was a breeze. :)

    Comment by timsamoff — December 29, 2008 @ 17:18

  8. andrew,

    look at liqbase itself for a vector based rendering system.

    Every sketch in the system is renderable at multiple scales and the principle thing is simplicity.
    A design which is recognisable at 8 pixels square is more desirable than one which looks like a muddy puddle.

    Comment by lcuk — December 29, 2008 @ 19:03

  9. But, muddy puddles are FUN! :)

    Comment by timsamoff — December 29, 2008 @ 21:15

  10. The bad thing is that vector graphics could not give you some detailed picture without eating CPU. You can draw squares and rounds with it, even use some mathematical decorations like gradients ans some others, but for example you can’t do realistic shade with vector, or you can’t blur an image. GPU shaders could be an answer but you’ll still have to convert vector to raster image and then manipulate with it inside the shader.

    Comment by Andrew Zhilin — December 29, 2008 @ 22:43

  11. Tim: yep, but these icons still have a distinct shape in the form of the characters. and the icons are color-coded. this works for a “suite” of applications, but not with a possibly unlimited number of apps.

    Comment by thp — December 29, 2008 @ 22:45

  12. oh, and something I forgot: adobe has – after buying macromedia – still some redundant applications that came from macromedia and do (about) the same thing as the adobe equivalents, so they would have similar applications and (should) have different icons.

    when you have two different vector drawing applications, and need two different icons for the same type of applications.

    Comment by thp — December 29, 2008 @ 22:54

  13. The main difference between guideline and “don’t think, OBEY!” styles is that when you use guideline, you can do something your own, according to that guideline, not exactly, but it would look consistent within the OS. Second variant is used by iPhone SDK, which takes your image and formats it under standard rounded circle icon, and you can’t do any tricks with it. But still developers aren’t arguing bout lack of shapes available :)

    Comment by Andrew Zhilin — December 29, 2008 @ 22:57

  14. Note the diameter of first image is 46 pixels. This means if you convert a standard 48 pixels image you must use 2 pixels on each side for the border?

    One can use SVG as source, export them to different sizes of raster images, and use these for the desktop (basically, pre-rendered material).

    How would you make a round icon for “File Manager”? I noticed your terminal icon, but I’m not sure I like this, because it felt strange. In my experience a terminal is 80×24; a rectangle; not round.

    It is interesting to note that in contrast to some very popular device you’re using circles/rounds instead of cubus with round corners. Now, I believe circles/rounds are much more peaceful (like Ouroboros) than squares although I’m not sure about a compare between circles/rounds versus squares with round corners. Why did you decide to use round icons?

    Would you allow transparency in the icons?

    Comment by allnameswereout — December 31, 2008 @ 02:32


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Blog at WordPress.com.

%d bloggers like this: