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

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

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

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

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

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

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

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

--

--

--

Cамый большой коллективный блог про дизайн на русском языке

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Илья Сидоренко

Илья Сидоренко

Развиваю продукт Tranzet. Автор книги «Дизайнер интерфейсов». Обучающие материалы: iskros.com.

More from Medium

SaaDaily UI — #003

The Grid System

An old graphic representing a man watching an object he wants to draw through a grid he made.

WordPress Website Design With Elementor

UI/UX Final Project: Creating a Budget Planner Feature & SaveTogether feature for Bridestory