guidelines for icon design/mobile devices

28 Apr 2005 - 4:16pm
9 years ago
2 replies
2061 reads
Wendy Fischer
2004

Are there any guidelines out there pertaining to the production of graphics/suggested color palettes, etc for icons on mobile phones?

I've looked and can't find anything. I've noticed that the Yahoo and MSN icons look specifically formatted and designed for the mobile browser - aka they look brighter and a little rougher around the edges as opposed to the normal Yahoo icons. I am wondering if anyone has come across any suggested color palettes to use and how to produce the icons in a gif format.

I've noticed that the icons appear differently on different devices depending on the type of screen, screen size, glare, light, etc. I am trying to format icons for a specific phone, and they look nice on my own phone, but appear washed out on the other phone.

-Wendy Fischer

Anirudha Joshi <anirudha at iitb.ac.in> wrote:
[Please voluntarily trim replies to include only relevant quoted material.]

Nathan wrote AM/PM mix up>

In fact, you always start now+ while setting the alarm, so that's a good
constraint. I had one of those when I was a student, and I lost it in
transit when I moved out of the hostel. Missed it for a long time.

I still wish it had a snooze function, though. I like to go back to
sleep after I have woken up, for a while. BTW, I too keep the mobile
phone far away enough that I have to get out of the bed to switch it
off. (I am told it helps reduce the brain damage caused because of
radiation, but that could be wrong.)

The other thing I wish to be able to differentiate is a normal day and
an extra-special day. On a normal day, I wake up (these days) at 6.30
am. If I am late by a few minutes, and if I shut off the alarm, I will
naturally wake up any ways - latest by 7 pm. But, say I have a morning
flight to catch, I must wake up at 4.30 am, else I miss my flight. The
experience needs to be very different. (its ok to wake up with a bit of
distress once in a while - its lot more distressful to miss your
flight). Also, how about a recorded message - 'wake up, you need to be
at the airport in' + "fourty five" + 'minutes'.

Anirudha

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

Comments

28 Apr 2005 - 4:46pm
Barbara Ballard
2005

> Are there any guidelines out there pertaining to the production of
> graphics/suggested color palettes, etc for icons on mobile phones?
>
> I've looked and can't find anything. I've noticed that the Yahoo and
> MSN icons look specifically formatted and designed for the mobile
> browser - aka they look brighter and a little rougher around the edges
> as opposed to the normal Yahoo icons. I am wondering if anyone has
> come across any suggested color palettes to use and how to produce the
> icons in a gif format.
>
> I've noticed that the icons appear differently on different devices
> depending on the type of screen, screen size, glare, light, etc. I am
> trying to format icons for a specific phone, and they look nice on my
> own phone, but appear washed out on the other phone.

When I worked with my graphic designer on this for my style guides, he
was very hesitant to propose specific color palettes. You've
identified the major issue - light and glare conditions. Type of
screen is another obvious one, and you will still find the occasional
screen that doesn't have a 1x1 ratio pixel.

The rules we derived included:
- use high-contrast colors; subtleties will frequently be lost
- keep the same (small!) color palette throughout your application/site
- keep the same (small!) set of line weights in graphics throughout
your application/site
- keep images consistently sized (small!)
- avoid spacer graphics
- if text must be precisely aligned with graphic, include text in the
graphic (avoid when possible)
- do not anti-alias text
- PNG will work fairly universally
- all graphics should be narrower than screen width (e.g., 96 pixels is
a conservative estimate)
- if text is on the page, graphics should allow at least one line of
text visible (below-the-fold problem)
- avoid using graphics that do not communicate
- keep non-communicative graphics small (< 4kb)
- don't use tables to arrange graphics
- don't use borders around non-link images - they look like a link
- always define image sizes
- don't embed images in style sheets (2001-2004 devices would load the
graphic each time it was used)

Style guide is at
http://www.littlespringsdesign.com/design/styleguides.html

---
Barbara Ballard 1-785-838-3003
barbara at littlespringsdesign.com

28 Apr 2005 - 5:37pm
Jonathan Grubb
2004

> I've noticed that the Yahoo and MSN icons look specifically formatted and
> designed for the mobile browser

You are correct - we change our colors (even the logo color) for mobile
screens. Subtle colors will be lost on low-end screens, so rule #1 is to go
dark and bold. Avoid light grays, greens, yellows, and some blues.

