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

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

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

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

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

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

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

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

Работа верстальщика в создании дизайна сайта

Координирование веб-производства требует способности и опыта. В зависимости от квалификации группы следует определить истинный уровень сложности, который может представлять производство сайта. Например, если создается сайт брошюрного типа с 20-40 страницами и несложными сценариями на JavaScript, то, вероятно, можно справиться с этим, прибегнув к помощи редакторов. Если же сайт сложнее – потребуется умение решать проблемы, то есть потребуются люди, очень хорошо владеющие своей профессией. Это предполагает умение вручную кодировать страницы или, по крайней мере, читать и понимать код достаточно хорошо, чтобы решать проблемы в ходе производственного процесса.

И до того, как приступить непосредственно к кодированию, очень полезно еще раз проанализировать возможности аудитории (браузеры, размеры экранов, скорость связи), технологии (плагины, сценарии, потребности внутреннего программирования) и цели дизайна (размер загрузки, привычки пользователей). Следует решить сложные вопросы относительно серверов, структуры каталогов и специфики сайта, которые, возможно, были оставлены до этого. Здесь может помочь ведомость клиентских технических требований. Ваша цель? Никакого неверного толкования возможностей пользователя или целей проекта.

Составление рекомендаций

Составление ещё при подготовке проекта веб-дизайна четких рекомендаций для вёрстки помогает найти ответы на вопросы и избежать дорогостоящего отступления назад. Ведомость клиентских технических требований определяет характеристики возможностей аудитории и технических стандартов для сайта. Это рабочая таблица. Она длинная, подробная и имеет технический характер. Клиент может просто ответить: «Я не знаю. Вы специалисты; вы объясните мне». Некоторые объяснения, вероятно, необходимы. Например, руководитель проекта или ведущий верстальщик могут охарактеризовать, как отразится выбор поддержки браузеров на возможность использования некоторых функциональных возможностей.

Процесс разработки шаблонов веб-сайта

Постарайтесь побыстрее получить отзывы клиента. Их следует получить и проанализировать ещё до того, как дизайнеры начнут разрабатывать концепции, и уж конечно до того, как верстальщики начнут формировать протосайт. Ведущий верстальщик обязательно должен быть контактным лицом группы; руководитель проекта может быть, а может не быть знатоком по технической части. Постарайтесь получить от клиента – или его ключевых технических специалистов – подробные ответы на все вопросы, добавляя по мере необходимости дополнительные комментарии. Попросите клиента ставить пометку «Не известно» рядом с несущественными пунктами и указать области, в которых необходимы советы, предложения или уточнения.

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

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

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

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

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

Процесс разработки веб-сайта от концепции до запуска проекта
Процесс разработки веб-сайта от концепции до запуска проекта

Главное в сегодняшнем Интернете – доступность сайтов пользователям. Проектирование для Сети означает создание двумерных, на первый взгляд – отображений, как на печати, но их истинный характер заключается во взаимосвязанности, интерактивности и многослойности информации. Это делает веб-дизайн во многом подобным классическому промышленному дизайну…

Краткий курс ориентирования в дезориентации
Краткий курс ориентирования в дезориентации

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

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

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

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