План обучения младшего ди­зайнера

Дизайнеры в агентстве делятся на три уровня: младший, продвинутый и ведущий. Уровень зависит от знаний, опыта и духа сотрудника. Эти уровни отличаются типом и сложностью задачи, а также ролью дизайнера.

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

Решение задач и организация работы

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

Принимать задачу

1. Понимание задачи, Илья Бирман, 2 ч. 19 мин. Конспект Сергея Короля
2. ★ Исполнитель понимает задачу
3. Как принимать задачи
4. Понимание задачи для редактора

Планировать

1. Гвозди в гусенице
2. Недообещать, чем переобещать
3. ★ Не планировать впритык
4. ★ Метод «прогрессивного джипега»

Делать

1. ★ Артём Горбунов о полезном действии, 1 ч. 4 мин. Конспект Серёги Шабалина
2. Максимизация полезного действия
3. Дизайн+1. Людвиг Быстроновский, три части по 39–44 мин. Конспект Саши Бизикова
4. Персонажи и сценарии при проектировании

Согласовывать

1. Как отстоять идею
2. Презентация идей, школа дизайна Яндекса Геннадий Лохтин и Антон Шнайдер, 35 мин.
3. ★ Что значит «сделать»
4. ★ О критике
5. Согласовать — ваша работа

Передавать

★ Краткая инструкция для дизайнеров по передаче задач в разработку

Интерфейс и представление информации

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

Оформить

1. Теория близости в интерфейсе, две части
2. ★ Закон Фиттса, четыре части
3. ★ Привычки, три части
4. Правила оформления ссылок
5. Что должно быть на продуктовой странице сайта
6. Как повысить доверие посетителя к компании
7. ★ 10 правил хороших форм
8. ★ Синтаксис элементов интерфейса
9. Очевидность, информативность и эстетика
10. Псевдокривые и гистограммы

Построить общение с пользователем

1. ★ Как решать интерфейсные и поведенческие задачи с помощью текста, Максим Ильяхов, 59 мин.
2. ★ Обратная связь, три части
3. ★ Человечность, технозависимость и язык роботов

Улучшить

1. ★ Информативность и способы её повысить: первая часть, вторая
2. ★ Модальность, четыре части
3. Как улучшить таблицу, ещё, ещё и ещё
4. ★ Сильный текст в интерфейсе. Максим Ильяхов. 45 мин.
5. ★ Сначала данные, потом фильтры
6. Минимизация конструкции
7. Стоп-слова в интерфейсе
8. Секреты хорошего гипертекста
9. Дизайнерские и редакторские «линчи»

Типографика и вёрстка

С помощью типографики и вёрстки дизайнер управляет вниманием пользователя. Если он не умеет этого делать, заголовки сливаются с врезками, расположение фотографий нагоняет тоску, а весь макет выглядит тяжёлым. Из-за этого читатель теряет интерес к странице. Чтобы делать выразительные макеты, дизайнеру нужно изучить основы типографики и вёрстки.

Основы

1. ★ Теория близости
2. ★ Правило внутреннего и внешнего
3. Модульная вёрстка
4. ★ Якорные объекты
5. Формат и выбор полей
6. Длина строки и интерлиньяж
7. Точка, линия и прямоугольник
8. Базовые элементы: заголовок, текст, иллюстрация, подпись,   гиперссылка, элемент управления
9. О шрифтах

Сверстать блок

1. ★ Без иллюстраций и с иллюстрациями
2. Модули с лентой
3. Список и ширина колонки
4. Привязка к левому верхнему углу
5. Основные ошибки при выключке текста по левому краю, по центру и формату
6. Внутренние семинары Артура Адэки
7. Как правильно: выключка по формату, по левому краю и по центру
8. Вёрстка по форме

Сверстать страницу

1. ★ Без иллюстраций и с иллюстрациями
2. Вёрстка главной и текстовой страницы
3. ★ Сначала конструкция, потом сетка
4. Выход из прямоугольника
5. Порядок чтения
6. Доминирующая и вспомогательная иллюстрации

Улучшить

