Алексей Обжорин, кандидат филологических наук, автор Блога о визуальной грамотности, написал статью специально для Нетологии об истории иконки часов от пиксельного до плоского дизайна. Статья для конкурса блога.

Маленькие, но значимые картинки стали неотъемлемой частью современного дизайна. Их используют в презентациях, инфографике, приложениях и на сайтах. Они помечают важную информацию, направляют внимание зрителя, подобно дорожным знакам, и конечно, развлекают. Иконки способны «оживить» любой материал, наделить его эмоциями.

Автор граффити — Garry Knight.

Так было не всегда. Первый в мире компьютер с графическим интерфейсом пользователя — Xerox Alto — появился в 1973 году. А идея изображать процессы и программы в виде рисунков появилась только после 30 лет существования компьютеров.

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Программа обучения: «Дизайн мобильных приложений: интерфейсы, архитектура, визуальная концепция»

Xerox (PARC) Alto, автор фото — Gautier Poupeau.

Посмотрим на историю иконок, полную событий и неожиданных поворотов, и узнаем:

Какие периоды можно выделить в истории иконок?
Кого можно считать законодателем «иконной моды» и случались ли в истории повторения стиля?
Почему развитие шло именно таким путем и что будет дальше?

Главным героем этого материала стала иконка часов. Почему?

Часы были в самых первых операционных системах и есть в современных.
Это детализированный объект (по сравнению с папкой или файлом) и в его изображении можно увидеть особенности стиля конкретного исторического периода.
Часы, как символ времени, обладают особым философским смыслом и притягательностью.

Пиксельные восьмидесятые

Восьмидесятые признаны лучшим периодом в истории поп-музыки. Еще они подарили человечеству идею о наступлении информационной эры — о том, что каждый человек будет иметь доступ ко всем мировым знаниям. Первая коммерческая компьютерная сеть Telenet, появившаяся в 1982 году, подтверждает эту идею.

Xerox Star 8010 — первая вычислительная машина для широкой публики со значками вместо текстовых команд (1981 год). Иконки придумали для того, чтобы новые сотрудники компании Xerox легче и быстрее учились работать с компьютерами. Тогда никто не знал, что это поможет освоить компьютеры всему миру.

Первые компьютерные иконки Xerox Star 8010, 1981 год. Фото Interactiontechniques.

Черно-белые пиксельные рисунки были несовершенны, но они воплотили ключевой принцип — взаимодействовать с машинами легче с помощью знакомых, привычных вещей — офисных принадлежностей, предметов, визуальных метафор.

Команда дизайнеров Apple (около 100 человек) «раскручивала» эту продуктивную идею. Для работы с иконками был приглашен художник (не IT-специалист!) — легендарная Сьюзен Кэр. Создавалась дружественная человеку графическая среда компьютеров Apple Lisa и Mac. Теперь пользователь с любым уровнем владения компьютером понимал, что, например, изображение часов связано с настройками времени.

Мы видим, что в центре внимания разработчиков — идея простоты и доступности «общения» с компьютерами, ограниченная техническими возможностями экранов.

В 1985 году появляется первый Windows со своими визуальными метафорами. Другие производители также ищут оригинальные способы изображения процессов. Операционная система GEOS для 8-битного Commodore и neXTSTEP помещают иконки в рамки, что создает ощущение целостности стиля и порядка на рабочем столе компьютера.

Цветной интерфейс 16-битного компьютера Commodore Amiga 500, 1987 год. Фото Bill Bertram.

Цветные девяностые

Холодная война закончилась. Германия объединилась. Советский союз распался. Под звуки Нирваны и Металлики мир окутывает сеть WWW: встречаем первый веб-сайт и удивительные новые медиа.

Компьютерные иконки начинают медленную, но заметную эволюцию: «распухают», приобретая объем, отбрасывают тени и наливаются цветом. Главной особенностью стиля можно назвать именно цвет, ведь теперь цветные фантазии дизайнеров «догоняют» технологии.

Рабочий стол Rhapsody DR2, операционной системы Apple, 1997 год. Фото MVoloshin.

Билл Гейтс отдает предпочтение квадратичным формам и ярким открытым цветам в своей новой Windows.

Дизайнеры других операционных систем пребывают в творческом поиске. Но приглядимся к часам Windows 3 и OS/2. Немногие знают, что над ними работал один и тот же человек. И это Сьюзен Кэр — соучредитель NeXT Computer и независимый дизайнер, сотрудничающий с Microsoft и IBM.

Во второй половине девяностых в иконографии обозначается четкая тенденция к реализму. Часы в операционной системе BeOS, созданной в 1997 году компанией бывшего исполнительного директора Apple Жана-Луи Гассье, отличаются не только объемом. В изображении есть блики, игра света и тени, градации цветов.

