UXPUB

UXPUB - сообщество из 3,001 дизайнеров и творческих людей

Место, где дизайнеры делятся опытом

Создать аккаунт Войти
Cover image for Мокап за 2 минуты: нарисовать быстрее, чем скачать
Редакция
Редакция

Опубликовано

Мокап за 2 минуты: нарисовать быстрее, чем скачать

#ux

Время — единственный невосполнимый ресурс. Поэтому тратить его нужно на интересные задачи и любимых людей, но никак не на поиск и скачивание очередного мокапа в гугле.

Поэтому сейчас я научу тебя рисовать его за 2 минуты!

Ты можешь воспользоваться любым графическим редактором, лично я буду рисовать в Figma.

Не стоит переживать, если у тебя не получится с первого раза.Именно поэтому я подготовил Figma-файл, который ты можешь скачать в моем Telegram-канале и посмотреть, как это устроено!

Поехали!

1 шаг.

Рисуем прямоугольник.

Размер: 375х812

Радиус закругления углов: 40

Цвет: F0F4FA

Это и будет нашим экраном, куда в будущем мы сможем вставлять любой скрин

2 шаг.
Дублируем получившийся прямоугольник еще 2 раза

Меняем параметры двух новых прямоугольников (первый не трогаем)

Размер: 395х832

Радиус: 48

Цвет: DCE4F5

Размер: 425х862

Радиус: 60

3 шаг.

Накладываем прямоугольники друг на друга по принципу матрешки:

сначала большой, на него средний, на него маленький

4 шаг.

Выделяем самый маленький и на его контуре верхней грани добавляем 5 точек по центру.

5 шаг.

Формируем "монобровь":

Просто потяни три центральные точки вниз.

В принципе можно и без нее, тогда пропускай 4 и 5 шаги.

6 шаг.

Выделяем самый большой прямоугольник и применяем к нему 3 тени:

1) Drop Shadow

Blur: 80

X: 40

Y: 40

Цвет: B8C2D9

2) Inner Shadow:

Blur: 10

X: -4

Y: -4

Цвет: C3CDE7

3) Inner Shadow:

Blur: 10

X: 4

Y: 4

Цвет: ffffff

Магия, не правда ли?

Последний шаг.

Не бойся экспериментировать! Ты можешь добавить динамик, камеру или поменять цвета.

Итог:

Многие вещи кажутся сложными лишь на первый взгляд и за несколько минут у тебя получилось сделать свой первый мокап!

Но а если возникли какие-то трудности, или ты хочешь посмотреть устройства в других цветах, то качай Figma-исходник у меня в телеге

Обсуждение (0)