Найти тему
NeuroWeb

Неделя 15. Отрисовка мобильных приложений в Figma.

Заканчивается четырнадцатая неделя моего обучения созданию сайтов. Мой заработок на данный момент равен нулю, я ищу реальных клиентов. Закончил два реальных сайта - жене и подруге.

В новом задании мы продолжаем погружаться в тему UI/UX. На этот раз нам рассказали, как собирается дизайн мобильных приложений.

Одним из заданий было создание вайрфрейма - грубого шаблона будущего приложения. После отрисовки, при нажатии на некоторые элементы в режиме прототипирования, можно видеть на какие экраны переключается конечный пользователь. Вот вайрфрейм, который отрисовал я для аудиопроигрывателя:

Вайрфрейм аудиопроигрывателя
Вайрфрейм аудиопроигрывателя

А здесь можно потыкать на кнопки, чтобы было понятно, о чем вообще речь.

Это было базовое задание для ленивых. В продвинутом задании нужно было на созданный вайрфрейм "натянуть" UI-Kit. UI-Kit - это готовые пользовательские решения. Буквально ищем готовые элементы и делаем по ним дизайн нашего приложения.

Но я не искал легких путей

Я давно хотел посмотреть урок о создании дизайна в стиле неоморфизм, и теперь он оказался очень кстати. Неоморфизм - это такая штука, при которой создается визуальное ощущение объемности кнопок и прочих элементов интерфейса. Поэтому я включил давно сохранённое видео и совместил приятное с полезным. Наконец-то усвоил, как грамотно делать объемы с помощью теней, и используя этот прием, сделал дизайн своего мобильного приложения для аудиопроигрывателя. Правда в пылу разыгравшегося энтузиазма добавил еще несколько деталей к созданному ранее вайрфрейму. Вот, что получилось:

-2

На этом можно было остановиться. Но я решил сделать прототипирование для части функционала с задизайнеными элементами плеера. Вот как выглядит экран с активными 5-6 кнопками. Сколько этих связей было бы, если отрисовывать каждый элемент отдельно, я ума не приложу. Вероятно этого делать и не нужно. По ссылке на прототип можно потыкаться в приложении.

Аудиоплеер в фигма в режиме прототипирования
Аудиоплеер в фигма в режиме прототипирования

Помимо этого в отдельном ролике нам рассказали о некоторых особенностях дизайна приложений(и сайтов) для мобилок. Например, иконки или кликабельная область за ними должны быть не меньше 48 пикселей, потому что это примерный размер человеческого пальца. Если иконка меньшего размера, пользователь может потыкать на кнопку несколько раз и уйти из приложения, потому что нажатие на кнопку срабатывает через раз.

Следишь за моими публикациями, было интересно? Ставь лайк и подписывайся на канал. Посмотрим, что принесет новая неделя.

P.S. Готов взять свой первый заказ. Сделаю лендинг всего за 3 тысячи рублей. После обучения стандартный прайс на эту услугу от 10 тысяч, так что лови удачу за хвост.