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

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

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

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

Поехали!

1 шаг.
Рисуем прямоугольник.
Размер: 375х812
Радиус закругления углов: 40
Цвет: F0F4FA

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать
Это и будет нашим экраном, куда в будущем мы сможем вставлять любой скрин

2 шаг.
Дублируем получившийся прямоугольник еще 2 раза
Меняем параметры двух новых прямоугольников (первый не трогаем)

Размер: 395х832
Радиус: 48
Цвет: DCE4F5

Размер: 425х862
Радиус: 60

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать

3 шаг.
Накладываем прямоугольники друг на друга по принципу матрешки:
сначала большой, на него средний, на него маленький

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать

4 шаг.

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать

5 шаг.
Формируем “монобровь”:
Просто потяни три центральные точки вниз.
В принципе можно и без нее, тогда пропускай 4 и 5 шаги.

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать
Магия, не правда ли?

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать

Итог:

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

png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABAQMAAAAl21bKAAAAA1BMVEUAAP+KeNJXAAAAAXRSTlMAQObYZgAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAApJREFUCNdjYAAAAAIAAeIhvDMAAAAASUVORK5CYII= - Мокап за 2 минуты: нарисовать быстрее, чем скачать
Свежие вакансии
                        Кометрика Кометрика Кометрика ищет Middle UI/UX Полная Москва, Казань, Нижний Новгород от 100 000 ₽
                        GermanLanguage.ph LLC GermanLanguage.ph LLC German Language School – Product Designer (UX/UI) Удаленно Ереван 60 000 - 100 000 ₽
                        Региональная Академия делового образования Региональная Академия делового образования Технический дизайнер Удаленно Самарская область
                        BR LAb BR LAb UX/ UI web-designer Удаленно Москва 80 000 - 120 000 ₽
                        Rightapplications Rightapplications UX дизайнер Офис Харьков
Все вакансии

Если вы нашли ошибку, выделите фрагмент текста и нажмите Ctrl+Enter

Похожие записи

Тренды UI/UX дизайна на 2020 год

Подборка основных трендов UI/UX дизайна, которые мы увидим в 2020 году

Паттерн нижней панели навигации на мобильных веб-сайтах, исследование

Гамбургер-меню? Есть ли лучшая альтернатива? В этой статье я попытаюсь рассмотреть эти вопросы

О Доне Нормане, вандализации UX и широком подходе к дизайну

Раньше UX-специалисты были универсалами, им нужно было одинаково следить и за дизайном, и за исследованиями. Это были части неразрывного процесса. Но эта парадигма была намеренно изменена