Как я делала задание по верстке на второй ступени Школы руководителей

3 February

Я учусь в Школе руководителей Бюро Горбунова. Каждую неделю мы делаем два задания, а преподаватели их проверяют. В этой заметке — о процессе работы над первой итерацией задания по верстке.

Первое задание одинаковое для студентов всех школ — сверстать страницу о себе в двух версиях: для компьютера и телефона.

У нас есть чатик со всеми потоками редакторов, дизайнеров и руководителей. Туда ребята сбрасывают свои работы, а Михаил Нозик смотрит их и помогает исправлять до дедлайна. Это такой бонус — достань преподавателя, чтобы сделать круто.

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

Мне хотелось чего-то интереснее.

Подобрать фотографию

Обязательный элемент — фотография или иллюстрация. И это стало проблемой.

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

Я безумно хотела использовать первую фотографию, но из-за бардака в папках так 
и не нашла исходник
Я безумно хотела использовать первую фотографию, но из-за бардака в папках так
и не нашла исходник

Только сейчас заметила, что суть у фотографий одна и та же. Хотя все они здорово соответствуют мне и передают внутреннее состояние.

Выстроить конструкцию

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

В первой версии я пыталась сделать всё и сразу. Выбрала моднявый шрифт и решила нарушить композицию, которую видела во всех работах. Отправила Михаилу такой вариант:

Его ответ меня расстроил и раззадорил одновременно:

Пошла переделала и была почти довольна. Красивые иконки, аккуратное касание плеча, ничего никому не мешает:

Михаил ответил, что касание плеча и заголовка всё равно неприятное. Я пожала плечами и хотела забить, но вовремя вспомнила про важный вопрос «почему?». И получила более подробный ответ:

Я долго ломала голову, что значит последнее предложение, но решила больше не уточнять и даже не показывать промежуточные варианты. Хотя была еще среда, и можно было окончательно достать Нозика вариантами.

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

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

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

Добавить настроения

Конструкция — окей. А что делать с настроением? Сейчас страница скучная: в ней не за что зацепиться и от работ других ребят мало что отличает.

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

Извините, я не готова поделиться тем, что собрала. Это почти как прилюдно раздеться.

Показала одну из идей иллюстраторке, с которой постоянно работаю. Она сказала, что идея воплощается за три минуты. Вот, что мы сделали:

Ну кайф же!

Собрать мобилку

Десктоп — полбеды. Еще же есть мобила, в которой выстроить композицию сложнее из-за формата.

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

Но выходила какая-то ерунда. Потом я психанула и сделала так. И, кажется, это сработало:

Когда я довольна результатом работы, то не могу оторваться от нее. Пять раз за день открывала макет и смотрела ♥

Что в итоге

Эту версию я загрузила на линчевание Нозику:

Я была довольна собой, но все же переживала. Еще вечером в субботу Михаил сбросил в общий чатик мою работу с подписью: «Стильненько вышло у Ксении».

Фух! Кажется, удалось.

Оценки за первую итерацию: 4 — техника, 4,75 — выразительность.

Комментарий Михаила Нозика к моей работе в школьном кабинете
Комментарий Михаила Нозика к моей работе в школьном кабинете

Пойду дальше развлекаться, короче.