Услуги
  • Проектирование и разработка сайтов
    • Разработка корпоративных сайтов
    • Индивидуальная разработка сайтов
    • Разработка интернет-магазинов
    • Лендинги и продающие страницы
    • Разработка сайтов на Tilda
    • Разработка сайтов на 1С-Битрикс
  • Реклама и продвижение
    • Настройка контекстной рекламы
    • SEO-продвижение
    • Медийная реклама
    • SMM-продвижение
    • Сквозная аналитика
    • Контент-маркетинг
    • Разработка баннеров
    • Аудит рекламных кампаний
    • Настройка таргетированной рекламы
    • Настройка E-mail рассылки
    • Яндекс.Дзен
    • Настройка рекламы в Яндекс.Директ
    • Настройка рекламы в Google Adwords
  • Сопровождение и развитие сайтов
    • Поддержка и улучшение сайта
    • Администрирование и мониторинг сайтов 24/7
  • Автоматизация продаж
    • Автоматизация бизнеса с помощью Битрикс24
    • Разработка чат-ботов
Компания
  • О Компании
  • Клиенты
  • Отзывы
  • Вакансии
Проекты
Магазин готовых сайтов
Отзывы
Клиенты
Блог
Контакты
Оставить заявку
Личный кабинет
+7 (495) 104-47-86
Заказать звонок
sale@4rome.ru
115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
  • Вконтакте
Веб-студия и интернет-агентство
Стратегия — Разработка — Продвижение
+7 (495) 104-47-86
Заказать звонок
Услуги
  • Проектирование и разработка сайтов
    • Разработка корпоративных сайтов
    • Индивидуальная разработка сайтов
    • Разработка интернет-магазинов
    • Лендинги и продающие страницы
  • Реклама и продвижение
    • Настройка контекстной рекламы
    • SEO-продвижение
    • Медийная реклама
    • SMM-продвижение
    • Сквозная аналитика
    • Контент-маркетинг
    • Разработка баннеров
    • Аудит рекламных кампаний
    • Настройка таргетированной рекламы
    • Настройка E-mail рассылки
    • Яндекс.Дзен
  • Сопровождение и развитие сайтов
    • Поддержка и улучшение сайта
    • Администрирование и мониторинг сайтов 24/7
  • Автоматизация продаж
    • Автоматизация бизнеса с помощью Битрикс24
    • Разработка чат-ботов
  • Магазин готовых сайтов
Кейсы
  • Интернет-магазины
  • Корпоративные сайты
  • Лендинги
  • Реклама и продвижение
Компания
  • О Компании
  • Клиенты
  • Отзывы
  • Вакансии
  • Вопрос-ответ
Блог
Отзывы
Клиенты
Контакты
    Услуги
    • Проектирование и разработка сайтов
      • Разработка корпоративных сайтов
      • Индивидуальная разработка сайтов
      • Разработка интернет-магазинов
      • Лендинги и продающие страницы
    • Реклама и продвижение
      • Настройка контекстной рекламы
      • SEO-продвижение
      • Медийная реклама
      • SMM-продвижение
      • Сквозная аналитика
      • Контент-маркетинг
      • Разработка баннеров
      • Аудит рекламных кампаний
      • Настройка таргетированной рекламы
      • Настройка E-mail рассылки
      • Яндекс.Дзен
    • Сопровождение и развитие сайтов
      • Поддержка и улучшение сайта
      • Администрирование и мониторинг сайтов 24/7
    • Автоматизация продаж
      • Автоматизация бизнеса с помощью Битрикс24
      • Разработка чат-ботов
    • Магазин готовых сайтов
    Кейсы
    • Интернет-магазины
    • Корпоративные сайты
    • Лендинги
    • Реклама и продвижение
    Компания
    • О Компании
    • Клиенты
    • Отзывы
    • Вакансии
    • Вопрос-ответ
    Блог
    Отзывы
    Клиенты
    Контакты
      • Услуги
        • Назад
        • Услуги
        • Проектирование и разработка сайтов
          • Назад
          • Проектирование и разработка сайтов
          • Разработка корпоративных сайтов
          • Индивидуальная разработка сайтов
          • Разработка интернет-магазинов
          • Лендинги и продающие страницы
        • Реклама и продвижение
          • Назад
          • Реклама и продвижение
          • Настройка контекстной рекламы
          • SEO-продвижение
          • Медийная реклама
          • SMM-продвижение
          • Сквозная аналитика
          • Контент-маркетинг
          • Разработка баннеров
          • Аудит рекламных кампаний
          • Настройка таргетированной рекламы
          • Настройка E-mail рассылки
          • Яндекс.Дзен
        • Сопровождение и развитие сайтов
          • Назад
          • Сопровождение и развитие сайтов
          • Поддержка и улучшение сайта
          • Администрирование и мониторинг сайтов 24/7
        • Автоматизация продаж
          • Назад
          • Автоматизация продаж
          • Автоматизация бизнеса с помощью Битрикс24
          • Разработка чат-ботов
      • Кейсы
        • Назад
        • Кейсы
        • Интернет-магазины
        • Корпоративные сайты
        • Лендинги
        • Реклама и продвижение
      • Компания
        • Назад
        • Компания
        • О Компании
        • Клиенты
        • Отзывы
        • Вакансии
        • Вопрос-ответ
      • Блог
      • Отзывы
      • Клиенты
      • Вопрос-ответ
      • Контакты
      • Магазин готовых сайтов
      Заказать звонок
      • +7 (495) 104-47-86
      sale@4rome.ru
      115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

      249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
      • Вконтакте
      • Главная
      • Блог
      • Дизайн-решения: тренды и традиции

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

      Дизайн-решения: тренды и традиции
      10 Февраля 2011

      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


      Подписаться на
      рассылку

      Будьте в курсе последних новостей отрасли

      Подписаться
      Все публикации

      Читать ещё

      Подписаться на рассылку
      Скрытые резервы роста продаж в секторе B2B
      Скрытые резервы роста продаж в секторе B2B
      21 Апреля 2022
      Почему интернет-магазин не продает и как с этим бороться. 5 способов повышения прибыли
      Почему интернет-магазин не продает и как с этим бороться. 5 способов повышения прибыли
      15 Марта 2022
      Почему конкуренты растут, а вы — нет:  16 причин
      Почему конкуренты растут, а вы — нет: 16 причин
      3 Февраля 2022
      Загрузить еще
      Назад к списку
      Услуги
      Кейсы
      Компания
      Блог
      Отзывы
      Клиенты
      Вопрос-ответ
      Контакты
      Магазин готовых сайтов
      Вакансии
      • Вконтакте
      +7 (495) 104-47-86
      Заказать звонок
      sale@4rome.ru
      115054, Россия, Москва, Озерковская набережная, дом 50, стр. 1

      249032, Россия, Обнинск, ул. Курчатова, д. 29, офис 303
      Подписка на рассылку
      Политика конфиденциальности
      © 2022 «Четвёртый Рим».
      Студия дизайна и интернет-агентство.
      Заказать звонок
      Написать сообщение
      Заполнить бриф