А где же Apple? В начале 90-х Apple испытывает трудности без Стива Джобса, но в 1996-м он возвращается и объединяет системы OPENSTEP и Mac. Иконки компании к концу 90-х «оживают», стиль догоняет и опережает свое время. Часы становятся не просто цветными, но реалистичными. Это скевоморфизм.

Реалистичные двухтысячные

Расшифрован геном человека. Запущен первый космический турист, Google, Википедия, YouTube, глобальные социальные сети. Это настоящий интернет-бум.

Реальность «переехала» в онлайн, поэтому скевоморфизм попал на благодатную почву. По одной из историй, идея имитации реальных свойств и материалов пришла так: команда Apple долгое время «билась» над дизайном Quicktime, но безуспешно. Однажды пришел Джобс. В его руке была страница, вырванная из глянцевого журнала. На ней — реклама дорогих наручных часов: стальной корпус, блестящий циферблат, тончайшие детали.

Интерфейс Aqua, представленный компанией Apple в 2000-м, преображает иконки. Прозрачность воды, реалистичные блики, теплый «пластмассовый» эффект, свечение и тени. По словам Джобса иконки создавались такими, чтобы их захотелось лизнуть. Иконка Time Machine 2009 года буквально искрится от реалистичности.

Иконки Windows XP отличаются единством стиля, яркостью и спокойствием, но только в Vista и Windows 7 операционная система присоединяется к реалистам. Появляются крупные, блестящие, прорисованные образы. В отличие от иконок XP они разворачиваются влево — навстречу взгляду пользователя.

Расцвет реализма в Windows 7, 2009 год. Фото Kachina Daze.

Двухтысячные можно назвать иконочным «барокко». Иконки достигают исторического максимума размеров и реалистичности. Разрешения экранов позволяют этого достичь.

Реализм в Mac OS X 10.6 Snow Leopard, 2009 год. Фото FHKE.

В 2000 году компания Ericsson вводит понятие смартфон, для обозначения умного телефона. Устройства были и до этого, но пика расцвета они достигают в двухтысячных.

Иконки пытаются приспособиться к новой «среде обитания» — небольшому экрану смартфона (Sony Ericsson K850i by Alpha), 2007 год.

Наш герой — иконка — вновь сталкивается с преградой, которая казалось далеко позади. Ей нужно адаптироваться к небольшим экрану и процессору. Иконки часов в первых смартфонах далеки от своих компьютерных аналогов, но пытаются вписаться в реалистичный образ.

Минималистичные десятые

Мир пережил цифровую революцию. YouTube и социальные сети вытеснили телевидение и традиционные медиа. Количество пользователей Интернет возросло с 0,4% всего населения планеты в 1995 до 51,7% в 2017. Информационная эра, о которой с восхищением говорили в начале 80-х, наступила.

Дизайнеры создали параллельную реальность — цифровую, и устали. Информации оказалось слишком много, а внимания человека слишком мало. Посмотрите на иконки часов Windows 10 и Mac 1.1. После всех исканий, мы вернулись к простоте. К началу.

Иконки смартфонов и современных операционных систем стали проще и крупнее.

Иконки смартфонов стали проще и крупнее iOS 7, 2013 год.

Простота и сдержанность позволяют выразить смысл минимальными изобразительными средствами. Подобным образом один иероглиф или точное слово заменяют долгое, невнятное объяснение.

Крупные иконки адаптируются под разные устройства — компьютеры, планшеты и смартфоны — и их проще нажимать одним пальцем.

Дизайнеры научились ценить пространство экрана и внимание пользователя. Яркие, «распухшие» от реализма иконки прошлого десятилетия кричали: «Лизни меня!». Плоские иконки привлекают утонченностью и выразительностью. Внятностью сообщения.

Минимализм в стиле Mac OS X Yosemite, 2015 год. Фото Mahesh Mohan.

Сегодня иконки выступают полноценным аналогом языка. Мировые компьютерные компании признают это и создают визуальные грамматики. Самыми известными считаются «Материальный дизайн» Google и «Язык дизайна IBM».

p.p1 {margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ‘Helvetica Neue’; color: #454545}

Читать ещё: «Самое простое руководство по иконографике»

В них описаны общие принципы стиля; особое внимание уделено деталям визуального языка (толщина контура, преобладающие формы, закругление углов, оттенки цветов, расположение тени). Именно детали помогают создать впечатление устойчивости бренда, единства элементов, передать чувство пространства, знакомого пользователю.

Плоская эра Windows 10, 2016 год. Фото Okubax.

В начале истории дизайн иконок полностью зависел от уровня развития технологий, но спустя 30 лет мы освободились от этих рамок. Мы убедились, что способны «приручить» компьютеры и воплотить любые идеи в реальность. Но мы также поняли, что «…жизнь становится все более сложной… Простота и ясность — это зачастую все, чего хотят и в чем нуждаются люди» (Гарр Рейнольдс). И сознательно остановились на минимализме. Это наш выбор.

Мнение автора и редакции может не совпадать. Хотите написать колонку для «Нетологии»? Читайте наши условия публикации.