Дизайн главного экрана с помощью Sketch – пошаговая инструкция

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

Основные выводы

• Использование Sketch для создания макетов экранов приложений
• Важные принципы дизайна для привлекательных пользовательских интерфейсов
• Использование цветовых кодов и символов для упрощения процесса дизайна

Пошаговое руководство

Чтобы начать свой дизайн, откройте Sketch и создайте новый документ для вашего экрана приложения.

Сначала выберите iPhone 8 в качестве вашего дизайна. Имеет смысл начать с меньшего экрана, так как это облегчит адаптацию к большим дисплеям.

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

Нажмите на рабочую область и назовите доску «Цвет фона экрана». Чтобы убедиться, что ваш фон позже не будет прозрачным, установите простой цвет фона, сначала белый.

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

Для дизайна карточки важен цвет фона. Вы можете использовать простой синий, чтобы добиться мгновенного визуального отделения. В качестве альтернативы вы можете поэкспериментировать с градиентами, чтобы добавить глубину и объем.

Теперь вставьте текст для курса. При этом вы можете настроить текстовое поле, чтобы убедиться, что текст выровнен по центру и хорошо читаем. Промежутки вокруг текста имеют решающее значение. Убедитесь, что вы оставляете около 16 пикселей с каждой стороны, чтобы добиться гармоничной компоновки.

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

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

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

Чтобы сделать ваши карточки визуально привлекательными, добавьте тень. Убедитесь, что она будет легкой, чтобы не перегружать дизайн. Легкая тень позволяет элементам выделяться и лучше вписываться в общий вид.

Используйте закругленные углы для своих карточек, чтобы увеличить визуальную привлекательность. Радиус угла 8 обеспечивает современный и чистый вид, соответствующий дизайну Apple.

Теперь создайте четкий заголовок над карточкой курса, чтобы оптимизировать навигацию и лучше структурировать контент. Убедитесь, что высота и расстояние до предыдущего элемента остаются последовательными.

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

Итоги - Создайте привлекательный экран приложения с помощью Sketch

Сегодняшние шаги показали вам, как создать функциональный и привлекательный экран приложения в Sketch. Применяя простые принципы дизайна и пользовательской навигации, вы можете создать приложение, которое будет не только визуально приятным, но и хорошо функционирующим.