В данной статье будут рассмотрены примеры веб-дизайна лендингов и сайтов, занимательных собственной типографикой. Выбор шрифта, оформление заголовков и блоков текста, и структура посадочной страницы— все это крайне важно для увеличения показателей ресурса и достойно тщательных сплит-тестов.
А свежие идеи для тестирования вы имеете возможность отыскать в кейсах, продемонстрированных ниже.
- Как типографика воздействует на конверсию лендинг пейдж?
позиционирование элементов и Структура вёрстки
В ходе верстки веб-страниц определяющими факторами становятся структура и позиционирование элементов. В книге Thinking with Type Эллен Луптон детально растолковывает плюсы верстки с применением сетки – эта концепция учитывает множество качеств дизайна и реализует сложные структуры наровне с полной свободой изображения и интеграции текста.
Потому, что внешний вид страницы зависит от устройства, хороший дизайнер делается специалистом в создании привлекательных, удобочитаемых, бережно подобранных блоков информации, удерживающих внимание пользователя на любом экране. Так как утратить аудиторию несложнее несложного.
К примеру, небольшой шрифт в долгой строчке либо через чур маленькие строчки с большими буквами одинаково затрудняют чтение, хоть и по разным обстоятельствам.
В последнем случае нередкий разрыв строчка дробит текст на через чур маленькие для восприятия блоки, вынуждая перечитывать их по нескольку раз. И в каждом из примеров через чур долгая либо чересчур маленькая строка ведет к утрата интереса читателя.
Эти два примера наглядно демонстрируют сложность создания привлекательного отображения для небольшого текста, будь то долгая либо маленькая строка. В каждом из случаев текст сложен для восприятия и чтения.
Блоки текста, которые содержат ответственную данные, должны выделяться — переключая взор читателя с одного блока на другой возможно удержать его внимание до конца статьи. Кроме этого стоит придерживаться единообразия в оформлении схожих по значимости блоков текста. Каждые неоправданные отличия сбивают читателя с толку.
Не имеющий приоритета текст без какой-либо обстоятельства растянут на пара колонок — это неожиданное изменение ширины блока выглядит необычно и невразумительно.
- Секреты хорошей веб-типографики
Блочная верстка
В этом пункте собраны примеры, наглядно демонстрирующие, как блочная верстка воздействует на оформление текста, и как верное сочетание дизайна и типографики ведет к созданию привлекательного, интуитивного лендинга с наглядной структурой.
SILKTRICKY
Структура верстки SilkTricky — это шесть колонок, поделённых на карточки. Гарнитура заголовков контрастирует с более узким и красивым шрифтом Bookman Light Italic (в заглавии категорий над заголовками) и совсем другой визуальной архитектурой текста статьи (Futura Condensed Bold).
Существенно различаясь в начертании, толщине и размере, шрифты дополняют друг друга. Выделенный контраст каждой следующей строчка фокусирует внимание, нужное для восприятия текста на карточке.
По клику на карточку она медлено раскрывается до нескольких параграфов текста в двух колонках. Этого достаточно, дабы заинтересовать читателя, не нарушая структуры сетки. Больший количество главного текста формирует другую визуальный ритм и типографическую текстуру, сохраняя наряду с этим эффектный контраст с заголовками.
PERCUSSION LAB
Лендинг Percussion Lab не меньше действенно применяет гибкость и сетку её трансформации. Композиции участвующих в проекте музыкантов отображены в четырех колонках. Любой элемент сетки вписан в общую иерархию и структуру страницы и содержит данные о жанре и названии трека, дате загрузки и авторе.
По клику на ширину двух колонок раскрывается перечень дешёвых композиций и подробная информация о музыканте.
Шрифты с засечками и без, использованные в разных комбинациях размеров, насыщенности и начертаний, создают структуру страницы. Согласованность типографики и структуры сетки располагает к просмотру и поддерживает интерес визитёра.
THE NEW ART GALLERY WALSALL
Лендинг английской галереи The New Art Gallery Walsall применяет незатейливый санс-сериф, изменение размера которого в сочетании с невесомой простотой сетки выглядит только эффектно. Главный текст контрастно заполняет левую нижнюю часть страницы, оставляя пространство для меню и ссылок справа.
Незагруженная, однородная типографика и свободное пространство страницы отражают архитектурное ответ галереи, полезные коллекции, и приверженность идее, что мастерство должно быть дешёвым и приносить наслаждение.
- Как неудачные шрифты смогут убить конверсию лендинга
Шрифт, завлекающий пользователей
Вне всякого сомнения, смысловая нагрузка — наиболее значимая составляющая текста. Особенно, в случае если сообщение побуждает пользователя к действию либо направлено его заинтересованностям. Текст, что приводит к улыбке либо поднимает острую тему, кроме этого привлечет читателя.
Но, не только содержание, но и оформление текста — стиль шрифта, текстура, положение и разметка на странице — воздействует на решение визитёра. Верно подобранный шрифт может добавить убедительности и статье эмоциональности, выделить эстетику и уникальность продукта.
CROCKETTJONES
Примером прошлого утверждения помогает лендинг Crockett and Jones. Эта британская компания производит обувь ручной работы с 1876 года, и оформление сайта отражает сокровище традиций и наследия. Логотип с заглавием присутствует на каждой странице, шрифт заглавия содержит явные отсылки к викторианскому стилю.
Для главного текста использован Микрософт Georgia, данный шрифт тонко дополняет логотип и усиливает чувство приверженности традициям, качества, внимания и стиля к подробностям.
- Как выбрать верный шрифт для лендинга?
Сочетания гарнитур
сочетание и Подбор различных типов шрифтов для завершенного оформления лендинга — задача непростая. Данный процесс требует терпения для внимательности множества и тестирования вариантов для выбора лучшего сочетания. В данной категории отобраны сайты, каковые посредством отличного сочетания гарнитур и визуального представления усиливают привлекательность текста и подчеркивают содержащиеся в нем идеи.
FOUR SEASONS
броский контраст текстур в оформлении сайта Four Seasons реализован посредством разных стилей семейства Garamond и Helvetica. Мягкие, округлые заглавные и строчные литеры Garamond Italic тесно соседствуют со строгими вертикалями Helvetica Condensed. Данный контрастный визуальный ритм, сохраненный на каждой странице, олицетворяет стиль и структуру, уровень качества обслуживания и безукоризненную репутацию бренда Four Seasons.
Семейства Garamond и Helvetica включают множество стилей и начертаний, что делает их только нужными для многоуровневых структур.
BARCAMP OMAHA
Лендинг Barcamp Omaha продвигает новый вариант сотрудничества, что возможно обрисовать как неформальную встречу-лекцию для сотрудничества и общения. Главную площадь страницы занимают картины, контрастные шрифты шепетильно подобраны. Первый — жирный, чуть сжатый шрифт в верхнем регистре без засечек, и второй — такой же, но с засечками.
И первый, и второй несут ретро-отпечаток, характерный логотипам американских учебных заведений. Текст размещается на множестве маленьких панелей, жирность и цвет шрифта определяют важность информации и структуру восприятия.
WARHOL INITIATIVE
Лендинг Warhol Initiative — пример храброго подхода к типографике сайта. Сжатые шрифты смогут быть проблематичны для восприятия: нередкие вертикальные линии в сочетании с вытянутыми литерами смогут слиться в неразборчивый частокол. Дизайнеры Warhol Initiative весьма смело и с громадным мастерством сочетают шрифт с засечками с контрастным сжатым шрифтом.
Правильным подбором межбуквенного размера и расстояния шрифта обеспечивается удобочитаемость. текстура и Ритм сжатого шрифта придает ускорение взору, что скользит по компактной структуре текста от заголовка к подробностям. Сжатый шрифт идеально дополняет стиль эры Уорхола.
COMBADI
Типографику лендинга Combadi возможно легко отнести к нескольким пунктам данной статьи. База сетки лендинга — 12 колонок со множеством конфигураций на различных страницах. Но сочетание шрифтов остается самой эффектной находкой дизайнеров — Brandon Grotesque и Museo Slab филигранно подобраны и идеально выстраивают иерархию страницы.
Для главного текста употребляется брусковый шрифт Museo Slab, а вытянутые знаки с укороченными над- и подстрочными элементами в сочетании с широкими межбуквенными промежутками легко читаются. Текст, окрашенный в цвет логотипа, кроме этого собран в Museo Slab. Если сравнивать с ним шрифт Brandon Grotesque выглядит весьма несложным, чем и выделяет подзаголовки, меню и логотип Combadi.
ARIA
Типографика вебмагазина Aria представлена элегантным шрифтом с засечками. В курсивных заголовках возможно подметить необыкновенные строчные литеры «v» и «w» — намек на уникальность товаров данной онлайн-витрины. Наличие букв, выделяющихся из композиции шрифта, ограничивает применение параметра насыщенности (жирности).
Иерархическая структура передается использованием курсива и размером шрифта.
- 7 смертных грехов веб-дизайна
Промежутки: межбуквенные и межстрочные
Промежутки между символами и строками только серьёзны для удобочитаемости текста. Кроме того с совершенными параметрами шрифта восприятие статьи может оказаться на грани из-за неверного выбора промежутков. Ниже приведены примеры, демонстрирующие, что грамотная настройка межстрочного и межбуквенного расстояния делает текст более привлекательным и легким для чтения.
STL DESIGNWEEK
Лендинг конференции дизайнеров STL DesignWeek хорош упоминания не только из-за необыкновенного наклона элементов страницы: обратите внимание, как эффектно выглядит текст с совершенно верно подобранными межбуквенными и межстрочными промежутками.
Употребляется пара кеглей гарнитуры без засечек (большие заголовки сохраняют пропорции главного текста) со легко увеличенным межсимвольным расстоянием. Широкий межстрочный промежуток придает тексту воздушную легкость, увлекая в процесс чтения и создавая в целом комфортный пользовательский опыт.
THE BEETLE
Сайт, посвященный Volkswagen Beetle, демонстрирует дух автомобиля, ставшего знаком эры. Темперамент автомобили — надежной рабочей лошадки для всех и каждого — великолепно отражен в гарнитуре. С позиций типографики дизайн оформлен весьма легко — с применением только двух вариантов насыщенности гарнитуры Futura.
Простота шрифта очевидна, а в сочетании с выверенными межбуквенными и межстрочными промежутками она лишь подчеркивает демократичную политику бренда. Разрядка (увеличенное межсимвольное расстояние) придает заголовкам второй визуальный ритм, выделяющий их на фоне главного текста, и придает контенту брендированные элементы. Благодаря широким межстроковым промежуткам пользовательский опыт делается более комфортным.
I LOVE TYPOGRAPHY
Если вы еще не привычны с ресурсом I Love Typography, в обязательном порядке посетите его, поскольку любой человек, увлеченный дизайном шрифтов, отыщет в том месте большое количество увлекательного. На сайте представлено множество отличных гарнитур, в статьях вынесены правильные заглавия всех упомянутых шрифтов, к примеру FF Basic Gothic Web Pro, Le Monde Journal STD и Le Monde Sans STD.
их сочетания и Шрифты выбраны идеально, межстрочные и межсимвольные промежутки доведены до совершенства. В заголовках статей использован узкий шрифт без засечек с достаточно большими заглавными и строчными литерами. Внутрисимвольные просветы гармонично сочетаются с шириной буквенных штрихов.
Особенное внимание уделяется промежуткам в оформлении лида. Удачно подобранное расстояние разрешает взору просматривающего свободно скользить по строчку и переходить к следующей, вместе с тем вмещает отстоящие от текста пунктирные линии ссылок. Обозначения ссылок довольно часто видятся в тексте и расположены существенно ниже базисной линии шрифта чтобы не было пересечения с нижними и верхними элементами букв.
Посредством промежутков создаются контрастные участки текста, создающие структуру иерархии. Так читателю легче выделить главные моменты и просмотреть контент. В целом текст воспринимается как складывающийся из контрастных частей, составляющих неспециализированную структуру.
Трансформации размера шрифта
Значительно чаще изменение размера употребляется для обозначения структуры текста либо выделения серьёзного момента. Один из самые популярных способов выделения — жирный большой шрифт в заголовках и яркий и небольшой — для главного текста. Следующие примеры демонстрируют более уникальные подходы.
DESIGN WALLER CREEK: THE FINAL FOUR
Ниже приведен пример создания структуры страницы при помощи трансформации размера шрифта. Четыре строки достаточно большого шрифта под картиной формируют лид, главный текст применяет тот же шрифт, но значительно меньшего размера. В последующем заголовке употребляется шрифт того же размера, что и в лиде, но не таковой насыщенный, более узкий и яркий.
Следующий участок текста — маркированный перечень — снова возвращается к параметрам шрифта главного текста.
не меньше примечателен и тональный рисунок: главной текст в основном серого тона. достаточно насыщенный и плотный, а заголовки, служащие указателями раздела, выполнены более узким брусковым шрифтом, схожим с цветом главного текста.
CARAVUS
Типографика сайта Caravus занимательна во многих отношениях, но как раз игра с размером шрифта заслуживает отдельного внимания. Сложная структура сайта легко совершенна для упражнений в резких изменениях и насыщенности размеров. Тут начинаются отличия от типовой схемы с мелким текстом и жирными заголовками.
Заголовки применяют узкий брусковой шрифт, контрастирующий с более небольшим и плотным главным текстом.
Цитаты, статистика и другие серьёзные факты выделяются увеличенным шрифтом либо сочетаются с цветной заливкой. Это скорее картины с текстом, деятельно завлекающие внимание и создающие запоминающуюся структурную модель. Нисколько не умаляя важности визуального восприятия лендинга, разработчики сделали его базой иерархии ресурса: насыщенность, цвет и размер текста формирует тона страницы и контраст текстур.
Заключение
Типографика — один из замечательнейших инструментов веб-дизайна. Подходите к выбору типографических средств взвешенно и с опаской — успешный выбор усилит эффект маркетингового сообщения и выделит сокровище бренда.
Высоких вам конверсий!
По данным: smashingmagazine.com, image source Helene Villeneuve
Случайные статьи:
Крутой Лендинг на WordPress за 43 минуты
Подборка похожих статей:
-
Необходимая и достаточная детализация как инструмент повышения конверсии лендинга
На каждой конференции либо бизнес-завтраке, где я выступаю, хоть раз да разгорается спор на одну из двух тем: лендинги не трудятся; контекстная реклама в…
-
Электронная книга (ebook) как инструмент повышения конверсии лендинга
Уже сейчас продажи электронных книг превышают выручку от бумажных изданий — люди полюбили eBook, поскольку это скоро и комфортно. без сомнений, это…
-
Типографика email писем. древнее искусство для современного инструмента маркетинга
Типографика email — это графическое оформление печатного текста письма при помощи вёрстки и набора с применением правил и норм, своеобразных для…
-
Сплит-тест: повышение rpv через редизайн товарного лендинга
В сегодняшнем выпуске будет рассмотрен тест, направленный на оптимизацию показателей товарного лендинга. Тестирование было совершено брендом CoxCox —…