Хорошие примеры 12
Эти примеры обсуждаются в видео и других материалах ноды.
-(Good)-03%402x.avif)
-(Good)-12%402x.avif)
Bogdan Nikitin for Nixtio
-(Good)-01%402x.avif)
-(Good)-05%402x.avif)
-(Good)-06%402x.png)
-(Good)-11%402x.avif)
-(Good)-08%402x.avif)
-(Good)-02%402x.avif)
Bayu Aji Sadewa for Korsa
Текстовый блок — это базовый элемент в веб-дизайне, смм, интерфейсах и печати: набор заголовков, абзацев, кнопок, списков и пр., нанизанных на линию выключки.
Запись в блоге, текст отзыва, абзац продуктовой фичи с иконкой — если линия выключки общая, то всё это текстовые блоки.
Вы научитесь собирать текстовые блоки с четкой структурой, идеальными пропорциями и отступами.
Раз и навсегда освоив их анатомию, вы будете красиво и понятно дизайнить экранные тексты в 90% реальных ситуаций.
02
59
59
Сделать в Фигме три фрейма размером 800×800 px, а в каждом — по текстовому блоку.
Блок может состоять из иконки, фотки, заголовка, подзаголовка, тега, лида, основного текста, кнопки или кнопок, ссылок и пр. В каждом — по пять разных элементов (или больше).
Это может быть абзац про фичу продукта, рекламный текст для креатива, отзыв, текст для первого экрана сайта и пр.
Сам блок на фрейме может быть какого угодно размера.
Все три блока должны быть максимально непохожи друг на друга: разный состав, разные стили, цвета и шрифты.
Выровняйте один из них по центру.
-(Good)-07%402x.avif)
-(Good)-10%402x.avif)
-(Good)-04%402x.avif)
-(Good)-13%402x.avif)
-(%D0%90%D0%BD%D0%B0%D1%82%D0%BE%D0%BC%D0%B8%D1%8F%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%B3%D0%BE%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%B0)-v01%402x.png)
.svg)
-(%D0%92%D1%8B%D1%80%D0%B0%D0%B2%D0%BD%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5%20%D0%B2%C2%A0%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%BE%D0%BC%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%B5)-v01%402x.png)
-(%D0%A0%D0%B0%D0%B7%D0%B1%D0%BE%D1%80%20%D1%85%D0%BE%D1%80%D0%BE%D1%88%D0%B8%D1%85%20%D0%B8%C2%A0%D0%BF%D0%BB%D0%BE%D1%85%D0%B8%D1%85%20%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80%D0%BE%D0%B2)-v01%402x.png)
-(%D0%A2%D1%80%D0%B0%D0%BD%D1%81%D1%84%D0%BE%D1%80%D0%BC%D0%B0%D1%86%D0%B8%D1%8F%20%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D1%8B%D1%85%20%D0%B1%D0%BB%D0%BE%D0%BA%D0%BE%D0%B2)-v01%402x.png)
-(Bad)-04%402x.avif)
-(Bad)-05%402x.avif)
-(Bad)-03%402x.avif)
-(Bad)-02%402x.avif)
-(Bad)-01%402x.avif)
-(Wrong)-01%402x.avif)
