Дизайн мобильного приложения
в Photoshop и XD? Легко!

• Открываем XD
• Мокап айфон 10 (375×812)
• Home screen — главный экран — авторизация — вход

• Заранее продумываем цвета и название нашего приложения
• Цвет заполнение — фиолетово-синий (музыкальное приложение)
• Создаем авторизационную форму
• Слева xd все инструменты

• Заполняем sign in — подбираем шрифты (circular std black)
• Текст полупрозрачный и ровно на одной вертикали с полем для ввода
• ctrl+shift — копия
• Создание фигуры прямоугольника (форма), меняем углы, выбираем цвет кнопки
• Создание стиля (спецификации)
• Создание иконки (цвет, тень, градиент)
• Можно добавить геометрические фигуры
• Иконка авторизации
• Нажатие на название artboard и затем alt+shift переносим и копируем
• Смена название artboard
• Сгруппировать логотип
• Предоставить возможно загрузить аватарку: фигура кружочка и иконку в центр
• Вкладка prototype — подводим стрелку и выбираем анимацию, справа вверху кнопка preview
• Затем выбор жанров (выбери свой любимый жанр)
• Скрин области экрана с поиском артиста, создание эллипса (mask with shape)
• Вкладка prototype — подводим стрелку и выбираем анимацию, справа вверху кнопка preview.
• Создание digest и playlist (добавление иконок и название на фигуры)
• top songs
• Плеер (прямоугольник, радиус закрепление, линия, иконки)
• Вкладка prototype — подводим стрелку и выбираем анимацию, справа вверху кнопка preview

• Заполняем фон черным
• Добавляем лого и текст (шрифт helvetica neue, bold, на одинаковом расстоянии расположение текста)
• Добавление иконки меню
• Добавляем кнопку для покупки или других указаний (фигура прямоугольник, округляем углы, заполняем цветом и добавляем текст+иконку стрелку)
• Добавляем кружочки (один четкий, остальные полупрозрачные)
• Добавляем прямоугольник и заполняем его картинкой. Затем отправляем на самый нижний слой, а также снижаем прозрачность.

SMM-специалист S1