{ "version": "https:\/\/jsonfeed.org\/version\/1", "title": "Виталий Филатов: заметки с тегом иконки", "_rss_description": "Меня зовут Виталий Филатов. Я коммерческий писатель, помогаю бизнесу рассказывать о себе и продукте. Пишу и редактирую статьи, инструкции, текст сайтов и интерфейсов. Люблю работать в команде с дизайнерами и разработчиками.", "_rss_language": "ru", "_itunes_email": "", "_itunes_categories_xml": "", "_itunes_image": "", "_itunes_explicit": "", "home_page_url": "https:\/\/www.vitalyfilatov.ru\/tags\/ikonki\/", "feed_url": "https:\/\/www.vitalyfilatov.ru\/tags\/ikonki\/json\/", "icon": "https:\/\/www.vitalyfilatov.ru\/user\/userpic@2x.jpg?1613163987", "author": { "name": "Виталий Филатов", "url": "https:\/\/www.vitalyfilatov.ru\/", "avatar": "https:\/\/www.vitalyfilatov.ru\/user\/userpic@2x.jpg?1613163987" }, "items": [ { "id": "77", "url": "https:\/\/www.vitalyfilatov.ru\/all\/potions\/", "title": "Нейминг и иконки пакетов курса по бэкенду", "content_html": "

После двух потоков ребята из StringConcat изучили отзывы и решили сделать три варианта курса. Один без домашек и курсовой, второй обычный, а третий — с собственным проектом. Я собрал описание, придумал названия и картинки с метафорами для программистов.<\/p>\n

Получилось так:<\/p>\n

\n\"\"\n
Противоядие, лечилка и комбо-поушн в разделе Стоимость<\/a><\/div>\n<\/div>\n

Как так вышло.<\/p>\n

Названия.<\/b> Мы хотели, чтобы все три варианта были одинаково хороши, поэтому сразу отказались от названий, выстраивающихся в последовательность:<\/p>\n

\n

❌ Простой → Средний → Сложный<\/b> — обесцениваем первый вариант, нагнетаем в третьем.<\/p>\n<\/blockquote>\n

\n

❌ Учиться → Уметь → Творить<\/b> — создаём противопоставление: учиться не уметь, уметь не творить.<\/p>\n<\/blockquote>\n

Перебрали кучу вариантов, от экзотики с названиями редкоземельных металлов до стёба типа «деревянный — стеклянный — оловянный», но остановились на классике:<\/p>\n

    \n
  1. [Некий упрощённый]<\/li>\n
  2. Базовый<\/li>\n
  3. Индивидуальный (со своим же проектом)<\/li>\n<\/ol>\n

    Рассуждаем логически: первый вариант для тех, у кого нет времени на домашние работы и курсовую. Получается, он отличается только тем, что проходится быстрее. Экспресс.<\/p>\n

    Картинки.<\/b> Вот тут пришлось подумать. Смотрите, какой набор условий:<\/p>\n

    Иконки должны быть в одном стиле и пространстве образов. Например, спутник, гаечный ключ и молекула — дурной ребус без решения. А нужно, чтобы читатель не спрашивал, почему тут такое, а там эдакое, и как они связаны.<\/p>\n

    Иконки должны работать на смысл, по возможности остроумно подчёркивая суть варианта. Важно, чтобы читатель мог считать метафору и почувствовать себя хорошо от верной догадки.<\/p>\n

    Иконки не должны выстраиваться от простого к сложному или от дешёвого к премиальному. И они не должны создавать лишних смыслов, как в примерах названий выше.<\/p>\n

    \n

    Иконки должны быть просто разными, но с общей темой.<\/p>\n<\/blockquote>\n

    Мы с дизайнером Ляйсан перебрали кучу вариантов с часами, ракетами и книгами-микроскопами, но ничего не подходило. Обратились к логике и культурному багажу поколения миллениалов.<\/p>\n

    \n

    Значит, наш курс про то, как избавиться от смертных болей разработки и начать жить. На курсе разбирается методология и концепции, меняющие подход к архитектуре и вот это всё. В результате разработчик перестаёт выгорать и ненавидеть.<\/p>\n<\/blockquote>\n

    \n

    Можно сказать, что слушатель курса принимает новые знания и они его излечивают. Ассоциацию с обычным лекарством отбрасываем, как слишком прямолинейную и пафосную.<\/p>\n<\/blockquote>\n

    \n

    Почти все известные мне программисты играли в третьих Героев и Диабло, поэтому можно взять за базовый образ поушн — склянку с зельем.<\/p>\n<\/blockquote>\n

    Склянки бывают разные, можно подобрать под все три случая:<\/p>\n

    \n

    Экспресс — избавляет от яда неведения, поэтому противоядие.<\/p>\n<\/blockquote>\n

    \n

    Базовый — полноценно лечит, поэтому просто склянка лечения. К тому же это самый частый вид зелий в играх.<\/p>\n<\/blockquote>\n

    \n

    Индивидуальный — базовый со своим проектом, чтобы попутно решить рабочие задачи. Прямой аналогии нет, пусть будет хитрая склянка, которая лечит и заряжает магией.<\/p>\n<\/blockquote>\n

    Ляйсан собрала референсы и нарисовала несколько вариантов. Подобрала форму склянок, чтобы было не слишком похоже, проработала силуэты и сочетание цветов, а в конце добавила клёвые блики. Найс!<\/p>\n

    \n\"\"\n<\/div>\n

    А теперь почитайте, как согласовать иконки в последовательность<\/a> :3<\/p>\n

    Ляйсан в Инстаграме<\/a><\/p>\n", "date_published": "2021-11-28T02:45:14+05:00", "date_modified": "2021-11-29T00:30:00+05:00", "image": "https:\/\/www.vitalyfilatov.ru\/pictures\/067-headpic@2x.png", "_date_published_rfc2822": "Sun, 28 Nov 2021 02:45:14 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "77", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.vitalyfilatov.ru\/pictures\/067-headpic@2x.png", "https:\/\/www.vitalyfilatov.ru\/pictures\/067-big-potions.svg" ] } }, { "id": "72", "url": "https:\/\/www.vitalyfilatov.ru\/all\/equalize\/", "title": "Согласуем иконки тарифов", "content_html": "

    Как-то я переписывал лендинг мастерской по ремонту бытовой техники. В конце традиционно шли услуги в четыре колонки. Иконки выглядели случайными, поэтому я решил согласовать их по смыслу.<\/p>\n

    \n\"\"\n
    Иконка диагностики откровенно плохая, но её мы трогать не будем :-)<\/div>\n<\/div>\n

    С первого взгляда всё в порядке: иконки выдержаны в едином стиле и масштабе, инструменты наклоняются в одну сторону и под одинаковым углом. Стиральную машину в лупе словно бездумно вклеили, а у ящика с инструментами линии чуть толще, но в остальном иконки выглядят нормально. Просто они не выстраиваются в последовательность<\/i>.<\/p>\n

    \n

    Почему это важно.<\/b> Мы так устроены, что сначала смотрим на картинки, а потом читаем. Можно сказать, что картинки легче понимать, поэтому мозг отдаёт им предпочтение. Если картинки складываются в нежелательный ребус, человек путается и плохо проводит время.<\/p>\n<\/blockquote>\n

    Чтобы согласовать иконки с текстом и между собой, разберёмся в их смысле.<\/p>\n

    У нас три вида ремонта, по возрастающей: малый, средний и большой<\/s> сложный. Отвёртка для малого ремонта и ящик для сложного подходят идеально, а ключ словно выбивается.<\/p>\n

    Движение мысли такое:<\/p>\n

    \n

    Чтобы открыть корпус большинства бытовых приборов достаточно отвёртки.<\/p>\n<\/blockquote>\n

    \n

    Ключ нужен уже для чего-то посерьёзнее, например, чтобы подтянуть крепление мотора в стиральной машине.<\/p>\n<\/blockquote>\n

    \n

    Для сложного ремонта понадобится целый набор: паяльник, плоскогубцы, кусачки, мультиметр и молоток.<\/p>\n<\/blockquote>\n

    Вроде логично, но почему тогда мы начинаем с отвёртки, потом берём ключ, а после сразу ящик? Хорошо было бы показать, что инструментов для среднего ремонта мы используем больше. При этом хочется сохранить признаки малого ремонта, поскольку средний его расширяет. Короче, добавим к отвёртке ключ.<\/p>\n

    \n\"\"\n
    Конечно, отвёртка нужна крестовая, но у плоской более узнаваемый силуэт, это важно<\/div>\n<\/div>\n

    Картинки были в векторном формате SVG, поэтому я закинул их в Фигму, развернул ключ и прилепил его поверх отвёртки. Так отвёртка сохранила наклон, а мы подчеркнули идею добавления нового инструмента.<\/p>\n

    Получилось так:<\/p>\n

    \n\"\"\n
    Виды ремонта выстроились в логической последовательности, а без стиральной машины в лупе стало поспокойней<\/div>\n<\/div>\n

    Выводы.<\/p>\n

      \n
    1. Давайте редактору макеты или доступ в Тильду. Редактор работает со всеми смыслами в продукте, а не только с текстом. Что-то сделает сам, что-то передаст дизайнеру.<\/li>\n
    2. Векторные иконки — благо: масштабируются, мало весят, можно редактировать в Фигме. Одни плюсы.<\/li>\n
    3. Согласованные иконки добавляют красоты и помогают передать комплексный смысл без слов.<\/li>\n<\/ol>\n", "date_published": "2021-10-02T23:08:04+05:00", "date_modified": "2021-11-28T01:17:23+05:00", "image": "https:\/\/www.vitalyfilatov.ru\/pictures\/062-before@2x.png", "_date_published_rfc2822": "Sat, 02 Oct 2021 23:08:04 +0500", "_rss_guid_is_permalink": "false", "_rss_guid": "72", "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/www.vitalyfilatov.ru\/pictures\/062-before@2x.png", "https:\/\/www.vitalyfilatov.ru\/pictures\/062-combine@2x.png", "https:\/\/www.vitalyfilatov.ru\/pictures\/062-after@2x.png" ] } } ], "_e2_version": 3877, "_e2_ua_string": "E2 (v3877; Aegea)" }