Школа стажёров: вторая ступень

 

Леонид Касаткин

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

Вторая ступень

Ключевой навык: Типографика и вёрстка
На второй ступени много вёрстки — 8 из 11 заданий
подразумевают создание макетов. Поэтому результат зависит
от знания теории с первой ступени и умения собрать
качественный макет.

На второй ступени идут «ноздря-в-ноздрю». К концу обучения средний разрыв между соседними местами составлял 0,6 баллов. Это означает, что конкуренция стала напряжённее и приходилось соревноваться за каждый балл. Например, лидеры Андрей Кириллов и Аркадий Чугунов финишировали с отрывом в 0,01 балла.

6,6
среднее изменение места студентов к концу второй ступени

4≠5

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

Преподаватель поможет

Если ты рванул на старте и выслал преподавателю макет уже в понедельник, то скорее всего он ответит и укажет на ошибки в работе. Если выслать макет за день до дедлайна, то шансы получить ответ уже минимальны. С Максимом Ильяховым мы успевали сделать по две корректировки макета за итерацию — в результате у меня за «Промостраницу» и «Информационный текст
для сайта» 9 из 10 баллов.

Будьте спринтером!
Отправляйте задание преподавателю на проверку раньше всех

Сам себе хозяин

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

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

В отличие от первой ступени преподаватели общаются со студентами: указывают на ошибки и пишут рецензии. Хотите получить более высокий балл? Не стесняйтесь заранее показать макет. Объём переписки по заданиям и средняя скорость ответов преподавателей (учитывалось только рабочее время):

 

Артём Горбунов

Максим Ильяхов

Илья Синельников

Николай Товеровский

Владимир Беляев

Илья Бирман

Скорость ответа, часов:минут 2:10 2:35 5:20 8:27 13:44 17:17
Объём переписки, писем
(из них без ответа)
5 8 (1) 1 2 (1) 2 2

 

Сделать заново

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

15 часов
еженедельно у меня уходило на задания второй ступени

Качество, а не количество

При работе над заданиями мне хотелось написать пару дополнительных абзацев текста или разместить на странице больше блоков с контентом. Но принцип «чем больше, тем лучше» в Школе не работает, так как каждый элемент макета увеличивает вероятность ошибок. Лучше сделать небольшой и выверенный дизайн, чем длинное полотно с кучей недочётов.

Изучайте работы сокурсников

Я изучал макеты других студентов и читал рецензии на них,
это помогает найти ошибки в своей работе. Например, неудачную
компоновку блоков на странице, неверный выбор главной иллюстрации
или несоблюдение правила внутреннего и внешнего.

Вёрстка по образцам
Компонуйте страницы с помощью образцов
модулей из лекций Артёма Горбунова. Это поможет собрать крепкий макет и получить хороший балл

Решение заданий

Ниже приведу мои решения заданий второй ступени и расскажу, на что стоит обратить внимание при работе над ними.

Принципы вёрстки

Задача: Разработать страницу о себе в десктопном и мобильном виде.

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

Первая итерация
4 балла
4 Техника
4 Выразительность

Рецензия Артёма Горбунова:
«А вот интересный пример злоупотребления сеткой. На первый взгляд работа Леонида Касаткина аккуратная и модульная, с хорошим балансом доминирующей и второстепенных фотографий. Но когда начинаешь разбираться в связи геометрии и логики, начинаются проблемы. Что чему подчинено? Телефон относится к имени или к майским каникулам? Как „Модульные системы“ связаны с мостом в Будапеште? (Кроме того: имя теряется — и даже не столько из-за кегля, сколько из-за близости и высоты блока с телефоном. Да и в углу этот телефон смотрелся бы круче и прямо по одной из стандартных конструкций шапки)».

 
Вторая итерация

4 балла
4 Техника
4 Выразительность

Рецензия Артёма Горбунова:
«Леониду Касаткину вовсе необязательно было делать райт-алайн телефону с почтой, достаточно было отнести блок вправо».

Переговоры с клиентом. Понимание задачи

Задача: Составить вопросы и написать понимание задачи после встречи с клиентом.

