Connect with us

Дизайн и прототипирование

5 инструментов, которые помогут спроектировать и подготовить дизайн приложения

На рынке появляются новые сервисы и инструменты, каждый из которых заявляет, что он необходим в создании мобильного дизайна: Framer, Pixate, Flinto, Principle, Atomic, Marvel и прочие. Но на деле, они могут сильно раздувать бюджет проекта дополнительными этапами работ.

Егор Поляков

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

/

     
     

На рынке появляются новые сервисы и инструменты, каждый из которых заявляет, что он необходим в создании мобильного дизайна: Framer, Pixate, Flinto, Principle, Atomic, Marvel и прочие. Но на деле, они могут сильно раздувать бюджет проекта дополнительными этапами работ.

Чтобы сделать правильный выбор и ускорить рабочий процесс ваших дизайнеров, мы поделимся теми инструментами, которые постоянно использует дизайн-студия STANDAPP.

Это список для вас, если:

  • у вас нет времени изучать каждый новый сервис и плагин;
  • нужны проверенные и простые и инструменты;
  • для создания дизайна в вашей компании используется Adobe Photoshop.

1. Balsamiq Mockups

1-balsammiq

Название подкачало, но инструмент хороший. Мы используем Balsamiq mockups для проектирования мобильных приложений и веб-сайтов. Он настолько простой, что даже набор готовых элементов интерфейса ограничен базовыми формами (кнопка, поле ввода, выпадающий список…). Это серьезное ограничение, но оно помогает нашим дизайнерам не зацикливаться на построении сверх-детальных интерфейсов, ведь на этапе проектирования это так не важно. Если этого мало, никто не мешает вам загружать в Balsamiq дополнительные объекты, формы и готовые макеты.

Используйте настольную программу Balsamiq Mockups (стоит $89) либо бесплатное веб-приложение.

2. InVision

invision

Главная функция InVision — помогать дизайнерам и руководителям проекта показывать, комментировать и согласовывать дизайн-макеты с клиентами из других городов и стран. Мы используем InVision при демонстрациях дизайна сайтов и iOS, Android приложений.

Еще одно преимущество InVision в том, что он способен превращать статичные дизайны в кликабельные прототипы. Имитируя использование готового продукта, вы сможете на самых ранних стадиях выявить слабые места в интерфейсе и его пользовании. Знания в программировании вам не понадобятся. Загрузите дизайн-макеты и проставьте ссылки между ними, создавая кликабельные области на картинках.

InVision можно использовать бесплатно с 1 проектом. Далее от $15 до $99. Кто не готов платить, можно посоветовать создать 2 аккаунта в InVision и дать доступ друг другу на каждый из проектов :)

3. Speckking

specking

Помимо готовых дизайн-макетов, дизайнер передает разработчикам мобильных приложений спецификацию дизайна, где показаны размеры, шрифты, цвета и размечены элементы, отступы. Вы потратите много времени, чтобы сделать спецификацию вручную. Плагин Speckking для Photoshop может вдвое сократить время на подготовку спецификаций. Стоит он $19 за одного пользователя, покупается раз и навсегда, а каждое новое обновление достается вам бесплатно.

4. Resonator.cc

resonator

Работа дизайнера не заканчивается на подготовке спецификации с использованием Spekking. Теперь нужно правильно нарезать графику, необходимую разработчикам приложения, а так как у смартфонов экраны и плотность пикселей на нем различаются, придется нарезать графику для нескольких разрешений экранов. Используя Sketch вы сделаете нарезку «из коробки», но мы делимся инструментами для работы с Adobe Photoshop.

Вот как минимум 3 инструмента, с помощью которых можно нарезать графику: PNG Express, Resonator.cc, Cut&Slice me.

Мы уже второй год используем Resonator.cc. Чтобы понять как он работает, дизайнеру хватит 10 минут. Он собирает графику проекта в один .PSD файл для дальнейшего экспорта в нужных разрешениях. Стоит всего $19,95, а иногда можно и на распродаже (по купону) купить дешевле.

5. Бумага и ручка

generic-smartphones

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

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

Остин Клеон «Кради как художник. 10 уроков творческого самовыражения»

Чтобы проектировать интерфейсы было удобнее, распечатайте на листах А4 специальные рамки смартфонов/браузеров с разлинованной сеткой.

Может у вас есть другой набор инструментов. Расскажите, какими инструментами вы пользуетесь и сколько они стоят?

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.