Rambler's Top100

Дизайн-решения: тренды и традиции

Продукт коллективного разума

Web стремительно развивается. Если в конце 90-х — начале 2000-х мы имели дело с простенькими страницами, состоящими из текста и картинок в нем, то сейчас ситуация в корне поменялась. Современные сайты с т. з. представления — практически произведения искусства дизайнеров, которые стараются разнообразить страницы интересными визуальными эффектами. Именно благодаря развитию технологий различные визуальные решения и эффекты, или как их называют в простонародье, «фичи», стали возможны. В этом обзоре собраны, на мой взгляд, наиболее интересные из них. Многие решения уже давно и успешно используются, некоторые же появились недавно.

Отмечу, что все эффекты, о которых я здесь упоминаю, выполнены без использования технологии Flash. Разработчики все меньше применяют Flash в своей практике, отдавая предпочтение Javascript’у и CSS.

Замечание. Некоторые из представленных ниже сайтов могут не работать в IE6.

Эффекты фона

Эффекты фона

Один из таких эффектов происходит при наложении нескольких фонов друг на друга. Например, изображение начинает оживать при сжатии-расширении окна по горизонтали. На самом деле, это два наложенных друг на друга фона, которые двигаются друг относительно друга определенным образом. Чистый CSS, никаких скриптов.

Также эффект наложения используется здесь. При прокрутке страницы центральная цветная полоска остается вверху экрана, поверх неё накладываются разные изображения и получается интересный эффект. И еще один пример (страницу также нужно прокручивать).

Уже несколько лет подряд остаются популярными т.н. CSS-спрайты. Спрайт — это несколько картинок, объединенных в одно большое изображение. Перемещение от одного изображения к другому происходит при помощи CSS-свойства background-position и JavaScript’а. Спрайты используются для увеличения скорости загрузки страницы, ведь одно объединенное изображение загружать быстрее, чем несколько таких же по отдельности. С помощью спрайтовой техники можно добиться интересных эффектов, например, плавное кручение банки с кока-колой или шевеление флагов при наведении на них.

Закрепленные элементы

Закрепленные элементы

Наверняка вы часто встречали такие элементы — при прокрутке страницы они остаются на том же месте, как будто закреплены. Обычно, эту технику используют для навигационных панелей или элементов, которые все время должны быть перед глазами. Такой эффект реализуется с помощью CSS-правила position:fixed.

Примеры:
Fresh01 crushlovely  Neutron Creations

Горизонтальные сайты

Горизонтальные сайты

Помню, первым сайтом с горизонтальной прокруткой, который меня заинтересовал, был один из вариантов дизайна на знаменитом СssZenGarden. Это было давно, но уже тогда говорили об оригинальности идеи горизонтальной прокрутки. Много рассуждений о необычности решения вызвал появившийся позже лебедевский сайт Паритет-98.

Сейчас дизайнеры все более активно стали использовать такой способ отображения, особенно на сайтах своих портфолио. В некоторых проектах навигация сделана самостоятельно, а где-то используется стандартная браузерная прокрутка. Я думаю, такой стиль отображения подойдет для промосайтов и сайтов с wow-эффектом.

Примеры:
We shoot bottles  Designed by able  Constantin Potorac  Horizontal Way



Сайты — все на одной странице

Сайты — все на одной странице

Тренд ушедшего года — одностраничные сайты. Такой способ представления информации упрощает её восприятие, ведь пользователю не нужно перемещаться с раздела на раздел и ждать, пока страница перегрузится. Да, на таком сайте присутствует навигация, но только в пределах одной страницы. Если сайт небольшой, такое представление — хорошее решение, тем более, что современные javascript-библиотеки и расширение интернет-каналов позволяют перемещаться по странице плавно и быстро.

Примеры:
Beaverlab  Bounty Bev  Vdezignstudio

3-D эффект

3-D эффект

Эффект трехмерного пространства давно используется в вебе. А сейчас, с появлением 3D-фильмов, он особенно актуален. Обычно, такого эффекта добиваются при помощи изображений (и еще пример). Сейчас модно использовать новые свойства CSS3, такие, как text-shadow, border-radius и box-shadow, поэтому красивые выпуклые кнопки теперь можно делать без картинок.

В компьютерной графике известен т. н. parallax-эффект — изменение положения объекта относительно фона в зависимости от положения наблюдателя. С помощью CSS и JavaScript можно добиться похожего эффекта, только положение объекта будет меняться при движении мышкой.

Примеры:
Moovents

Эффекты меню

Эффекты меню

Речь идет об эффектах по наведению на пункты меню — различная подсветка, плавное появление, выпадение. Используются эти эффекты уже очень давно, а сейчас, с помощью опять же JavaScript и CSS, можно делать довольно интересные вещи:

Примеры:
hm-andrei  Graffino  cloudfront  snook.ca  Css Tricks  Build Internet  Tympanus

Резиновые картинки

Резиновые картинки

На сегодняшний день очень модно делать резиновый фон или размещать на странице изображения, которые растягиваются под разные разрешения монитора. Это дает дизайнеру свободу — не нужно подстраиваться под конкретное разрешение.

Примеры:
Solegiallo  Aedas  Moreoboev  Unstoppablerobotninja

Галереи

Галереи

Очень популярный и красивый способ представления визуальной информации на сайтах. Сейчас существует огромное количество плагинов для разных JavaScript-библиотек, что облегчает использование галерей в проектах и позволяет настроить внешний вид и эффекты, что называется, «под себя». В основном, в галереях происходит перемещение по т.н. «кадрам» с помощью навигации, при этом применяются различные визуальные эффекты.

Примеры:
Festiki  Websache  Workshop  Professorcloud

«Гибкие» сайты

«Гибкие» сайты

Каждый год увеличивается количество устройств, на которых можно просматривать сайты — теперь у нас есть iPhone, iPad и много различных мобильных телефонов и смартфонов. И это помимо мониторов с разными разрешениями. Хочешь-не хочешь, а надо подстраиваться. Поэтому в моду стали входить т.н. «гибкие» сайты. Их содержимое — размер шрифта, картинки, элементы навигации — все подстраивается под разрешение экрана пользователя. В приведенных примерах посжимайте окно браузера и увидите, что вид сайта может значительно меняться в зависимости от размеров окна.

Примеры:
ThinkVitamin  Css Tricks  Stephencaver  Ten By Twenty

Вернуться к ленте статей 
Есть интерес, задача, вопросы?
Звоните +7 (484) 395-64-65
Отправить заявку
ПОРА!
Отправить заявку