Позднее Ctrl + ↑

Запустила сайт агентства «Дом свадеб Кати Кещян»

Задача
Рассказать невестам для чего нужен свадебный организатор и почему лучше обратиться к нему, чем делать свадьбу самостоятельно.
dom-svadeb.ru

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

Сайт адаптируется под все разрешения экранов:


Участники проекта

Дизайнер
Таня Соколовская
Верстальщик
Даниил Соколовский
Разработчик
Кодельная

Объекты внутри модуля

Многие дизайнеры строят макеты сразу по модульной сетке, но подобный подход дает плохой результат — страницы получаются скучными и сложными для восприятия. Модульная сетка состоит из прямоугольных модулей. Чтобы делать ясные макеты, в первую очередь стóит распределить элементы внутри модулей, а затем с помощью сетки систематизировать их. Модульная сетка организует объекты внутри пространства, создает впечатление единства, придает порядок и ясность макету. А бывает, что сетка и вовсе не нужна.

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

В этом посте я расскажу, как организовать объекты внутри модуля, чтобы макет не развалился и легко считывался.

Эскизы макетов с использованием модульной сетки в 32 клетки. Иллюстрация из книги «Модульные системы в графическом дизайне» Йозефа Мюллер-Брокманна

Модуль и объекты внутри него

Роль объектов внутри модуля играют иллюстрации, заголовки, логотипы, цитаты, фактоиды, текстовые блоки, подписи, сноски, словом — все, что располагается в модуле.

Чтобы модуль визуально не развалился, значимые объекты внутри него должны тяготеть к углам, сторонам или визуальному центру

Значимые объекты расположены по углам, сторонам или в визуальном центре модуля

Правилу подвластны прямоугольные объекты. Если говорить о круге, то он может занимать любую позицию внутри модуля. Окружность приятна для глаз и легко воспринимается, она контрастирует с прямоугольниками и раньше привлекает внимание зрителя.

Следуя этому правилу, композиция всегда будет уравновешена и легко восприниматься. Важно, чтобы со свободных сторон объект дышал. Если заголовок тянется к верхнему левому углу, значит справа от него и снизу должен быть воздух.

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

Посмотрите на рисунок ниже:

Прямоугольные объекты в модуле. Слабый вариант

Тут две ошибки:

1) Сверху и снизу есть незадействованное пространство — комозиция неустойчива:

Незадействованное пространство

2) Объекты разбросаны хаотично, как следствие образовалось много блоков отрицательного пространства. Композиция разваливается:

Отрицательное пространство

Чтобы улучшить модуль, нужно избавиться от первого и минимизировать второе. Тут и помогает правило расположения объектов в модуле.

Хороший модуль

Объекты организованны между собой в прямоугольники и тяготеют к углам и сторонам модуля. Отрицательное пространство приняло более простую форму:

Отрицательное пространство хорошего модуля

Композиция стала организованной, устойчивой и легкой для восприятия.

Добавим в модуль круг. Помним, он может занимать любую позицию. Круг в первую очередь привлекает внимание, поэтому с его помощью можно направлять взгляд зрителя:

Круг в модуле

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

Два равнозначных круга в модуле

Допустим, все объекты в модуле равнозначны:

Сейчас мы смотрим на макет и нам не за что зацепиться. Привлечь внимание можно с помощью цвета или начертания:

Также можно использовать другой шрифт или увеличить его размер:

Добавить значимый объект и воздух вокруг него:

Структура в модуле

Объекты в модуле принято разделять по значимости. На первом месте всегда стоит иллюстрация. Именно за нее цепляется взгляд на странице. Затем мы смотрим на заголовок, переносим взгляд на цитаты или фактоиды, и, если нас заинтересовало все это, обращаем внимание на текстовый блок.

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

Одна колонка текста

Если текст набран в две колонки, то мы начнем чтение с левой колонки (или правой в тексте на иврите) сверху вниз, а продолжение будем искать наверху второй колонки.

Две колонки текста

Если колонок и строк больше, направить взгляд помогут расстояния между объектами по правилу близости:

