Обложка канала

The Design Times

Осмысление дизайна.

The Design Times

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