«Забытые» разрешения экрана

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

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

Так я столкнулся с проблемой отображения сайта на разных разрешениях экранов.Она существовала и вто время,а сей- чассталаещеболееактуальной.Мынаблюдаемстремитель- ный рост количества мобильных устройств, и все больше пользователей заходят с них в сеть.Не секрет,что мы живем в эпоху Post-PC, когда многие люди, обходясь только теле- фонами и планшетами, уже не пользуются персональны- ми компьютерами. Однако и их все же не стоит сбрасывать со счетов.

Как подойти к решению этой проблемы? Для начала огово- рим необходимый минимум мер. При разработке дизайна учитывайте основные, наиболее популярные разрешения дисплеев.Не факт,что клиент будеттребовать показать ему, какмакетбудетсмотретьсянаразныхустройствах,нопреду- смотретьэтислучаи—вашапрофессиональнаяобязанность. Как минимум, вы сами должны представлять себе, как сайт

8

будет адаптироваться под разные разрешения. Правильной тактикой будет написание соответствующих комментариев для верстальщиков,которым вы передаете макет.

Отдельно стоит отметить, что знания основ верстки мо- гут помочь вам в работе над дизайном. Необязательно становиться экспертом в этой сфере, но стоит быть в кур- се развития технологий. Дизайнер сам должен предлагать интересные идеи для функционала сайта, а не получать ре- комендации на этот счет от верстальщиков.Чтобы овладеть знаниями,знакомьтесь с работами ведущих дизайн-студий, читайте тематические издания.

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

наково хорошо отображать сайты как на мониторе компью- тера,так и на смартфоне.

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

стам) потребуется гораздо больше.

Учтите, что достаточно трудоемкая и дорогая разработка адаптивного дизайнатребуется далеко не для всех проектов.Бо- лее простой альтернативой сайту с адаптивным дизайном явля- ется мобильная версия сайта. Так или иначе, ориентация на мо- бильные устройства должна быть одним из ваших приоритетов. Незабывайтеопринципеmobilefirst(«сначаламобильные»).

9

10

Совсем не то,чего хотел клиент

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

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

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

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

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

11

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

12

Прототип—улучшенный макет

Иногда случается ситуация, когда вы нарисовали хороший макет, вроде бы он нравится заказчику, но сопровождается следующим комментарием от него: «ссылки на сайте не ра- ботают!» или «а можно как-то покликать по меню?».

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

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

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

13

14