Это одно осознание полностью изменило то, как я проектирую приложения и сайты
Помните тот момент, когда дизайн наконец-то «щёлкает», и вы удивляетесь, почему никто не объяснил это так раньше? Раньше я думал, что UI/UX-дизайн — это только про красоту, пока не понял: на самом деле это про то, чтобы интерфейс ощущался как старый друг. Если вы только пробуете свои силы в дизайне интерфейсов или просто хотите вырасти — позвольте мне рассказать, что действительно важно. Без воды, только то, что мне самому хотелось бы знать раньше.
Помню, как я смотрел на свой первый пустой холст в Figma и чувствовал полный паралич. Я пересмотрел все уроки по ui ux дизайну, которые мог найти, но ни один не сказал мне, с чего начинать. Секрет? Начинайте со слов, а не с прямоугольников. Прежде чем открывать лучшие инструменты для UI-дизайна, возьмите блокнот и запишите, что человек хочет сделать на вашем экране. Это суть принципов UX-дизайна — понять человека по ту сторону экрана. Как только я перестал зацикливаться на градиентах и тенях, всё стало проще.
Давайте поговорим о слоне в комнате — разнице между UX и UI без заумных терминов. UX — это логика приготовления бутерброда: шаги, последовательность, облегчение, когда хлеб не размок. UI — это сервировка, художественный полив соусом, то, как это выглядит настолько аппетитно, что хочется сфотографировать. Когда меня спрашивают, как спроектировать интерфейс приложения, который действительно работает, я отвечаю: сначала придумайте рецепт бутерброда, потом сделайте его красивым. Нельзя украшать торт, который ещё не испёк. Поэтому меня слегка передёргивает, когда новички сразу лезут в урок по Figma для начинающих и начинают двигать пиксели, не нарисовав ни одного пользовательского сценария. Figma — это мощный инструмент, один из лучших для UI-дизайна, но это просто молоток. Вы всё равно должны знать, что строите.
Кстати, давайте заземлимся на базовых основах дизайна веб-сайтов. Хороший макет сайта — это не про инновации, а про привычность. Люди ожидают логотип слева вверху, навигацию вверху, чёткий призыв к действию — потому что их мозг обучен на миллионах других сайтов. Как только вы нарушаете этот шаблон, вы заставляете их думать — а думать равно трение. Однажды я переделал оформление заказа в интернет-магазине и снизил отказы от корзины на 20% — просто переместив кнопку «Продолжить» туда, где её ожидали. Это и есть тихая магия советов по дизайну интерфейсов: они звучат скучно, пока не начинают приносить деньги или экономить время.
Теперь дизайн мобильных приложений (mobile app ui design) имеет свои особенности. Большие пальцы правят экраном. Я всегда размещаю основные действия в зоне, удобной для большого пальца — нижняя половина телефона. Когда я набрасываю приложение, буквально держу телефон одной рукой и проверяю, дотягиваюсь ли до кнопок без йоги для пальцев. Многое из того, как стать UI-дизайнером, сводится к такой эмпатичной дотошности. Вам не нужен модный диплом — нужно стать до ужаса наблюдательным ко всем мелким раздражителям в приложениях, которыми вы пользуетесь каждый день. То кофейное приложение, которое прячет кнопку «повторить заказ» на три экрана вглубь? Мысленно исправьте это. Запишите. Поздравляю, вы мыслите как UI-дизайнер.
Если вы думаете, как стать UI-дизайнером, не потратив кучу денег, вот мой путь: я посмотрел бесплатный урок по ui ux дизайну на YouTube, чтобы освоить абсолютные основы, а затем сразу перерисовал один экран из приложения, которое мне нравилось. Не всё приложение — только один экран, пиксель в пиксель, в Figma. Это единственный урок по Figma для начинающих, который вам действительно нужен, потому что вы учитесь инструменту, одновременно разбирая хорошие дизайнерские решения на запчасти. Я смотрел на компонент и спрашивал: почему здесь паддинг 16px, а не 8px? Почему этот цвет серый, а не чёрный? Постепенно невидимые правила принципов UX-дизайна становятся видимыми. Вы начинаете понимать, что хороший дизайн — это серия крошечных, осознанных решений, которые большинство людей никогда не замечают — но они точно чувствуют, когда их нет.
Хочу уберечь вас от одной распространённой ловушки: ловушки Dribbble. Dribbble полон красивых, но непрактичных фантазий, которые сломаются в реальной эксплуатации. Реальный дизайн мобильных интерфейсов должен обрабатывать длинные имена, пустые состояния, сообщения об ошибках, медленную загрузку. Это не сексуально, но именно это отличает профессионала от любителя. Когда я даю советы по дизайну интерфейсов, я всегда говорю: сначала спроектируйте уродливые состояния. Спроектируйте экран, когда пропал Wi-Fi. Спроектируйте, что происходит, когда у пользователя ноль товаров в корзине. Если ваш дизайн остаётся полезным в такие моменты — вы сделали это.
Теперь о лучших инструментах для UI-дизайна. Figma, очевидно, всеобщий любимец, и не зря. Она коллаборативная, работает в браузере и бесплатна для индивидуального использования. Я использую её для всего: от вайрфреймов до прототипов высокой детализации. Но не стоит недооценивать ручку и бумагу. Мои самые быстрые и чёткие идеи по основам дизайна веб-сайтов часто начинаются с неряшливых набросков в блокноте с точечной разметкой. Когда я перехожу в Figma, я также использую плагины вроде Content Reel для вставки реалистичного текста и Stark для проверки доступности. Многие уроки по ui ux дизайну пропускают тему доступности, но это ключевой принцип UX-дизайна: если человек с нарушением зрения не может пользоваться вашим интерфейсом — это плохой интерфейс, точка.
Меня часто просят свести «как спроектировать интерфейс приложения» к одной фразе. Мой ответ: проектируйте разговоры. Каждое нажатие — это слово, каждый экран — ответ. Если ваше приложение ощущается как беседа с полезным, слегка остроумным другом — вы победили. Поэтому я обожаю микро-взаимодействия — лёгкое подпрыгивание при загрузке, мягкая вибрация при долгом нажатии. Это аналог понимающего кивка в человеческом разговоре, и они делают дизайн мобильных интерфейсов живым, а не роботизированным.
Если вы всё ещё разбираетесь с разницей между UX и UI применительно к своей карьере, помните: не обязательно выбирать навсегда. Я сам начинал с большего интереса к визуальной стороне, но по мере работы над проектами исследовательская и психологическая часть UX начала меня увлекать. Хороший урок по ui ux дизайну всегда учит, что лучшие интерфейсы рождаются из сочетания. Когда я наставляю новичков на тему «как стать UI-дизайнером», я заставляю их сделать хотя бы один проект, где они проведут три интервью с пользователями. Поначалу это страшно, но за три интервью вы узнаете больше, чем за десять часов пассивного просмотра туториалов.
Ландшафт меняется быстро, но основы остаются. Будь вы глубоко в уроке по Figma для начинающих или шлифуете портфолио, продолжайте спрашивать: делает ли это жизнь пользователя проще, или просто красивее? Потому что самый красивый интерфейс в мире не спасёт запутанный опыт. А самый простой макет, построенный на твёрдых принципах UX-дизайна, может сделать чей-то день чуть менее напряжённым. В этом и есть настоящая радость нашего ремесла — оно не про пиксели, а про людей. Идите и создайте что-то, что ощущается как объятие в форме приложения.