Композиции на бумаге и на экране

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

Нарисуйте макет сайта:

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

IV СОЗДАНИЕ ПРОБНОГО САЙТА

 

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

Реализация фиктивного сайта начинается с разбиения цифровых композиций страниц на отдельные блоки и "сборки" страниц в нужном по­рядке при помощи HTML и, возможно, CSS. Старайтесь проводить сборку сайта по шаблонам, так чтобы весь сайт в целом можно было смонтировать очень быстро.

! Не стоит помещать на свои места содержимое сайта. Используйте имитацию текста на большинстве страниц, если только сцена­рии тестирования не предполагают присутствие реального текста.

 

Когда фиктивный сайт смонтирован, он должен демонстрировать полные возмож­ности системы навигации, а также заранее заданную интерактивность, но при этом не иметь содержимого.

Реализация бета-сайта

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

V ТЕСТИРОВАНИЕ

Не то­ропитесь выпускать сайт. Тестирование является ключом к положительному значению конечной оценки сайта пользователем. Не заставляйте пользователей тести­ровать ваш сайт уже после его выхода.

 

Всегда пом­ните следующее правило дизайна.

Сайты всегда имеют ошибки, поэтому тестируйте ваш сайт как можно лучше.

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

 

Тестирование визуальной приемлемости

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

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

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

Проверка содержимого

Детали содержимого критически важны для любого сайта. Убедитесь в том, что все компоненты содержимого расставлены по своим местам и согласо­вано использование слов. Обязательно проверьте такие детали, как названия продуктов, даты авторских прав и торговые марки. И всегда следите за ор­фографией! Клиенты и пользователи очень часто запросто приклеивают всему сайту ярлык "неудачного" всего лишь из-за одной простейшей опечат­ки. Важность этого просто нельзя переоценить. Наилучший способ выпол­нения данного этапа тестирования заключается в том, чтобы распечатать каждую страницу и буквально по отдельным символам проверить правиль­ность текстов.

Проверка совместимости с операционными системами и браузерами

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

 

Тестирование доставки

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

 

Тестирование реакции пользователей

! Пользовательское тестирование — это самая важная форма тестирования

 

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

Выпуск и дальнейшее обслуживание

 

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

Со временем обяза­тельно потребуется реализовать на сайте новые возможности. Неизбежны усовершенствования в связи с обновлением технологий. Весьма вероятны изменения визуального ряда для отражения новых направлений маркетинго­вой стратегии фирмы.

 

Окончание первичной разработки сайта символизи­рует начало непрерывного процесса по усовершенствованию и переработке, который в большинстве случаев носит название технического обслуживания (maintenance).

 

Публикация и продвижение сайта

ЛАБОРАТОРНЫЙ ПРАКТИКУМ

ЛАБОРАТОРНАЯ РАБОТА № 1

«Создание веб-сайта с использованием технологии HTML»

 

Цель – научить студентов создавать базовые веб-структуры с помощью блокнота

 

В рабочей папке Вашего курса создайте папку site, в директории site создайте директорию img, в которой Вы будете хранить графические файлы (*.jpg, *.gif,*.png)

Упражнение 1

1. Наберите в текстовом редакторе (блокнот) следующее:

<html>

<head>

<title>my home page</title>

</head>

<body bgcolor=”#123456”>

<p align=”center”><b><font color=”#0000FF”>Привет! Это моя личная страничка!

</font></b></p>

</body>

</html>

2.Сохраните этот файл под названием ind1.htm в вашей папке. Затем откройте файл для просмотра результата.

Попробуйте поэкспериментировать со своей страничкой ind1.htm. Выберете понравившийся цвет фона, попробуйте окрасить заголовок в тон к фону (см. Основные тэги)

! В программе просмотра, в котором открыта Ваша страница нажмите на правую кнопку, выберите пункт “просмотр HTML-кода” и начинайте редактирование. С этого момента Вы работаете с двумя файлами: текстовым документом и html –файлом.

После редактирования файла с тегами, не забудьте сохранить файл

· Чтобы увидеть результат Вашей работы в браузере нажмите обновить (F5)

· В случае несовпадения кодировки – поменяйте ее в пункте меню Вид.

⇐ Предыдущая14151617181920212223Следующая ⇒

Поделиться:

Воспользуйтесь поиском по сайту: