4 шага к отличному UI
Как-то я решил придумать метод, который поможет начинающим дизайнерам улучшить UI своих проектов. В итоге у меня появился инструмент SEGM, которым я поделился в своем новом курсе «Перезагрузка дизайнера». Опишу суть этого метода.
SEGM состоит из нескольких переменных:
[1] Экраны / Screens
Большие смысловые блоки, из которых состоит продукт. Например, в приложении по покупке билетов в кино это будет вход, список фильмов, страница фильма, страница покупки билета, профиль.
[2] Элементы / Elements
Самые небольшие сущности, которые будут отображены на экране. К ним относятся текстовые поля, фильтры, кнопки, заголовки. Например, на странице входа это будут заголовок, поля логина и пароля, кнопка.
[3] Группы / Groups
Смысловое объединение элементов. Например, заголовок, поля и кнопку можно объединить в одну группу – форма. Или постер, название, рейтинг, описание – карточка фильма.
[4] Отступы / Margins
Важная часть хорошего визуала. Отступы чаще всего соответствуют иерархии элементов – чем ближе один элемент к другому по логике, тем ближе он располагается и в интерфейсе.
Для использования метода SEGM нужно последовательно описать эти переменные. Сначала экраны, которые будут в продукте (Screens). После элементы, которые будут располагаться на каждом экране (Elements). Затем визуально объединить эти элементы в группы (Groups) и задать между ними отступы (Margins).
Так получается хороший и логичный UI.
Более подробно об этом будет рассказано в моем новом курсе «Перезагрузка дизайнера». Рассказано и показано с помощью реальных примеров и моей персонализированной обратной связи каждому дизайнеру.
~
Перезагрузка – iskros.com/restart
Задать мне вопрос – @iskros