Прямолинейные действия и от позы к позе
Проскальзывающие и перекрывающие действия
Плавное начало и окончание движения
Дуга
Второстепенное действие
Расчет времени
Преувеличение
11.Уверенный рисунок
Привлекательность
Чтобы увидеть эти принципы в действии, аниматорСенто Лодигиани воссоздал каждый из них в видеGIF, используя простые фигуры.
Атрибуты web-анимации
Анимация не является моделью UI. Это не то, что вы можете просто влепить куда-нибудь на сайт. В приложениианимация ближе к цвету: она может быть везде и ее эффекты пронизывают весь сайт.
Фото: Tannbach
Фото: BMW
Для начала, мы можем разбить веб анимацию на 2 группы в зависимости от размера и ее роли:
• Вминиатюрном форматеанимации, как например, индикатор загрузки, меню загрузки, счетчики или при наведении курсора, практически не требуют действий пользователя.
• Анимации, такие как первостепенный инструмент взаимодействия, напримерparallaxscrollingи всплывающие сообщения, играют более важную роль и их влияние более заметно для пользователей.
Общим между этими двумя группами является то, какое значение они несут внешнему виду интерфейса (мы поясним его практическое значение немного позже). Анимацияпри рассказе истории, неважно, очевидная, или еле заметная, может добавить эмоций даже простоватому интерфейсу.
Например, Humaanиспользует анимированный фон, активируемый скролом и постепенно раскрывающийся текст (по мере появления содержимого), чтобы придать особенность и живой вид тому, что совсем по-другому выглядит, чем просто страница «О нас».
Фото: http://humaan.com/about/
Одним из ключевых компонентов для всех анимаций является управление временем. Для анимации, которая инициируется пользователем, вы обычно хотите, чтобы эффектактивировалсяв пределах 0.1секунды, что придает ощущение, что интерфейсоткликается. Мы следуем этому правилу и сами, как вы можете увидеть в этом превьюпроекта UXPin.
Фото: UXPin
После прокрутки на следующий экран, в течение 300 мс появляется форма предложения о подписке. Мы не устанавливали задержку на сам скрол до тех пор, пока он прямо не запустится действием пользователя, но мы добавили дополнительное время к последующему переходу анимации, чтобы избежать эффекта дрожания.
8 Популярныхтехниканимации
Для целей этой книги мы разбили области анимации на8 групп,и представим лучшие примеры реализации для каждого из них.
1.Анимация загрузки
Одним из самых старых применений анимации для веба было отвлечь пользователя во время ожидания загрузки. Как мы говорили в книгеИнтерактивный дизайн. Лучшие практики : книга вторая:
Наилучший вариант сценария, когдаанимация заставляет пользователей думать о ваших технологиях продукта лучше, чем это есть на самом деле. Худший вариант сценария, когда ваши пользователи получают удовольствие, наблюдая за чем-то в процессе ожидания, улучшая общеепользовательское впечатление.
Даже если время загрузки короткое, такие анимации все же добавляют немного изысканности или, по крайней мере, развлекают пользователей, пока они ждут. Благодаря этому, анимация загрузки достаточно популярна во флэтдизайне, минимализме, портфолио и одностраничных сайтах- для всех, кто является простым по своей сути и может использовать импульсы для стимуляции.
Фото: http://tomcolearchitect.com/
Посещая сайтTomColeArchitecture,перед пользователем оказывается черный экран и в один момент множество белых линий начинают двигаться и «писать» логотип и название марки. В другой момент становится видимым фото на заднем плане и пользователям доступны элементы навигации. Этот сайт сам по себе простой и не нуждается в анимации загрузки, но тем не менее этот мгновенный эффект красивый, пользователямприятно и это привлекает их использовать сайт.
Помните, что лучшая анимация загрузки – когда она простая. Излишние эффекты, такие как звуки, вовсе не являются необходимыми. Анимация должна соответствовать особенностям сайта, будь то минимальный, яркий, элегантный, пр.
2.Навигация и меню (не прокрутка)
Для того, чтобы сохранить пространство, последним трендом является скрывание панели меню, которая сама по себе всплывает при нажатии на кнопку, например, иконка гамбургера. Для таких анимаций существенно важноустановить связи между ними двумя и предотвратить резкий переход.
Нажмите на кнопку в виде круговой стрелки на BrianHoffDesignи появится панель меню справа. Выскакивающая анимация заставляет появиться меню, как будто оно выезжаетиз-за пределов экрана и делает все взаимодействие плавным.
Фото:: http://www.brianhoffdesign.com/
Фото:: http://www.brianhoffdesign.com/
Анимациягамбургер-кнопки не является единственным вариантом, хотя – креативные дизайнеры используют навигационные элементы, такие как слайдеры и панели, чтобы также разделять их.
Анимация также может хорошо представлять индикацию изменений.Как описано в WebUIPatterns,наведение - это на самом деле один из наиболее популярных приемов, чтобы показать изменения в интерфейсе объекта.
Кнопка или картинка может выглядеть по-одному, когда веб сайт загружается, но по-другому, когда пользователь с ним взаимодействует, как например, при наведениикурсора на элемент. Этонебольшоеизменениепомогаетпользователямлучшепонять,какиспользоватьвебсайт,открывая соответствующие действия без необходимости занимать дополнительное пространство.
3.Наведениекурсора
Для того, чтобы показать, что элемент является интерактивным, эффектыпринаведении курсора – это один из наиболее прагматичных способов использования анимации. В большинстве случаев, это единственный способ показать, что кнопка или часть текста являются кликабельными.Когда пользователь сомневается относительно функции элемента, они обычно наводят на него мышь и при этом элемент изменяется.
Фото: http://www.alectia.com/en/
При наведении курсора на любую карту на сайте Alectia, изображенного выше, вызывается анимация в пределах этой карты. Анимация маленькая – всплывает текст заголовка и идентичный текст появляется и заменяет карту (и то же самое происходит со стрелкой "читать далее") - однако этого достаточно, чтобы показать функциональность карты.
Источник: UXPin
Мы и сами это используем в нашейFreeeBookLibrary,где при наведении курсора выпадает загруженная картинка из верхней части и над кнопкой появляетсятекст «получить бесплатно». Это служит для нескольких целей – это показывает, что, только нажав на карту, инициируется процесс загрузки, это привлекающий внимание призыв к действию, и это создает приятное ощущение от взаимодействия с сайтом.
4.Галереи и слайдшоу
Шаблоны слайд-шоу и/или анимированные галереи является одним из самых распространенных видов веб-анимации, но, тем не менее, эффективны при демонстрации нескольких изображений содержимого не перегружая пользователя.
Фото: http://www.bigactive.com/
Как быстро и как много циклов изображений будет сделано – зависит от задумки дизайнера, но эти решения не следует воспринимать легкомысленно - даже незначительное увеличение скорости, с которой меняются изображения, может вызвать нежелательные ощущения, будто сайт «несется» куда-то.
Еще необходимо обдумать, сколько применять скевоморфизма.Эта модель по своей сути имитирует просмотр страниц в фотоальбоме- но вопрос в том, сколько внимания вы хотите привлечь к этому.
5.Привлечениевнимания
Любой биолог скажет вам, что человеческий глаз привлекает движение.Это делает анимацию прекрасным инструментом для привлечения внимания и контроля вашей визуальной иерархии, в отличии от сайта на котором только статические картинки.
Анимации это прекрасный способ добавить интригиформам,призывам к действиям, или даже пунктам меню. Чтобы увидеть эту силу, посмотрите на сайт Джона ИаковеллоMY/STATIC/SELF:
Фото: http://mystaticself.com/
Куб в центре тихо скачет и мерцает, ясно давая понять, что он является самым интересным элементом на сером экране. Каждый из слоев этого куба представляют собой ссылку на разные страницы - те же страницы четко и понятно отображаются в верхнем меню навигации.
Как вы думаете, какой набор навигационных ссылок пользователи предпочитают использовать?
6. Прокрутка
Позже в следующей главемы обсудим прокрутку,здесь мы упоминаем о ней в связи с тем, что она используется для анимации. Плавная прокрутка просто не может существовать без нее. Одним из главных преимуществ прокрутки является то, что она позволяет пользователю контролировать перемещение, и благодаря этому анимация определяет темп, в котором все двигается.
Фото: http://forbetter.coffee/
Вебграфика ForBetterCoffeeиспользуетпараллакс прокрутку, чтобы перечислить советы по созданию лучшего кофе,одновременно развлекая пользователя интерактивным визуальным путешествием боба, превращающегося в кофе(в приятном плоском стиле дизайна).
Лучшаячасть сайта – это вовсе не совет, это наблюдение за анимацией, которая представляет кофейное зерно, переходящее от одного этапа к другому. Как пользователь, который контролирует прокрутку, вы чувствуете полное погружение в представленный рассказ.
7.Движение страницы
От функций AJAXloadingдо простых эффектов или мультфильмов, движение всей страницы это, конечно, захватывающий эффект. Движение страницы немного сложнее в реализации, но хорошо подходит для статического контента,чтобы придать ему больше динамики.
Фото: http://www.hungercrunch.com/
На сайтеHungerCrunch,каждое малейшее движение мыши переключает фоновую картинку, и это, в сочетании с разделением слоев, создает интересный эффект, который имеет смысл для игрового сайта.
При применении этой тактики, будьте осторожны с использованием слишком большого количества загружающихся элементов - они могут привести к тому, что сайт будет работать медленно.
8. Анимация фона
В то время как чрезмерная анимация отвлекает внимание, скромная анимация фона может добавить вебсайту немного жизни.Ключевой идеей является умеренность – отдельные участки в единицу времени, или, возможно, плавное движение целой картинки.
Давайте посмотрим насайт Terna.Анимированный фон выбран для представления городской суеты, в разных частях картинки появляются разные движения с разными интервалами. Это создает атмосферу «занятости», при этом не перегружая пользователя.
Фото: http://trasmissione-energia.terna.it/
Как и в других областях анимации, тут рекомендуется простота. Помните, что каждое движение на экране будет привлекать внимание, поэтому слишком много анимации может создать хаос.
Взглядвне времени
Как мы обратили внимание в начале, вскоре анимация будет не просто дополнительной функцией.В то время как умная анимация – это хлеб с маслом для для портфолио вебдизайнеров,средство продемонстрировать их талант, в ближайшем будущем мы увидим, как анимация будет применяться также и в других более «традиционных» сферах деятельности.
Анимация больше не является синонимом мультфильма, поэтому все больше профессиональных индустрий, таких как финансовая или медицинская, все большеиспользуют улучшенный стиль.
Фото: http://avenirclinic.com/
Исторически сложилось, что стоматология – это индустрия, которая ведет себя консервативно.Поэтомустоматологическая клиника L’AvenirDentalClinicиспользует консервативные анимированные эффекты: прокрутка, активизирующая открытие новых окон. Нет необходимости в энергичных значках или причудливо движущемся тексте.
Электронная торговля тоже может воспользоваться анимацией для практических целей - а именно 360-градусный поворот изображения товаров. Это дает пользователю получить больше представления о товаре при покупке онлайн, что пока остается однимиз преимуществ передпривычной покупкой.
Фото: https://www.fleetfeetsports.com/
Сайты электронной коммерции могут также получить преимущества обычной веб анимации. Когда вы покупаете товар на сайте FleetFeetSports,забавная анимация уменьшает фото продукта и перемещает его в вашу корзину. Это делает интерфейс более отзывчивым и также добавляет покупателю удовольствие от того, что он выбрал этот продукт.
Фото: http://www.google.com/design/spec/material-design/introduction.html#
Чем больше дизайнеры поддерживают философиюGoogle’sMaterialDesign, тем их отношениекэтой техникебудет становится более заметным.
Документация описывает анимацию так:
Также как форма объекта указывает на его возможное поведение, наблюдая за демонстрацией движения объекта можно понять легкий он или тяжелый, гибкий или тучный, маленький или большой. В мире материального дизайна, движение описывает пространственные отношения, функциональность и назначение при помощи красоты и плавности движений.
Не только анимация расширяет спектр отраслей, также развивается ее применение. Многообещающим трендом становится анимированная фотография как средство, объединяющее анимацию с реализмом.
Фото: http://lookbook.bolia.com/chilling/
Boliaсочетает настоящую фотографию и скролинговую анимацию, чтобы погрузить своих пользователей в их онлайн ощущения. Это размытие линий реальности приобрететпопулярность, как толькодо этого дойдут технологии.
В настоящее время, анимация доказала свою жизнеспособность в областях применения намного старше, чем веб-дизайн. Благодаря ее стабильности, она продолжит укореняться в индустрию дизайна – с единственной разницей, насколько это смогут позволять технологии.
Используйтесовременнуюанимациюввашем дизайне с UXPin
10Бесплатных ресурсов и инструментов
1. 12 Принципов анимации видео–Видео Сенто Лодиджиани иллюстрирующее 12 принципов изИллюстраций жизни:Анимация Диснея.
2. Шпаргалка по анимации в CSS3–Это полезная коллекция заготовок готовых к использованию анимаций позволит вамприменять заготовки CSS классов для любых элементов, которые захотите.
3. Веб анимация–Часто обновляемое руководствопо синхронизации и управлению временем для анимации на веб-страницах и API.
4. “Разрушение мифов: CSSанимация иJavaScript”–Обсуждение хитростей самого лучшего метода анимации
5. “Веб анимация в действии”–Статья от AListApart, объясняющая как анимации теоретически в дальнейшем расширяют другие техники дизайна.
6. “15уроков анимации”–Руководство по веб-анимации от UltraLinx, предназначенное для начинающих.
7. ГибкиеSVGэлементы–Полезная инструкция для создания SVG фигур анимации.
8. Лучшие инструменты для создания анимации–Перечень и анализ 15 популярных инструментов анимации.
9. Transit–Загружаемый jQueryплагин для улучшенияCSSпереходов и трансформаций.
10. Галерея примеров анимации в материальном дизайне– галерея стоящих анимаций в материальном дизайнедля вдохновения.
5 Jv+vyH8BAAD//wMAUEsBAi0AFAAGAAgAAAAhALaDOJL+AAAA4QEAABMAAAAAAAAAAAAAAAAAAAAA AFtDb250ZW50X1R5cGVzXS54bWxQSwECLQAUAAYACAAAACEAOP0h/9YAAACUAQAACwAAAAAAAAAA AAAAAAAvAQAAX3JlbHMvLnJlbHNQSwECLQAUAAYACAAAACEA1mKVzJENAABfVgAADgAAAAAAAAAA AAAAAAAuAgAAZHJzL2Uyb0RvYy54bWxQSwECLQAUAAYACAAAACEAsc6AkeAAAAANAQAADwAAAAAA AAAAAAAAAADrDwAAZHJzL2Rvd25yZXYueG1sUEsFBgAAAAAEAAQA8wAAAPgQAAAAAA== ">
Выразительноеоформление
Фото: Adidasviaawwwards
Выразительный текст – шрифты, размеры и эффекты, которые выступают как стилистические элементы сами по себе – быстро становятся нормойдля веб интерфейсов.
Оформление текста используется не просто для того, чтобыобеспечить удобочитаемость.Простой или сложный, большой или маленький, текст на сегодняшних сайтах читаетсяв совершенно новом свете.В этой главе мы рассмотрим, как делать дизайн оформления эффективно, что популярно и почему, и чего следует избегатьпри выборе того, как будут выглядеть ваши слова.
Фото: Noveske
Определение выразительного оформления
Прежде всего, давайте уясним, что выразительное оформление текста и простой текст неисключают друг друга. На самом деле, упрощение оформления текста является одной из наиболее популярных форм создания выделяющихсянадписейв данный момент. Чтобы определить выразительноеоформление, мы просто скажем, что это оформление, котороевыделяется каким-либо образом.
В текущем тренде, мы можем обозначить элементы, находящие наибольшее отражение в выразительной типографике:
• Экстремальные размеры (большие и маленькие)
• Наложение на изображение
• Творческое использование простых шрифтов
• Пользовательские шрифты
• Художественные шрифты
Фото: Vimeo
Обратите внимание, что эти стили обычно сочетаются друг с другом практически без каких-либо ограничений.
Основыоформления
Главное в шрифте надписи-это то, как он используется и насколько хорошо он выглядит. Это объясняет, почему мы в последнее время видим, что простые и внешне скучные шрифты хорошо справляются с задачей привлечения нашего внимания.
Лучше всего начать соснов:для начала ознакомиться с такими понятиями как категория шрифта, семейство шрифтов (гарнитура) и формы букв.
Фото: White Frontier Brewery via awwwards
Категориишрифтаразличаютсяпоначертанию, структуреистилю написания букв. Наибольшие группы представлены типами шрифтов с засечками (серифами) и без засечек (сансериф), которыйнаиболее популярен в текущей тенденции простоты. Засечки – это такие особенные украшения по краю каждой линии буквы, а санс – означает «без».
Источник: “I shot the serif.” TomGabor. CreativeCommons.
Гарнитура шрифта – это просто все вариации выбранного шрифта. Разные формы включают обычное начертание, жирное наклонное, подчеркивание, черный цвет и иногда что-то еще.
В контексте типографики, линия символаотносится к ширине каждой строки.Совместное использование единой линии в одной и той же гарнитуре кажется текущим трендом, так как однотипнаялиния более разборчива при различных параметрах настройки и контраста экранов.
Для того, чтобы лучше узнать о применении основ типографики, включая некоторые важные правила и основные принципы, загрузите бесплатно WebDesignfortheHumanEye, Book 2.(Веб дизайн для человеческих глаз, Книга 2)
Доступность шрифта
Движущей силой выделяющегосяоформления текста является повышение доступности шрифтов для массового использования.
Фотоhttp://packdog.com/
Все больше шрифтов доступны за меньшие деньги – или вообще бесплатно наGoogleFonts.Во всех приложенияхAdobeCreativeCloudplans, они используют их Typekitсервис.
Фото: Spotify
Эта доступность также относится к дизайнам, основанным на шаблонах,таких как WordPress,где пользователи могут получить доступ к такому же объему функций, как и самодельные сайты. Что касается рендеринга шрифта, совершенствование современных браузеров и интерфейсов оставляют такие проблемы использования шрифта в прошлом.
Использоватьбоксилибезопасные вебшрифтыизнабора– это прекрасная возможность, если вам не всегда нужно выбирать наиболее общепринятый шрифт. На сегодняшний день наиболее распространенными являются:
Шрифты без засечек:
•ProximaNova
•Futura
•Avenir
•Open Sans
•Helvetica Neue
Шрифтысзасечками:
•Caslon
•Garamond
•FreightText
•Minion
•FFMetaSerif
Для того, чтобы больше узнать о том, на чем можно сосредоточить ваши усилия при выборе нужного шрифта, читайте статью Дугласа Боневиля вSmashingMagazineКак выбрать шрифт.
С основами мы разобрались, давайте посмотрим на способы, которыми оформление текстав настоящеевремяделает свой вклад.
Экстремальные размеры
Итак, вы выбрали гарнитуру шрифта, с которой будете работать, и теперь предстоит обсудить ее размер. В последнее время популярны экстремальные размеры: как очень большие, так и совсем маленькие.
1.Большой шрифт
Большие шрифты шлют мощное и уверенное сообщение, когда применяется в сочетании с крупными (так называемыми героическими) картинками.
Фотоhttp://www.getzeroapp.com/
Этот стиль обычно следует некоторым одним и тем же основным принципам:
• Большие пропорции и ширина по отношениюк другим элементам экрана
• Шрифт больше чем 85 пт.
• Прописные буквы или чрезмерно толстые линии символов
Мы также заметили некоторые тенденции в этом тренде.
Часто слова разрежены, чтобы заполнить весь экран. Цвет слов обычно белый – он хорошо контрастирует на фоне картинки или яркого фона. Вдобавок, иногда добавляются тонкие шрифты с засечками, чтобы создать динамический контраст к толстым буквам. Мы также видим слова, отличающиеся по размеру, но все равно при этом большие.
Фото: Squarespace
Фотоhttp:// junduffy.co.nz/
Фото: gogoro
Фото: Adventureviaawwwards
Этот тренд очень популярен, поэтому вы можете не бояться добавить немного креатива. Попробуйте использовать различное расположение: справа или слева, избегая при этом выравнивания по центру. В этом размере, ваше сообщение конечно будет жирным, поэтому заглавные буквы вовсе не обязательны. И последнее, правильно подобранное свои цвета могут придать вашему сайту уникальность и индивидуальность.
Одна из техник, которую мы считаем полезной для дизайна – это громадный тип шрифта, начинайте с настолько большого – что дажестанет некомфортно, затем начните уменьшать его размер, пока не найдете то, что нужно. Вы можете обнаружить, что выбрали размер намного больше, чем ожидали изначально.
2.Маленький шрифт
Как тихий голос, который звучит громко, некоторые дизайнеры обращаются к чрезвычайно маленькому шрифту надписей. Если другие элементы на экранах не заслоняют их, маленькие слова воспринимаются также хорошо, как и большие.
Фото: http://www.mikiyakobayashi.com/
Фото: Revelator
Стратегии применения больших и маленьких размеров шрифта немного различаются. Маленькие буквы обычно черного цвета и они используются в сочетании с преувеличенным негативным пространством. Хотя и те, и другие буквы обычно используют толстые линии.
Маленькие надписи работают хорошона картинках в стилеheroimage,поскольку контраст интригует и минимальное пространство, которое занимает текст, позволяет лучше оценить содержание картинки.
Фото: Under Armor
Фото: http://www.wearetopsecret.com/
Иногда маленькие буквы нужно немного дополнительно украсить, чтобы они были заметными.Используя такое украшение, как контрастный цвет или простая анимация (как на сайте UnderArmor’sstorytellingsite), можно быть уверенным, что его будет видно. Окружение текста негативным пространствомтакже достаточно хорошо работает.
Наложение поверх картинок
Дни, когда картинки и текст были двумя отдельными элементами, прошли. Сегодня наложение текста на изображения может усилить как текст, так и картинку.
Фото: http://aiaiai.dk/
Два главных принципа этого стиля - это контраст и разборчивость (удобочитаемость). То место, где на картинке появляется текст, влияет и на текст, и на картинку, и дизайнер должен почувствовать, где контрольная точка на разных устройствах. Проверьте все расположения, чтобы определить, где текст будет наиболее видимым, не заслоняя наиболее важные части картинки, такие как лица или название товара/бренда.
Фото: Reebokviaawwwards
Еще одна проблема в том, чтобы текст и картинка не вносили путаницу. Спортивный фотограф накладывает свое имя на свое лучшее фото- изображение Тома Брэди –и вы можете понять неправильно чье это имя, фотографа или спортсмена.
Креативное использование простых шрифтов
Как и с другими элементами дизайна, экспериментирование с текстом и шрифтом могут принести некоторые прекрасные преимущества, если Вы готовы пойти на риск. Например, мы просто говорили о текстах в картинках, а как насчет картинок в тексте:
Фото: 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/
Множество техник комбинирования основаны на здравом смысле. Например, если вы размещаете картинку внутри текста, постарайтесь немного увеличить контрастность текста (иначе картинка может заглушить текст).
Также подумайте о том, какие именно техники не будут сочетаться вместе. Например, художественные шрифты, по сути, бросаются в глаза, поэтому их лучше использовать непосредственным образом. Не пытайтесь использовать картинки в декоративных шрифтах. Представьте, как трудно было бы прочесть заголовок для сайтаAnjaRubik, если бы главный заголовок был бы написан курсивоми заполнен к тому же изображением модели.
Фото: http://sendamessage.to/
SendaMessage(выше) сочетает техники практичным способом. Он начинается с маленького, простого текста, чтобы отвлечь вниманиеот него самого на содержащуюся в нем картинку. После взаимодействия с сайтом, появляется текстовое сообщение, которое является самым главным на этом сайте. Оно написано большим шрифтом и совмещено с картинкой – две стратегии для переключения внимания от картинки обратно к тексту.
Взгляд в будущее
Выразительноеоформление шрифтане столько тренд, сколько стратегия, которая переосмысливает себя каждые несколько лет. Техники, описанные выше, просто несколько вариантов того, как многие дизайнеры используют типографику.
Фото: Orangina
В общем, хорошая текстовая надпись всегда отвечает таким целям:
• Несет сообщение при помощи текста
• Работает в сочетании с другими дизайнерскими тактиками
• Соответствует технологическим требованиям (то есть, совместима сбраузером и интерактивным дизайном)
• Создает незабываемые впечатления
Сегодняшние тенденции текстовых надписей соответствуют этим целям, но как они будут адаптироваться, чтобы соответствовать следующей эре дизайна?
Фото: http://floatpasadena.com/
Можем почти достоверно сказать, что дизайнеры продолжат использовать очень выразительный текст. Они могут, правда могут, вернуться к трендам, которые казались когда-то в духе «это уж слишком».
Например, мы возможно начнем замечать больше цвета и меньше белых букв. Больше дизайнеровмогут сделать выбор в пользу прозрачности или 3D эффектов при создании выразительных форм букв.Переключение от сверхтонких к более широким линиям букв также может иметь место.Буквы могут также включать больше базовых или простых анимаций или служить в качестве части большой схемы пролистывания или других элементов интерфейса.
Начнитеиспользоватьвашубесплатную версию уже сейчас
10 Бесплатных ресурсов и инструментов
1. WhatFont–Онлайн ресурс, который рассказывает вам какой шрифт используется на выбранном сайте.
2. “Выбор веб-шрифта. 15 подсказок от экспертов”–Совет отCreativeBloqо том, как выбрать наилучший шрифт для вашего сайта.
3. Typewolf–Сайт, посвященный веб-шрифтам, применяющимся на сайтах, анализ и статьи от экспертов.
4. “8 подсказок для шрифта для веб-сайта” –Подсказки по выбору шрифта для вашего сайтаот Font.com.
5. FFFFallback–Полезный инструмент, который тестирует совместимость выбранных вами шрифтов и даже предлагает альтернативы.
6. “Становитесь больше, используя шрифт” –Руководство отDesignModoспециально по использованию огромных шрифтов с примерами.
7. AwwwardsTypographyinWebDesignGallery–Победители и обладатели наград за выбор шрифта надписей на сайтах – обновляется постоянно.
8. “25 Удивительных учебников по шрифтам” –Коллекция учебных материалов от TopDesignMagдля того, чтобы показать вам, как оживить ваш сложный выбор шрифтов.
9. Красивая веб печать–Список примеров из жизнипрекрасной печати текста от GoogleFonts.
10. “41 лучших бесплатных Web-шрифтов 2015 года”