Слева уменьшены горизонтальные расстояния, справа — вертикальные

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

Модули на практике

Разберем пример:

Макет состоит из модуля, внутри которого еще один модуль: сама страница и белый прямоугольник в ней. Посмотрите, как себя ведут объекты внутри своих модулей:

В главном модуле есть два значимых объекта:

  1. Заголовок «Time» — расположен в правом верхнем углу, при этом слева и снизу от него достаточно свободного пространства.
  2. Белый прямоугольник — в левом нижнем углу, с противоположных сторон он также дышит.

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

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

Еще один пример:

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

Или вот:

Значимые объекты распределены по углам и сторонам своих блоков, иллюстрации выглядят гармонично.

Проанализируйте разворот журнала:

Разворот состоит из двух модулей: левой и правой страницы.

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

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

Еще пример с кругом:

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

Часто круг используют для специальных предложений, скидок, акций:

Посмотрите, как ловко орудует композицией Ян Чихольд:

Он мастерски направляет взгляд читателя от одного объекта к другому.

А вот пример плохого распределения объектов в модуле:

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

Еще плохой пример:

Комментарии излишни.

Располагать значимые объекты сверху и снизу принято в операционных системах:

macOS Sierra

Меню на многих сайтах привязано к верху:

А вот пример расположения по центру:

Но подобная симметрия хороша единожды, иначе не избежать хаоса:

Меню сайта

Композиция из модулей

Теперь рассмотрим, как взаимодействуют между собой модули на страницах сайтов.

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

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

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

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

Чем проще макет, тем легче его считывать. Динамика достигается за счет чередования ритмов. Посмотрите, как с длинной страницей справляется Apple:

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

Запустила партнерский сайт компании Epson

Задача
Рассказать потенциальным партнерам о программе авторизации.
partners.epson.ru

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

О процессе

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

Обычно производители техники либо торгуют напрямую через свои филиалы и интернет-магазины, либо через партнерские сети. Эпсон работает по второй схеме.

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

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

Вникаю в детали

Изучаю презентации и документацию, чтобы понять в процесс:

Изучаю презентации, таблицы и документы по программе авторизации Эпсон

Информации много, но у меня есть преимущество: так как с условиями партнерской программы я ранее не сталкивалась, это позволило посмотреть на неё глазами новичка.

Составляю структуру

Структурирую всё изученное в последовательное изложение:

  1. Программа авторизации — что это такое
  2. Зачем нужна авторизация
  3. Преимущества партнеров
  4. Как стать партнером
  5. С кем связаться

Приступаю к работе

Собираю первый «этаж». Категории авторизации, по которым компании становятся партнерами, показываю наглядно в виде фотографий устройств этой категории. Здесь же решаю добавить социальное доказательство в виде фактоида: 500 компаний уже стали партнерами Epson.

Первый «этаж» сайта рассказывает о программе и категориях авторизации

Дальше отвечаю на вопрос «Зачем нужна авторизация» и рассказываю о преимуществах партнера.

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

Преимущества партнера: всё только по делу

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

Как стать партнером и критерии отбора

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

Изучаю, смотрю что можно улучшить:

Обычный способ представления контактной информации, который использовался на сайтах и в презентации

Имя, должность и регион менеджера условно назовём карточкой контакта. Замечаю, что в карточках много словесных повторов:

