{"id":13571,"url":"\/distributions\/13571\/click?bit=1&hash=d83cff4565300d1a2d0608fa73dd700b196f4b77356ac6255703ca3cdf2503d0","title":"\u041a\u043e\u043b\u043b\u0430\u0431\u044b, \u0440\u0435\u044e\u0437\u044b, \u043a\u043e\u043b\u043b\u0430\u0436\u0438... \u0414\u043b\u044f \u0447\u0435\u0433\u043e \u0432\u0441\u0451 \u044d\u0442\u043e?","buttonText":"\u0423\u0437\u043d\u0430\u0442\u044c","imageUuid":"bf0e0fe0-842c-5899-bb40-4efc00426ccf","isPaidAndBannersEnabled":false}
Екатерина Жильцова

Лонгрид в стиле минимализма. История создания

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

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

Обложка лонгрида

Главной задачей было - оформить полезную статью по всем правилам верстки и типографики при помощи Figma. Я расскажу вам подробнее об основных.
Самое главное в оформлении статьи в лонгрид - работа со шрифтами и подбор удачной шрифтовой пары. Основные виды шрифтов:

  • С Засечками (serif)
  • Без засечек (sans-serif)
  • Рукописные (script)
  • Моноширинные (monospace)
  • Экранные (display)

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

Второе правило - теория близости. Самый простой способ понять эту теорию - посмотреть на людей на улице. За считанные секунды вы поймете, кто из прохожих идет вместе, а кто сам по себе, за счет того, что люди объединились в группы. А что такое группа? Это несколько человек, идущих рядом друг с другом, между которыми меньшее расстояние, чем между остальными людьми, идущими по одиночке. Так же и с объектами в дизайне, так же и с абзацами и заголовками при верстке текста. Заголовок обязательно должен быть на расстоянии большем от основного текста, чем расстояние между строками в абзаце, а следующий блок (заголовок и абзац) должен находиться на большем расстоянии от предшествующего блока и т.д. Ещё важно уделять внимание отступам по бокам и количеству символов в строке - много букв читать не удобно, оптимально от 40 до 60 символов в строке. Есть риск, что посетитель сайта не дочитает до конца и покинет страницу именно из-за нагрузки на глаза, т.к. текст станет для него неудобным.

Третье правило. В верстке текста не бывает мелочей. Нужно помнить про интерлиньяж (расстояние между строками), не допускать "висячих" предлогов и союзов в конце строки и одиноких слов в строке.

Учесть все эти правила мне помог инструмент сетки. Настроив параметры я приступила к "разметке" своего фрейма. Выбор пал на простую шестиколончатую сетку в удобной ширине фрейма в 1440 px.

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

Спустя 30 минут скроллинга вышеупомянутого сервиса и других сайтов творческих комьюнити мне пришла не яркая, но необычная идея. "А что если оформить лонгрид в стиле, похожем на газеты?", - промелькнуло у меня в голове. Мысль показалась мне интересной. Представив, как на просторах интернета может выглядеть сайт, похожий на бумагу ещё и с буквами, чем-то напоминающими оттиски печатной машинки, я принялась за работу.
Мудбордом послужили фотографии газет и вырезок из них. Все фотографии я подбирала особо тщательно и накладывала на них черно-белый фильтр при помощи плагина Black&White. Так прошло еще около полутора часов моей работы. В конечном итоге лонгрид выглядел так (да-да, вы можете посмотреть сам проект в "голом" виде, а уже потом я покажу вам его презентацию).

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

Посмотреть презентацию проекта и подписаться на меня на Behance вы можете тут :)

0
Комментарии
Читать все 0 комментариев
null