Помним, любим, проектируем

remember Есть ряд вещей, о которых забывают при проектировании интерфейса /визуальном дизайне, чаще всего – еще на этапе оценки, затем – не включают их в проектный план, и в лучшем случае – вспоминают в последний момент во время разработки и проектируют «как попало» в сжатые сроки. И если нарисовать вечно забываемую фавиконку – это 5 минут работы, то некоторые вещи заслуживают гораздо большего внимания.

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

Continue reading

Артефакты: макеты UI (wireframes)

Описание

Макет интерфейса (англ. wireframe, русск. некрасивое вайер, каркас) – это статическая схематическая иллюстрация страницы (формы), на которой отображено расположение и содержание отдельных элементов интерфейса пользователя (UI). Задача макета – показать содержание конкретной страницы, взаимное расположение блоков и отдельных элементов. В абсолютном большинстве случаев макеты интерфейса не раскрывают особенностей визуального дизайна (используются черный/белый цвет и их оттенки, стандартные шрифты, простейшие иконки).

Ближайшими родственниками макетов являются эскизы или наброски (sketches, скетчи), прототипы, дизайн-макеты (mockups). Соотношение между всеми этими артефактами я постаралась показать на картинке:

Итак, в зависимости от детализации артефакта, можно выделить 3 варианта: скетч, собственно макет (wireframe) и дизайн-макет (mockup). Каждый из этих вариантов можно сделать динамическим, превратив его в прототип интерфейса.

Continue reading