Что нового в веб-дизайне? Нарезанный текст.

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

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

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

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

Традиционная нарезка

Нарезанный текст

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

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

Нарезка текста и фотографий

Нарезанный текст

Ранее я уже описывал Секреты сочетания фотографий и текста в веб-дизайне, сегодня раскрою еще один. Крутого эффекта нарезки можно добиться сочетанием фотографии и текстового элемента.
Хорошим примером, является изображение выше, которое представляет деление изображения на равные элементы и создает основу для текста. Такой дизайн смотрится необычно и вовлекает пользователя.

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

Нарезка с анимацией

Нарезанный текст

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

Нарезанный текст для логотипа

Нарезанный текст

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

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

Интерактивность

Нарезанный текст

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

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

Вертикальные штрихи

Нарезанный текст

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

Акцент на надписи

Нарезанный текст

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

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

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

Создание нарезанного текста в Adobe Illustrator

Как нарезать фрагмент текста с помощью CSS

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

Обсуждение закрыто.