Главная → Вебдизайн → by

Этапы веб-дизайна.

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

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

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

Типичные процессы

Вот стандартный процесс, который был составлен с использованием примеров из разных интернет ресурсов, а также моего собственного опыта (Примечание:. Пожалуйста, просматривайте ссылки в конце каждого пункта)

1.Планирование.

Стадия планирования, возможно, самая важная, поскольку именно здесь зарождается основа для всего проекта. Это также стадия, которая требует взаимодействия с клиентом и внимательного отношения к деталям.

  • Анализ требований. Этот этап включает в себя изучение клиентских целей, целевой аудитории, подробную проработку запросных функций и сбор такого объема информации, какой только можно собрать. Даже если клиент тщательно спланировал свой веб-сайт, не бойтесь предлагать полезные советы руководствуясь своим опытом.
  • Устав проекта. Устав проекта (или эквивалентный документ) суммирует информацию, которая была собрана и согласована в предыдущем пункте. Эти документы, как правило, краткие и лишены технической информации. Они служат в качестве эталона по всему проекту.
  • Карта сайт. Карта предназначена для пользователей, которые теряются в структуре или которым быстро нужно найти часть информации. Для хорошего дизайна вместо простого перечисления страниц нужно использовать ссылки и страничную иерархию.
  • Договоры, которые определяют роль, авторского права и финансовых условий. Это очень важный элемент документации, который должен включать в себя условия оплаты, пункты закрытия проекта, завершение статьи, авторское право владения и сроки. Будьте осторожны, связывая себя с этим документом, он должен быть краткими и эффективным.
  • Получите доступ к серверу и создайте структуру папок. Типичная информация для получения и проверки включает в себя FTP хост, имя пользователя и пароль; панель управления, регистрационную информацию, конфигурацию базы данных, а также любые языки или рамки.
  • Определите необходимое программное обеспечение и ресурсы (фотографии, шрифты и т.д.). Помимо определения необходимых сторонних средств массовой информации, определите, где вам, возможно, придется нанять субподрядчиков и что для этого не требуется никакого дополнительного программного обеспечения. Добавьте все это в бюджет проекта и если необходимо предупредите клиента.

    Ресурс ссылок на этом этапе:

2.Проектирование.

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

  • Реализация элементов проекта. Это этап, на котором визуальный макет веб-сайта, начинает обретать форму. Использование информации, полученной от клиента на этапе планирования дает возможность приступить к разработке шаблона сайта. Карандаш и бумага будут удивительно полезными на этом этапе, хотя существует и множество онлайн инструментов.
  • Формы на основе анализа требований. Разработка форм в Photoshop позволяет относительно легко модифицировать, создать организованные слои элементов, которые затем будет проще привязать к программному коду.
  • Обзор и утверждение циклов. Постоянная смена внешнего вида и настройка форм будет повторяться до тех пор пока (в идеале) клиента и подрядчик не будут полностью удовлетворены дизайном. Это самое простое время для внесения изменений, а не после того как элементы дизайна были привязаны к коду.
  • Используйте правильный код XHTML/CSS. Наступает время создания кода. Нарежьте окончательные макеты в Photoshop и начинайте писать HTML и CSS код для базовой конструкции. Интерактивные элементы и JQuery обрабатываются позже: сейчас, просто получите визуальное представление общей картины на экране и не забудьте проверить весь код, прежде чем запускать его.

Ресурс ссылок на этом этапе:

3.Разработка.

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

  • Постройте основу разработки. Только уникальные требования могут заставить вас отклониться от этого процесса. Если вы имеете разработки на базе Ruby,  ASP / PHP основы или системы управления контентом, сейчас самое время, чтобы реализовать их и получить основной двигатель. Проделывая это на начальном этапе, вы гарантируете, что сервер сможет обрабатывать установки и настройки.
  • Кодовые шаблоны для каждого типа страниц. Веб-сайт как правило, имеет несколько страниц (например, дом, общее содержание, блог, формы), которые могут быть созданы на основе шаблонов. Создание собственных шаблонов для подобных целей хорошая практика.
  • Разработка и тестирование специальных элементов и интерактивности. Здесь начинает действовать ваша фантазия, создавая причудливые элементы. Я люблю прорабатывать этот этап, прежде чем добавить статический контент. Но для начала нужно обеспечить относительно простое и понятное рабочее пространство. Некоторые разработчики хотели бы получить форму проверки и подтверждения успешности данного этапа.
  • Залейте контент. Время для самой скучной части: загрузки всего содержимого, предоставленного клиентом или писателями. На этом этапе нередки ошибки и оплошности, потому что даже для простейшей страницы требуется жесткий контроль типографики и внимательное отношение к деталям.
  • Испытание и проверка функциональности ссылок. Это хорошее время для полного обзора веб-сайта. Используя файловый менеджер, пройдите по всем, созданным вами, страницам — начиная с главной страницы представления до страницы подтверждения — и убедитесь, что все находится в рабочем состоянии и что вы не пропустили какой-нибудь визуальный или функциональный элемент.

Ресурс ссылок на этом этапе:

4.Запуск.

Целью запуска является подготовка сайта для публичного просмотра. Этот этап требует окончательной полировки элементов дизайна, глубокого тестирования интерактивности и возможностей, а также, рассмотрения пользовательского опыта. Важным шагом на этом этапе является переход на сайт, если это будет необходимо, с его постоянного веб-сервера.Тестирование в производственной среде важно, потому что разные серверы могут иметь различные особенности и неожиданное поведение (например, разные адреса хоста базы данных).

  • Полирование. Кроме того, что вы должны завершить разработку в установленный срок, вам также необходимо устранить неточности и внести нужные корректировки. Здесь вы можете определить разделы сайта, которые могут быть улучшены за счет разных мелочей. В конце концов, вы хотите чувствовать гордость, когда клиент даст положительные отзывы о сайте.
  • Проверка сервера. Этот этап предполагает работу на реальном веб-сервере (хотя мы надеемся, что вы уже проводили тестирование в производственной среде), “выделение скрытых областей” веб-сайта или удаление страниц “под конструкцию”. Сейчас наступает момент рассмотрения живого сайта. Убедитесь, что клиент знает об этом этапе, и выделит вам столько времени, сколько потребуется.
  • Тестирование. Запуск веб-сайт …

    Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров


    Главная → Вебдизайн → by

Comments are closed.