Иконка для канала «Инструменты редактора»

Сделал иконку для канала «Инструменты редактора». Автор канала Саша Марфицин — директор по коммуникациям в Амплифере, в своём канале рассказывает о приложениях и сервисах, которые помогают в работе над текстом.

Процесс

Для меня главный инструмент редактора — это панель редактирования текста. С неё начинается каждая моя заметка в блоге.

Понравился символ выравнивания, решил начать с него. Параллельно определяемся с фоном иконки.

Показал Саше варианты. Ход мыслей понравился, но символ — нет. Думаю над другим вариантом.

Текст состоит из букв. Первая буква алфавита — это «А»:

Алфавит русского языка из Википедии

Пробую варианты «Аа» с подчеркиванием и курсором. В итоге ни один из вариантов не подходит.

На следующей итерации пробую символ абзаца. Он похож на перевёрнутую по горизонтали букву «Р» — редактор. Канал Саши создан в помощь редакторам, поэтому смысл сохраняется.

Результат

Остановились на крайнем варианте с ножкой и полукругом. В иконке легко читается «Р», а знающий редактор подметит ещё и символ абзаца.

Кстати, похожий символ абзаца используется в шрифте «Source Sans Pro» — гротекст, созданный Полом Хантом для Adobe Systems в 2012 году.

°°°

Понравилось? Могу сделать иконку для вашего канала. Пишите на почту: alexandr@bizikov.ru. В письме расскажите о своём канале и пришлите ссылку на него. Если мне понравится, то сделаю иконку и напишу о вас заметку с процессом работы.

Могу принять две заявки.

Иконка для канала «UX Notes»

Сделал иконку для канала «UX Notes». Автор канала Антон Григорьев — делится ссылками на материалы для дизайнеров и проектировщиков, выкладывает только то, что сам прочитал и посчитал достойным.

Процесс

В иконке канала была надпись «UX notes» для того, чтобы канал можно было отличить от чата. Сейчас чата нет, поэтому можно избавиться от приставки «notes».

Гельветику заменил на Рубик. В жирном начертании надпись выглядит увереннее. Белый фон плохо подходит для иконки. Сделал несколько цветных вариантов.

Иконки рисовал в Скетче:

Цветные варианты иконки

Показал варианты Антону. Ему понравился вариант с жирным начертанием «UX». Дальше определяемся с фоном.

Обратная связь от Антона

Мне не понравилась идея с серым. Решил, что такой цвет слишком скучный. Начал пробовать варианты с синим, градиентом синего и красным. Антон меня остановил и правильно сделал. Я заигрался с цветами и совсем забыл о смысле.

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

У Антона есть курс видео лекций по прототипированию в Axure. Решил взят оттенок серого из этого приложения. Установил себе пробную версию и начал пипеткой брать цвета из интерфейса.

Поиграл с оттенками серого:

Серые варианты иконки

Результат

Остановились на варианте с градиентом серого, который был взят с тёмной иконки интерфейса Axure. В конце добавили небольшой штрих: переименовали канал с «UX notes» на «UX Notes».

Итоговая иконка на канале UX Notes

°°°

Понравилось? Могу сделать иконку для вашего канала. Пишите на почту: alexandr@bizikov.ru. В письме расскажите о своём канале и пришлите ссылку на него. Если мне понравится, то сделаю иконку и напишу о вас заметку с процессом работы.

Могу принять четыре заявки.

Иконка для канала Родиона Скрябина

Сделал иконку для канала Родиона Скрябина — «Родислав». Родион пишет про контент-маркетинг, медиа, управление и контент. Ниже опишу процесс работы над иконкой.

Процесс

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

Родион нашёл в Пинтересте стиль, который ему понравился:

Родион показывает понравившийся стиль

Начинаю рисовать. Показываю варианты, Родион даёт замечания, что не нравится и я перерисовываю. В итоге показал тринадцать вариантов, которые незначительно отличаются друг от друга.

Для рисования использовал iPad Pro, Apple Pencil и приложение Procreate:

Результат

Остановились на варианте иконки, которая нарисована одной непрерывной линией и образует силуэт буквы «Р».

°°°

Понравилось? Могу сделать иконку для вашего канала. Пишите на почту: alexandr@bizikov.ru. В письме расскажите о своём канале и пришлите ссылку на него. Если мне понравится, то сделаю иконку и напишу о вас заметку с процессом работы.

Могу принять шесть заявок.

Иконка канала МИФ в Телеграме

Однажды ребята из «Манн, Иванов и Фербер» обновили иконку в своём телеграм-канале и она мне не понравилась. В иконке была надпись «Издательство МИФ», которую сложно прочитать из-за небольшого размера.

Мне нравятся их книги, поэтому не смог пройти мимо и сделал свой вариант.

Главный символ издательства — это квадратная скобка, а основные цвета чёрный и белый. Иконки с белым фоном смотрятся плохо, поэтому выбрал чёрный фон и белый символ.

Теперь канал издательства классно выглядит в общей ленте и его легко узнать среди остальных:

Пример иконки канала в приложении Телеграм

Вариант отправил Сергею Капличному, через час в телеграм-канале издательства МИФ появилась моя версия иконки.

°°°

Понравилось? Могу сделать иконку для вашего канала. Пишите на почту: alexandr@bizikov.ru. В письме расскажите о своём канале и пришлите ссылку на него. Если мне понравится, то сделаю иконку и напишу о вас заметку с процессом работы.

Могу принять только десять заявок.

Тестовое задание для RedMadRobot

Задача
Спроектировать сервис, который позволит абоненту телефонного оператора пожаловаться на качество сотовой связи или интернета в определенной географической точке и получить отклик от оператора

Выполнил тестовое задание на вакансию дизайнера-стажёра для RedMadRobot. Попробовал Фреймер в деле, получил отказ и поставил новую цель. В конце расскажу, зачем публикую описания дизайн-процессов.

Блокнот → Скетч → Фреймер студия

Тестовое задание начал с описания и набросков интерфейса в блокноте. На бумаге удобнее выразить мысли. Пришёл к выводу, что решением задачи будет не отдельное приложение, а модуль. Он встраивается в мобильное приложение оператора.

note

Для примера выбрал «Мой Билайн». Приложение сделали ребята из RMR. В нём уже есть чат поддержки, который можно улучшить в рамках тестовой задачи.

Сформулировал основные отличия от текущей реализации. Набросал экран в Скетче и перешёл к прототипу.

Результат задачи в виде статичных картинок — не интересно. Будет круто, если покажу живое общение оператора с пользователем. Поэтому основную часть времени провёл во Фреймере.

Студия Фреймер

Фреймер Студия. Слева код, справа — результат

Презентация

Презентацию сделал в Кейноте. Чтобы вам было удобно смотреть, записал видео и опубликовал на Ютубе:

Результат

Отзыв от директора по дизайну RedMadRobot, Павла Горшкова:

Что понравилось: у тебя, очевидно, есть хороший аналитический базис. Ты понимаешь, как должен работать сервис.

Что могло быть лучше: визуальная составляющая и эстетика. Хороший UI для дизайнера интерфейсов тоже важен, я бы порекомендовал и его развивать в том числе.

Σ

Согласен с  Павлом, интерфейс выглядит не очень красиво. В лекции «Дизайн + 1» Людвиг говорил про развитие дизайнера. Прокачивать каждый навык по очереди:

Если прокачать каждый навык,
то в сумме получится хороший дизайнер

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

Как развивать UI навык?

  1. Выполнить все задания конкурса «Интерфейс дня»
    В сентябре выполнил только два задания и переключился на тестовые. Время вернуться и закончить дело. До конца года 98 заданий не выполню, но десяток шотов на дрибл выложу.
  2. Участвовать в конкурсах
    Какие дизайнерские конкурсы запускаются в ближайшие месяцы? Напишите в комментарии, буду благодарен.
  3. Смотреть на топовых дизайнеров на бихэнсе и дрибле
    Выявлять, что больше нравится, переосмыслять и искать свой стиль.

°°°

Опубликовал пять заметок с описанием дизайн-процесса:

  1. Тестовое задание для Школы мобильного дизайна
  2. Обновление дизайна домашней страницы
  3. Тестовое задание для Туту.ру
  4. Сайт для Сергея Сичкар
  5. Тестовое задание для RedMadRobot

У меня нет портфолио, но показать что-то надо. Когда пишу письмо на вакансию, отправляю ссылку на страницу: http://bizikov.ru/tag/portfolio/.

Компании, которым нужен начинающий дизайнер, могут прочитать заметки и понять, как я работаю. Результат: дают тестовое задание.

Основная задача таких описаний — показать подход к решению задач.

Побочная задача, о которой в самом начале не думал: на такие заметки присылают критику и советы. Это помогает понять, что не так (на самом деле всё говно), и в следующей работе стараюсь делать лучше.

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

СохранитьСохранить