Логотип TO NakedArt
Вёрстка макетов веб-сайта и проверка их функциональности

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

Рекомендуется также сформировать прототип сайта (протосайт), это расширение макетов, разработка структуры сайта – используется для выверки переходов страниц, навигации и контента. Протосайт обычно не включает особой функциональности, хотя иногда применяются «облегченные» сценарии. Обычно протосайт является просто структурным макетом (без оформительских эффектов – достаточно ввести несколько цветов, чтобы выделить навигацию) с активными ссылками. Это каркасный макет сайта, который позволяет проверить контент, навигацию и основную функциональность (или имитацию предполагаемых функциональных возможностей), чтобы удостовериться, действует ли выбранная информационная модель.

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

Правильный подход к вёрстке макетов сайта

Рекомендуется, чтобы протосайт был протестирован и проектной группой и клиентом. Заполните его всем содержимым, которое уже готово. Дайте клиенту увидеть контент на странице, даже если оно еще не в окончательной позиции размещения – это только поможет клиенту сформировать собственное восприятие и обоснованную оценку сайта. Увидев протосайт собственными глазами, клиенты легче обнаружат пробелы в контенте, выявят перенасыщенные текстом страницы или решат, какое содержимое следует переместить из запланированного места, потому что там оно не имеет смысла. Клиент может удивиться необходимости прокрутки на одних страницах и пустоте других и может задуматься о перекомпоновке всего контента. Лучше принять такое решение на этой стадии, чем после запуска сайта.

Насколько необходим протосайт? Проверка предположений до того, как вложить значительные средства в дизайн и производство, всегда очень ценна. Тестирование, насколько возможно, должно быть частью каждой технологии на многих этапах процесса. Иногда протосайт после выверки функциональности и навигации становится совсем ненужным, а иногда фактический дизайн сайта формируется на основе этого протосайта (приятно, когда можно сохранить то, что создано). Так или иначе, это все равно пробное производство, даже если протосайт совсем отбрасывается, а фактический дизайн пересматривается и формируется заново (такое тоже случается). Этап создания протосайта можно пропустить, если есть уверенность в надежности контента, навигации и дизайна. Если с ресурсами большая напряженность, проверку функциональности можно перенести в стадию производства, а выверку информационного дизайна произвести на макетах. Но адекватность – это всё же не тождественность, и если были проблемы с навигацией и организацией или если требуется нечто большее, чем обычное программирование, то в таком случае протосайт – прекрасное средство для устранения беспокойства по поводу этих аспектов.

Проверка функциональности

Проверка функциональности индивидуальных возможностей до начала фактической вёрстки макетов – разумный шаг. Совместимость браузеров, скорость связи, платформы и плагины – всё это аспекты функциональности, которые исторически проблематичны и нуждаются в проверке как в отношении возможностей аудитории, так и в плане производственной выполнимости. Идея с выпадающими меню, реализуемая при помощи скрипта, может казаться превосходной во время мозгового штурма, но если в действительности это несовместимо с некоторыми браузерами или с компьютерами Мак, тогда будет потеряна существенная часть аудитории, и это решение становится неприемлемым. Кроме того, проверяя предположения на этой стадии, можно выяснить, нет ли изменений в масштабе проекта.

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

Контроль над клиентом

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

Этапы работы по вёрстке макетов сайта

Иногда клиентам нравится уже первый показанный вариант, а иногда им не угодишь. В любом случае зачастую им трудно найти время, чтобы выразить свое мнение. Это тоже часть творческого процесса – вносите в бюджет и её. Не исключено также, что и дизайнеры не сразу найдут нужное решение, может потребоваться несколько дополнительных раундов проектирования, чтобы удовлетворить всем требованиям, заявленным в креативном брифе. По этой причине нельзя обвинять клиента (и значит, предъявлять дополнительный счёт) за торможение работ. Однако можно требовать ответственности клиента за изменения в стиле оформления, добавление большого количества страниц или изменения в навигации.

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

Ещё статьи по теме

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

Начало творческого процесса по создаю сайта и его концепции
Начало творческого процесса по создаю сайта и его концепции

Каждый клиент терпеливо или с нетерпением ждёт первого представления своего нового сайта. Но прежде, чем это произойдёт, проектная группа должна – провести серьезный мозговой штурм для выработки решений на творческом и техническом уровнях. Не надейтесь, что дизайн визуального оформления возможно сделать в один прием, и не позволяйте клиенту рассчитывать на это…

Симметрия – это смерть, и хаос создает коммерцию
Симметрия – это смерть, и хаос создает коммерцию

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

Этапы разработки графического дизайна шаблонов веб-сайта
Этапы разработки графического дизайна шаблонов веб-сайта

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

Сотрудничайте с нами и получайте % от заказа

Вы имеете возможность передать нам выполнение любого заказа, получив вполне заслуженное вознаграждение в размере суммы — от 10 до 20% комиссионных итоговой стоимости каждого переданного студии проекта

Cайт NakedArt.ru использует файлы cookie и другие современные технологии для вашего удобства и защиты персональных данных