Художнику о характерных Web дизайна требованиях и особенностях

1. Дизайн для Web рассчитывается под минимальный размер экрана. От этого будут зависеть размеры шрифтов текста, элементов графики и количество информации отображаемое на экране одновременно.

В настоящее время 1024x768 и 1280x1024 наиболее используемые разрешения.

(статистика Converters.ru на 2005.09)

Поэтому стоит рассчитывать, что разрешение дисплея пользователя будет 1024x768

Также следует ввести поправку на размеры рамок и на то, что окно браузера часто не раскрывается на полный экран. Поэтому стоит взять нечто вроде 960x720

2. Web дизайн страницы в отличие от полиграфического бывает двух видов растягиваемый и фиксированный.

Растягиваемый - формирует размеры элементов в зависимости от размера браузера и занимает обычно всю ширину окна браузера. Замечу, само понятие относится скорее к ширине экрана так как по высоте сайты практически всегда делаются растягиваемыми с возможностью прокрутки. Данный вариант хорошо подходит для сайтов с большой наполненностью информацией, когда освободившееся на экране место есть чем заполнить (www.turkmenistan.ru).

Фиксированный дизайн - рассчитан на определенную ширину. Рабочая часть экрана должна быть ограничена или плавно переходить на цвет фона. Остается неизменным при увеличении окна браузера. Обычно выравнивается по левой стороне. Хорошо когда сайт не перегружен информацией и в один момент времени отображается не большое количество информации. (about.Integrum.ru)

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

3. Дизайн для разрезки требуется сохранить в растровом формате:

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

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

-GIF ограничен 256 цветами, что может быть и не плохо для оптимизации размера графики. Поддерживает прозрачность по индексу цвета (один из цветов назначается прозрачным). Формат прежде всего подойдет для изображений с небольшим количеством цветов (особенно для монохромных), таких как фоны, рамочки и т.п.

-PNG самый мощный формат разработанный специально для Web-а. Позволяет передавать изображения в с цветами точности как они выбирались (RGB). Поддерживает прозрачность, альфа каналы и т.п. Один главный недостаток – Internet Explorer имеет неполную поддержку данного формата и часто искажает или не вообще показывает изображения в данном формате.

Для верстальщика потребуется вариант дизайна с примером информационного наполнения и кнопками. Если кнопки сделаны графикой, то в зависимости от режимов работы требуется выслать все варианты каждой кнопки: подсвеченная, активная, неактивная (в едином формате!).

4. Цветопередача на сайтах

-Дизайнер должен учитывать, что цветопередача на жидкокристаллических (ЖК) мониторах и на с электроннолучевой (ЭЛЧ) трубкой отличаются. Картинки передающие нежные оттенки на ЭЛЧ мониторах, на многих ЖК будут выглядеть бледно (Можно использовать систему коррекции Adobe Photoshop или Image Ready).

-Один и тот же цвет в разных форматах может отображаться по-разному. Если сохранить картинку с фоном в jpeg, а потом поместить ее на страницу с фоном, прописанным в коде (RGB), то фон в картинке и фон на странице могут различаться.

Или например, когда сохраняешь часть шапки в gif, а часть в jpeg тоже надо смотреть чтобы цвета не сильно различались.

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

-Параметры шрифтов для вывода текстовой информации. Названия, цвета (RGB), размеры(в пикселях). Замечу Для текста, который будет выводиться программно лучше использовать стандартные шрифты.

-Цвета фона (RGB) для всего экрана, статей, новостей, врезок, и т.п.

-Анимация в gif/flash и т.п. (если есть)

6. Области под текст должны быть прямоугольные с фоном примерно одного цвета

HTML для дизайнера есть несколько неудобных вещей:

1. Текст может быть только прямоугольным и обтекать только картинки

(фотографии и т.п.). В результате непрямоугольных полях под текст или он вылезет за рамки или останется много пустого места.

2. Цвет текста задается заранее и не может простым образом изменяться при перемотке на фон другого цвета. Поэтому если один и тот же тескт может попасть на фоны с сильно отличающемся цветом то на одном из них он будет нечитаем