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