«Соколов Василий (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван (менеджер по работе с партнерами) — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Сначала убираю должности, потому что слово «менеджер» сказано в заголовке, а то что они работают с партнерами ясно из контекста.

«Соколов Василий — работа с дилерами, корпоративными партнерами и заказчиками Санкт-Петербурга, а также Мурманской, Архангельской, Вологодской и Новгородской областей, и Республики Карелия.»

«Петров Иван — работа с дилерами, корпоративными партнерами и заказчиками Центрального ФО — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Затем убираю повторяющуюся фразу «работа с дилерами, корпоративными партнерами и заказчиками», потому что это очевидная сущность. Заодно меняю имя и фамилию местами, потому что в русском языке принято обращаться по имени.

«Василий Соколов — Санкт-Петербург, Мурманская, Архангельская, Вологодская и Новгородская области, Республика Карелия.»

«Иван Петров — Белгородская, Брянская, Воронежская, Калужская, Курская, Липецкая, Орловская, Рязанская, Тамбовская и Тульская области.»

Стало в два раза компактнее и информативнее.

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

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

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

Региональные менеджеры. При наведении курсора фотографии становятся цветными

Готовлю презентацию и показываю всё клиенту. Клиент принял работу.

Верстаем сайт, адаптируем под все разрешения экранов, тестируем и запускаем. Готово!

Результат работы

Участники проекта

Дизайнер
Таня Соколовская
Дизайнер и верстальщик
Даниил Соколовский
Разработчик
команда со стороны клиента

Правило близости

Дизайнеры часто ставят дизайн на первое место и оправдывают неряшливость работ словами: «здесь такой творческий замысел» или «такая авторская задумка». Но дизайнер — не художник.

Дизайнер ≠ художник

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

В этом посте я расскажу о главном принципе восприятия информации и следующем из него правиле.

Немного теории

В основе правила лежит принцип близости в гештальт-психологии — расположенные рядом объекты воспринимаются вместе.

Принцип близости. Правая часть рисунка воспринимается как три столбика

Отсюда вывод:

Внутренние расстояния элемента должны быть меньше внешних.

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

Рассмотрим текстовый блок. Расстояние между словами является внутренним, а расстояние между строками (интерлиньяж) — внешним. Поэтому, согласно правилу, увеличим интерлиньяж:

Справа интерлиньяж увеличен. Блок выглядит аккуратнее и легче

Если добавить к тексту заголовок, то интерлиньяж заголовка — внешнее, должен быть больше, чем интерлиньяж текста — внутреннее. Помните, внешнее всегда больше внутреннего:

Блок с правильно выстроенными расстояниями считывается легче

Если этот блок положить на плашку, то ее поля будут играть роль внешнего, поэтому они должны быть больше интерлиньяжа заголовка:

Большие поля плашки придают блоку значимость

Теперь рассмотрим это на примерах.

В буквах и словах

Для примера напишем слово:

В слове внутреннее расстояние играет пространство внутри буквы, а внешнее — пространство до соседних букв. Сейчас правило близости нарушено. Буквам тесно, прочитать слово тяжело. А серединка буквы О напоминает дырку.

Увеличим межбуквенное расстояние так, чтобы визуально буква О перестала дырявить слово:

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

Добавим еще два слова, но пробел между ними оставим стандартным:

Фраза читается тяжело, создается впечатление, что это одно длинное слово.

Увеличим пробелы между словами:

Уже лучше, продолжаем эксперимент. Заменим шрифт на более вытянутый:

Так как буквы ýже, расстояние внутри них стало меньше, значит можно уменьшить расстояние между самими буквами:

Готово! Фраза стала компактной, ясной и легко считываемой.

Так эта надпись выглядит на здании аэропорта:

Фото из сети

А вот как она могла бы выглядеть при соблюдении правила близости:

Не мешало бы и флаг выровнять по буквам, но не об этом речь

В текстовом блоке

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

Рассмотрим пример из абзаца с заголовком. Абзац и заголовок это два самостоятельных объекта. Роль внешнего для них играет расстояние от заголовка до первой строки. Роль внутреннего играет расстояние между строками — интерлиньяж текста.

В этом примере мы видим, что расстояния равны. Такой текст выглядит некрасиво, читать его неудобно. Оставлять текстовые блоки в таком виде нельзя.

Приведем его в порядок. Сперва увеличим расстояние от заголовка до текста:

Стало лучше. Заголовок приобрел независимость.

Теперь увеличим расстояние между строками, но не забываем, что это расстояние играет роль внутреннего и должно быть меньше внешнего:

Готово.

В текстовом блоке с изображением

Теперь рассмотрим связку из текстового блока, заголовка и иллюстрации. Например, такой скриншот сайта:

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

Тут работает еще один принцип из гештальт-психологии — принцип схожести:

Элементы, схожие по размеру, очертаниям, цвету или форме, имеют тенденцию восприниматься вместе.

Заголовок и текст имеют большую связь, нежели картинка и заголовок, поэтому следует описания подвинуть к своим заголовкам:

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

На каждом уровне соблюдено правило близости:

Еще один пример. Разберём такой блок:

Было

Применяем правило близости: увеличиваем интерлиньяж текста и отодвигаем текст от заголовка. Увеличиваем поля со всех сторон. Убираем кнопку «Подробнее», а ее функцию переносим на заголовок. Стрелку, которая указывает в никуда, переносим к заголовку.

Стало

Элементов меньше, информативность не пострадала, блок стал чище и аккуратнее.

Еще пример:

Было

Выравниваем расстояния в текстовом блоке. Сдвигаем иконку чуть правее, за линию текста, чтобы визуально она казалась на его уровне.

Уже лучше

Объединяем «Подробнее» с заголовком блока и увеличиваем иконку.

Стало

Блок стал компактнее и привлекательнее.

Вывод

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


Читайте подробнее:
О расстояниях между объектами и их восприятии в «Редактируем дизайном» Яна Уайта.
Правило внутреннего и внешнего в «Типографке и верстке» Горбунова.
Теория близости в ководстве Лебедева.
Об интерлиньяже в «Модульных системах» Мюллер-Брокманна, в «Облике книги» Чихольда, в «Живой типографике» Корольковой.
Разрядка прописных в «Образцах шрифтов» Чихольда.

Процесс: лого визажиста Анны Ротарь

Анна Ротарь — визажист и стилист по волосам в городе Одесса. Я разработала для Анны логотип и оформила визитную карточку.

Вместе с Анной мы решили, что рукописный вариант ближе ей по характеру. От этого и отталкнулись.

Набросала варианты:

Перевела некоторые в вектор и выбрала наименее «завитушный»:

Смотрю на носителях:

Не нравится, что все буквы рукописные, но нравятся формы букв A и R. Решаю их оставить, а остальные набрать шрифтом:

Логотип стал серьезнее, как раз под звучание фамилии. Попробуйте произнести Ротарь. Она рычит, звучит твердо, в то же время мягкий знак смягчает рычание. Продолжаю работу. Хочется соединить горизонтальный штрих A и полуовал R, а засечки nn превратить в хвостики, как у буквы a. Пробую, смотрим:

Да. Так появилась целостность. Связываю логотип с деятельностью Анны: буква A выполняет роль карандаша со следом от него:

Показываю клиенту предварительный вариант:

Фото из сети для примера

Получаю одобрение — Анне логотип нравится. Работаю дальше. Облегчаю жирные линии A и R, слегка укорачиваю вертикальный штрих R и убираю хвостик буквы A.

Настал этап прорисовки букв. Отмечаю основные проблемы, которые нужно поправить:

Выравниваю параллели, привожу к одному размеру все схожие полукруглые хвосты:

Корректирую дугу от R относительно ножки:

Смотрю в черном цвете:

Не нравится стык полуовала R и ее ножки:

Исправляю:

Настала очередь карандашного следа. Смягчаю его:

Смотрю в логотипе:

Корректирую еще, чтобы он не сильно выпирал над буквой A:

Смотрю:

Делаю вариант логотипа из инициалов:

Готово! Приступаю к визиткам. Для них я доработала карандашный след:

Внутри появился силуэт лица

Отражаю силуэт вертикально:

Собираю макет визитки и отправляю клиенту:

Анна принимает работу.

Книга про буквы от Аа до Яя. Конспект. Часть 1

Юрий Гордон

Замечательная книга Юрия Гордона лежит у меня на столе и очень помогает в работе с буквами. «Книга про буквы от Аа до Яя» — это настоящая энциклопедия и учебное пособие.

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

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

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


Конструкция букв

Графема

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

Буква — зверь определенного вида и породы, у которог оесть тело, лапы и хвост (иногда несколько). Индивидуальные черты отличают каждого члена стаи — алфавита.

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

Наш глаз готов прочитать как букву что угодно, если оно напоминает графему

Графемы — это не буквы. Они не пренадлежат к какому-либо конкретному шрифту. Это обобщенные образы букв.

Облако форм

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

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

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

Шрифтовая терминология по В. Кричевскому

Шрифтовая терминология по В. Ефимову

Оптические иллюзии

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

Геометрия букв текстового шрифта полностью подчинена оптике:

  • Вертикальные штрихи всегда толще горизонтальных.
  • Нижние части овалов опускаются под базовую линию строки, а верхние — выступают над верхней линией.
  • В места, где могут образоваться черные залипы (например, в середине Ж), штрихи делаются тоньше.
  • Буквы, которые должны казаться круглыми, всегда несколько у́же точного круга.
  • Средняя линия шрифта, проходящая по горизонтальному щтриху H, всегда неменого выше середины роста знака.
  • Диагональные штрихи на концах, как правило, несколько толще, чем в точке пересечения.
  • Засечки, капли и другие концевые элементы служат не только украшением, но и фиксируют окончания штрихов.
  • В местах, где штрихи сходятся под острым углом, часто делают зарезы, «ловушки для краски», дополнительно облегчая место стыка.

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

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

Динамика текста

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

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

Графическая рифма

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

В текстовом шрифте любая слишком явная рифма смотрится нарочито и быстро утомляет. Поэтому так неважно выглядят в сплошном наборе шрифты стиля модерн конца XIX — начала XX века.

Шрифт или логотип

Различия в подходе

Шрифтовик, каллиграф и графический дизайнер, делающий логотип, работают с буквами, но относятся к этому материалу по-разному.

Дизайнер и каллиграф создают «конечный продукт» — статическую композицию с известным набором знаков и заданным порядком их расположения. Они могут просчитать и выбрать только необходимые из максимума возможных рифм.

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

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

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

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

Некоторые способы рифмовки знаков в логотипе:

  • рифмовка позиции: начало — конец, верх — низ и т. д. (множество знаков построено на зеркальном отражении или повороте на 180°);
  • заимствование одной буквой деталей другой;
  • доведение похожих элементов до полного совпадения;
  • пропуск элементов, призванный заставить зрителя мысленно дорисовать пропущенное;
  • межбуквенные просветы или их отсутствие, лигатуры;
  • игра с масштабами, когда крупным знакам отвечают мелкие;
  • цвет и тон.

В логотипе обязательно присутствует то, чего никогда нет в наборном шрифте: буква-лидер. Это акцент, мишень, точка притяжения, превращающая набор знаков в цельный объект. В логотипе «Нивеи» лидеры V и A. На какой бы позиции не оказались эти буквы, они становятся зрительными центрами.

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

Шрифты делятся на три большие группы:

  1. Текстовые. Хороший текстовый шрифт должен прежде всего быть максимально разнообразен графически в рамках предельно жестко заданного стиля. Буквы ни в коем случае не должны подделываться друг под друга, что помешает читаемости. Геометрия всегда приносится в жертву иллюзии. Текстовый шрифт должен выглядеть строго, умеренно и стройно.
  2. Акцидентные. Если текстовый шрифт должен нести сообщение, то акцидентный может его усилить. Акциденция не ограничена ничем. Единственный критерий качества акцидентного шрифта — количество хорошего дизайна, сделанного при его участии.
  3. Картиночные, состоящие не из букв.

Рифма в логотипах

С наибольшей силой рифмы проявляются, конечно, в логотипах. Логотип, являясь центром притяжения внимания, — сам по себе рифма для фирменного стиля. Его присутствие на всех продуктах, связанных с данным брендом, задает общий эмоциональный тон. Например, Coca-Cola — яркий представитель поп-музыки в логотипах, этакий Майкл Джексон, а, скажем, Cartier — это тоже поп-музыка, но уже классическая, вроде Штрауса.

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

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

Как начать делать шрифт

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

Кирилизация латинского оригинала

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

Направляющие: стандартно это высота прописных по букве H, высота строчных по букве x, высота верхних выносов (ascender) по b и l, величина нижних выносов (descender) по p или g, свисания под строку у круглых строчных и прописных знаков.

Знаки без изменений: скорее всего это будут A, B, C, E, H, O, P, T, X, a, c, e, o, p, x, y. Обычно подходит и M, за исключением случая описанного в таблице ошибок.

Знаки с минимальной переделкой: B в Б, Ъ, Ы, Ь; F в Г; K в К (если есть желание сделать шрифт более «русским»).

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

Готовый латинский шрифт уже имеет собственный выверенный ритм и характерные детали, их нужно сохранить при переводе.

Воспитанные дети так не делают:

Обычно так делать не следует:

Отчаянный способ или «кавалерийский наскок» на кириллицу

С чего начать? Со шрифтовой идеи. Это графический ход, найденный для одного-двух знаков. Из них «вытягивается» вся гарнитура.

1. Рисование

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

Буквы-лидеры. Латинские: a, g, e, Ss, Cc, A, B, R, p, f. Кириллические: Кк, Лл, Дд, Уу, б. В этих буквах концентрируются почти все шрифтовые красоты: капли, выносы, хвосты, дуги.

Буква a. Главная стилеобразующая буква. Она самый стильный, самый интересный знак в гарнитуре, и везде она не просто создает образ, но привносит еще кое-что уникальное, свойственное только ей одной. Похожую роль в латинице играет g, впрочем, это касается только ее антикварной формы.

Artemius. Ю. Гордон, сентябрь, 2000
Никакой критики, только поиск и находки

Если на бумаге рисуются буквы-лидеры, то при помощи компьютера строятся в первую очередь круглые и квадратные знаки. В шрифте их держат самые «скучные» знаки: Нн, Оо, треугольная A и самые насыщенные пересечениями буквы Вв и Мм. В поле внимания попадают еще знаки с выносами и диакритикой: b, i, k, y, Йй, ф.

2. Построение

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

3. Ритм

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

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

Единственный способ контролировать ритм — постоянно просматривать серии знаков в разных сочетаниях.

4. Межбуквенные просветы

Этот этап может занять почти столько же времени, сколько конструирование знаков.

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

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

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

5. Апроши

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

Сверху вниз: широкие апроши, узкие апроши, перетекание знаков

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

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

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

Буквы текстового шрифта Octava обходятся без кернинга даже в паре гд — настолько плотно заполнено пространство внутри буквенной площадки

Также я всегда стараюсь привести апроши к системе, организуя их в группы. Начинаю с основных — для прямых и круглых букв: ИЙНП, ОСЭЮ и их латинских аналогов. Потом ставлю прямые и круглые вперемежку и добиваюсь равномерности просветов: НННОООНОНО. После этого ввожу знаки промежуточной формы: ERSБВЗЯ. Затем треугольные и явно требующие кернинга знаки: AFTVГЬЪ. Когда буквы выровнены, перехожу к знакам препинания, цифрам и другим дополнительным знакам. Апроши для знаков препинания должны четко отделять их от букв любой формы.

6. Кернинг

В принудителном выравнивании особенно нужнаются треугольные буквы: в сочетании АТА просветы без кернинга всегда будут больше, чем в ННН. Также необходим кернинг в парах заглавная-строчная, особенно с буквами F, Г и Т. Количество кернинговых пар в разных кирилических шрифтах колеблется от нескольких сотен до полутора-двух тысяч. Если пар получается больше, значит, шрифт был недостаточно хорошо выравнен на стадии расстановки просветов.

Межбуквенные пробелы и кернинг надо обязательно проверять распечаткой. В текстовой массе сразу заметны дыры и залипы. Конечно, заодно проверяется и ритм, «командная игра» букв.

Для облегчения проверки шрифтв приводятся тестовые примеры и таблицы кернинговых пар, которые применялись в работах фирм «Паратайм» и «Леттерхед».

Когда шрифт уже сгенерирован, начинается долгий процесс проверки. Здесь показана одна из страниц тестового файла, который применяется в фирме «Паратайп»

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

Сверстала и оформила электронную версию книги «О Жизни, Смерти и Любви»

Задача
Оформить и сверстать электронную версию книги «О Жизни, Смерти и Любви» в формате ePub.

В дополнение к печатному изданию книги «О Жизни, Смерти и Любви» я разработала ее электронную версию. Туда вошли все рассказы и иллюстрации из оригинала.

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

Книга доступна для бесплатной загрузки на сайте ЛитРес.


Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман
Литературный редактор
Гульнара Сабрекова

Открытки и постеры для презентации книги «О Жизни, Смерти и Любви»

Задача
Разработать подарочные материалы для презентации книги «О Жизни, Смерти и Любви»

Для презентации книги Леи Веденски «О Жизни, Смерти и Любви» разработала рекламные и подарочные материалы: флаеры, открытки и постеры с иллюстрациями и цитатами из рассказов.

Постер с главным образом проекта «Живое Слово». Формат А3 и А2
Пригласительные флаеры на презентацию

Также сделала открытку с образом проекта «Живое Слово», которую можно подписать с оборотной стороны самостоятельно:

Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман

Как я сверстала и оформила книгу

Представляю мое первое книжное издание! Я очень рада, что довелось открыть для себя это новое направление в дизайне. Работа над оформлением книги оказалась не легкой, но интересной. Тут я покажу процесс работы и всякие закулисные подробности.

Задача: сверстать, оформить и помочь издать художественную книгу израильского писателя и психолога Леи Веденски. Книга называется «О Жизни, Смерти и Любви»

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

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

Практически сразу у меня родился образ книги с ассоциацией на тему жизни и смерти — обложка белого цвета с темными полями.

Набросок обложки. Текст на иврите — грубый перевод русккоязычного названия в Google Translate

На этом этапе я отложила обложку в сторону и приступила к книжному блоку. Тут все оказалось немного сложнее. Иврит — правостороннее письмо, соответственно и книга открывается слева направо. Выходит, что русские тексты будут читаться задом наперед, а это не совсем удобно.

Первый вариант книжной полосы был таким:

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

Вертикальная иллюстрация
Горизонтальная иллюстрация

На этом этапе автор отказался от объединения иврита и русского языка в одной книге — это было лучшим решением.

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

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

Учитывая, что все иллюстрации нарисованы на бумаге формата А4, для полной гармонии я выбрала пропорциональный им формат — А5.

Работая над квадратным вариантом я полагалась только на свой эстетический вкус, но с форматом А5 возникли трудности. В поиске гармоничной пропорции наборы полосы я открыла для себя Яна Чихольда и его «Облик книги» — восхитительный «учебник» про вёрстку и оформление книг.

Следуя канону Виллара, полоса набора стала выглядеть так:

Иллюстрации также вписаны в полосу набора. Заодно прикинула обложку под новый формат
Чертеж Виллара

Гармония для текстовых блоков и иллюстраций найдена. Отпала нужда в крупном шрифте, поэтому для удобства чтения уменьшила его с 12 до 11 пт, теперь строка вмещает в среднем 5—7 слов.

Для текста я выбрала два шрифта: Newton для основного текста (сочетает в себе высокую удобочитаемость и признаки шрифтов старого стиля, под вечные темы, затрагиваемые в повествовании) и Jakob для заголовков (рукописный шрифт, отлично гармонирует с графическими иллюстрациями).

Работая над текстом, я также руководствовалась рекомендациями Чихольда.

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

Широкие поля позволили увеличить интерлиньяж (межстрочный интервал), что добавило воздуха и гармонии в шрифтовую плоскость. Кроме того, я смогла не нарушать полосу набора и все сноски расположить на полях:

Чтобы визуально выравнять границу текстового блока, я частично вынесла знаки пунктуации за нее:

Неправильно
Правильно

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

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

Убираем «висячие» предлоги в InDesign

Открываем документ и создаем Character Style с единственной настройкой «No Break», имя даем ему такое же:

Далее создаем Paragraph Style для основного текста и идем во вкладку GREP Style. Там жмем кнопку «New GREP Style» и в выпадающем списке «Apply Style» выбираем наш заранее созданный «No Break»:

В поле «To Text» вписываем следующее:
(?<= )((в|‬на|‬под|‬с|‬со|‬во|‬без|‬то|‬ли|‬бы|‬или|‬да|‬но|‬что|‬а|‬и|‬у|‬уж|‬так|‬как|‬для|‬перед|‬через|над|‬‬при|‬по|‬до|‬от|‬о|‬об|‬‬про|‬к|‬ко|‬не|‬за|‬из|‬ни|‬нас|‬я|‬он|‬она|‬оно|‬они|‬мы|‬ее|‬её|‬его|‬вас|‬ты|‬вы‬|‬все|‬всё)( |\. |, ))+

Далее, создаем новый GREP Style по аналогии с первым, но уже для предлогов с большой буквы:
‭‭‭((?<= )|(?<=^))((В|‬На|‬Под|С|‬Со|‬Во|‬Без|‬То|‬Ли|‬Бы|‬Или|Да|‬Но|‬Что|‬А|‬И|‬У|‬Уж|‬Так|‬Как|Для|‬Перед|‬Через|Над|‬‬При|‬По|‬До|‬От|‬О|‬Об|‬‬Про|‬К|‬Ко|‬Не|За|Из|‬Ни|‬Нас|‬Я|‬Он|Она|‬Оно|‬Они|‬Мы|‬Ее|‬Её|‬Его|‬Вас|‬Ты|‬Вы‭|‬Все|‬Всё))+‬

Чтобы было понятно:

  • Условие (?<= ) означает: только если перед предлогом стоит пробел;
    (?<=^) — только если предлог стоит в начале абзаца;
  • (‬в|‬на|‬под|‬с|‬со|‬во‭|...|‬вы‬|‬все|‬всё) — список всех предлогов, местоимений и союзов, которые не должны оставаться в конце строки;
  • ( |\. |, ) — знаки после предлогов: пробел, точка+пробел, запятая+пробел. Символ \ указывает на то, что точка после него рассматривается как точка, а не как GREP-метасимвол);
  • + указывает, что условие применимо и к идущим друг за другом предлогам, местоимениям и союзам, например «но нам это показалось интересным».

