В этом разделе собраны учебные материалы для студентов, проходящих курс “Проектирование веб-сайтов” у Екатерины Шукаловой.
Раздел будет пополняться регулярно и книгами, и полезными ссылками.
Что надо сделать для сдачи зачета:
- Определить бизнес, компанию, личность, идею, для которого будешь разрабатывать сайт.
- Сформулировать цели создания сайта
- Провести предварительное исследование (целевая аудитория, конкуренты, конкурентное преимущество)
- Описать требования к визуализации сайта (цвета, шрифты, фотоматериалы, стандарты оформления контента)
- Создать проект будущего сайта (структура сайта, структура страниц, логика работы, описание функционала)
Как надо представить результат:
- Документ-описание в свободной форме (3-4 листа А4 12 шрифт)
- Проект (нарисованный от руки, склеенный, сделанный в специальной программе)
- Презентация проекта (ppt)
- Защитить проект (ответить на вредные вопросы преподавателя и одногруппников)
В результате освоения дисциплины обучающийся должен:
Знать:
– основы юзабилити;
– основы веб-дизайна;
– основы анализа целей, целевой аудитории и конкурентного преимущества бизнеса;
– назначение и структуру логических блоков сайта: навигация, контент;
– основные функциональные блоки веб-сайта и особенности их функционирования.
Уметь:
– проводить аудит веб-сайта с точки зрения юзабилити;
– описывать цели, целевую аудиторию, конкурентное преимущество проекта, подлежащего проектированию;
– проектировать основные модули сайта;
– описывать логику работы пользователя с веб-сайтом;
– проектировать наиболее удобные для пользователя пути по сайту.
Владеть
– методами оценки юзабилити веб-сайтов;
– способами визуального создания структуры конфигурации (блоков, функциональных областей, логических частей веб-сайта и т.д.);
– приемами разработки поведенческих сценариев пользователя на проектируемом ресурсе;
– методами формирования простых отчетов.
и демонстрировать способность и готовность применять полученные знания в практической деятельности.
Лекция 1 “Введение в предмет. Основные профессии в веб-мастеринге: проектировщик, веб-дизайнер, верстальщик,программист, контент-менеджер, тестировщик, проджект-менеджер. Компетенции основных профессий в веб-мастеринге. Необходимость и сущность проектирования веб-сайтов. Понятие Юзабилити”
Лабораторная работа 1 “Выбор собственного проекта для проектирования. Подготовка необходимых для выполнения проекта документов.”
Лекция 2 “Определение и формулировка целевого действия пользователя на сайте. Описание алгоритма действий пользователя, приводящего к осуществлению целевого действия. Целевое действие для различных групп пользователей. “
Лабораторная работа 2 “Описание целевой аудитории собственного проекта, формулировка цели создания сайта проектируемого проекта. Сбор статистической информации по конкурентам с использованием интернета, описание конкурентов. Описание целевого действия, совершаемого пользователями на проектируемом ресурсе”
Лекция 3 “Основные этапы предпроектного проектирования сайта. Инструменты проектирования и особенности работы с ними. Логика работы сайта“
Лабораторная работа 3 “Составление структуры проектируемого сайта, описание функциональных модулей собственного проекта”
Лекция 4 “Основы юзабилити. Особенности функционирования модулей сайта: текстовый блок, новости, формы обратной связи, фотогалерея, опросы”
Лабораторная работа 4 “Проектирование модулей: текстовый блок, новости, формы обратной связи, фотогаллерея, опросы”
ПОЛЕЗНЫЕ ССЫЛКИ ПО ЛЕКЦИИ:
Лекция 5 “Основы юзабилити. Особенности функционирования модулей сайта: каталог товаров, интернет-магазин, регистрация пользователей”
Лабораторная работа 5 “Проектирование модулей: каталог товаров, интернет-магазин, регистрация пользователей”
Лекция 6 “UX (взаимодействия с пользователем), UI (интерфейс пользователя). Сущность, особенности. Построение информационной структуры”
Лабораторная работа 6 “Проектирование модулей: каталог товаров, интернет-магазин, регистрация пользователей”
Лекция 7 “Разработка рекомендаций по дизайну: цвета, образы, шрифты.
Стандарты оформления элементов сайта.
Сопроводительная записка к проекту. “
Лабораторная работа 7 “Описание и построение взаимодействия с пользователями на проектируемом проекте, выявление ошибок”
Лекция 8 “Формирование технических требований к разработчику и формирование ТЗ.”
Лабораторная работа 8 “Составление подробного технического задания на разработку сайта с использованием проекта. Оформление презентации для зачета”
Подготовка в сдаче проекта
Защита разработанной информационной системы
Необходимо оформить:
- документ в Google-документах (текстовый), название файла: Номер группы_Название проекта_Фамилия, сделать к документу доступ для eshukalova@gmail.com.
- собственно проект в https://moqups.com или иной программе по проектированию
- презентацию для представления проекта.
Содержание текстового документа для зачета
Ссылка на собственный проект в https://moqups.com/
- ПРИМЕР: Производство и продажа стимуляторов растений.
- Цель: увеличение продаж продукта
- Целевая аудитория.Домашние хозяйства (цветоводы, огордники, садовники)
- Домашние хозяйства (цветоводы, огордники, садовники)
- Ландшафтные дизайнеры
- Тепличные хозяйства
- CХ угодья
- Наше конкурентное преимущество, например, Самый высокоэффективный стимулятор роста растений
- Конкуренты (4-5 сайтов)
ссылка на сайт
конкурентное преимущество - Тип сайта: корпоративный сайт
- Целевое действие:
звонок
заполнение заявки на сайте - Функциональные модули
- Структура сайта
Содержание презентации и требования к ней
Презентация может быть выполнена либо в Google Docs (что предпочтительнее. Желательно расшарашить на eshukalova@gmail.com), либо в PowerPoint (или аналогичных программных комплексах. В этом случае презентация предоставляется на флешке), либо с использованием облачных сервисов создания анимированных презентаций.
СОДЕРЖАНИЕ:
- обложка
- суть проекта (сайта)
- цель сайта
- целевая аудитория, разбитая по персонажам
- конкурентное преимущество*
- описание целевого действия, к которому надо привести пользователя
- цветовое решение
- требования к контенту
- описание функционала
- демонстрация основных страниц сайта с комментариями по использованию элементов
- описание возможных путей по сайту для каждого описанного персонажа
- контакты
*необязательно
ТРЕБОВАНИЯ:
- формат ppt, pptx, pdf (можно в Google-документах)
- единое стилистическое решение по оформлению
Критерии оценки зачетной работы
Необходимо иметь ввиду, что посещение занятий и активное участие в семинарах является дополнительным критерием, увеличивающим шанс получить зачет.
1. Обязательное наличие всех трех документов
При отсутствии хотя бы одного документа – незачет!
2. За каждый документ выставляется оценка от 1 до 5
Средняя оценка по всем документам – 3
Требования к документ в Google-документах (текстовый)
- заполнен полностью. Особое внимание уделить цели создания сайта и описанию целевой аудитории. Описание каждого сегмента с фотографией персонажа.
- дан доступ для eshukalova@gmail.com. ОТСУТСТВИЕ ДОСТУПА = ОТСУТСТВИЕ ДОКУМЕНТА
- в начале документа указана ссылка на проект в https://moqups.com/
Требования к проекту на https://moqups.com/
- ОТСУТСТВИЕ ССЫЛКИ НА ПРОЕКТ В ТЕКСТОВОМ ДОКУМЕНТЕ = ОТСУТСТВИЕ ПРОЕКТА
- отвечает основным принципам юзабилити
- решает задачи пользователей (персонажей)
- присутствуют основные страницы
Требования к презентации
- соответствие требованиям
3. Защита проекта 5 мин (максимум) выставляется оценка от 1 до 5
Требования:
- уложиться во время
- раскрыть тему
- ответить на вопросы
Особенное внимание надо обратить на: Стив Круг “Веб-дизайн. Не заставляйте меня думать”
https://www.ozon.ru/product/veb-dizayn-kniga-yakoba-nilsena-126954/?sh=D-NKBnaqog
https://www.ozon.ru/product/veb-dizayn-kniga-dmitriya-kirsanova-88890/?sh=D-NKBp6ROA
Описание целевой аудитории
http://powerbranding.ru/potrebitel/ta-description/#second
Предпроектное проектирование online
Пожалуй, лучшее ПО для разработки пользовательских интерфейсов
AXURE
300 потрясающих бесплатных сервисов
https://habrahabr.ru/post/250621/
Сервисы для создания анимированных презентаций:
Элементы проектирования
ПРОЕКТИРОВАНИЕ БЛОКОВ И СТРАНИЦ
пример выполнения задания с помощью сервиса https://moqups.com
1. Текстовая страница
2. Новости (архив новостей, подробная новость0
3. Фотогалерея (архив, подробно)
4. ФОС (сама форма и страница ответа)
- вопрос с сайта
- вызов замерщика дверей на дом
- регистрация в интернет-магазине
- заявка на ипотеку
5. Поиск по сайту (можно включить в текстовую страницу)
6. Опрос (форма, ответы)
7. Комментарии (можно включить в текстовую страницу)
8. Интернет-магазин
- категорийное дерево
- страница товарной категории
- карточка товара
- оформление заказа (по шагам)
- регистрация в интернет-магазине (можно использовать то, что делали ранее)
- личный кабинет пользователя