1. Макет автосалона, три части
2. Макет медицинской карты, четыре части
3. Что сделать с текстом с точки зрения вёрстки
4. Ушки, цитаты и фактоиды
5. Чередование ритма

Интернет-маркетинг

Дизайнер не художник. В работе над сайтом ему нужно учитывать контекст: аудиторию, процесс продажи, аналитику и возможные ограничения. Если дизайнер этого не делает, у него получается просто красивая картинка. Её можно показать в портфолио, но задачи клиента она не решает. Чтобы сайт работал как часть системы, дизайнеру нужно изучить устройство интернет-маркетинга.

Основы

1. ★ Из чего состоит интернет-маркетинг
2. ★ Целевая аудитория и конкуренты
3. Landing Page
4. Веб-аналитика
5. SEO
6. Социальные сети
7. Контекстная реклама
8. Контент-маркетинг
9. Рассылка
10. A/B тестирование

Делать баннеры

1. Руководство по разработке баннеров для Google и Яндекса
2. Разрешения изображений в соцсетях
3. Гугл-справка: типы кампаний, контекстно-медийная сеть, типы таргетинга, графические объявления
4. Внутренний семинар Ильи Кузнецова о рекламе в соцсетях
5. Внутренний семинар Артура Адэки «Как сделать баннеры для динамического ретаргетинга»
6. Что нужно делать, чтобы баннер был красивым
7. ★ Рекомендации по созданию баннеров

Работать с аналитикой

1. Яндекс.Директ: способы показа и места размещения объявлений. Мария Салина, 22 мин.
2. Что такое Яндекс.Метрика. Галина Блонская, 21 мин.

Текст и редактура

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

Писать

1. ★ Текст в мире читателя
2. ★ Аудитория, цель и задача
3. Как наполнять статью полезным материалом
4. Чему учиться у Людвига
5. Редакционная политика агентства выше языковых норм и правил
6. ★ Руководство по иллюстрированию статей «Модульбанка»
7. Простые правила сильного текста. Максим Ильяхов. 12 мин.
8. О чём и зачем писать
9. Алгоритм работы над текстом

Структурировать

1. Критерии качества статьи
2. ★ Как сфокусировать и выстроить статью
3. ★ Структура и логика статьи
4. Заголовок и подзаголовки
5. Предложение
6. Абзац

Делать посадочные страницы

1. Скелет статьи. Максим Ильяхов, 1 ч. 38 мин.
2. Как делать промостраницы

Дизайн и право

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

1. Как использовать фотографии с фотобанков
2. Как использовать шрифты
3. О свободном использовании
4. Об использовании результатов чужой деятельности
5. ★ О неимущественных правах

HTML и CSS

Вёрсткой страниц занимается технолог, но дизайнер всё равно должен знать основы HTML и CSS. Это помогает найти общий язык с технологом и предлагать решения, используя редактор кода в браузере. Младший дизайнер в агентстве проходит курс «Структура HTML-документа».

Английский язык

Много хороших книг о дизайне выходят на английском языке, некоторые из них не переведены до сих пор, а некоторые не будут переведены никогда. То же самое касается статей, лекций и подкастов. Знание английского языка открывает дизайнеру доступ к новым знаниям и опыту.

С чего начать

1. Пройти пятнадцатиминутный тест, чтобы определить свой уровень.
2. Прочитать статью Максима Ильяхова о правильном подходе к изучению английского.
3. Переключить все интерфейсы на английский: операционную систему, браузер, программы, почту, сайты и социальные сети.
4. Читать книги и смотреть сериалы на английском. Если не смотрите сериалы, попробуйте выступления на Ted.
5. Установить приложение для изучения новых слов и тренировки грамматики. Например, LinguaLeo.
6. Найти преподавателя и начать заниматься регулярно. Если не знаете где искать, попробуйте бесплатный урок в Skyeng или Инглексе.

На что подписаться

На рассылку Кирилла Олейниченко

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

На канал Кости Горского в Телеграме

Чтобы узнать о дизайне продуктов, руководстве дизайнерами и продуктивности.

На советы Бюро

Чтобы разбираться в типографике, вёрстке, веб-разработке, шрифтах, редактуре и переговорах.