Недавно я в очередной раз столкнулся с одной из любимейших моих ситуаций — заказчик настаивал на «своем» дизайнере, который, как выяснилось, ни разу в жизни не создавал макеты для web-проектов и на практике абсолютно не представляет себе все аспекты, отличающие полиграфический дизайн от дизайна под web. И, конечно же, выяснился этот момент исключительно после отрисовки первой версии дизайна.
Наученный горьким опытом предыдущих разработок, при которых я вынужден был тратить до половины проектного времени на консультирование и обучение дизайнера, а также непрерывное давление со стороны заказчика — увеличивающимися сроками, в этот раз я решил, что душевное здоровье мне дороже и просто отказался от заказа.
Говоря прямо, эта статья должна была называться «11 распространенных ошибок полиграфических дизайнеров, которые ошибочно считают, что они веб-дизайнеры и создают макеты без малейшего понимания специфики web». Не слишком лицеприятно, но зато полностью отражает суть.
Как всегда, я высказываю свою точку зрения в статье, а вы свою — в комментариях. А самые интересные «ошибки» обязательно будут добавлены в эту статью со ссылкой на их автора.
1. Ни малейшего представления об отрисовке макета в браузере
Это в Photoshop размер листа всегда одинаков, а вот о динамически изменяющемся окне браузера тоже самое сказать нельзя. Это один из наиболее трудных моментов для понимания и осознания полиграфическими дизайнерами, привыкшими к постоянной статике и фиксированным пропорциям.
Верстальщик, получив макет, должен четко понимать — что происходит с макетом при измении размера. Как ведет себя сайт при изменении размера экрана? Растягивается ли фон? Какой из элементов шапки и подвала замещает собой пустое пространство? Каков будет размер у элементов при изменениях размера экрана? Ширина варьируется лишь в определенных пределах или дизайн полностью «резиновый»? Пока на эти вопросы не будет ответа — ни один нормальный верстальщик за макет не возьмется.
Ни в коем случае не стоит пытаться ограничить поведение пользователя и его действия с браузером. Однажды я получил замечательный вопрос от дизайнера, прекрасного в своем неведении: «можно ли открывать окно четко фиксированного размера, вне зависимости от разрешения монитора пользователя, чтобы мой макет отображался адекватно?» Можно, от чего же нет — но только в бразуере ли проблема?
2. Фиксированная ширина и высота
В идеальном мире весь контент написан, согласован и утвержден до отрисовки дизайна. В реальности же все далеко не так радужно — неприятной для дизайнера тенденцией к изменениям обладают и объемы текста, и содержание блоков, и стили форматирования. К сожалению, начинающие дизайнеры редко задумываются над тем, что произойдет, если изменится тот или иной текстовый элемент — их пять строчек «Lorem Ipsum» выстраиваются в блоке идеально и они счастливы.
Ну, а о том, что латиница позиционируется не так, как кириллица — знает дай бог, чтобы 1% от общей массы новичков.
Но текстовые материалы лишь часть глобальной проблемы. Навигационные элементы имеют исключительную и первоочередную важность — что произойдет, если на сайт будет добавлена новая страница, новый рекламный блок, новое баннерное место? Есть ли свободное место для нового пункта меню? Из всех виденных мною дизайнеров-новичков, не более 10% задумывалось над такими вещами — остальные же просто ограничивались макетом фиксированной ширины с намертво вписанным в него меню и считали, что все замечательно.
3. Игнорирование пользовательских предпочтений
Если дизайнер безмерно горд своим 30″ монитором с разрешением 1920х1080, не стоит считать, что каждый пользователь обладает подобным же оборудованием. Причем многие новички, получив по поводу своего макета комментарий: «привести пропорции к среднестатистическим 1024х768» не находили ничего более умного, чем просто уменьшить макет с помощью «Image size». О том, что происходило с мелкими элементами, думаю, рассказывать не имеет смысла.
В мире мобильных устройств всё еще хуже — большинство дизайнеров считает, что каждый посетитель сайта — владелец именно той же модели смартфона или коммуникатора, что и разработчик макета.
4. Субпиксельный макет
Большинство дизайнеров, пришедших (или точнее «вступивших» ) в web из полиграфии, очень удивляются, когда ровно через 30 секунд после отправки макета, получают комментарий — «переделать под 72 точки». А что тут трудного — когда тебе по почте приходит файл с макетом стартовой страницы размером в 30-50 мегабайт, догадаться о том сколько в нем DPI, не представляется чем-то из ряда вон выходящим.
5. Использование нестандартных шрифтов
Со временем, типографика в веб становится все проще, но даже сейчас использовать любой понравившийся шрифт безболезненно можно все еще только в формате картинок. Не каждая OS и браузер поддерживают те шрифты, которые дизайнер хочет использовать в макете. Кроме того, большинство шрифтовых конструкций в браузере работает далеко не так хорошо, как дизайнер отрисовал в размере 10,5 pt в Photoshop.
С объяснений о несоответствии размера шрифта, межстрочных интервалов, кернинга и прочих атрибутов при равных значениях в Photoshop и в браузере (-ах), я начинаю обсуждение практически каждого макета, нарисованного новичком. А ответы типа «ну у меня же этот шрифт есть, он бесплатный, пусть и пользователь поставит!» уже практически перестали веселить.
6. Отсутствие знаний о принципах верстки
Большинство новичков искренне считают, что задача дизайнера — лишь нарисовать красивую картинку, а после передать его верстальщику-чудотворцу, который, используя свои недюжинные таланты, будет лепить конфету из полученного. А информацией о том — как именно происходит верстка; что допускается, а что нет; каким образом функционал сайта будет интегрироваться в эту картинку — пусть забивает себе голову тот, кому за это платят.
Типичный пример — заголовки, использующие фантастические шрифты и эффекты, которые можно реализовать только с помощью графики. Все замечательно, пока сайт состоит из 5-10 страниц. А что, если страниц будет порядка двух-трёх тысяч? Дизайнер очень быстро осознаёт свою ошибку, когда вынужден отрисовывать 50 уникальных заголовков ежедневно.
Однажды мне довелось присутствовать при «mortal combat» между дизайнером и разработчиком, в ходе которого первый, прочитав где-то о создании изображений средствами PHP и библиотеки GD, доказывал второму, что исключительно ограниченность и зашоренность его боевых товарищей не позволяют реализовать макет именно так, как запланировано его творцом. Чуть до рукоприкладства не дошло, но разработчик был крупнее, массивнее и явно злее — и, видимо, именно осознание этого факта удержало дизайнера от необдуманных поступков.
7. Последовательность в действиях
Еще одной замечательной особенностью новичков является любовь к так называемой «подгонке по месту». Если в макете стартовой страницы используются иконки размером 100х50 пикселей, не стоит в макете внутренних страниц менять их на 95х45, лишь для того, чтобы они удачно подходили под внутреннее наполнение.
8. «Ссылочная забывчивость»
Никому не открою секрет, сказав, что ссылки — основа веб. Если вы не выделяете ссылки цветом или отличным от обычного текста стилем, вы абсолютно сознательно, с самого начала создаете проблемы для будущих посетителей сайта.
Многие эксперты по юзабилити говорят, что ссылка обязательно должна быть синей и подчеркнутой в любом варианте — мол, более привычный элемент для красного глаза заядлого интернетчика найти трудно. На мой взгляд, полностью соглашаться с этим утверждением не обязательно, но как бы не тянулась рука — никогда не подчеркивайте текст, если он не является ссылкой.
Еще одним практически постоянным моим комментарием стал: «а как выглядят ссылки?». Большинство начинающих web-дизайнеров в принципе не задумывается над тем, что нужно каким-либо образом выделять ссылки на страницах, а в генераторах Lorem Ipsum подобный функционал не предусмотрен.
9. Непонятные эффекты или анимация
Одним из наихудших моментов макетов в Photoshop является тот факт, что они не содержат в себе CSS, Javascript, Ajax и прочий инструментарий, который призван реализовывать различного рода эффекты. Поэтому, необходимо всегда отрисовывать подобного рода элементы в различных состояниях — открытые/закрытые меню, раздвижные и разворачивающиеся элементы в различных положениях и т.д.
10. Нереализуемые формы
Да, я знаю, что обычная форма и ее элементы выглядят скучно, серо и даже уныло. И практически любой начинающий дизайнер обязательно старается внести свой вклад в копилку идей по улучшению и украшательству стандартных элементов, пытаясь заменить их порождениями своего разума.
Другой вопрос, что не смотря на всю свою банальность, стандартные формы и элементы управления легко отрисовываются браузерами и изначально понятны и привычны пользователям. Соглашусь и с тем, что иногда встречаются функциональные решения, которые необходимо реализовывать с помощью нестандартных элементов, но такие ситуации скорее исключение из правил.
Разного рода ползунки, нестандартные скроллинги и прочая атрибутика могут положительно сказываться на чувстве собственной важности дизайнера (да, впрочем, и на ощущении своей крутости — программиста), но пользователь с отключенным JavaScript или использующий плагин на подобии NoScript — не сможет оценить всю предлагаемую прелесть.
11. Рациональное использование технологий
В моей практике, большинство полиграфических дизайнеров очень любят Flash. В принципе, этот момент понятен — с точки зрения дизайнера, Flash является «переходной» технологией, позволяя с одной стороны уже создавать динамические сайты, с другой же — не требуя большого багажа знаний по web-технологиям. Только, к сожалению, чаще всего вместо нормального интернет-представительства, на свет появляются нелицеприятные гомункулусы, со вставленными в качестве фона многомегабайтными картинками и бессмысленной анимацией, обреченные погибнуть после пары сеансов общения неопытного заказчика с адекватным разработчиком и маркетологом.
Flash — совершенно отдельная технология, требующая отдельных знаний и умений. И, как показывает опыт и практика, с наскока его не взять.
Есть вещи, которые имеет смысл делать на Flash, поскольку с помощью HTML подобный функционал невозможно реализовать (хотя, HTML5, возможно, изменит положение вещей). А есть решения, которые можно сделать только на HTML и нельзя сделать на Flash. Но не стоит пытаться «впихнуть невпихуемое», в особенности не обсудив предварительно задачу с клиентом и разработчиком.
12. Потеря интереса к проекту
Столкнувшись с необходимостью постоянных изменений (чаще всего не в лучшую сторону) и ограниченим полета мысли и фантазии — суровыми условиями реальности, большинство творческих личностей начинает «киснуть», все чаще сетуя на давящие кандалы ограничений и выдавая на гора продукт все более низкого качества.
И вот именно здесь можно очень четко определить, сможет и захочет ли дизайнер работать «на два фронта» — полиграфический и web, или же просто решил срубить денег по-легкому и вернуться в привычную область А4. Профессионалов первой категории я обязательно «откладываю» для потенциальных предложений дальнейшей работы, а вторых — сразу же заношу в персональный blacklist.
artzonetlt советует: «начинающие дизайнеры используют фотошопное сглаживание шрифтов. заказчик потом негодует: «почему на макете так красиво, а на сайте шрифт другой?»
zmei советует: «хорошо если в макете учтено разное состояние ссылок. Кроме обычного как минимум — hover и visited.»
tumbr советует: «1. Я бы советовал всем дизайнерам и верстальщикам перебираться с Photoshop на Fireworks.
2. Перед созданием макета набросайте его прототип на листочке и продумайте функционал — сэкономите кучу времени.
3. При отрисовке макета всегда используйте сетку в 10 пикселей (или любой другой размер) + поставьте «прилипание» к этой сетке — сайт станет на порядок аккуратнее и гармоничнее.»
А с какими проблемами при работе с начинающими web-дизайнерами сталкивались вы?
Вебмастер самоучка Never Lex уже написал отзыв о первом месяце тренинга «Web-Гуру», который сейчас активно проходит. На тренинге он изучает веб программирование под присмотром профессиональных программистов.