Проектирование сайтов. Политех. - Екатерина Шукалова

Проектирование сайтов. Политех.

В этом разделе собраны учебные материалы для студентов, проходящих курс “Проектирование веб-сайтов” у Екатерины Шукаловой.

Раздел будет пополняться регулярно и книгами, и полезными ссылками.

Что надо сделать для сдачи зачета:

  1. Определить бизнес, компанию, личность, идею, для которого будешь разрабатывать сайт.
  2. Сформулировать цели создания сайта
  3. Провести предварительное исследование (целевая аудитория, конкуренты, конкурентное преимущество)
  4. Описать требования к визуализации сайта (цвета, шрифты, фотоматериалы, стандарты оформления контента)
  5. Создать проект будущего сайта (структура сайта, структура страниц, логика работы, описание функционала)

Как надо представить результат:

  • Документ-описание в свободной форме (3-4 листа А4 12 шрифт)
  • Проект (нарисованный от руки, склеенный, сделанный в специальной программе)
  • Презентация проекта (ppt)
  • Защитить проект (ответить на вредные вопросы преподавателя и одногруппников)

В результате освоения дисциплины обучающийся должен:

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

Уметь:
– проводить аудит веб-сайта с точки зрения юзабилити;
– описывать цели, целевую аудиторию, конкурентное преимущество проекта, подлежащего проектированию;
– проектировать основные модули сайта;
– описывать логику работы пользователя с веб-сайтом;
– проектировать наиболее удобные для пользователя пути по сайту.

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

Лекция 1 “Введение в предмет. Основные профессии в веб-мастеринге: проектировщик, веб-дизайнер, верстальщик,программист, контент-менеджер, тестировщик, проджект-менеджер. Компетенции основных профессий в веб-мастеринге. Необходимость и сущность проектирования веб-сайтов. Понятие Юзабилити”

Лабораторная работа 1 “Выбор собственного проекта для проектирования. Подготовка необходимых для выполнения проекта документов.”

Лекция 2 “Определение и формулировка целевого действия пользователя на сайте. Описание алгоритма действий пользователя, приводящего к осуществлению целевого действия. Целевое действие для различных групп пользователей. “

Лабораторная работа 2 “Описание целевой аудитории собственного проекта, формулировка цели создания сайта проектируемого проекта. Сбор статистической информации по конкурентам с использованием интернета, описание конкурентов. Описание целевого действия, совершаемого пользователями на проектируемом ресурсе”

Лекция 3 “Основные этапы предпроектного проектирования сайта. Инструменты проектирования и особенности работы с ними. Логика работы сайта“

Лабораторная работа 3 “Составление структуры проектируемого сайта, описание функциональных модулей собственного проекта”

Лекция 4 “Основы юзабилити. Особенности функционирования модулей сайта: текстовый блок, новости, формы обратной связи, фотогалерея, опросы”

Лабораторная работа 4 “Проектирование модулей:  текстовый блок, новости, формы обратной связи, фотогаллерея, опросы”

ПОЛЕЗНЫЕ ССЫЛКИ ПО ЛЕКЦИИ:

http://www.nngroup.com/

Лекция 5 “Основы юзабилити. Особенности функционирования модулей сайта: каталог товаров, интернет-магазин, регистрация пользователей”

Лабораторная работа 5  “Проектирование модулей: каталог товаров, интернет-магазин, регистрация пользователей”

Лекция 6 “UX (взаимодействия с пользователем), UI (интерфейс пользователя). Сущность, особенности. Построение информационной структуры”

Лабораторная работа 6  “Проектирование модулей: каталог товаров, интернет-магазин, регистрация пользователей”

Лекция 7 “Разработка рекомендаций по дизайну: цвета, образы, шрифты.
Стандарты оформления элементов сайта.
Сопроводительная записка к проекту. “

Лабораторная работа 7  “Описание и построение взаимодействия с пользователями на проектируемом проекте, выявление ошибок”

Лекция 8 “Формирование технических требований к разработчику и формирование ТЗ.”

Лабораторная работа 8 “Составление подробного технического задания на разработку сайта с использованием проекта. Оформление презентации для зачета”

Подготовка в сдаче проекта

СКАЧАТЬ ПРИМЕР ТЗ

Защита разработанной информационной системы

Необходимо оформить: 

  • документ в Google-документах (текстовый), название файла: Номер группы_Название проекта_Фамилия, сделать к документу доступ для eshukalova@gmail.com.
  • собственно проект в https://moqups.com или иной программе по проектированию
  • презентацию для представления проекта.

Содержание текстового документа для зачета

Ссылка на собственный проект в https://moqups.com/

ПРИМЕР: Производство и продажа стимуляторов растений.

  1. Цель: увеличение продаж продукта
  2. Целевая аудитория.
    1. Домашние хозяйства (цветоводы, огордники, садовники)
    2. Ландшафтные дизайнеры
    3. Тепличные хозяйства
    4. CХ угодья
  3. Наше конкурентное преимущество, например, Самый высокоэффективный стимулятор роста растений
  4. Конкуренты (4-5 сайтов)
    ссылка на сайт
    конкурентное преимущество
  5. Тип сайта: корпоративный сайт
  6. Целевое действие:
    звонок
    заполнение заявки на сайте
  7. Функциональные модули
  8. Структура сайта

Содержание презентации и требования к ней

Презентация может быть выполнена либо в 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 

Требования:

  • уложиться во время
  • раскрыть тему
  • ответить на вопросы

Особенное внимание надо обратить на: Стив Круг “Веб-дизайн. Не заставляйте меня думать”

Веб-дизайн.
Автор: Якоб Нильсен
Языки: Русский
Веб-дизайн
Автор: Дмитрий Кирсанов

Описание целевой аудитории

http://powerbranding.ru/potrebitel/ta-description/#second

http://www.uimodeling.ru/process/docs/personas.html

Предпроектное проектирование online

https://moqups.com/

Пожалуй, лучшее ПО для разработки пользовательских интерфейсов

AXURE

300 потрясающих бесплатных сервисов

http://habrahabr.ru/post/250621/

Сервисы для создание анимированных презентаций:

http://goanimate.com/

http://www.powtoon.com/

http://www.wideo.co/

http://www.videoscribe.co/

Элементы проектирования

ПРОЕКТИРОВАНИЕ БЛОКОВ И СТРАНИЦ

пример выполнения задания с помощью сервиса https://moqups.com

  1. Текстовая страница
  2. Новости (архив новостей, подробная новость0
  3. Фотогалерея (архив, подробно)
  4. ФОС (сама форма и страница ответа)
    1. вопрос с сайта
    2. вызов замерщика дверей на дом
    3. регистрация в интернет-магазине
    4. заявка на ипотеку
  5. Поиск по сайту (можно включить в текстовую страницу)
  6. Опрос (форма, ответы)
  7. Комментарии (можно включить в текстовую страницу)
  8. Интернет-магазин
    1. категорийное дерево
    2. страница товарной категории
    3. карточка товара
    4. оформление заказа (по шагам)
    5. регистрация в интернет-магазине (можно использовать то, что делали ранее)
    6. личный кабинет пользователя

Пример спроектированных элементов

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