Я учусь в Школе руководителей Бюро Горбунова. Каждую неделю мы делаем два задания, а преподаватели их проверяют. В этой заметке — о процессе работы над первой итерацией задания по верстке.
Первое задание одинаковое для студентов всех школ — сверстать страницу о себе в двух версиях: для компьютера и телефона.
У нас есть чатик со всеми потоками редакторов, дизайнеров и руководителей. Туда ребята сбрасывают свои работы, а Михаил Нозик смотрит их и помогает исправлять до дедлайна. Это такой бонус — достань преподавателя, чтобы сделать круто.
До того как я села за задание, то подсматривала, как делают другие ребята. Читала комменты к работам, чтобы не повторять ошибки.
В итоге у всех получалась одна и та же конструкция: фотка слева или справа, заг, короткий текст о себе и ссылки на соцсети.
Мне хотелось чего-то интереснее.
Подобрать фотографию
Обязательный элемент — фотография или иллюстрация. И это стало проблемой.
Часа три я потратила на тыканье из папки в папку. Оказалось, что я слишком мало фотографируюсь. Но все же выбрала шесть фотографий, которые показались мне подходящими по настроению и могли лечь
в классную композицию.
Только сейчас заметила, что суть у фотографий одна и та же. Хотя все они здорово соответствуют мне и передают внутреннее состояние.
Выстроить конструкцию
Начинать с настроения или спецэффектов — плохая затея. Сначала нужно выстроить сильную конструкцию, а потом набрасывать на нее деталей.
В первой версии я пыталась сделать всё и сразу. Выбрала моднявый шрифт и решила нарушить композицию, которую видела во всех работах. Отправила Михаилу такой вариант:
Его ответ меня расстроил и раззадорил одновременно:
Пошла переделала и была почти довольна. Красивые иконки, аккуратное касание плеча, ничего никому не мешает:
Михаил ответил, что касание плеча и заголовка всё равно неприятное. Я пожала плечами и хотела забить, но вовремя вспомнила про важный вопрос «почему?». И получила более подробный ответ:
Я долго ломала голову, что значит последнее предложение, но решила больше не уточнять и даже не показывать промежуточные варианты. Хотя была еще среда, и можно было окончательно достать Нозика вариантами.
Смирилась с конструкцией и чуть увеличила контейнер с текстом, чтобы избавиться в середине от дыры:
Но как убрать неприятное касание плеча и заголовка было непонятно. Поэтому я решила попробовать более нейтральный шрифт:
Стало лучше, но проблема с плечом и заголовком не решилась. Ребята-дизайнеры сказали, что так нельзя из-за правила «почти, но не совсем».
В итоге я уменьшила шрифт заголовка, разобралась с интерлиньяжами и получила результат, который убедил даже дизайнера самой тяжелой артиллерии:
Добавить настроения
Конструкция — окей. А что делать с настроением? Сейчас страница скучная: в ней не за что зацепиться и от работ других ребят мало что отличает.
Посоветовалась с дизайнерами и пошла собирать идеи, которые ассоциируются с моей работой и мной в принципе. Всё, что я насобирала было про дорисовку на фотографии или про странные авангардные штуки,
в которые я пока не умею.
Извините, я не готова поделиться тем, что собрала. Это почти как прилюдно раздеться.
Показала одну из идей иллюстраторке, с которой постоянно работаю. Она сказала, что идея воплощается за три минуты. Вот, что мы сделали:
Ну кайф же!
Собрать мобилку
Десктоп — полбеды. Еще же есть мобила, в которой выстроить композицию сложнее из-за формата.
Когда определилась со шрифтами и конструкцией десктопа, до ночи веселилась с мобилкой. Это было похоже на игру в тетрис из элементов:
Но выходила какая-то ерунда. Потом я психанула и сделала так. И, кажется, это сработало:
Когда я довольна результатом работы, то не могу оторваться от нее. Пять раз за день открывала макет и смотрела ♥
Что в итоге
Эту версию я загрузила на линчевание Нозику:
Я была довольна собой, но все же переживала. Еще вечером в субботу Михаил сбросил в общий чатик мою работу с подписью: «Стильненько вышло у Ксении».
Фух! Кажется, удалось.
Оценки за первую итерацию: 4 — техника, 4,75 — выразительность.
Пойду дальше развлекаться, короче.