Услуги

Дизайн интерфейсов

Дизайн интерфейсов — это то, что придает продуманному прототипу вид окончательного продукта. Мы в User House уделяем этому особое внимание.

35

выполненных проектов

7

лет опыта

Как устроен процесс дизайна пользовательских интерфейсов

Изучаем продукт, выбираем стилевое оформление

На первом этапе разработки дизайна графического интерфейса мы формируем его основные свойства: ориентировочное стилевое решение и эмоциональный фон.

Мы исследуем контекст использования будущего продукта, понимаем, как он будет соотноситься с экосистемой платформы, на которой будет работать и другими родственными продуктами, если они существуют.

Используя общепринятые методики (moodboard, styleboard), мы совместно с заказчиком определяем основную стилистику будущего продукта, а также то, какое настроение должен передавать дизайн интерфейсов пользователям.

Разрабатываем концепцию дизайна интерфейса

После того, как мы изучили продукт и пожелания заказчика, мы приступаем непосредственно к разработке концепции дизайна интерфейса пользователя:

  • проектируем сетку,
  • определяем шрифтовое решение,
  • разрабатываем дизайн основных типовых блоков и элементов графического интерфейса.

Для целостного восприятия мы отрисовываем 3-4 основных экрана интерфейса в согласованной стилистике. К рабочим встречам с заказчиком мы готовим несколько общих концепций интерфейса: это позволяет быстрее найти подходящие решение, которое отвечает ожиданиям заказчика и пользователей.

При необходимости, на этом этапе происходит адаптация ключевых блоков и элементов интерфейса для всех необходимых разрешений экрана/платформ.

После необходимого числа итераций мы получаем окончательную концепцию графического дизайна пользовательского интерфейса.

Разрабатываем дизайн типовых экранов, блоков и элементов

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

Для элементов (кнопки, раскрывающиеся списки, вкладки, меню, раскрывающиеся блоки и так далее) отрисовываем все возможные состояния, при необходимости — утверждаем правила их применения и использования.

При подготовке дизайна отдельное внимание уделяем исключительным состояниям интерфейса, например:

  • что будет, если название элемента списка слишком длинное,
  • как будет выглядеть нулевое состояние экрана,
  • как будет выглядеть меню, если появится еще один пункт и так далее.

Готовим макеты к верстке

После отрисовки всех макетов мы готовим их для передачи в верстку.

Мы используем Sketch и Zeplin, поэтому все свойства интерфейсных элементов (цвета и толщины линий, отступы, размеры и цвета шрифтов, тени и так далее), а также графические ресурсы, могут быть переданы разработчикам очень быстро. Отдельно готовим материалы, описывающие микроанимацию и динамическое поведение элементов интерфейса.

Если необходимо, мы разрабатываем подробный документ — стандарт на дизайн интерфейса. В стандарте мы передаем все знания, которые нужны, чтобы при функциональном развитии продукта, дизайн оставался консистентным и сохранял изначально заложенные идеи.

Делаем семантически верную верстку

Для продуктов из области web логичным продолжением дизайна созданных интерфейсов пользователя является верстка. Мы можем сверстать созданный нами прототип на основе существующих фреймворков для верстки, например, Bootstrap, или вовсе с нуля. Вертка будет соответствовать дизайну с точностью до пиксела (pixel perfect), будет валидной и при необходимости, адаптивной.

Разработка интерфейса

Так же необязательный этап дизайна пользовательских интерфейсов, но вполне закономерный. При необходимости, мы можем разработать, спроектированные нами продукты: сайты, включая администраторскую часть, мобильные приложения под iOS и Android, сложные информационные системы под Windows.

2015

Проектирование и дизайн интернет-магазина Happy Bottle

2013

Проектирование и дизайн интернет-магазина Маркет Красок

Клиенты, для которых мы оказывали эту услугу

Другие услуги

+7 495 724-60-03

info@userhouse.ru

119435, Москва, Большой Саввинский переулок, 12с5

Мы в соц. сетях:

© 2010–2017 User House