Мы используем файлы куки и рекомендательные технологии.
Продолжая пользоваться сайтом, вы соглашаетесь на их применение.

следующая статья
Как мы сделали редизайн блога «Альпины»

Как мы сделали редизайн блога «Альпины»

В 2023 году дизайнер интернет-магазина Алина Шевкопляс вместе с редактором сайта Никитой Алексеевым на чистом энтузиазме и в свободные рабочие часы начали делать полный редизайн блога «Альпины». В последние пару лет вы могли быть невольными свидетелями этого поступательного процесса. В этой статье хотим рассказать о том, как происходило это обновление, какие трудности стояли перед Алиной и Никитой, как они договаривались между собой и чем вдохновлялись.

Как родилась идея

Алина: Когда я пришла в «Альпину», был предновогодний сезон горящих дедлайнов 2022 года. Все были сильно в мыле. С одной из первых задач ко мне пришла Лера, редактор блога. Она попросила сделать обложку для статьи про книжные итоги года сотрудников. Я начала разбираться и поняла, что самый быстрый вариант — это коллаж. Книги разношерстные, люди тоже разные, а итоги у каждого очень индивидуальные. Я потратила какое-то время на мокапы и ресайзы, но в итоге получилось быстро и хорошо.

Мокап (от англ. mock-up — «макет», «модель») — визуализация дизайн-проекта в контексте, имитирующем реальный мир. Чаще всего это трехмерная модель или шаблон реалистично выглядящего предмета, например, книги, в которую можно подставить свой дизайн и показать, как он будет выглядеть в жизни. Ресайз (от англ. resize — «изменение размера») — версия одного дизайн-макета, переделанная под разные пропорции, форматы или площадки.

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

Тот самый коллажный баннер для книжных итогов 2022 года

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

Первые сложности

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

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

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

Совместная работа

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

Процесс поиска визуального решения для категории «Саморазвитие»

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

Итоговая версия шаблона для категории «Саморазвитие»

Никита: У Алины было серьезное ограничение — мои навыки работы в фотошопе. С одной стороны, я люблю поработать над изображениями для своего удовольствия и втайне горжусь тем, что способен делать какие-то интересные штуки. Но с другой, я все-таки текстовый чувак, который на первых порах даже не понимал таких простых вещей, как растягивать или сжимать изображение с помощью сочетания клавиш ctrl+T. Поэтому либо Алина спускалась на мой уровень, либо я естественным образом упрощал ее идеи, чтобы создание обложки занимало у меня меньше времени.

Алина: Очень помогало то, что Никита активно предлагал идеи, что-то фотошопил и генерил. Это давало мне возможность на практике понять, как он видит картину со своей стороны. И мне очень хотелось это видение сохранить. Вот так Никита переделал первоначальный шаблон для категорий «Наука» и «Преступления».

Итоговая версия шаблона категории «Наука»
Итоговая версия шаблона для категории «Преступления»

Стиль

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

Маркерные росчерки для разных категорий

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

Итоговая версия шаблона для категории «Проза»

Алина: Нам повезло, что никто нам не указывал, как должен выглядеть блог, у нас было много творческой свободы. В результате — Франкенштейн из любви Никиты к «кислотным» цветам, киберпанку и неону, и моей к классическому искусству, гравюрам и культуре сканов всего бумажного. Из этого сочетания получилась классная стильная схема с классической базой и яркими акцентами. Ну, или по крайней мере, мы так считаем.

Шаблон категории «Технологии». Фигура самурая — первое нейросетевое изображение в блоге из первой публичной версии Midjourney. Всем киберпанк, чумбы.

Никита: В любом случае, мы просто кайфанули от процесса. Это была наша инициатива, и мы сделали так, как самим нравилось, но с оглядкой на позиционирование бренда. Мы — мамкины панки, прав был Юра [Юрий Буга, арт-директор издательской группы «Альпина»].

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

Итоговая версия шаблона для категории «История и политика»

Нейросети

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

К тому же в 2023 году нейронки еще не умели так круто соблюдать стилистику, а мы не умели писать промпты. Поэтому мы выбрали сложный, но проверенный метод ручного труда, а нейросети оставили для безвыходных ситуаций, когда без них выкрутиться не получается. Мы вложили много времени на разработку шаблонов, отшлифовали их максимально под свои нужды. Сейчас создание обложки занимает примерно 15 минут, а иногда и меньше. Столько же времени можно провести сейчас за подбором подходящего промпта. Но при этом мы с удовольствием используем ИИ как инструмент, который просто помогает сделать какие-то штуки быстрее или улучшить результат. Я использую нейросеть Adobe Firefly в фотошопе для генеративной заливки, для быстрого отделения предметов от фона, для увеличения качества реальных фотографий. При этом не перекладываю на ИИ процесс мышления и творчества.

Промпт (от англ. prompt — «подсказка») — текстовый запрос, который человек отправляет в нейросеть, чтобы получить от неё ответ.

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

Нейрослоп (от англ. AI + slop — «помои», «бурда») — массовый низкокачественный контент, сгенерированный нейросетью без особого участия человека, который часто публикуется в погоне за кликами или показами. Слово появилось примерно в 2023-2024 годах.

В сухом остатке

Алина: В сумме вся эта работа с шаблонами заняла почти два года. Последний шаблон мы закончили в декабре 2024 года. За это время блог преобразился. Никита продолжает переделывать старые обложки, но их всё еще много в архивах. У меня же за время подбора элементов скопилось около 20 Гб материалов, всяких коллажных png-вырезок, иллюстраций, кусочков бумаги и текстур. Мы нашли и разработали специальные экшены для фотошопа, и они тоже ускоряют работу.

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

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

Битва Набокова и Бунина: до и после
Самое интересное — у вас в почте.
Подпишитесь на рассылки со скидками и авторскими текстами о новинках.

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

Система защиты reCAPTCHA используется в соответствии с Политиками и Правилами использования Google.
Спасибо за подписку!
При копировании материалов размещайте
активную ссылку на www.alpinabook.ru