От автора: экспериментируя с прозрачностью, можно отлично расширить свой дизайнерский репертуар. Как и прочие эффекты, применяйте этот по чуть-чуть и тестируйте дизайн во множестве окружающих сред, убеждаясь, что он будет работать и станет выглядеть именно так, как вам требуется.
Веб-дизайн с прозрачностью может оказаться великолепным, и в то же время иметь подводные камни. Прозрачность – это эффект, создаваемый, когда цветная область, текст или изображение «истончается», или как будто «промокает», так что цвет разбавляется и проявляется то, что скрыто под ним.
При правильном применении эффект может оказаться ошеломляющим – при этом создавая отличное место для текста или привлекая внимание к определенной части изображения.
Однако при использовании прозрачности дизайнеру следует быть осторожным. Эффект может оказаться сложным для восприятия, и проблема здесь – читаемость текста. Кроме того, прозрачные блоки и текст на неправильных уровнях могут отвлекать от общей идеи.
Далее следует набор «да» и «нет» – своеобразных «за» и «против» – с примерами сайтов, где великолепно применяется прозрачность.
«Да»: применение прозрачности для создания контраста
Преимущество №1 использования прозрачности как дизайнерского приема – создание контраста. Эффект дает дизайнеру возможность ввести фокусную точку с цветовым импульсом, крупным текстом поверх изображения или объемный изменчивый цветной экран.
Прозрачность также можно применять для выделения текста на таком фоне, который неспособен показать его лучшим образом.
Особенно важно при работе с прозрачностью обдумать контраст. Прозрачность будет хорошо работать только с удобочитаемыми изображением (или фоном) и текстом. При обдумывании этого эффекта спросите себя: Станет ли таким образом текст/изображение более понятным для пользователей?
«Нет»: перекрытию существенных деталей изображения
Прозрачность не должна закрывать те части фона или изображения, которые важны для передачи основной идеи. При размещении границ прозрачности отчетливо осознавайте, что «потеряется».
«Да»: использованию разных уровней прозрачности
Не существует идеального уровня прозрачности. Для некоторых проектов отлично подходит прозрачность в 80 процентов; для других лучше всего будет 15 процентов. Для каждого проекта «поиграйте» с различными уровнями прозрачности.
«Нет»: мыслям о том, что прозрачность сделает текст удобочитаемым
Одно лишь использование прозрачного блока для текста не сделает его удобочитаемым автоматически. Продумайте контраст – как в отношении прозрачного блока к тексту, так и фонового изображения к прозрачной рамке.
Применяя эффект к изображениям, цветным блокам или тексту, жизненно важно обдумать читаемость слов. Помните о том, что ваше послание не будет передано, если эффекты дизайна сделают текст неразборчивым.
«Да»: использованию прозрачности в небольших областях
Прозрачность предназначена не только для основной части вашего сайта. Этот эффект отлично смотрится в маленьких пространствах.
Подумайте об использовании его для показа инструментов навигации или в качестве эффекта проведения мышью применительно к кнопкам и элементам щелчка. Просто старайтесь не слишком увлечься применением прозрачности. Выберите элемент и стиль прозрачности, и придерживайтесь их при разработке всего дизайна сайта.
«Нет»: размещению прозрачности поверх сильно контрастирующих изображений
По соображениям удобочитаемости лучше всего избегать использования прозрачности поверх тех элементов, которые уже содержат очень контрастные элементы – подумайте о применении зон черного и белого цветов, противоположных друг другу на цветовом круге.
Использование прозрачности поверх элементов такого типа, за исключением действительно ненасыщенной, может оказать на ваш дизайн негативное влияние, потому что трудно создать правильный эффект во всех областях фона. Вместо этого примените окно-врезку (плашку).
«Да»: применению прозрачности как искусства
Прозрачность – эффект не вторичный по значимости. С его помощью можно создать доминантное изображение для своего сайта.
Большая прозрачная область может оказаться великолепным способом создания контраста, ударения и визуальной интриги.
«Нет»: применению прозрачности в качестве украшения
Прозрачность – не тот эффект, который можно добавить потом, если дизайн вдруг покажется вам скучным. Его применение в качестве украшения – вернейший способ оказаться в дизайнерском плачевном состоянии.
Использование прозрачности должно быть спланировано и обдумано заранее. Это не такой простой эффект, как выделение шрифта и, будучи некачественно сделанным, смотрится «сыро» и непрофессионально.
«Да»: применению прозрачности в фоне
Прозрачность – не только для элементов переднего плана дизайна, этот эффект также применим к фоновым изображениям. Самые лучшие прозрачные элементы – тонкие, едва различимые.
Некоторые прозрачные элементы могут лежать между слоями изображения. На сайте Тони Честера (Tony Chester) для создания многомерного дизайна, например, используется великолепный набор слоистых техник с применением прозрачности.
«Нет»: одновременному использованию слишком большого количества эффектов прозрачности
Ограничьте применение в одном проекте эффектов прозрачности различных типов. Прозрачность должна создавать разграничение, контрастность и визуальный интерес. Введение слишком сильного разграничения может уводить пользователей в сторону.
«Да»: применению прозрачности со статичными и/или чередующимися изображениями
Применение прозрачности не ограничивается статичным дизайном или проектом, состоящим из одной страницы. Она также работает с разными изображениями и фонами. Используйте ее и с тем, и с другим.
Создание прозрачности для чередующихся изображений может оказаться одним из сложных, но в то же время самых впечатляющих методов применения этого эффекта. Тщательно обдумайте применение множественных фоновых изображений. Подберите изображения, имеющие одинаковый цвет и схему контрастности с тем, чтобы одна и та же прозрачная деталь работала, пока движутся фоновые изображения позади нее.
Уделите внимание тому, чтобы прозрачность подходила к каждому изображению: для поддержания интеграции изображений, создания читаемого фото- или иного фона и текста, и выработки визуальной связанности.
Заключение
Эксперименты с прозрачностью – отличный способ расширить свой дизайнерский репертуар. Как множество прочих эффектов, применяйте эту технику с осторожностью и тестируйте дизайн в разных средах с тем, чтобы гарантировать его работу и хороший вид – именно то, что вы и намеревались получить.
Самая сложная задача – создание такой прозрачности, когда текст остается читаемым при использовании взаимозаменяемых изображений, и гарантируется то, что прозрачный элемент не закроет чего не следует.
Экспериментируйте с различными уровнями и типами применения прозрачности – с изображениями, с фонами, в качестве эффекта проведения мышью – чтобы определить, что лучше всего работает для каждого проекта.
Автор: Carrie Cousins
Источник: //tympanus.net/
Редакция: Команда webformyself.
Комментарии (1)