Веб-дизайн — вид графического дизайна, направленный на разработку и оформление объектов информационной среды Интернета, призванный обеспечить им высокие потребительские свойства и эстетические качества.
Подобная трактовка отделяет веб-дизайн от веб-программирования, подчеркивает специфику предметной деятельности веб-дизайнера, позиционирует веб-дизайн как вид графического дизайна.
В настоящее время под термином веб-дизайн понимают именно проектирование структуры веб-ресурса, обеспечение удобства пользования ресурсом для пользователей
Базовые стандарты, которые отличают полиграфический и веб-дизайн
Стандарты в полиграфическом дизайне
Размер файлов
Полиграфический дизайнер, работая над макетом визитки, буклета или афиши, в сущности никогда не задумывается о размере файла на выходе. В принципе, в этом и нет особой необходимости — все в большей мере зависит от технических возможностей рабочей станции самого дизайнера, чем от каких-либо внешних факторов. Кроме того, де-факто стандартом для полиграфии является 300 dpi, что существенно влияет на размер макетов. Например, достаточно сложная афиша в слоях может весить и больше 1 Gb.
«Одноразмерный» дизайн
Визитная карточка, папка или бланк имеют жестко заданный размер. Полиграфическому дизайнеру не нужно морочить себе голову разными размерами объекта — исключая некоторые случаи (например, логотип), все макеты всегда будут привязаны к тому реальному размеру в сантиметрах, которые имеет готовый продукт.
Зависимость дизайна от материала
В полиграфическом дизайне существуют определенные параметры, которые привязывают дизайн к тому материалу, на котором будет напечатан макет. Например, печать на бумаге и на пленке имеет свои отдельные аспекты, а УФ-лакировка или высечка, требуют дополнительной адаптации макета со стороны дизайнера.
Крупные элементы
Размер элементов дизайна в полиграфии редко сочетается с размером веб-элементов. Например, одной из «подводных камней» веба, является т.н. «интерфейсный дизайн» — то есть, отрисовка мелких элементов: кнопок, переключаетелей, флагов и т.д.
Многие полиграфические дизайнеры часто «спотыкаются» даже об иконки, которые на первый взгляд рисовать не так уж и трудно, но основная проблема всплывает при уменьшении иконки до требуемого размера. В итоге выясняется, что те градиенты, штрихи и линии, которые хорошо смотрелись в крупном исполнении, в размере 64×64 выглядят уже совершенно не так.
Ограничения в полиграфическом дизайне
Цветовая палитра
Каждый полиграфический дизайнер знает, что то, что он видит на мониторе, никогда не будет абсолютно идентичным тому, что будет при печати. Именно поэтому при подборе цветов для макета используют стандартизированную цветовую модель Пантон (PMS — Pantone Matching System), цвета которой являются эталонами.
Существует множество каталогов образцов цветов Pantone, каждый из которых рассчитан на определённые условия печати — например, для печати на мелованной, немелованной бумаге, каталог для металлизированных красок (золотая, серебряная) и т. д. Более того, производитель настаивает на том, что «веера» необходимо ежегодно заменять, так как за это время процесс выцветания и истирания изображения делает цвета неточными.
Техника исполнения макета
В полиграфическом дизайне существуют определенные техники отрисовки, которые хорошо смотрятся на бумаге, но не слишком годятся для web. Например, это тонкие градиенты (переходы от темно-серого к черному) или же однопиксельные линии. Обойти эти ограничения можно, но для этого нужно потратить определенное количество времени для поиска компромисса.
Позиционирование макетов
В полиграфическом дизайне есть такое понятие как «вылет» — «мертвая» зона вокруг всего макета, которая будет обрезана при порезке. Например, я много раз видел неправильно позиционированные макеты для биг-бордов, на которых часть дизайна уходила под рамку самого щита. Это и есть несоответствие размера макета — размеру исходного объекта и пренебрежение вылетом.
Стандарты web-дизайна
Большая свобода в цветах
В веб-дизайне, исходные цвета макета и цвета готового «продукта» практически всегда одинаковы. Конечно, существуют свои ограничения, которыми нельзя пренебрегать, однако они не настолько жесткие, как для полиграфического дизайна. Основная проблема, которая может подстерегать веб-дизайнера, это отличие настроек дизайнерского и пользовательского мониторов.
«Движущиеся» объекты
Полиграфический дизайн — статичен. Веб-дизайн — динамичен. Эту аксиому нужно запомнить каждому полиграфическому дизайнеру, который хочет начать заниматься веб.
Динамика web-сайтов проявляется не только в изменении ширины макета при изменении разрешении монитора пользователя (респонсив, мобильная адаптация), но также и в самой идеологии веб. Меню может выпадать, складываться, разъезжаться; блоки текста могут разворачиваться и сворачиваться; действие по клику может кардинально изменять объект; и так далее.
Скроллинг страниц
Полиграфический дизайн в принципе не предусматривает такое понятие как «прокрутка страницы» — пользователь видит весь объект сразу и целиком. Даже в случае многостраничного буклета, каждая его страница представляет собой законченную композицию.
В web-дизайне ситуация иная — здесь страница может быть неограниченного размера, но композиция сайта должна учитывать тот факт, что объект не имеет жестко фиксированного размера и не охватывается взглядом сразу и весь.
Ограничения web-дизайна
Один размер для всех
Этот пункт напрямую пересекается с предыдущим («движущиеся объекты») — разные разрешения мониторов пользователей обязывают дизайнера учитывать этот параметр при создании макета. Разные браузеры по разному обрабатывают определенные элементы и об этом тоже нужно помнить.
Кроме того, в последнее время все большую и большую популярность набирает «мобильная адаптация» — не смотря на попытку производителей приблизить экраны мобильных устройств к экранам мониторов. И потому нужно не забывать, что ваш макет могут смотреть как на 30" мониторе, так и на 3" телефоне.
Ограничения размеров файлов
В этом вопросе веб-дизайн абсолютно противоположен полиграфическому. Учитывая, что каждый элемент вашего макета будет проходить по каналам связи (а их ширина у каждого пользователя абсолютно разная), необходимо придерживаться практики минимализма в размере и «весе» элементов без потери качества. Например, не стоит создавать градиент там, где легко можно обойтись цветовой заливкой объекта средствами css.
Мы часто сталкиваемся, что Заказчик имея уже какой то готовый флаер, считает, что так и должен выглядеть его сайт.
Но это не так.
Времена громадных графических header ("шапка") сайта уже прошел. Это было популярно на сайтах с фиксированной шириной главного блока (блочный дизайн). Сейчас все делается под авто-перестройку дизайна сайта силами таблиц стиля (css) для каждого расширения экрана и гаджета (респонсив дизайн).
Все меньше используются фоновые заливки (background) всей страницы и это правильно.
Практически ушел в прошлое flash в связи с невозможностью просматривать его на мобильных гаджетах, но пришел html5.