Найдите время для видеовстречи, если она будет. Проверьте, чтобы вопросы были открытые. Важно, чтобы они охватывали всю задачу, мне в этом помогло деление вопросов на категории. Понимание задачи стоит сразу писать в инфостиле: чётким и понятным. Подумайте над дополнительными услугами, о которых не говорил клиент.
 
Первая итерация
5 баллов
5 Техника
5 Убедительность
Вторая итерация
4 балла
4 Техника
4 Убедительность
Информационный текст для сайта

Задача: Сделать страницу для сайта из двух тем на выбор.

Несмотря на то, что задание по текстам, важно подать информацию ярко и интересно. Не стоит создавать длинное и скучное полотно текста. Хотя я ушёл в другую крайность: первый макет представлял собой набор несвязанных между собой блоков. Во второй итерации я решил эту проблему и получил более высокий балл. Добавьте яркие фактоиды — они украшают текст и привлекают внимание. Обратите внимание на факты и детали: ошибка в характеристиках или неправильное фото снизят балл.
Первая итерация
4,25 балла
4 Ум
4,5 Сердце
Вторая итерация

4,75 балла
4,5 Ум
5 Сердце

Вёрстка сложного документа

Задача: Сверстать страницу с договором.

 
Договор большой, из-за чего макет получился высотой 17 тысяч пикселей. После каждой правки фотошоп зависал на несколько секунд, поэтому запаситесь мощным компьютером :). Проверяйте мелочи: отступы, переносы, аббревиатуры и даже орфографические ошибки. Если сомневаетесь, уточните у преподавателя, можно ли менять пунктуацию. Используйте вёрстку из лекций Ильи Бирмана с первой ступени. Посмотрите, как свёрстаны договоры на сайтах бюро. Уделите время оформлению остальных элементов — шапке, футеру и навигации по странице.
Первая итерация

3 балла
Вёрстка
3 Логика

Вторая итерация

4,7 балла
4,5 Вёрстка
4,9 Логика

Проектирование сайта

Задача: Спроектировать сайт и нарисовать одну страницу.

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

3,5 балла
3,5 Знание теории
3,5 Полезное действие
3,5 Выразительность

Вторая итерация

3,5 балла
3,5 Знание теории
3,5 Полезное действие
3,5 Выразительность

Рецензия Ильи Бирмана:
«Мало что изменилось. Зачем овечка на меня опять жалобно смотрит? 🙂 Появившиеся валенки — это хорошо, но они где-то слишком далеко. А в начале идёт прям текст текстович. Может, его как-то сократить и на поля положить? Овечка разделила собой валенки — получилось, что каталог не сложился. Неужели 10 — это самая важная цифра на странице?»

Вёрстка многоэтажной веб-страницы

Задача: Сверстать страницу из задания «Информационный текст для сайта».

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

3,5 балла
3 Техника
4 Выразительность

Вторая итерация

3,5 балла
3,5 Техника
3,5 Выразительность

Разработка оферты

Задача: Разработать оферту для фотостока.

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

3,8 балла
4,5 Законы
3,1 Польза

Вторая итерация

4,2 балла
4,5 Законы
3,9 Польза

Вёрстка многоэтажной веб-страницы

Задача: Разработать продающую страницу.

Потратьте время, чтобы разобраться в товаре. Продающая страница отвечает на вопросы посетителя и снимает опасения перед покупкой, поэтому стоит подробно рассказать о продукте. Подумайте над структурой страницы: что показываем сначала, что потом и что в конце. Вспомните лекцию Максима Ильяхова «Текст промостраницы» с первой ступени. Что важно показать?
Как побудить к действию? Явно преподнесите пользу от продукта. Обратите внимание на тексты — никакого маркетингового буллшита и фальши — только правда 🙂
Первая итерация

4,25 балла
4,5 Ум
4 Сердце

Вторая итерация

4,75 балла
4,5 Ум
5 Сердце

Решение задач

Задача: Решить изобретательские задачи.

