- •Пояснительная записка курсовой работы
- •Задание на курсовую работу
- •2.7. Создать персонажей проекта и определить их проблематику
- •2.8 Составить сценарии взаимодействия персонажей с интерфейсом
- •3. Проектирование
- •3.1 Составить и описать перечень функциональностей
- •3.3 Создать описание каждой страницы проекта, размечая по ним функциональные возможности и содержимое сайта
- •3.4 Разработать статистический прототип интерфейса
- •3.5 Создать связи между страницами и динамический прототип(рис.21)
- •3.6 Протестировать прототип и доработать его по замечаниям респондентов
- •4. Дизайн
- •4.1 Разработка логотипа и стилистики.
- •4.2 Определить цветовую гамму
- •4.3 Выбрать шрифты
- •4.4 Определить общие положения сетки и расстояний
- •4.5 Создать главную страницу
- •5. Юзабилити-тестирование
- •5.1 Выбор методов тестирования
- •5.3 Выявление проблем и разработка рекомендация по их устранению
- •6. Заключение
- •7. Список литературы
3.4 Разработать статистический прототип интерфейса
Главная(Рис.4):
Рис.4
Услуги(Рис.5)
Рис.5
Продукция(Рис.6)
Рис.6
Новинки(Рис.7)
Рис.7
Популярное (Рис.8)
Рис.8
Вся продукция(Рис.9)
Рис.9
О нас(Рис.10)
Рис.10
Заказы(Рис.11)
Рис.11
Новый(рис.12)
Рис.12
Текущие(Рис.12.1)
Рис 12.1
Акции(Рис.13)
Рис.13
Отзывы(Рис.14)
Рис.14
Регистрация(Рис.15)
Рис.15
Авторизация(Рис.16)
Рис.16
Личный кабинет(Рис.17)
Рис.17
3.5 Создать связи между страницами и динамический прототип(рис.21)
Рис.21
3.6 Протестировать прототип и доработать его по замечаниям респондентов
Пользователю было дано задание пройти те пункты, которые описаны в сценариях:
1) Заказы → Новый → Заказать;
2) Отзывы → Оставить отзыв;
3) Контакты;
Все задания выполнялись мужчиной . Время на выполнения сценария было затрачено минимально, так как всё описание было кратким и понятным. Пользователь быстро нашел нужную услугу, заполнил заявку и отправил. В справке вся информация выделена в отдельные блоки, чтобы разделить содержимое. Осталось добавить простое и не вызывающее графическое оформление, которое не повлияет на скорость работы на сайте.
Перемещение на главную страницу через логотип недостаточно, нужно добавить кнопку.
4. Дизайн
4.1 Разработка логотипа и стилистики.
Исследование логотипа аналогов.
Сайта belsteel |
Сайта Logus |
|
|
Логотип сайта belsteel. Сделан с применением черно-желтого цвета, что привлекает внимание пользователя. Логотип выполнен в виде отлитых из металла букв, что делает отсылку на так что сайт занимается металлическими изделиями.
|
В логотипе присутствует название сайта сделанное с помощью синего цвета. На фоне серого и белого цветов данный синий цвет выделяется, но является «холодным» цветом. Присутствует изображение шестерни, что дает намек на продукцию.
|
Выводы по данным аналогам: Название сайта должно быть выполнено «необычным» шрифтом, что бы не казалось однообразным на фоне всего сайта. Должно быть выполнено с использованием ярких цветов. На логотипе должен присутствовать намек на продукцию. Так же я считаю, что на логотипе должен присутствовать хотя бы один из видов продукции металлургического завода.
Логотип(рис.22)
Рис.22
Цветовые вариации: Данный логотип может быть представлен в единственном цвете
шрифт логотипа - Broadway:
АБВГДЕЁЖЗИК(шрифт не отображается)
Абвгдеёжзик
Фон. Логотип можно размещать фонах любых цветов (рис.24)
Рис.24
Расположение. Логотип всегда размещается с левой стороны. Изображение должно располагаться посередине в левой части, надпись справа. Логотип нельзя деформировать и поворачивать.
Размер. Обычный размер логотипа – 4–7 см в длину и 3–5 см в ширину в зависимости от места его расположения. Однако при использовании логотипа в других целях можно изменять размеры. Минимальные отступы между логотипом и другими объектами необходимы для того, чтобы логотип считывался с любого носителя без помех и был узнаваем и заметен. Стоит придерживаться того, чтобы свободное пространство вокруг логотипа было равно 50%-ной величине его ширины. Минимальные отступы применимы ко всем вариациям использования логотипа – 30%.
