Как стать автором
Обновить

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

Время на прочтение 3 мин
Количество просмотров 10K
За последние 10 лет, плавно перекачивая с места на место в интернете и анализируя ход развития веб-дизайна, я пришел к выводу, что интернет, испытав на себе красочность бессмысленных сверкающих эффектов, остался таким же, каким был далекие 10 лет назад. Правда, он оставил в себе несколько незначительных изменений, которые порой дизайнеры укладывают в оформление своих проектов:
  • свободное пространство среди объектов верстки;
  • приятная цветовая гамма для элементов оформления;
  • эффекты теней и блеска благодаря CSS3;
  • тенденции собственного оформления элементов зоны тега <form>;
  • внедрение пиксельных иконок в управляющие элементы дизайна.

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

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


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

image

Больше пространства дает нам возможность возжелать рассмотреть все гораздо обширнее. А это для любого современного веб-сайта — очень хороший показатель.

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


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

image

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

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


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

image

В этом примере видно, как появление этих эффектов повлияло на восприятие пользователей. Также, рассмотрев примеры вкладок «Классический», вы увидите разницу между тенями, генерируемыми изображениями(старый дизайна) и кодом CSS3(современный дизайн).

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


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

image

Наверняка вы уже заметили и ощутили на себе, на сколько приятным и легким, как для управления так и для восприятия стало изменение элементов тега <form> в современном дизайне.

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


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

image

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

P.S.: на самом деле, современный веб-дизайн предполагает многим изменениям, если анализировать каждый год в период от первого года в глобальной сети(1993 год) до сегодняшнего дня. Но об этом в другой раз…
Теги:
Хабы:
-3
Комментарии 19
Комментарии Комментарии 19

Публикации

Истории

Работа

Веб дизайнер
36 вакансий

Ближайшие события

Московский туристический хакатон
Дата 23 марта – 7 апреля
Место
Москва Онлайн
Геймтон «DatsEdenSpace» от DatsTeam
Дата 5 – 6 апреля
Время 17:00 – 20:00
Место
Онлайн
PG Bootcamp 2024
Дата 16 апреля
Время 09:30 – 21:00
Место
Минск Онлайн
EvaConf 2024
Дата 16 апреля
Время 11:00 – 16:00
Место
Москва Онлайн