Четыре шага к отличному UI

Как-то я решил придумать метод, который поможет начинающим дизайнерам улучшить UI своих проектов. В итоге у меня появился инструмент SEGM, которым я поделился в своем новом курсе «Перезагрузка дизайнера». Опишу суть этого метода.

SEGM состоит из нескольких переменных:

  1. Экраны (Screens). Большие смысловые блоки, из которых состоит продукт. Например, в приложении по покупке билетов в кино это будет вход, список фильмов, страница фильма, страница покупки билета, профиль.
  2. Элементы (Elements). Самые небольшие сущности, которые будут отображены на экране. К ним относятся текстовые поля, фильтры, кнопки, заголовки. Например, на странице входа это будут заголовок, поля логина и пароля, кнопка.
  3. Группы (Groups). Смысловое объединение элементов. Например, заголовок, поля и кнопку можно объединить в одну группу — форма. Или постер, название, рейтинг, описание — карточка фильма.
  4. Отступы (Margins). Важная часть хорошего визуала. Отступы чаще всего соответствуют иерархии элементов — чем ближе один элемент к другому по логике, тем ближе он располагается и в интерфейсе.


Для использования метода SEGM нужно последовательно описать эти переменные. Сначала экраны, которые будут в продукте (Screens). После элементы, которые будут располагаться на каждом экране (Elements). Затем визуально объединить эти элементы в группы (Groups) и задать между ними отступы (Margins).

Так получается хороший и логичный UI.

Более подробно об этом будет рассказано в моем новом курсе «Перезагрузка дизайнера». Рассказано и показано с помощью реальных примеров и моей персонализированной обратной связи каждому дизайнеру.

~
Перезагрузка — iskros.com/restart
Задать мне вопрос в Телеграм: iskros.


4 шага к отличному UI was originally published in Дизайн-кабак on Medium, where people are continuing the conversation by highlighting and responding to this story.

©



[yuzo id=820442 ]