Подробнее о GREP метасимволах и принципах работы читайте в GREPоводстве.

Результат работы:

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

Участники проекта

Дизайнер
Таня Соколовская
Автор
Леа Веденски
Художник-иллюстратор
Маша Ройтман
Литературный редактор
Гульнара Сабрекова

Обновление сайта daniellesden.com

Задача
Адаптировать сайт под любые экраны.
www.daniellesden.com

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

Первая версия
Вторая версия
Третья версия
Адаптивная версия

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

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

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

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

Изначальный дизайн раздела в виде таймлайна

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

Разбиваем все советы по темам: написание музыки, диджеинг, менеджмент, маркетинг, бизнес.

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

Размышляем:

— А что если в группировках по темам выводить не все советы, а только важные по усмотрению автора? И показать их в красивой журнальной вёрстке с крупными картинками?

— И как это поможет?

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

— А где будут жить остальные статьи, помимо этих важных?

— Все остальные советы будут снизу в ленте, с этим без изменений.

— Получается, что постоянным читателям придется каждый раз прокручивать страницу вниз к этой ленте, чтобы узнать, вышли ли новые советы?

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

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

Собираем макет предложенной идеи

Смотрим, оцениваем и продолжаем рассуждать:

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

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

— Это как?

— А вот так:

Анимация подгрузки помогает расставить акценты внимания

Это решение и вошло в финальную версию сайта.


Участники проекта

Ведущий дизайнер
Таня Соколовская
Дизайнер и верстальщик
Даниил Соколовский
Разработчик
Максим Сильнов
Ранее Ctrl + ↓