 |
Прямолинейные действия и от позы к позе
|
|
|
|
Проскальзывающие и перекрывающие действия
Плавное начало и окончание движения
Дуга
Второстепенное действие
Расчет времени
Преувеличение
11. Уверенный рисунок
Привлекательность
Чтобы увидеть эти принципы в действии, аниматор Сенто Лодигиани воссоздал каждый из них в виде GIF, используя простые фигуры.
Атрибуты web-анимации
Анимация не является моделью UI. Это не то, что вы можете просто влепить куда-нибудь на сайт. В приложении анимация ближе к цвету: она может быть везде и ее эффекты пронизывают весь сайт.
Фото: Tannbach
Фото: BMW
Для начала, мы можем разбить веб анимацию на 2 группы в зависимости от размера и ее роли:
• В миниатюрном формате анимации, как например, индикатор загрузки, меню загрузки, счетчики или при наведении курсора, практически не требуют действий пользователя.
• Анимации, такие как первостепенный инструмент взаимодействия, например parallax scrolling и всплывающие сообщения, играют более важную роль и их влияние более заметно для пользователей.
Общим между этими двумя группами является то, какое значение они несут внешнему виду интерфейса (мы поясним его практическое значение немного позже). Анимация при рассказе истории, неважно, очевидная, или еле заметная, может добавить эмоций даже простоватому интерфейсу.
Например, Humaan использует анимированный фон, активируемый скролом и постепенно раскрывающийся текст (по мере появления содержимого), чтобы придать особенность и живой вид тому, что совсем по-другому выглядит, чем просто страница «О нас».
|
|
|
Фото: http://humaan.com/about/
Одним из ключевых компонентов для всех анимаций является управление временем. Для анимации, которая инициируется пользователем, вы обычно хотите, чтобы эффект активировался в пределах 0.1 секунды, что придает ощущение, что интерфейс откликается. Мы следуем этому правилу и сами, как вы можете увидеть в этом превью проекта UXPin.
Фото: UXPin
После прокрутки на следующий экран, в течение 300 мс появляется форма предложения о подписке. Мы не устанавливали задержку на сам скрол до тех пор, пока он прямо не запустится действием пользователя, но мы добавили дополнительное время к последующему переходу анимации, чтобы избежать эффекта дрожания.
8 Популярных техник анимации
Для целей этой книги мы разбили области анимации на 8 групп, и представим лучшие примеры реализации для каждого из них.
1. Анимация загрузки
Одним из самых старых применений анимации для веба было отвлечь пользователя во время ожидания загрузки. Как мы говорили в книге Интерактивный дизайн. Лучшие практики: книга вторая:
Наилучший вариант сценария, когда анимация заставляет пользователей думать о ваших технологиях продукта лучше, чем это есть на самом деле. Худший вариант сценария, когда ваши пользователи получают удовольствие, наблюдая за чем-то в процессе ожидания, улучшая общее пользовательское впечатление.
Даже если время загрузки короткое, такие анимации все же добавляют немного изысканности или, по крайней мере, развлекают пользователей, пока они ждут. Благодаря этому, анимация загрузки достаточно популярна во флэтдизайне, минимализме, портфолио и одностраничных сайтах - для всех, кто является простым по своей сути и может использовать импульсы для стимуляции.
Фото: http://tomcolearchitect.com/
Посещая сайт Tom Cole Architecture, перед пользователем оказывается черный экран и в один момент множество белых линий начинают двигаться и «писать» логотип и название марки. В другой момент становится видимым фото на заднем плане и пользователям доступны элементы навигации. Этот сайт сам по себе простой и не нуждается в анимации загрузки, но тем не менее этот мгновенный эффект красивый, пользователям приятно и это привлекает их использовать сайт.
|
|
|
Помните, что лучшая анимация загрузки – когда она простая. Излишние эффекты, такие как звуки, вовсе не являются необходимыми. Анимация должна соответствовать особенностям сайта, будь то минимальный, яркий, элегантный, пр.
2. Навигация и меню (не прокрутка)
Для того, чтобы сохранить пространство, последним трендом является скрывание панели меню, которая сама по себе всплывает при нажатии на кнопку, например, иконка гамбургера. Для таких анимаций существенно важно установить связи между ними двумя и предотвратить резкий переход.
Нажмите на кнопку в виде круговой стрелки на Brian Hoff Design и появится панель меню справа. Выскакивающая анимация заставляет появиться меню, как будто оно выезжает из-за пределов экрана и делает все взаимодействие плавным.
Фото:: http://www.brianhoffdesign.com/
Фото:: http://www.brianhoffdesign.com/
Анимация гамбургер-кнопки не является единственным вариантом, хотя – креативные дизайнеры используют навигационные элементы, такие как слайдеры и панели, чтобы также разделять их.
Анимация также может хорошо представлять индикацию изменений. Как описано в Web UI Patterns, наведение - это на самом деле один из наиболее популярных приемов, чтобы показать изменения в интерфейсе объекта.
Кнопка или картинка может выглядеть по-одному, когда веб сайт загружается, но по-другому, когда пользователь с ним взаимодействует, как например, при наведении курсора на элемент. Это небольшое изменение помогает пользователям лучше понять, как использовать веб сайт, открывая соответствующие действия без необходимости занимать дополнительное пространство.
3. Наведение курсора
Для того, чтобы показать, что элемент является интерактивным, эффекты при наведении курсора – это один из наиболее прагматичных способов использования анимации. В большинстве случаев, это единственный способ показать, что кнопка или часть текста являются кликабельными. Когда пользователь сомневается относительно функции элемента, они обычно наводят на него мышь и при этом элемент изменяется.
|
|
|
Фото: http://www.alectia.com/en/
При наведении курсора на любую карту на сайте Alectia, изображенного выше, вызывается анимация в пределах этой карты. Анимация маленькая – всплывает текст заголовка и идентичный текст появляется и заменяет карту (и то же самое происходит со стрелкой "читать далее") - однако этого достаточно, чтобы показать функциональность карты.
Источник: UXPin
Мы и сами это используем в нашей Free eBook Library, где при наведении курсора выпадает загруженная картинка из верхней части и над кнопкой появляется текст «получить бесплатно». Это служит для нескольких целей – это показывает, что, только нажав на карту, инициируется процесс загрузки, это привлекающий внимание призыв к действию, и это создает приятное ощущение от взаимодействия с сайтом.
4. Галереи и слайдшоу
Шаблоны слайд-шоу и/или анимированные галереи является одним из самых распространенных видов веб-анимации, но, тем не менее, эффективны при демонстрации нескольких изображений содержимого не перегружая пользователя.
Фото: http://www.bigactive.com/
Как быстро и как много циклов изображений будет сделано – зависит от задумки дизайнера, но эти решения не следует воспринимать легкомысленно - даже незначительное увеличение скорости, с которой меняются изображения, может вызвать нежелательные ощущения, будто сайт «несется» куда-то.
Еще необходимо обдумать, сколько применять скевоморфизма. Эта модель по своей сути имитирует просмотр страниц в фотоальбоме- но вопрос в том, сколько внимания вы хотите привлечь к этому.
5. Привлечение внимания
Любой биолог скажет вам, что человеческий глаз привлекает движение. Это делает анимацию прекрасным инструментом для привлечения внимания и контроля вашей визуальной иерархии, в отличии от сайта на котором только статические картинки.
|
|
|
Анимации это прекрасный способ добавить интриги формам, призывам к действиям, или даже пунктам меню. Чтобы увидеть эту силу, посмотрите на сайт Джона Иаковелло MY/STATIC/SELF:
Фото: http://mystaticself.com/
Куб в центре тихо скачет и мерцает, ясно давая понять, что он является самым интересным элементом на сером экране. Каждый из слоев этого куба представляют собой ссылку на разные страницы - те же страницы четко и понятно отображаются в верхнем меню навигации.
Как вы думаете, какой набор навигационных ссылок пользователи предпочитают использовать?
6. Прокрутка
Позже в следующей главе мы обсудим прокрутку, здесь мы упоминаем о ней в связи с тем, что она используется для анимации. Плавная прокрутка просто не может существовать без нее. Одним из главных преимуществ прокрутки является то, что она позволяет пользователю контролировать перемещение, и благодаря этому анимация определяет темп, в котором все двигается.
Фото: http://forbetter.coffee/
Вебграфика For Better Coffee использует параллакс прокрутку, чтобы перечислить советы по созданию лучшего кофе, одновременно развлекая пользователя интерактивным визуальным путешествием боба, превращающегося в кофе (в приятном плоском стиле дизайна).
Лучшая часть сайта – это вовсе не совет, это наблюдение за анимацией, которая представляет кофейное зерно, переходящее от одного этапа к другому. Как пользователь, который контролирует прокрутку, вы чувствуете полное погружение в представленный рассказ.
7. Движение страницы
От функций AJAX loading до простых эффектов или мультфильмов, движение всей страницы это, конечно, захватывающий эффект. Движение страницы немного сложнее в реализации, но хорошо подходит для статического контента, чтобы придать ему больше динамики.
Фото: http://www.hungercrunch.com/
На сайте Hunger Crunch, каждое малейшее движение мыши переключает фоновую картинку, и это, в сочетании с разделением слоев, создает интересный эффект, который имеет смысл для игрового сайта.
При применении этой тактики, будьте осторожны с использованием слишком большого количества загружающихся элементов - они могут привести к тому, что сайт будет работать медленно.
8. Анимация фона
В то время как чрезмерная анимация отвлекает внимание, скромная анимация фона может добавить вебсайту немного жизни. Ключевой идеей является умеренность – отдельные участки в единицу времени, или, возможно, плавное движение целой картинки.
|
|
|
Давайте посмотрим на сайт Terna. Анимированный фон выбран для представления городской суеты, в разных частях картинки появляются разные движения с разными интервалами. Это создает атмосферу «занятости», при этом не перегружая пользователя.
Фото: http://trasmissione-energia.terna.it/
Как и в других областях анимации, тут рекомендуется простота. Помните, что каждое движение на экране будет привлекать внимание, поэтому слишком много анимации может создать хаос.
Взгляд вне времени
Как мы обратили внимание в начале, вскоре анимация будет не просто дополнительной функцией. В то время как умная анимация – это хлеб с маслом для для портфолио вебдизайнеров, средство продемонстрировать их талант, в ближайшем будущем мы увидим, как анимация будет применяться также и в других более «традиционных» сферах деятельности.
Анимация больше не является синонимом мультфильма, поэтому все больше профессиональных индустрий, таких как финансовая или медицинская, все больше используют улучшенный стиль.
Фото: http://avenirclinic.com/
Исторически сложилось, что стоматология – это индустрия, которая ведет себя консервативно. Поэтому стоматологическая клиника L’Avenir Dental Clinic использует консервативные анимированные эффекты: прокрутка, активизирующая открытие новых окон. Нет необходимости в энергичных значках или причудливо движущемся тексте.
Электронная торговля тоже может воспользоваться анимацией для практических целей - а именно 360-градусный поворот изображения товаров. Это дает пользователю получить больше представления о товаре при покупке онлайн, что пока остается одним из преимуществ перед привычной покупкой.
Фото: https://www.fleetfeetsports.com/
Сайты электронной коммерции могут также получить преимущества обычной веб анимации. Когда вы покупаете товар на сайте Fleet Feet Sports, забавная анимация уменьшает фото продукта и перемещает его в вашу корзину. Это делает интерфейс более отзывчивым и также добавляет покупателю удовольствие от того, что он выбрал этот продукт.
Фото: http://www.google.com/design/spec/material-design/introduction.html#
Чем больше дизайнеры поддерживают философию Google’s Material Design, тем их отношение к этой технике будет становится более заметным.
Документация описывает анимацию так:
Также как форма объекта указывает на его возможное поведение, наблюдая за демонстрацией движения объекта можно понять легкий он или тяжелый, гибкий или тучный, маленький или большой. В мире материального дизайна, движение описывает пространственные отношения, функциональность и назначение при помощи красоты и плавности движений.
Не только анимация расширяет спектр отраслей, также развивается ее применение. Многообещающим трендом становится анимированная фотография как средство, объединяющее анимацию с реализмом.
Фото: http://lookbook.bolia.com/chilling/
Bolia сочетает настоящую фотографию и скролинговую анимацию, чтобы погрузить своих пользователей в их онлайн ощущения. Это размытие линий реальности приобретет популярность, как только до этого дойдут технологии.
В настоящее время, анимация доказала свою жизнеспособность в областях применения намного старше, чем веб-дизайн. Благодаря ее стабильности, она продолжит укореняться в индустрию дизайна – с единственной разницей, насколько это смогут позволять технологии.
Используйте современную анимацию в вашем дизайне с UXPin
10 Бесплатных ресурсов и инструментов
1. 12 Принципов анимации видео – Видео Сенто Лодиджиани иллюстрирующее 12 принципов из Иллюстраций жизни: Анимация Диснея.
2. Шпаргалка по анимации в CSS3 – Это полезная коллекция заготовок готовых к использованию анимаций позволит вам применять заготовки CSS классов для любых элементов, которые захотите.
3. Веб анимация – Часто обновляемое руководство по синхронизации и управлению временем для анимации на веб-страницах и API.
4. “Разрушение мифов: CSS анимация и JavaScript” – Обсуждение хитростей самого лучшего метода анимации
5. “Веб анимация в действии” – Статья от A List Apart, объясняющая как анимации теоретически в дальнейшем расширяют другие техники дизайна.
6. “15 уроков анимации” – Руководство по веб-анимации от UltraLinx, предназначенное для начинающих.
7. Гибкие SVG элементы – Полезная инструкция для создания SVG фигур анимации.
8. Лучшие инструменты для создания анимации – Перечень и анализ 15 популярных инструментов анимации.
9. Transit – Загружаемый jQuery плагин для улучшения CSS переходов и трансформаций.
10. Галерея примеров анимации в материальном дизайне – галерея стоящих анимаций в материальном дизайне для вдохновения.
Выразительное оформление
Фото: Adidas via awwwards
Выразительный текст – шрифты, размеры и эффекты, которые выступают как стилистические элементы сами по себе – быстро становятся нормой для веб интерфейсов.
Оформление текста используется не просто для того, чтобы обеспечить удобочитаемость. Простой или сложный, большой или маленький, текст на сегодняшних сайтах читается в совершенно новом свете. В этой главе мы рассмотрим, как делать дизайн оформления эффективно, что популярно и почему, и чего следует избегать при выборе того, как будут выглядеть ваши слова.
Фото: Noveske
Определение выразительного оформления
Прежде всего, давайте уясним, что выразительное оформление текста и простой текст не исключают друг друга. На самом деле, упрощение оформления текста является одной из наиболее популярных форм создания выделяющихся надписей в данный момент. Чтобы определить выразительное оформление, мы просто скажем, что это оформление, которое выделяется каким-либо образом.
В текущем тренде, мы можем обозначить элементы, находящие наибольшее отражение в выразительной типографике:
• Экстремальные размеры (большие и маленькие)
• Наложение на изображение
• Творческое использование простых шрифтов
• Пользовательские шрифты
• Художественные шрифты
Фото: Vimeo
Обратите внимание, что эти стили обычно сочетаются друг с другом практически без каких-либо ограничений.
Основы оформления
Главное в шрифте надписи - это то, как он используется и насколько хорошо он выглядит. Это объясняет, почему мы в последнее время видим, что простые и внешне скучные шрифты хорошо справляются с задачей привлечения нашего внимания.
Лучше всего начать с основ: для начала ознакомиться с такими понятиями как категория шрифта, семейство шрифтов (гарнитура) и формы букв.
Фото: White Frontier Brewery via awwwards
Категории шрифта различаются по начертанию, структуре и стилю написания букв. Наибольшие группы представлены типами шрифтов с засечками (серифами) и без засечек (сансериф), который наиболее популярен в текущей тенденции простоты. Засечки – это такие особенные украшения по краю каждой линии буквы, а санс – означает «без».
Источник: “ I shot the serif. ” Tom Gabor. Creative Commons.
Гарнитура шрифта – это просто все вариации выбранного шрифта. Разные формы включают обычное начертание, жирное наклонное, подчеркивание, черный цвет и иногда что-то еще.
В контексте типографики, линия символа относится к ширине каждой строки. Совместное использование единой линии в одной и той же гарнитуре кажется текущим трендом, так как однотипная линия более разборчива при различных параметрах настройки и контраста экранов.
Для того, чтобы лучше узнать о применении основ типографики, включая некоторые важные правила и основные принципы, загрузите бесплатно Web Design for the Human Eye, Book 2. (Веб дизайн для человеческих глаз, Книга 2)
Доступность шрифта
Движущей силой выделяющегося оформления текста является повышение доступности шрифтов для массового использования.
Фото http://packdog.com/
Все больше шрифтов доступны за меньшие деньги – или вообще бесплатно на Google Fonts. Во всех приложениях Adobe Creative Cloud plans, они используют их Typekitсервис.
Фото: Spotify
Эта доступность также относится к дизайнам, основанным на шаблонах, таких как WordPress, где пользователи могут получить доступ к такому же объему функций, как и самодельные сайты. Что касается рендеринга шрифта, совершенствование современных браузеров и интерфейсов оставляют такие проблемы использования шрифта в прошлом.
Использовать бокс или безопасные вебшрифты из набора – это прекрасная возможность, если вам не всегда нужно выбирать наиболее общепринятый шрифт. На сегодняшний день наиболее распространенными являются:
Шрифты без засечек:
• Proxima Nova
• Futura
• Avenir
• Open Sans
• Helvetica Neue
Шрифты с засечками:
• Caslon
• Garamond
• Freight Text
• Minion
• FF Meta Serif
Для того, чтобы больше узнать о том, на чем можно сосредоточить ваши усилия при выборе нужного шрифта, читайте статью Дугласа Боневиля в Smashing Magazine Как выбрать шрифт.
С основами мы разобрались, давайте посмотрим на способы, которыми оформление текста в настоящее время делает свой вклад.
Экстремальные размеры
Итак, вы выбрали гарнитуру шрифта, с которой будете работать, и теперь предстоит обсудить ее размер. В последнее время популярны экстремальные размеры: как очень большие, так и совсем маленькие.
1. Большой шрифт
Большие шрифты шлют мощное и уверенное сообщение, когда применяется в сочетании с крупными (так называемыми героическими) картинками.
Фото http://www.getzeroapp.com/
Этот стиль обычно следует некоторым одним и тем же основным принципам:
• Большие пропорции и ширина по отношению к другим элементам экрана
• Шрифт больше чем 85 пт.
• Прописные буквы или чрезмерно толстые линии символов
Мы также заметили некоторые тенденции в этом тренде.
Часто слова разрежены, чтобы заполнить весь экран. Цвет слов обычно белый – он хорошо контрастирует на фоне картинки или яркого фона. Вдобавок, иногда добавляются тонкие шрифты с засечками, чтобы создать динамический контраст к толстым буквам. Мы также видим слова, отличающиеся по размеру, но все равно при этом большие.
Фото: Squarespace
Фото http:// junduffy.co.nz/
Фото: gogoro
Фото: Adventure via awwwards
Этот тренд очень популярен, поэтому вы можете не бояться добавить немного креатива. Попробуйте использовать различное расположение: справа или слева, избегая при этом выравнивания по центру. В этом размере, ваше сообщение конечно будет жирным, поэтому заглавные буквы вовсе не обязательны. И последнее, правильно подобранное свои цвета могут придать вашему сайту уникальность и индивидуальность.
Одна из техник, которую мы считаем полезной для дизайна – это громадный тип шрифта, начинайте с настолько большого – что даже станет некомфортно, затем начните уменьшать его размер, пока не найдете то, что нужно. Вы можете обнаружить, что выбрали размер намного больше, чем ожидали изначально.
2. Маленький шрифт
Как тихий голос, который звучит громко, некоторые дизайнеры обращаются к чрезвычайно маленькому шрифту надписей. Если другие элементы на экранах не заслоняют их, маленькие слова воспринимаются также хорошо, как и большие.
Фото: http://www.mikiyakobayashi.com/
Фото: Revelator
Стратегии применения больших и маленьких размеров шрифта немного различаются. Маленькие буквы обычно черного цвета и они используются в сочетании с преувеличенным негативным пространством. Хотя и те, и другие буквы обычно используют толстые линии.
Маленькие надписи работают хорошо на картинках в стиле hero image, поскольку контраст интригует и минимальное пространство, которое занимает текст, позволяет лучше оценить содержание картинки.
Фото: Under Armor
Фото: http://www.wearetopsecret.com/
Иногда маленькие буквы нужно немного дополнительно украсить, чтобы они были заметными. Используя такое украшение, как контрастный цвет или простая анимация (как на сайте Under Armor’s storytelling site), можно быть уверенным, что его будет видно. Окружение текста негативным пространством также достаточно хорошо работает.
Наложение поверх картинок
Дни, когда картинки и текст были двумя отдельными элементами, прошли. Сегодня наложение текста на изображения может усилить как текст, так и картинку.
Фото: http://aiaiai.dk/
Два главных принципа этого стиля - это контраст и разборчивость (удобочитаемость). То место, где на картинке появляется текст, влияет и на текст, и на картинку, и дизайнер должен почувствовать, где контрольная точка на разных устройствах. Проверьте все расположения, чтобы определить, где текст будет наиболее видимым, не заслоняя наиболее важные части картинки, такие как лица или название товара/бренда.
Фото: Reebok via awwwards
Еще одна проблема в том, чтобы текст и картинка не вносили путаницу. Спортивный фотограф накладывает свое имя на свое лучшее фото - изображение Тома Брэди – и вы можете понять неправильно чье это имя, фотографа или спортсмена.
Креативное использование простых шрифтов
Как и с другими элементами дизайна, экспериментирование с текстом и шрифтом могут принести некоторые прекрасные преимущества, если Вы готовы пойти на риск. Например, мы просто говорили о текстах в картинках, а как насчет картинок в тексте:
Фото: http://anjarubik.mohito.com/en/
Вам не нужно следовать трендам, используя шрифт надписей незабываемым способом. Фактически, изобретение вашего собственного креативного способа - это самый наилучший путь, чтобы наверняка выделится, и пока ваша идея звучит - вы тестируете насколько это подходит пользователям. Просто помните, что удобочитаемость – это первоочередная цель, поэтому не делайте ничего такого, что будет нести угрозу, что значение слов останется непонятным.
Фото: http://hotelmoscow.info/
Креативная надпись, по своей природе, интересна сама по себе. Вот почему лучше всего сочетать ее с простым и ненавязчивым фоном, например, одноцветной заливкой, как в приведенных выше примерах. Вы же не хотите загромождать экран большим количеством броских элементов, которые будут конкурировать за внимание вашего пользователя.
Пользовательский шрифт
Пользовательский шрифт может оказать такой же эффект, как и креативный, даже при использовании простых букв – это даже лучше, учитывая, что его возможно в дальнейшем использовать для идентификации бренда и персонажа. Разработка вашей собственной системы шрифта – это один из беспроигрышных вариантов, гарантирующих, что вы будете особенными.
Однако, вы можете обнаружить, что применить свой собственный шрифт несколько сложнее, чем это может показаться.
Фото: http://studiokraftwerk.com/
Прежде всего посмотрите на свой шрифт, насколько он соответствует особенностям вашего бренда и атмосфере сайта – иначе, в чем тогда его смысл? Дальше, его нужно использовать умеренно. Злоупотребление пользовательским шрифтом понизит его достоинства: попытайтесь ограничить его использование только в заголовках, коммерческих предложениях, слоганах и т.д. и избегайте массивных блоков текста. И последнее, помните о совместимости: пользовательский шрифт должен работать для всех браузеров и устройств.
Фото: Maaemo via awwwards
Художественныешрифты
Некоторые шрифты предназначены исключительно для внешнего вида. Блоки текста, написанные таким шрифтом, выглядят скорее, как графические элементы веб-макета, чем как текст. Хотя, для некоторых сайтов, это может быть, именно то, что нужно.
Фото: http://rsq.com/
Это классическая стратегия типографики, та, что использовалась в рекламных постерах десятилетиями. Цена за такой внешний вид – плохая разборчивость и удобочитаемость и снижение восприятия смысла слов сообщения. Тем не менее, для художественных целей, это украшение может быть уместно.
Фото: Vimeo
В качестве прекрасного компромисса, вы можете использовать тип шрифта, который одновременно разборчивый, легко читаемый и декоративный (вот как на сайте Vimeo написано слово «Cameo»).
Старайтесь избегать часто используемых художественных приемов, таких как облако слов, или слова, втиснутых в фигуру, которую они обозначают. Эти клише отвлекают внимание и мешают достичь того, что вы хотите, и из-за того, что художественные шрифты имеют собственные недостатки, вы должны сделать все, чтобы удостовериться, что их применение того стоит.
Комбинированные техники
Методы, которые мы перечислили выше, не являются взаимоисключающими. Если вы знаете, как правильно сочетать определенные техники, вы можете использовать преимущества каждой из них или использовать сильные стороны одной, чтобы смягчить недостатки другой.
Фото: http://www.vintagehope.co.uk/
Множество техник комбинирования основаны на здравом смысле. Например, если вы размещаете картинку внутри текста, постарайтесь немного увеличить контрастность текста (иначе картинка может заглушить текст).
Также подумайте о том, какие именно техники не будут сочетаться вместе. Например, художественные шрифты, по сути, бросаются в глаза, поэтому их лучше использовать непосредственным образом. Не пытайтесь использовать картинки в декоративных шрифтах. Представьте, как трудно было бы прочесть заголовок для сайта Anja Rubik, если бы главный заголовок был бы написан курсивом и заполнен к тому же изображением модели.
Фото: http://sendamessage.to/
Send a Message (выше) сочетает техники практичным способом. Он начинается с маленького, простого текста, чтобы отвлечь внимание от него самого на содержащуюся в нем картинку. После взаимодействия с сайтом, появляется текстовое сообщение, которое является самым главным на этом сайте. Оно написано большим шрифтом и совмещено с картинкой – две стратегии для переключения внимания от картинки обратно к тексту.
Взгляд в будущее
Выразительное оформление шрифта не столько тренд, сколько стратегия, которая переосмысливает себя каждые несколько лет. Техники, описанные выше, просто несколько вариантов того, как многие дизайнеры используют типографику.
Фото: Orangina
В общем, хорошая текстовая надпись всегда отвечает таким целям:
• Несет сообщение при помощи текста
• Работает в сочетании с другими дизайнерскими тактиками
• Соответствует технологическим требованиям (то есть, совместима с браузером и интерактивным дизайном)
• Создает незабываемые впечатления
Сегодняшние тенденции текстовых надписей соответствуют этим целям, но как они будут адаптироваться, чтобы соответствовать следующей эре дизайна?
Фото: http://floatpasadena.com/
Можем почти достоверно сказать, что дизайнеры продолжат использовать очень выразительный текст. Они могут, правда могут, вернуться к трендам, которые казались когда-то в духе «это уж слишком».
Например, мы возможно начнем замечать больше цвета и меньше белых букв. Больше дизайнеров могут сделать выбор в пользу прозрачности или 3D эффектов при создании выразительных форм букв. Переключение от сверхтонких к более широким линиям букв также может иметь место. Буквы могут также включать больше базовых или простых анимаций или служить в качестве части большой схемы пролистывания или других элементов интерфейса.
Начните использовать вашу бесплатную версию уже сейчас
10 Бесплатных ресурсов и инструментов
1. WhatFont – Онлайн ресурс, который рассказывает вам какой шрифт используется на выбранном сайте.
2. “Выбор веб-шрифта. 15 подсказок от экспертов” – Совет отCreative Bloq о том, как выбрать наилучший шрифт для вашего сайта.
3. Typewolf – Сайт, посвященный веб-шрифтам, применяющимся на сайтах, анализ и статьи от экспертов.
4. “8 подсказок для шрифта для веб-сайта” – Подсказки по выбору шрифта для вашего сайта от Font.com.
5. FFFFallback – Полезный инструмент, который тестирует совместимость выбранных вами шрифтов и даже предлагает альтернативы.
6. “Становитесь больше, используя шрифт” – Руководство от DesignModo специально по использованию огромных шрифтов с примерами.
7. Awwwards Typography in Web Design Gallery– Победители и обладатели наград за выбор шрифта надписей на сайтах – обновляется постоянно.
8. “25 Удивительных учебников по шрифтам” – Коллекция учебных материалов от Top Design Mag для того, чтобы показать вам, как оживить ваш сложный выбор шрифтов.
9. Красивая веб печать – Список примеров из жизни прекрасной печати текста от Google Fonts.
10. “41 лучших бесплатных Web-шрифтов 2015
