Стажировка-2015. Дизайн. Проектирование интерфейсов, правиль

1. Стажировка-2015. Дизайнеры. Занятие 3
Проектирование
интерфейсов.
Правильный psd.

2. Стажировка-2015
Что-то тут не так...

3. Стажировка-2015
Определения
HCI - Human Computer Interaction - человеко-компьютерное взаимо-
действие. Область знаний, которая изучает, как человек взимодей-
ствует с различными устройствами.
UX - user experience - опыт взаимодействия пользователя с програм-
мой/интерфейсом.
UI - user interface

4. Стажировка-2015
Принципы юзабилити
• Скорость работы пользователя
• Количество человеческих ошибок
• Субъективная удовлетворенность
• Скорость обучения
• Степень сохраняемости навыков при неиспользовании продуктa
• пользователи
• задачи пользователей
• их мотивация
На что ориентироваться?

5. Стажировка-2015
Каким должен быть интерфейс?
• Чтобы его хотелось иметь
• Знакомый
• Простой vs понятный
Книга "Искусство мыть слона"

6. Стажировка-2015
Важные вопросы
Откройте вашу программу/сайт на любом экране/странице, вы должны
ответить на следующие вопросы:
• Где я?
подсвечивать пункт в меню,
хлебные крошки
• С чего начать?
выделять важные элементы, не более 2-3
• Что можно улучшить?
Usability checklist: http://habrahabr.ru/post/178867/

7. Стажировка-2015
Прототипирование
Прототип - это упрощенная модель, которая выполняет некоторые
функции оригинала, предназначена для проверки гепотезы.
Чем раньше вы поймете, что ваш проект/устройство/стартап
не работает - тем лучше.
Можно проверить:
• внешний вид
• функции
• принцип работы

8. Стажировка-2015
Прототипирование

9. Стажировка-2015
Прототипирование. стратегия
Цели пользователей и назначение сайта.
Как определить?
• задавать вопросы пользователям
• наблюдать за пользователями
• задавать вопросы заказчику
• стать пользователем
• метод персонажей
Важно определить целевую аудиторию.
Не бывает “для всех”.

10. Стажировка-2015
Прототипирование. Требования
Набор фич (функций) и требования к контенту.
• составить список фич
• расставить приоритеты
• Impact Mapping
http://effectcup.com/

11. Стажировка-2015
Прототипирование. Структура
• Логическая структура (в виде дерева)
• Customr journey

12. Стажировка-2015
Прототипирование. КОмпановка
• на бумаге
• Balsamiq, moqups (chrome), axure, ...

13. Стажировка-2015
psd по фен-шую
i-love-psd.ru
Не плоди лишних файлов
Исходники храни в папке /source/

14. Стажировка-2015
psd по фен-шую
Прикрепляй к проекту несистемные шрифты
Используй .zip вместо .rar
Называй файлы
по-английски
или транслитом
Называй файлы
с учетом версии

15. Стажировка-2015
psd по фен-шую
Не склеивай слои без необходимости
Используй папки. Раскрашивай папки.
Выноси в папки
глобальные
элементы (хедер,
футер, логотип, ...)

16. Стажировка-2015
psd по фен-шую
Давай слоям названия
Верстальщик сверстает все, что увидит. Удаляй лишние слои.

17. Стажировка-2015
psd по фен-шую
Не забывай про
экранные разрешения
Используй сетку

18. Стажировка-2015
psd по фен-шую
Кегль шрифта задавай
целым числом
Комментируй то, что нарисовал

19. Стажировка-2015
psd по фен-шую
Поверь орфографию
Save for Web & Devices

20. Стажировка-2015
psd по фен-шую
Разумное JPEG-качество
при экспорте
Save for Web & Devices
Выбирай правильные
форматы (JPEG vs PNG)