Смотрим заметки об иконках и дизайне с Сьюзен Кэр. В этом видео мы погружаемся в удивительный мир дизайна иконок и интерфейсов, созданных легендарным дизайнером Сьюзен Кэр для первого Macintosh. Вы узнаете, как простые пиксели превратились в знаковые элементы интерфейса, которые мы используем до сих пор. Если вы интересуетесь историей технологий или хотите понять, как зарождался современный UX/UI-дизайн, этот ролик для вас.

Сьюзен Кэр — один из ключевых дизайнеров Apple, который заложил основу для современного подхода к созданию пользовательских интерфейсов. В этом видео мы разберем её работу над первыми иконками Macintosh, её подход к типографике и принципы, которые остаются актуальными даже сегодня. Вы узнаете, как она создавала шрифты, такие как “Чикаго”, и почему простота всегда была её главным принципом.

Это видео будет полезно не только тем, кто интересуется историей технологий, но и современным дизайнерам, которые хотят понять корни своей профессии. Первый Macintosh — это не просто компьютер, это начало новой эры взаимодействия человека с технологиями.

Это видео будет полезно не только тем, кто интересуется историей технологий, но и современным дизайнерам, которые хотят понять корни своей профессии. Первый Macintosh — это не просто компьютер, это начало новой эры взаимодействия человека с технологиями.

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

Я не буду просто пересказывать её слова, а добавлю свои комментарии как продуктового дизайнера. Потому что то, что происходило в Apple в 1982–1984 годах, — это не просто история. Это база UX/UI, которую полезно освежить, чтобы понять, куда мы идем дальше. Поехали!

От скульптуры к пикселям: «Принципы одни и те же»

Сьюзан начинала не как IT-специалист. Она была художником, скульптором, работала с типографикой. В Apple её позвал одноклассник, когда команда создавала первый графический интерфейс и им нужно было «очеловечить» компьютер.

На собеседование она принесла все свои книги по типографике. А ей показали тетрадь в клетку и сказали: «Представь, что это очень маленькие квадратики. Тебе придется работать с ними». Так она познакомилась с пикселями.

Мой комментарий как дизайнера: Сьюзан говорит гениальную вещь: «Пока есть люди, в искусстве ничего нового не придумано. Принципы композиции, типографики, палитры — одни и те же тысячелетиями». Многие сейчас делят дизайн на «графический» и «UX/UI». Но если ты хороший графический дизайнер, ты поймешь и интерфейс. Если ты плохой дизайнер — ты не сможешь сделать ни картину маслом, ни экран в Figma. Фундамент всегда один.

Типографика и сетка 32×32

Первые шрифты для Mac (Chicago, Geneva, Monaco) рождались в муках. Раньше шрифты часто делали с наклоном, имитируя рукописный ввод. Сьюзан настояла на том, что буквы должны стоять ровно, под 90 градусов — так они читаются на экране лучше.

А иконки? Ограничение 32×32 пикселя. В этом крошечном квадрате нужно было уместить смысл, который пользователь считает мгновенно.

Почему иконка, а не текст? Рождение визуального языка

Зачем вообще нужны иконки? Сьюзан вдохновлялась книгами по визуальной коммуникации (включая комиксы) и знаками шведского метро.

Суть проста: наш мозг быстрее считывает графический образ, чем текст. Зрительная память работает быстрее. Если интерфейс маленький (как тогда, так и сейчас в мобильных приложениях), мы не можем зашить туда весь текст.

  • Карандаш = редактирование.
  • Шестеренка = настройки.
  • Смайлик = радость (кстати, именно Сьюзан нарисовала первый системный смайлик!).

Иконка — это графическое сжатие мысли. Чем проще и понятнее метафора, тем меньше когнитивной нагрузки на пользователя.

Эволюция инструментов: от кода к WYSIWYG

Сейчас это звучит как дичь, но на старте Сьюзан писала код, чтобы увидеть, как будет выглядеть иконка на экране. Ты вводишь hex-код, компилируешь, смотришь на монитор.

Позже Билл Аткинсон (легендарный программист Apple) написал для неё графический редактор иконок. Она смогла рисовать мышкой и сразу видеть результат. Это был революционный сдвиг: дизайнер наконец-то получил инструмент, который говорил с ним на его языке.

Главная боль современного дизайнера: Свобода vs Гайдлайны

И вот тут начинается самое интересное. Сьюзан рассказывает, как они делали иконки. Например, для уведомлений/будильника. Они рисовали несколько вариантов: слона, колокольчик, будильник. Был чистый творческий поиск.

Мой комментарий: Мы с вами сейчас находимся немного в плену. В 80-х не было устоявшихся паттернов, и дизайнеры были первопроходцами. Сегодня? Мы не можем просто так взять и нарисовать «слона» вместо колокольчика для уведомлений. Люди уже привыкли. Колокольчик = уведомление. Шестеренка = настройки. Если мы нарушим этот паттерн, мы запутаем пользователя и ухудшим юзабилити.

Плюс на нас давят жесткие гайдлайны: iOS Human Interface Guidelines, Material Design. Мы ходим по лезвию бритвы: хочется сделать что-то новое и интересное, но нельзя сломать то, к чему пользователь уже привык. В этом и есть вызов современного продуктового дизайнера — находить инновации в рамках жестких системных ограничений.

Что дальше?

Это была только половина лекции! Во второй части мы разберем, как Сьюзан создавала знаменитый шрифт Chicago, как работал первый сканер, и почему Стив Джобс заставил их быть осторожнее с логотипом Apple.

Ставьте лайк, если тема зашла, и пишите в комментариях: какой современный UI-паттерн вас бесит больше всего и что бы вы переделали, если бы не боялись нарушить гайдлайны? 👇

Продолжение (Часть 2) уже в работе! 🚀