Для меня это самая интересная задача на второй ступени, так как есть возможность проявить фантазию и вспомнить ТРИЗ. В результате появилось много идей и я предложил несколько решений для каждой задачи.

Изучите то, что уже есть на рынке и не гонитесь за фантастическими решениями: чем ближе концепт к реальности, тем лучше. Обратите внимание на вёрстку и подачу информации — это влияет на оценку.

5 баллов
5 Максимизация
5 Минимизация
5 Противоречие

 

Интерфейс веб-сервиса

Задача: Разработать интерфейс веб-сервиса.

Если делаете мобильное приложение — верстайте по гайдлайнам Эппла, это сэкономит время и поможет сделать аккуратный макет. Продумайте пользовательские сценарии и понятно донесите это на макете. Я показывал интерфейс друзьям — это помогает пройтись взглядом новичка. Убирайте информационный мусор и максимизируйте полезность каждого экрана.
Первая итерация

3 балла
3,5 Идея
3 Логика
2,5 Эстетика

Рецензия Ильи Бирмана:
«На главном экране поиска
нет, информативность низкая (нет значений). Гамбургерное меню плохо работает: никто не знает, что там скрывается. Советы по фотографированию — сложно. Я чё, не сфотографирую права без советов что ли? Очень неэффективно тратится место на экране проверки результатов распознавания. „Настройки“ → „Настройка“»

Вторая итерация

3,17 балла
3,5 Идея
3 Логика
3 Эстетика

Рецензия Ильи Бирмана:
«Что бы потеряло приложение, если бы использовало стандартную Гельветику? При поиске хочется всё-таки подписать, что крупные даты — это даты выдачи. Экран сканирования выглядит неуверенно. Вроде уже крутится крутилка, то есть оно думает, значит, я могу убирать паспорт? А зачем тогда написано „Наведите документ“? Сверху „Авто“, а снизу — „Вручную“. Непонятно, чем отличается»

Составление резюме. Собеседование

Задача: Составить резюме и подготовить вопросы для собеседования.

Стоит писать откровенно и кратко, без заискиваний и длинных текстов в стиле «я сделал то-то и то-то». Встаньте на место принимающего на работу — что ему важно знать о вас? Чем вы будете ему полезны?

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

4,67 балла
4,5 Техника
5 Убедительность
5 Техника

Рецензия Ильи Синельникова:
«По смыслу — правильно и хорошо: „Я хочу работать в бюро, мне импонирует ваш подход к работе. К сожалению, я не знаю, кого вы сейчас ищете и какие открыты вакансии. Возможно, что окажусь полезным вам и бюро“. Лучше написать „надеюсь, что окажусь вам полезным“. Неясно, что вы хотите делать в бюро, если у вас своя студия. В конце вопрос „Чем я могу быть вам полезен?“ какой-то нарочитый»

Результаты второй ступени

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

Результаты и рейтинг
в Google Sheets
студентов 2 ступени
набора сентября 2014 г.

4 место
в начале и по окончанию второй ступени

7-9 место
Принципы
вёрстки
10 место
Переговоры с клиентом.
Понимание задачи
2-3 место
Информационный
текст для сайта
10 место
Вёрстка сложного
документа
10-14 место
Проектирование
сайта
9 место
Вёрстка многоэтажной
веб-страницы
6-8 место
Составление
договоров
9-12 место
Продающая
страница
1-5 место
Решение задач
20-22 место
Интерфейс
веб-сервиса
12-13 место
Составление резюме.
Собеседование

Итоги и выводы

Вторая ступень — практика, которая закрепляет теорию с первой ступени. Это помогает из хаоса «я дизайнер, я так вижу» перейти к системе, где формат, положение и наполнение каждого блока подчинено правилам и логически обосновано. Также ступень учит решать практические задания в условиях сжатых сроков.

На второй ступени дизайнеры научатся собирать работающие макеты по правилам с первой ступени. Бюрошный подход годится не для всех, но отлично формирует фундамент дизайнерских знаний. Программистам и недизайнерам будет сложно: выигрывают те, у кого уже есть опыт в дизайне.

Продолжение: III ступень

Подвал сайта