Современный дизайн веб-сайтов под грифом «Обновленная классика»

За последние 10 лет, плавно перекачивая с места на место в интернете и анализируя ход развития веб-дизайна, я пришел к выводу, что интернет, испытав на себе красочность бессмысленных сверкающих эффектов, остался таким же, каким был далекие 10 лет назад.

Правда, он оставил в себе несколько незначительных изменений, которые порой дизайнеры укладывают в оформление своих проектов:

  • свободное пространство среди объектов верстки;
  • приятная цветовая гамма для элементов оформления;
  • эффекты теней и блеска благодаря CSS3;
  • тенденции собственного оформления элементов зоны тега <form>;
  • внедрение пиксельных иконок в управляющие элементы дизайна.

А теперь обо всем по подробнее…
Для отображения примеров материалов статьи использовались старый и новый интерфейс Google Mail.

Свободное пространство среди объектов верстки

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

Приятная цветовая гамма для элементов оформления

Давние 10 лет назад человек знал стандартные виды цветов и ограничивался только ими и ближайшими их оттенками, то сейчас для обычного оформления страниц используются местами нежные и легкие, местами грубые и строгие, местами яркие и светлые цвета, которые могут составлять совершенно другую цепочку оттенков. Для сравнения будет взят фрагмент из маркеров почтовых сообщений Gmail.
Если обратить внимание на элемент «важного» сообщения, который помечается звездой, то можно заметить, что в стиле старого дизайна цвет самой звезды — самый обычный желтый, а цвет ее границы — стандартный синий цвет. В современном же дизайне используются оттенки, желтых и оранжевых цветов, которые своей уникальностью делают обзор метки приятнее и интереснее.

Эффекты теней и блеска благодаря CSS3

Изначально, каждый веб-сайт представлял собой статическую страничку, на которой помимо текста изображений, ссылок и блоков больше ничего небыло. Но с появлением методики программирования Web 2.0, дизайн стал все больше опираться на объёмность, которой дизайнеры достигали путём размещения, в качестве оформления элементов сайта, изображений с тенями и блеском. За последние 1,5 — 2 года методика создания этих эффектов плавно перешла от обычных изображений до генерации этих эффектов в каскадной таблице стилей.
В этом примере видно, как появление этих эффектов повлияло на восприятие пользователей. Также, рассмотрев примеры вкладок «Классический», вы увидите разницу между тенями, генерируемыми изображениями(старый дизайна) и кодом CSS3(современный дизайн).

Тенденции собственного оформления элементов зоны тега <form>

Старый дизайн сайтов даже и не предполагал о собственном оформлении списков, их элементов, полей «input», «textarea» и других тегов, входящих в структуру тега <form>. Нельзя сказать, что все современные изменения этих тегов выполняются без участия java-script’ов и других дополнительных языков программирования. Но сама суть таких изменений стала еще одним шагом к современному веб-дизайну.
В данном примере в качестве образца старого дизайна выступит фрагмент старого сайта luna-art6.narod.ru
Наверняка вы уже заметили и ощутили на себе, на сколько приятным и легким, как для управления так и для восприятия стало изменение элементов тега <form> в готовом дизайне сайта.

Внедрение пиксельных иконок в управляющие элементы дизайна

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

 

1 star2 star3 star4 star5 star (ОЦЕНИТЬ!)
Загрузка...
Прочее
Комментировать!

Автор: Артем Парасочка

Артем Парасочка
Администратор сайта. Увлекаюсь сайтами, SEO, яблочной продукцией, облаками и немецкими автомобилями. Люблю все синхронизировать и оптимизировать. Окончил ТГПИ.