Проектирование веб-приложения, использующего API, в Sketch

Что вы будете создавать

Теперь, когда мы учли все элементы нашего небольшого приложения (и в том числе их возможные состояния), мы можем с уверенностью приступать к созданию визуальных «заглушек» (мокапов или mockup) для каждого элемента и соответствующего состояния. Если вам в какой-то момент разработки станут интересны детали, касающиеся дизайна (используемых цветов, размера шрифтов и так далее), загляните в оригинальный файл Sketch на GitHub.

Давайте начнем с рабочей области в Sketch и зададим ей светло-серый фон.

Заголовок (название)

Поскольку это всего лишь демо, мы не будем тратить много времени на создание целостного брендинга для нашего приложения. Вместо этого мы просто стилизуем название приложения, использовав шрифт из Google Fonts. В этом случае я остановился на Pacifico. Если он установлен на вашем компьютере, вы сможете увидеть, как он выглядит в Sketch.

Текстовое поле

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

Вывод результата

Давайте теперь добавим основной блок содержимого, где мы будем отображать иконку, которую вернет нам iTunes API. Для демонстрационных целей мы будем использовать полноразмерную иконку приложения Twitter (вы можете скачать ее здесь).

Примечание: на иконки приложений iOS маска по умолчанию не наложена. Картинка иконки (как видно на этом примере с Twitter) квадратная. iOS применяет скругление углов на уровне операционной системы, так что для нашего приложения нам придется создать маску для иконок iOS. Маска — это не просто радиус скругления углов, это, скорее, «кругоквадрат» (squircle). Вместо того, чтобы создавать ее самостоятельно, я использовал шаблон иконок Sketch, который разработал Тибот Нинов (Thibaut Ninove).

Состояния компонентов

Теперь создадим несколько макетов (мокапов), которые помогут нам понять, как будут выглядеть компоненты в различных состояниях. Чтобы отобразить эти состояния, мы используем область вывода результатов.

Для исходного состояния (при загрузке страницы) мы будем выводить небольшую иконку и текстовую инструкцию по использованию приложения:

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

При возникновении проблемы просто покажем сообщение об ошибке:

До следующего раза!

Вот и все! У нас есть симпатичные визуальные макеты для различных состояний элементов приложения, и теперь мы готовы к его реализации на HTML, CSS и JavaScript!

По материалам: www.webdesguru.com