Иконографика

Поговорим о создании иконок, которые с развитием моб. технологий получают все большую актуальность. Своим опытом процесса создания иконок и управления компанией делиться Егор Гилев «Турбомилк».


Лекция Егора Гилёва "Язык пиктограмм" from blackbox.ru on Vimeo

Этапы процесса создания иконок:
1. Полностью описать назначение иконки (функциональность). Например, увеличение размера текста.
2. Раскрашиваем слова описания в разные цвета:
синий — действие
зеленый — объекты
оранжевый — определение объекта
фиолетовый — обстоятельства
синий — идентификатор
3. Получаем список в виде таблицы отдельных слов по цветам.
4. Этап мозгового штурма:
— icon finder
— google images (ищем аналогии)
— думаем сами
5. Вручную рисуем карандашные наброски по несколько вариантов (можно показать заказчику для выбора). Выбираем лучшие.
6. Объединяем все готовые элементы и рисуем иконки в граф. редакторе.

Замечательная статья Дениса Кортунова — «10 ошибок в дизайне иконок»
1. Недостаточная различимость иконок.
2. Слишком много элементов в одной иконке.
3. Лишние элементы.
4. Нет стилевого единства набора.
5. Ненужная перспектива и тени в мелких иконках.
6. Слишком оригинальные метафоры.
7. Нет учета национальных и социальных особенностей.
8. Изображения реальных элементов интерфейса в иконках.
9. Текст внутри иконок.
10. Мимо пикселей.


Егор Гилёв. Как компания Турбомилк устроена изнутри from 404fest on Vimeo

Дмитрий Жуков, создание иконок, типичные ошибки и инструменты.

Про иконки (UIC2010 Дизайнерский Утреник) from Turbomilk on Vimeo.

Полезные сервисы и блоги:
1. http://www.iconfinder.com
2. http://findicons.com
3. http://iconza.ru
4. http://iconfactory.com
5. http://turbomilk.ru/blog

Литература:

1. William Horton — «The Icon Book: Visual Symbols for Computer Systems and Documentation»
2. Steve Caplin — «Icon Design. Graphic Icons in Computer Interface Design»

3. Josh Clark — «Tapworthy: Designing Great iPhone Apps»