Текст: за содержание – 5, за внешний вид – 1
Скорее всего, именно такие оценки поставила бы придирчивая экзаменационная комиссия большинству действующих веб-ресурсов. Еле-еле интернет-студии заставили пользователей обращать внимание на правила типографики и вырвали сайты из полной анархии конца 90-х – начала 00-х. Сегодня уже (почти!) не встретишь текстовых страниц, заполненных убористым шрифтом с минимальным междустрочником, отсутствующим форматированием и вдобавок растянутым на полметра по диагонали.
Но статичные буквы тоже перестают удовлетворять дизайнерским концептам – пора двигаться дальше и включать их в динамичную структуру. Тем более что программные средства вполне позволяют делать это без ущерба скорости загрузки.
- Во-первых, целая амплитуда применения, основанная на hover-эффекте (изменение свойств объекта при наведении курсора мыши). Текст можно анимировать, заставить поменять шрифт или цвет, трансформировать объём и масштаб. Такой приём отлично смотрится на отдельных продающих лозунгах и заголовках, добавляя им визуальный акцент.
- Во-вторых, анимационные эффекты на буквах. Их, конечно, не вставишь в тело информационной статьи, но в качестве отдельного дизайнерского блока смотрятся очень прилично, привлекая внимание и разделяя тематические экраны.
- В последнее время часто попадается выделение важных эпизодов текста при помощи «эффекта маркера» – бэкграунд под таким фрагментом раскрашивается контрастным оттенком. Внимание читателя при этом логичным образом фокусируется на важных моментах.
Наконец традиционные ссылки, дежурно и скучно подчёркнутые стандартным HTML. Их выделяют цветом, шрифтом, добавляют уже упомянутый hover – такой переход и текст разнообразит, и релевантный якорь подсвечивает.
Картинки: традиционные слайдеры надоели
Фотографии уже лет пять принимают на себя главный удар фантазии дизайнеров – они стали больше, ярче и уникальнее. В новых сайтах практически не встретишь изображений, украденных из платных фотобанков или свободно распространяемых по сети. Каждый случай, когда пользователи видят такой пример, оборачивается для веб-ресурса «охотой на лис». Попросту гоняют по всем углам интернета, подтрунивая зло и бескомпромиссно. Последний эпизод – сайт Москоммерцбанка, использовавший в рекламе приобретенную платном ресурсе фотографию мужчины. Всё бы ничего, но в подписи указали, что это клиент и даже назвали его должность и место работы. Finita la commedia, сеть весело принялась травить очередного штрафника.
Но даже уникальные картинки можно презентовать по-разному – в дежурном статичном виде или вставив их в слайд-галерею, либо добавив программный эффект и получив динамический подвижный контакт с аудиторией.
- Переворачивания, растворения, масштабирования при смене изображений.
- Добавление текстов, описаний, ссылок при наведении курсора.
- Увеличение целых снимков или их фрагментов.
В любом случае, такие зрительные эксперименты не пройдут незамеченными у пользователей, а сайт добьётся оригинальности и запоминаемости. Обозначим и ещё одну деталь – перечисленные иллюстрации основаны только на использовании средств HTML, CSS и JS, которыми оперируют специалисты всех профессиональных веб-студий.
Дизайн для человека
Сайт должен продавать
Ничего лишнего
Интуитивно понятен
Рекомендации друзьям
Ориентация на развитие
