В наше время просторы интернета пестрят разнообразными дизайнами, необычными геометриями, типографикой на любой вкус и яркими экспериментами. Торговля - двигатель прогресса, а прогресс - двигатель сферы web-дизайна. Люди научились создавать пошаговые инструкции о том, как сделать сайт не только красивым, но и полезным, удобным, продающим. Это касается всего, что мы видим в интернете. Один из форматов, о котором сегодня пойдет речь - лонгрид.
Лонгрид, простыми словами, - это одностраничный сайт, посвящённый одному событию или содержащий статью о чем-либо.
Недавно я работала над проектом лонгрида, посвященного теме работы дизайнеров из дома. Тема стала особенно актуально после локдауна в 2020 году из-за пандемии новой коронавирусной инфекции, охватившей мир.
Главной задачей было - оформить полезную статью по всем правилам верстки и типографики при помощи Figma. Я расскажу вам подробнее об основных.
Самое главное в оформлении статьи в лонгрид - работа со шрифтами и подбор удачной шрифтовой пары. Основные виды шрифтов:
- С Засечками (serif)
- Без засечек (sans-serif)
- Рукописные (script)
- Моноширинные (monospace)
- Экранные (display)
Основное правило при подборе шрифтовой пары - выбрать разные, но чем-то похожие между собой гарнитуры. Можно поискать самостоятельно, как это сделала я в данном проекте, а можно воспользоваться специальными сервисами для поиска идеальных сочетаний. Вот пара популярных ресурсов, к помощи которых иногда приходится прибегать:
Второе правило - теория близости. Самый простой способ понять эту теорию - посмотреть на людей на улице. За считанные секунды вы поймете, кто из прохожих идет вместе, а кто сам по себе, за счет того, что люди объединились в группы. А что такое группа? Это несколько человек, идущих рядом друг с другом, между которыми меньшее расстояние, чем между остальными людьми, идущими по одиночке. Так же и с объектами в дизайне, так же и с абзацами и заголовками при верстке текста. Заголовок обязательно должен быть на расстоянии большем от основного текста, чем расстояние между строками в абзаце, а следующий блок (заголовок и абзац) должен находиться на большем расстоянии от предшествующего блока и т.д. Ещё важно уделять внимание отступам по бокам и количеству символов в строке - много букв читать не удобно, оптимально от 40 до 60 символов в строке. Есть риск, что посетитель сайта не дочитает до конца и покинет страницу именно из-за нагрузки на глаза, т.к. текст станет для него неудобным.
Третье правило. В верстке текста не бывает мелочей. Нужно помнить про интерлиньяж (расстояние между строками), не допускать "висячих" предлогов и союзов в конце строки и одиноких слов в строке.
Учесть все эти правила мне помог инструмент сетки. Настроив параметры я приступила к "разметке" своего фрейма. Выбор пал на простую шестиколончатую сетку в удобной ширине фрейма в 1440 px.
"Что ж, дальше все будет как по маслу", - подумала я и приступила к верстке текста. Гарнитуры для шрифтовых пар подбирались достаточно сложно. Некоторые сочетания были слишком воздушными, другие отвлекали на себя много внимания, а мне хотелось сделать своей проект ярким и сочным, как у множества дизайнеров на Behance.
Спустя 30 минут скроллинга вышеупомянутого сервиса и других сайтов творческих комьюнити мне пришла не яркая, но необычная идея. "А что если оформить лонгрид в стиле, похожем на газеты?", - промелькнуло у меня в голове. Мысль показалась мне интересной. Представив, как на просторах интернета может выглядеть сайт, похожий на бумагу ещё и с буквами, чем-то напоминающими оттиски печатной машинки, я принялась за работу.
Мудбордом послужили фотографии газет и вырезок из них. Все фотографии я подбирала особо тщательно и накладывала на них черно-белый фильтр при помощи плагина Black&White. Так прошло еще около полутора часов моей работы. В конечном итоге лонгрид выглядел так (да-да, вы можете посмотреть сам проект в "голом" виде, а уже потом я покажу вам его презентацию).
Если вы нажимали на ссылку, то вы видели, что в проекте нет ничего лишнего. Именно этого я и добивалась при создании лонгрида. Подумайте сами! Даже при работе из дома глаза дизайнера ежедневно воспринимают большое количество информации, цветов и форм, а именно в этом лонгриде сама суть - рассказать дизайнерам о том, как сделать свою работу на удаленке проще и приятнее, благодаря правильному взаимодействую с клиентами и распределению своего времени.
Посмотреть презентацию проекта и подписаться на меня на Behance вы можете тут :)