Дизайн-решения: тренды и традиции
Web стремительно развивается. Если в конце 90-х - начале 2000-х мы имели дело с простенькими страницами, состоящими из текста и картинок в нем, то сейчас ситуация в корне поменялась. Современные сайты с т. з. представления - практически произведения искусства дизайнеров, которые стараются разнообразить страницы интересными визуальными эффектами. Именно благодаря развитию технологий различные визуальные решения и эффекты, или как их называют в простонародье, «фичи», стали возможны. В этом обзоре я собрала, на мой взгляд, наиболее интересные из них. Многие решения уже давно и успешно используются, некоторые же появились недавно.
Отмечу, что все эффекты, о которых я здесь упоминаю, выполнены без использования технологии Flash. Разработчики все меньше применяют Flash в своей практике, отдавая предпочтение Javascript’у и CSS.
Замечание. Некоторые из представленных ниже сайтов могут не работать в IE6.
Эффекты фона
Один из таких эффектов происходит при наложении нескольких фонов друг на друга. Например, изображение начинает оживать при сжатии-расширении окна по горизонтали. На самом деле, это два наложенных друг на друга фона, которые двигаются друг относительно друга определенным образом. Чистый CSS, никаких скриптов.
Также эффект наложения используется здесь. При прокрутке страницы центральная цветная полоска остается вверху экрана, поверх неё накладываются разные изображения и получается интересный эффект. И еще один пример (страницу также нужно прокручивать).
А вот на этом сайте фон в шапке разный в зависимости от времени суток. Кроме того, он постоянно плавно движется.
Уже несколько лет подряд остаются популярными т.н. CSS-спрайты. Спрайт - это несколько картинок, объединенных в одно большое изображение. Перемещение от одного изображения к другому происходит при помощи CSS-свойства background-position и JavaScript’а. Спрайты используются для увеличения скорости загрузки страницы, ведь одно объединенное изображение загружать быстрее, чем несколько таких же по отдельности. С помощью спрайтовой техники можно добиться интересных эффектов, например, плавное кручение банки с кока-колой или шевеление флагов при наведении на них.
Закрепленные элементы
Наверняка вы часто встречали такие элементы - при прокрутке страницы они остаются на том же месте, как будто закреплены. Обычно, эту технику используют для навигационных панелей или элементов, которые все время должны быть перед глазами. Такой эффект реализуется с помощью CSS-правила position:fixed.
Примеры:
Горизонтальные сайты
Помню, первым сайтом с горизонтальной прокруткой, который меня заинтересовал, был один из вариантов дизайна на знаменитом СssZenGarden. Это было давно, но уже тогда говорили об оригинальности идеи горизонтальной прокрутки. Много рассуждений о необычности решения вызвал появившийся позже лебедевский сайт Паритет-98.
Сейчас дизайнеры все более активно стали использовать такой способ отображения, особенно на сайтах своих портфолио. В некоторых проектах навигация сделана самостоятельно, а где-то используется стандартная браузерная прокрутка. Я думаю, такой стиль отображения подойдет для промосайтов и сайтов с wow-эффектом.
Примеры:
Сайты - все на одной странице
Тренд ушедшего года - одностраничные сайты. Такой способ представления информации упрощает её восприятие, ведь пользователю не нужно перемещаться с раздела на раздел и ждать, пока страница перегрузится. Да, на таком сайте присутствует навигация, но только в пределах одной страницы. Если сайт небольшой, такое представление - хорошее решение, тем более, что современные javascript-библиотеки и расширение интернет-каналов позволяют перемещаться по странице плавно и быстро.
Примеры:
3-D эффект
Эффект трехмерного пространства давно используется в вебе. А сейчас, с появлением 3D-фильмов, он особенно актуален. Обычно, такого эффекта добиваются при помощи изображений (и еще пример). Сейчас модно использовать новые свойства CSS3, такие, как text-shadow, border-radius и box-shadow, поэтому красивые выпуклые кнопки теперь можно делать без картинок.
В компьютерной графике известен т. н. parallax-эффект - изменение положения объекта относительно фона в зависимости от положения наблюдателя. С помощью CSS и JavaScript можно добиться похожего эффекта, только положение объекта будет меняться при движении мышкой.
Примеры:
Эффекты меню
Речь идет об эффектах по наведению на пункты меню - различная подсветка, плавное появление, выпадение. Используются эти эффекты уже очень давно, а сейчас, с помощью опять же JavaScript и CSS, можно делать довольно интересные вещи:
Примеры:
Резиновые картинки
На сегодняшний день очень модно делать резиновый фон или размещать на странице изображения, которые растягиваются под разные разрешения монитора. Это дает дизайнеру свободу - не нужно подстраиваться под конкретное разрешение.
Примеры:
Галереи
Очень популярный и красивый способ представления визуальной информации на сайтах. Сейчас существует огромное количество плагинов для разных JavaScript-библиотек, что облегчает использование галерей в проектах и позволяет настроить внешний вид и эффекты, что называется, «под себя». В основном, в галереях происходит перемещение по т.н. «кадрам» с помощью навигации, при этом применяются различные визуальные эффекты.
Примеры:
«Гибкие» сайты
Каждый год увеличивается количество устройств, на которых можно просматривать сайты - теперь у нас есть iPhone, iPad и много различных мобильных телефонов и смартфонов. И это помимо мониторов с разными разрешениями. Хочешь-не хочешь, а надо подстраиваться. Поэтому в моду стали входить т.н. «гибкие» сайты. Их содержимое - размер шрифта, картинки, элементы навигации - все подстраивается под разрешение экрана пользователя. В приведенных примерах посжимайте окно браузера и увидите, что вид сайта может значительно меняться в зависимости от размеров окна.
Примеры:
Отмечу, что все эффекты, о которых я здесь упоминаю, выполнены без использования технологии Flash. Разработчики все меньше применяют Flash в своей практике, отдавая предпочтение Javascript’у и CSS.
Замечание. Некоторые из представленных ниже сайтов могут не работать в IE6.
Эффекты фона
Один из таких эффектов происходит при наложении нескольких фонов друг на друга. Например, изображение начинает оживать при сжатии-расширении окна по горизонтали. На самом деле, это два наложенных друг на друга фона, которые двигаются друг относительно друга определенным образом. Чистый CSS, никаких скриптов.
Также эффект наложения используется здесь. При прокрутке страницы центральная цветная полоска остается вверху экрана, поверх неё накладываются разные изображения и получается интересный эффект. И еще один пример (страницу также нужно прокручивать).
А вот на этом сайте фон в шапке разный в зависимости от времени суток. Кроме того, он постоянно плавно движется.
Уже несколько лет подряд остаются популярными т.н. CSS-спрайты. Спрайт - это несколько картинок, объединенных в одно большое изображение. Перемещение от одного изображения к другому происходит при помощи CSS-свойства background-position и JavaScript’а. Спрайты используются для увеличения скорости загрузки страницы, ведь одно объединенное изображение загружать быстрее, чем несколько таких же по отдельности. С помощью спрайтовой техники можно добиться интересных эффектов, например, плавное кручение банки с кока-колой или шевеление флагов при наведении на них.
Закрепленные элементы
Наверняка вы часто встречали такие элементы - при прокрутке страницы они остаются на том же месте, как будто закреплены. Обычно, эту технику используют для навигационных панелей или элементов, которые все время должны быть перед глазами. Такой эффект реализуется с помощью CSS-правила position:fixed.
Примеры:
Горизонтальные сайты
Помню, первым сайтом с горизонтальной прокруткой, который меня заинтересовал, был один из вариантов дизайна на знаменитом СssZenGarden. Это было давно, но уже тогда говорили об оригинальности идеи горизонтальной прокрутки. Много рассуждений о необычности решения вызвал появившийся позже лебедевский сайт Паритет-98.
Сейчас дизайнеры все более активно стали использовать такой способ отображения, особенно на сайтах своих портфолио. В некоторых проектах навигация сделана самостоятельно, а где-то используется стандартная браузерная прокрутка. Я думаю, такой стиль отображения подойдет для промосайтов и сайтов с wow-эффектом.
Примеры:
Сайты - все на одной странице
Тренд ушедшего года - одностраничные сайты. Такой способ представления информации упрощает её восприятие, ведь пользователю не нужно перемещаться с раздела на раздел и ждать, пока страница перегрузится. Да, на таком сайте присутствует навигация, но только в пределах одной страницы. Если сайт небольшой, такое представление - хорошее решение, тем более, что современные javascript-библиотеки и расширение интернет-каналов позволяют перемещаться по странице плавно и быстро.
Примеры:
3-D эффект
Эффект трехмерного пространства давно используется в вебе. А сейчас, с появлением 3D-фильмов, он особенно актуален. Обычно, такого эффекта добиваются при помощи изображений (и еще пример). Сейчас модно использовать новые свойства CSS3, такие, как text-shadow, border-radius и box-shadow, поэтому красивые выпуклые кнопки теперь можно делать без картинок.
В компьютерной графике известен т. н. parallax-эффект - изменение положения объекта относительно фона в зависимости от положения наблюдателя. С помощью CSS и JavaScript можно добиться похожего эффекта, только положение объекта будет меняться при движении мышкой.
Примеры:
Эффекты меню
Речь идет об эффектах по наведению на пункты меню - различная подсветка, плавное появление, выпадение. Используются эти эффекты уже очень давно, а сейчас, с помощью опять же JavaScript и CSS, можно делать довольно интересные вещи:
Примеры:
Резиновые картинки
На сегодняшний день очень модно делать резиновый фон или размещать на странице изображения, которые растягиваются под разные разрешения монитора. Это дает дизайнеру свободу - не нужно подстраиваться под конкретное разрешение.
Примеры:
Галереи
Очень популярный и красивый способ представления визуальной информации на сайтах. Сейчас существует огромное количество плагинов для разных JavaScript-библиотек, что облегчает использование галерей в проектах и позволяет настроить внешний вид и эффекты, что называется, «под себя». В основном, в галереях происходит перемещение по т.н. «кадрам» с помощью навигации, при этом применяются различные визуальные эффекты.
Примеры:
«Гибкие» сайты
Каждый год увеличивается количество устройств, на которых можно просматривать сайты - теперь у нас есть iPhone, iPad и много различных мобильных телефонов и смартфонов. И это помимо мониторов с разными разрешениями. Хочешь-не хочешь, а надо подстраиваться. Поэтому в моду стали входить т.н. «гибкие» сайты. Их содержимое - размер шрифта, картинки, элементы навигации - все подстраивается под разрешение экрана пользователя. В приведенных примерах посжимайте окно браузера и увидите, что вид сайта может значительно меняться в зависимости от размеров окна.
Примеры: