С упрощением и ускорением разработки (новые подходы, AI) освобождается время быть не только разработчиком, но и чуть-чуть дизайнером: собрать не просто работающий, а ещё и приятный интерфейс. Но когда думаю о дизайне — могу впасть в ступор.
Поэтому спросил лучшего дизайнера из тех, кого знаю — @TheFairyOfTheInnerGoose: есть ли «быстрый способ» понять дизайн — набор базовых правил, чтобы делать нормально, не уходя в бесконечные курсы и новую карьеру?
Он свёл всё к двум принципам: визуальная иерархия и принцип подобия.
Визуальная иерархия
Это про приоритеты. Всегда есть то, что человек должен увидеть первым, затем вторым, третьим и так далее. Не бывает нескольких элементов «первого приоритета»: если всё главное, то ничего не главное. Иерархия задаётся размером, цветом, контрастом, отступами и расположением на экране. В идеале у пользователя есть одна понятная точка входа и логичный маршрут взгляда дальше.
Принцип подобия
Это про группировку. Элементы, связанные по смыслу, должны находиться ближе друг к другу, чем к остальным. В тексте расстояние между буквами меньше, чем между словами, а между строками — больше, чем между словами, чтобы глаз не путался. В интерфейсе то же самое: карточка дальше от краёв экрана, чем её внутренний контент; заголовок ближе к описанию, чем к фото; карточки в одном блоке ближе друг к другу, чем к краям. Так создаются логичные группы элементов.
Формула, которая запоминается
Иерархия — это смысл, выраженный размером, цветом и ритмом отступов. Связанные вещи — приближаем. Несвязанные — разделяем. Важное — выделяем. На этом уже можно строить стройные и рабочие интерфейсы, даже оставаясь в первую очередь разработчиком.
Вдогонку: плейлист с короткими видео про визуальную иерархию и подобие — https://youtube.com/playlist?list=PLB-qPpAk87uJOZ8WZ_39b0uRQybZgDRPc, набор «академических» принципов UX — https://lawsofux.com/.
P.S. если нужен дизайн посерьёзнее — пишите @TheFairyOfTheInnerGoose, он поможет 🙂↕️