The jagged edges stem from a different issue related to anti-aliasing. To
see the problem open a photo (or anything colorful) on your phone and look
at it from different angles. As you tilt the phone up and down you'll see
certain colors magically disappear and reappear as different colors. On my
Nokia 6620, black and white swap when viewed from a high angle and all
colors are correct but washed out from a low angle. And each phone is
different. Spooky.

Anti-aliased graphics contain many different colors, and the angle of
disappearance for each color can't be predicted, so we reduce the number of
colors as much as possible then pick a main color that will look good enough
on the most popular phones.

As for tips/rules...

- Use graphics as little as possible. Really.

- Avoid anti-aliasing

- Pick colors that contain some combinations of red, green, and blue rather
than pure primaries. When blue (for example) disappears at a certain angle,
the red pixels will keep the graphic visible. (Does that make any sense?)

- Red seems to work better than other colors.

- Test your colors on a laptop screen. If they look bad there, they'll look
bad on a phone.

- Aligning a graphic with text on Wap is nearly impossible; each phone will
render differently. The only dependable method is to make a stylesheet for
each phone, which is out of scope for most projects.

- You're lucky to be targeting a single phone. Try making a grid of colors,
sending it to the phone, and picking the colors that look good. Easy!

Extra tip: Budget phone testing.
Everyone in the mobile space has a hard time getting phones for testing.
Luckily every town has a free mobile test lab called Best Buy. Post your
graphics to a wap page and go stand in the store for hours testing on each
phone. They usually won't make you leave, and if they do just head over to
Circuit City.

- - - - - - - - - - - - -
Jonathan Grubb
Yahoo! Mobile
Office: 408-349-6122
Mobile: 415-722-9449
- - - - - - - - - - - - -

-----Original Message-----
From:
discuss-interactiondesigners.com-bounces at lists.interactiondesigners.com
[mailto:discuss-interactiondesigners.com-bounces at lists.interactiondesigners.
com] On Behalf Of Wendy Fischer
Sent: Thursday, April 28, 2005 2:16 PM
To: 'Interaction Designers'
Subject: [ID Discuss] guidelines for icon design/mobile devices

[Please voluntarily trim replies to include only relevant quoted material.]

Are there any guidelines out there pertaining to the production of
graphics/suggested color palettes, etc for icons on mobile phones?

I've looked and can't find anything. I've noticed that the Yahoo and MSN
icons look specifically formatted and designed for the mobile browser - aka
they look brighter and a little rougher around the edges as opposed to the
normal Yahoo icons. I am wondering if anyone has come across any suggested
color palettes to use and how to produce the icons in a gif format.

I've noticed that the icons appear differently on different devices
depending on the type of screen, screen size, glare, light, etc. I am
trying to format icons for a specific phone, and they look nice on my own
phone, but appear washed out on the other phone.

-Wendy Fischer

Anirudha Joshi <anirudha at iitb.ac.in> wrote:
[Please voluntarily trim replies to include only relevant quoted material.]

Nathan wrote AM/PM mix up>

In fact, you always start now+ while setting the alarm, so that's a good
constraint. I had one of those when I was a student, and I lost it in
transit when I moved out of the hostel. Missed it for a long time.

I still wish it had a snooze function, though. I like to go back to
sleep after I have woken up, for a while. BTW, I too keep the mobile
phone far away enough that I have to get out of the bed to switch it
off. (I am told it helps reduce the brain damage caused because of
radiation, but that could be wrong.)

The other thing I wish to be able to differentiate is a normal day and
an extra-special day. On a normal day, I wake up (these days) at 6.30
am. If I am late by a few minutes, and if I shut off the alarm, I will
naturally wake up any ways - latest by 7 pm. But, say I have a morning
flight to catch, I must wake up at 4.30 am, else I miss my flight. The
experience needs to be very different. (its ok to wake up with a bit of
distress once in a while - its lot more distressful to miss your
flight). Also, how about a recorded message - 'wake up, you need to be
at the airport in' + "fourty five" + 'minutes'.

Anirudha

_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/
_______________________________________________
Welcome to the Interaction Design Group!
To post to this list ....... discuss at ixdg.org
(Un)Subscription Options ... http://discuss.ixdg.org/
Announcements List ......... http://subscribe-announce.ixdg.org/
Questions .................. lists at ixdg.org
Home ....................... http://ixdg.org/

Syndicate content Get the feed