полезные приложения для дизайнеров
Создать планировку и рассчитать смету: 8 приложений для дизайна и ремонта
Ремонт без дизайнера и строительной бригады — процесс хлопотный.
Те, кто решил все делать самостоятельно, обычно учатся по роликам на «Ютубе». Но «Ютуб» не поможет нарисовать планировку, прикинуть сочетания цветов и рассчитать количество мешков штукатурки.
Я собрала 8 приложений, которые решают все эти задачи.
Houzz
Зачем нужно: искать идеи и вдохновляться
Цена: бесплатно
Скачать: Android, iOS
Прежде чем приступить к реальному ремонту, можно годами любоваться чужими работами в интерьерных изданиях. И это неплохо: так вырабатывается насмотренность.
Morpholio Board
Зачем нужно: создавать коллажи, чтобы набросать идеи будущего интерьера
Цена: базовая версия — бесплатно
Скачать или открыть: iOS
Чтобы увидеть все детали интерьера, можно заказать полную визуализацию у дизайнера или ограничиться коллажем — картинкой, на которой схематично показывают обои, крупные предметы мебели и примерный декор.
Дизайнер тратит на это минимум времени, а заказчик сразу представляет, каким будет его интерьер. Но даже без дизайнера стоит попробовать составить несколько коллажей. По ним сразу станет понятно, в каком стиле будет решен интерьер, как будут сочетаться цвета и мебель. Для такой работы достаточно бесплатной базовой версии приложения.
Planner 5D
Зачем нужно: нарисовать планировку
Цена: базовые функции — бесплатно
Скачать или открыть: Android, iOS
Это простое приложение-планировщик, похожее на игру Sims, но без людей. Достаточно измерить помещения в квартире и нарисовать план, а затем можно легко переставлять мебель.
Dulux Visualizer
Зачем нужно: подобрать краску для стен
Цена: бесплатно
Скачать или открыть: Android, iOS
Приложение Dulux Visualizer выпустило одноименная лакокрасочная компания: в нем можно подобрать краску и сразу же заказать банку нужного оттенка.
Но возможности приложения намного шире. Например, можно выбрать цвет из палитры Dulux и «примерить» его в своей квартире. Можно сканировать цвет и использовать его в качестве фона. Если вам понравился оттенок неба на закате или цветка — его можно будет примерить в интерьере.
Homestyler
Зачем нужно: посмотреть, как новая мебель или отделка будут смотреться в интерьере.
Цена: бесплатно
Скачать или открыть: Android, iOS
Если капитальных изменений не планируется, то ремонт может показаться простой задачей: квартира не изменится, если переклеить обои, обновить диван или докупить журнальный столик и пару постеров. На самом деле угадать со стилем бывает непросто. И в итоге неподходящий столик отправится на дачу, а новый диван будет раздражать.
Приложение Homestyler помогает избежать этих проблем и «примерить» новинку в существующем интерьере. Достаточно сфотографировать комнату — и можно менять в ней практически все.
IKEA Place
Зачем нужно: посмотреть, как впишется в интерьер мебель из «Икеи»
Цена: бесплатно
Скачать или открыть: Android, iOS
Этот сервис предназначен не для разработки планировки, а для выбора конкретного предмета мебели.
Достаточно сфотографировать свою комнату, выбрать, какую мебель из «Икеи» хочется купить, ее форму и цвет, а затем «примерить» в интерьере. После этого останется только заказать подошедшую модель и декор на сайте.
ПРОраб free
Зачем нужно: рассчитать количество строительных и отделочных материалов, составить смету
Цена: бесплатно
Скачать или открыть: Android
Чтобы составить точную смету, нужно оценить, сколько отделочных материалов понадобится.
Приложение помогает подсчитать количество стройматериалов. Достаточно указать размер стен, потолка и пола — и «ПРОраб free» подсчитает, сколько потребуется штукатурки, клея для плитки и краски для стен. А если ввести цены, то и смету ремонта составит. В заметках можно указать, где конкретно собираетесь покупать или к какому мастеру обратиться.
CalcBook Lite
Зачем нужно: рассчитать количество строительных и отделочных материалов, составить смету
Цена: бесплатно
Скачать или открыть: iOS
CalcBook Lite делает все то же самое, что и «ПРОраб free», но на устройствах «Эпл». Приложение поможет рассчитать необходимое количество плитки, обоев, ламината, линолеума, пиломатериалов, краски, штукатурки, шпатлевки и многого другого.
Ну вот и дожили, уже версий для ПК нет.
Не представляю, как проект ремонта вообще можно делать на маленьком экранчике телефона.
Сергей, так огромное количество людей ПК больше дома и не держит. Смартфона хватает.
Так что нам с Вами только ждать, когда гибкие экраны позволят и на смартфоне разворачивать их хотя бы до А4.
Владимир, дорогой! А еще многие не читают книг и хотят равнополые браки
Сергей, Именно для этого Джобс придумал Айпад.
Сергей, смартфон можно подключить к ПК или просто большому монитору. И все удобно мышкой делать, с не в маленький экран пальцем тыкать. А самсунги с dex вообще превращаются при этом в самостоятельный комп.
Сергей, скорее всего есть версия веб) у Planner 5D точно
Я уверен, есть множество подобных программ для ПК. Просто статья не о них. Поищите =)
SweetHome3d я использовал, когда мебель планировал для комнаты как поставить и какую купить и сколько места в проходах останется между диваном и столом.
Павел, зашёл сюда ради этого комментария. Как можно было не включить в статью эту простую и удобную программу, не понимаю
10 лучших сервисов для дизайнеров (и не только)
В этой статье я собрал сервисы для дизайнеров, которыми пользуюсь лично на регулярной основе. Они помогут вам быстрее и эффективнее выполнять свою работу.
Прежде чем мы начнём, предлагаю ознакомится с моими другими статьями, где вы найдёте много полезной информации о дизайне и не только, а также, подпишитесь на мой Intagram и YouTube. Погнали!
Это источник качественных изображений, которые сделаны фотографами со всего мира и их можно использовать бесплатно на своих ресурсах. Этим сервисом я часто пользуюсь, для своих проектов, так как, здесь можно найти качественные фото в одном стиле. Но, есть риски взять фото, которое уже где-либо использовались, из-за того, что они бесплатные, поэтому пользоваться фото нужно с осторожностью. Однозначно, это лучше, чем использовать стоковые фото в своих проектах.
Пожалуй, лучший сервис для подбора иконок, есть много бесплатных и интересных, которые можно настроить прямо на сайте, по цветам и размеру, а потом скачать в любом удобном формате. Преимуществом Flaticon является то, что на нем есть большой ассортимент иконок под разный стиль, поэтому, если мне нужны крутые иконки на сайт, я всегда пользуюсь этим сервисом.
Насколько вы знаете, сейчас актуальны матовые 3D объекты, иллюстрации и все в этом духе. Так вот, здесь вы можете найти готовые иллюстрации и иконки, для применения их на своем сайте, либо приложении. В бесплатном виде доступны 137 объектов на прозрачном фоне. Большее количество материалов доступны на платных условиях с кастомизацией каждого элемента.
Топ 9 программ для профессионального дизайнера
Программы для графических дизайнеров
Бесспорно, одни из самых популярных и многофункциональных программ для дизайнеров, это программы из пакета Adobe Creative Cloud. Они простые, интуитивно понятные. Если Вы когда-нибудь пользовались одной из программ фирмы Adobe Systems, то разобраться в других Вам будет очень легко.
Adobe Photoshop
Каждый выделит для себя преимущества и недостатки данной программы. Давайте сформулируем общие достоинства Adobe Photoshop:
понятный интерфейс, много инструментов для работы, для рисования разных фигур и очертаний;
возможность работы с 3D-графикой;
если хорошо знать все функции и фишки, можно создавать нереальные вещи;
многие дизайнеры работают с Photoshop’ом, поэтому с ними будет легко сотрудничать и обмениваться файлами;
отлично подойдет для ретуши, обработки фотографий не только на любительском уровне, но и для качественных снимков;
Но даже у такой замечательной программы есть свои минусы. Основные из них: премиум версия достаточно дорогая, лицензию нужно время от времени активировать, к тому же необходим достаточно мощный компьютер.
Adobe Illustrator
Векторное изображение можно сильно увеличивать или уменьшать и оно остается четким. Так что в Adobe Illustrator Вы легко можете создать необходимую пиктограмму или целый коллаж изображений, а потом использовать их где угодно и в любом размере.
Среди недостатков можно назвать отличия в командах от Photoshop и InDesign, ограниченную во времени лицензию и небольшую сложность в усвоении.
Adobe InDesign
Вам надо сделать плакат, афишу, брошюру, листовку, газету? Тогда вам стоит учится, работать в среде Adobe InDesign. Если Вы уже знакомы с другими продуктами от Adobe Systems, то сможете создавать неплохие макеты уже через неделю изучения данной программы.
Если Вы хотите работать в полиграфии, то кроме Photoshop’а и Illustrator’а обязаны знать, как работать в InDesign’е. Конечно, основная графика разрабатывается в первых двух программах, но текст верстают в последнем.
Adobe After Effects
Модное направление дизайна, хотя оно существует уже более одного века, моушн-дизайн. Слышали? Это про все, что двигается на картинке: оживление фотографий, букв, отдельных элементов. Чаще всего данный вид графики используют для создания заставок фильмов, рекламы или документального кино. Каждому дизайнеру будет интересно и полезно познакомится с Adobe After Effects, поскольку сейчас анимация действительно в тренде.
Плюсы: опытный дизайнер, разобравшись в инструментах этой программы, сможет редактировать видеоряд, добавлять спецэффекты, анимацию, создавать трехмерные картинки. И он никогда не останется без работы.
Минусы: цена и тот факт, что часто нужно устанавливать дополнительные плагины.
Программы для веб-дизайна
Adobe XD
Что же касается ценовой политики, то лично пользоваться дизайнеру-фрилансеру можно бесплатно, а для компаний есть несколько вариантов покупки лицензии.
Figma
Онлайн-сервис для разработчиков и дизайнеров. Создавать сайт теперь стало проще, ведь дизайнер и программист могут вместе редактировать один проект и сразу учитывать внесенные правки в задание. Figma позволяет создавать интерфейсы в онлайн-приложении.
Sketch
Еще одно приложение для векторной графики. В целом, это хорошая замена Adobe Photoshop, особенно если Вы больше работаете с разработкой веб-сайтов.
Macaw
Cлоган Macaw гласит: «Хватит писать код, нарисуй его!» Особенность этой программы в том, что сначала дизайнер разрабатывает макет веб-страницы, а на выходе он получает не только красивую картинку, но и файлы *.html и *.css, которыми может пользоваться разработчик.
Данный сервис также предлагает:
Тайм-трекер Checkiant
Простой тайм-трекер Checkiant идеально подходит для ведения учета каждого рабочего дня. И вот несколько особенностей данного приложения:
Начинающий дизайнер может выбрать любое приложение из вышеперечисленных и раскрывать в себе новые таланты. Дизайнер с опытом может поэкспериментировать с программами, которыми раньше не пользовался. Благо, программ сейчас хватает на всех и каждый сможет найти то, что ему по душе. Только не забывайте следить за временем, чтобы знать, сколько часов в день Вы тратите на каждый проект и сколько уделяете времени на приобретение новых навыков.
Как создаётся дизайн мобильных приложений
150 тысяч новых приложений регистрируют в App Store и Google Play каждый месяц. Привлечь внимание пользователей и добиться коммерческого успеха помогает продуманный дизайн мобильных приложений. Так, согласно исследованию McKinsey, в компаниях с хорошим дизайном рост выручки больше на треть.
О том, какие знания и навыки нужны дизайнеру приложений, как создаётся мобильное приложение, что нужно учитывать при разработке, рассказывает Алексей Комаров, UX/UI-дизайнер в IBM и преподаватель Нетологии на курсе «Дизайнер мобильных приложений».
UX/UI-дизайнер в IBM
Дизайнер приложения отвечает за эмоции от использования продукта. Для реализации этой задачи дизайнер должен создавать не только привлекательный визуальный облик, но и уметь выяснять потребности пользователей с помощью исследований, составлять навигационную модель (как связаны экраны приложения), проектировать интерфейс (расставлять по важности иерархию компонентов).
Давайте разбираться с самого начала.
Что нужно знать мобильному дизайнеру
Колористика
— искусство сочетания цветов.
Например, вместе не рекомендуется использовать зелёный и красный — насыщенные цвета, которые как бы перекрикивают друг друга. Получается вырвиглазный интерфейс, отсутствует контрастность и объекты трудно различить на экране. Для несочетаемых цветов дизайнеры даже придумали определение «зелубой» (зелёный + голубой).
Для подбора цвета часто используют специальные палитры или цветовые круги — например, Material palette, Adobe Color.
Также можно брать на заметку палитры готовых продуктов. Например, в Америке существует определённый культ кроссовок, где их покупают не ради замены старой пары, а, скорее, с эстетической точки зрения. Поэтому некоторые экземпляры можно назвать источником вдохновения для дизайнеров, которые используют цветовые схемы кроссовок для своих продуктов.
Типографика
— умение оформлять текст при помощи набора и вёрстки.
По сути дизайн — это оформление контента, 80% которого передаётся через текст. Любая информация располагается в виде иерархии — главная и второстепенная части, которые выделяются с помощью определённой стилизации текста.
Например, уровни заголовков — заголовок 1-го или 2-го уровня — различаются по размеру шрифта и служат навигацией, а также делают материал структурированным.
Выравнивание по левому краю придаёт тексту аккуратный вид — его легче воспринимать. Строки начинаются на одном уровне, и глаз быстро находит начало следующей строки — удобно и быстро привыкаешь.
Композиция
— умение грамотно управлять объектами в пространстве. Какие размеры объекта, отступы между объектами и краями экрана, расстояния и связи между объектами позволят создать гармоничную композицию для лучшего восприятия объектов.
Если говорить о том, как колористика, типографика и композиция влияют на поведение пользователя и эффективность интерфейса, то стоит упомянуть про четыре типа нагрузок.
Когнитивные нагрузки — усилия, которые прикладываем, чтобы распознать объект, логику его работы и принять решение о дальнейших действиях. Например, понимаем, что перед нами кнопка, а не округлый прямоугольник, и на эту кнопку можно нажать, чтобы попасть на нужный экран.
⇒ Чем больше мозгу требуется усилий для определения объекта, тем больше мы устаём.
Визуальные нагрузки — усилия для определения объекта на экране по визуальным признакам (круг, небо, кошка) и выделения его среди других.
⇒ Чем больше объектов в интерфейсе, тем больше мы устаём.
Моторные нагрузки — возникают при физическом контакте с интерфейсом: свайп, тап и другие.
⇒ Чем больше жестов управления интерфейсом и чем они сложнее, тем больше мы устаём.
Внешние нагрузки — возникают при взаимодействии пользователя с приложением (собака залаяла, машина проехала, пошёл дождь). Эти нагрузки сложно точно предугадать — можно лишь предположить, в каких условиях будет использоваться приложение чаще всего.
⇒ Чем больше отвлекающих моментов, тем больше мы пытаемся сосредоточиться и быстрее устаём.
Все типы нагрузок идут в связке, влияя друг на друга.
Инструменты
Из графических редакторов сейчас популярны Figma, Sketch или Adobe XD.
Figma
Кросс-платформенный онлайн-редактор, который работает на Windows, macOS, Linux. В нём можно работать всей командой, в том числе с заказчиками. Бесплатный для одного пользователя и платный для работы с командой, если нужно видеть все действия команды, а не только за последние 30 дней.
Sketch
Платный графический редактор для macOS. Плюс Sketch в том, что на рынке он дольше Figma, поэтому в некоторых случаях возможностей и интеграций для него находится больше. Но если вы фрилансер, работать с заказчиками будет непросто, поскольку это не кросс-платформенный инструмент. В Sketch можно работать в офлайне.
Adobe XD
Приложение Adobe для проектирования интерфейсов. Плюсы и минусы аналогичны Sketch, кроме того, что в Adobe XD есть возможность создавать голосовые прототипы при помощи Amazon Alexa. XD заметно менее популярен по сравнению с Figma и Sketch.
Графические редакторы достаточно похожи, поэтому, если освоить один инструмент, то изучение другого не займёт много времени.
Из других инструментов дизайнера можно отметить:
В этом сервисе удобно делать брейнстормы, обсуждения, прорабатывать гипотезы, проектировать навигацию с помощью mindmap и создавать Customer Journey Map.
Сервисы для создания прототипов
Помимо встроенного прототипирования в Figma, Sketch или Adobe XD дополнительно используют такие решения, как InVision, Marvel, ProtoPie, Flinto, Principle for Mac.
Цели и задачи разработки
Дизайнер должен понимать, какие задачи у бизнеса и для кого предназначено приложение.
Приложение — это инструмент бизнеса со своими целями и задачами.
Для примера рассмотрим мобильное приложение банка.
снизить расходы на обслуживание клиентов в отделениях и повысить средний доход на одного клиента.
контролировать свои расходы.
создать дистанционный канал поддержки клиентов и увеличить продажи банковских продуктов.
При разработке приложения всегда учитывают требования бизнеса, задачи пользователей и возможности технологий.
Можно сделать великолепный дизайн, но он не будет решать задачи компании или разработчики не смогут его реализовать. Например, бывает, что бизнес выдвигает гипотезы, не проверяет их на этапе исследования и сразу отправляет в разработку. Получается функциональность, которая никому не нужна, при этом время и деньги потрачены впустую.
Бывает, что ресурсы безрезультатно тратятся не только на бесполезные фичи, но и на приложение.
К слову, если интересуетесь культурой стартапов, в целом (есть утрированные моменты) она хорошо показана в сериале «Кремниевая долина». Его рекомендует к просмотру и Билл Гейтс: «Продюсеры и сценаристы проводят много исследований перед каждым новым сезоном шоу. В прошлом году я был одним из нескольких людей, с которыми они встретились, чтобы поговорить об истории отрасли и рассказать о некоторых своих идеях для пятого сезона».
Soft skills
Коммуникационные навыки
Например, больше половины рабочего времени я общаюсь, согласовываю, обсуждаю. При этом стоит помнить, что непрерывное общение может привести к профессиональному выгоранию, поэтому периодически нужно прислушиваться к себе.
Правильная реакция на критику
Дизайнеров постоянно критикуют, и многие на это обижаются.
Если критикуют, то критикуют работу, а не дизайнера. Важно отделять и не принимать близко к сердцу.
Главное — получать конструктивную критику. Если сказали, что плохо, но не сказали почему, то это неаргументированное мнение, на которое не нужно реагировать.
Относитесь ко всему с юмором — это помогает в том числе трансформировать негатив в хорошее настроение 🙂
К примеру, когда я работал в крупной финансовой компании, менеджер попросила меня сделать кнопки жёлтыми (этот цвет не корпоративный). На мой вопрос, почему именно таким цветом, менеджер пояснила, что на курсах, которые она посещала, сказали, что «жёлтые кнопки привлекают внимание, поэтому, например, в IKEA выходы жёлтые». То, что в IKEA жёлтый — один из корпоративных цветов, которые логично использовали в оформлении магазина, на курсах, видимо, забыли сказать ¯\_(ツ)_/¯
Mindmap — диаграмма связей, интеллект-карта, карта мыслей или ассоциативная карта.
Это способ изображения процесса общего системного мышления с помощью схем.
Что нужно учитывать при разработке интерфейса
Взаимодействие с пользователями
Создание мобильных приложений не сильно отличается от создания сайтов в плане процессов — и те, и другие относятся к цифровым продуктам.
Основное различие заключается во взаимодействии пользователя с продуктом. За компьютером мы сидим или стоим, а вот с телефоном мы можем оказаться в любой ситуации: на прогулке, занимаясь спортом, в магазине, автомобиле и так далее. Также различаются размеры устройств и период контакта.
Смартфоны меньше компьютеров и ноутбуков, а сеансы использования приложений короткие, но частые — всё это нужно учитывать. На экране приложения должно быть минимум информации — только полезная. Пользователь должен быстро получать доступ к контенту. Возьмём, к примеру, Яндекс.Почту. Если мы зайдём в браузерную версию с компьютера, то увидим много дополнительной информации. На телефоне видим только письма, остальное скрыто и показывается по требованию (нажатию) — удобно.
Во многом благодаря желанию быстро и удобно получать информацию и появились мобильные приложения.
Ведь чтобы зайти на сайт, нужно ввести его адрес в строку браузера, а приложение можно открыть и сразу им пользоваться.
Нюансы мобильных платформ
Особенности создания интерфейсов для приложений описаны в гайдлайнах мобильных платформ — Human Interface Guidelines для iOS (Apple) и Material Design для Android (Google).
В создании приложений на платформах Android и iOS есть различия. Например, в паттернах поведения: в iOS меню показывается целиком, а в Android «гамбургерное» меню (три полоски); в разном управлении: в Android три кнопки («назад», «домой» и «последние приложения»), в iOS только «домой».
Грань с каждым обновлением постепенно стирается, но пока ограничения существуют. К примеру, модельный ряд iOS достаточно скромен, а в Android большое количество устройств да ещё и от разных производителей. Из-за этого при разработке на Android тяжелее отлаживать интерфейс — на это уходит много времени.
В основном Android доступнее, чем iOS. И из-за дешёвых компонентов встаёт вопрос качества — на плохой матрице экрана страдает цветопередача, а с плохим сенсором тяжелее попадать на кнопки (низкая чувствительность).
Интерфейс приложения лучше сразу адаптировать для двух платформ, а не делать что-то среднее — в будущем такая попытка сэкономить может дорого обойтись.
Стоимость «экономии» оценить в вакууме сложно — зависит от компании, бизнес-модели, рынка. Немаловажно и то, что для iOS характерна одна модель поведения пользователей, для Android — другая.
Если говорить о средних значениях, то давайте прикинем. Средняя зарплата разработчика — 150 тысяч рублей. В крупной компании приложение могут делать год, но мы будем ориентироваться на агентства, которые делают приложение примерно 3 месяца. Для Android нужны 2 программиста, для iOS — 1 (разработка примерно одинаковая по трудозатратам, но больше нужно отлаживать в Android).
Если просчитались с разработкой приложения на iOS, то это 150 000 рублей х 1 разработчик х 3 месяца = 450 000 рублей, на Android — 900 000 рублей. И это только расходы на зарплатный фонд — без учёта упущенной выгоды, репутационных потерь и снижения лояльности пользователей.
Адаптация контента
Не нужно пытаться уместить контент сайта в десктопной версии на компьютере или ноутбуке в маленький экран смартфона. При адаптации интерфейса под телефон контент приоритезируют и оставляют только самое важное.
Длинные процессы
Если на сайте можно использовать длинные формы (опросники) в несколько шагов, то на телефоне это делать не рекомендуется. Пользователю будет неудобно их заполнять, и он может бросить это занятие в любой момент.
Профессия
Дизайнер
мобильных приложений
Итак, мы разобрали базу для создания визуальной части интерфейса — дизайна. А теперь рассмотрим непосредственно процесс разработки приложений.
Этапы создания мобильного приложения
Исследование
Погружаемся в цели и задачи бизнеса.
Изучаем целевую аудиторию.
Исследования делятся на количественные и качественные.
Количественные исследования отвечают на вопросы «сколько?», «как часто?». Обычно их проводят при помощи опросов, анкетирования, телефонных интервью.
Качественные отвечают на вопросы «кто?», «почему?». Получают информацию в индивидуальных глубинных интервью, групповых дискуссиях (фокус-группах) или прибегая к экспертным оценкам.
Если приложение делается с нуля, то сначала с помощью комбинации методов проводят качественные исследования, потом количественные.
Если приложение уже разработано и его нужно доработать, тогда сначала собирают статистику количественными методами, а потом — качественными.
Дальше проводим конкурентный анализ, изучаем другие каналы коммуникации бизнеса: сайт, презентации, реклама, при наличии — офлайн-точки.
Это нужно для правильного позиционирования бизнеса в приложении. У каждого бренда или компании есть свой язык общения с клиентом. Через каналы коммуникации бренд транслирует посылы аудитории. Например, слоган Nike «Just do it» отражается в простом, спортивно-повседневном стиле, в котором оформлены магазины и сайты компании.
Аналитики предварительно пропускают через себя требования бизнеса и упаковывают это в понятные модели: mindmap, схемы бизнес-процессов, типичные пользовательские пути и другое, — создают артефакты аналитики.
На основе вышеуказанных артефактов дизайнер принимает решения.
Также артефакты помогают управлять коммуникацией с бизнесом: чтобы каждую неделю не прилетали изменения, все бизнес-требования обговариваются и фиксируются. Это важно, чтобы не делать работу в стол и избежать бесконечных доработок.
Если каждую неделю приходят новые требования, то бизнес-заказчик не знает или не понимает, что на самом деле он хочет. А если нет чётких критериев приёмки, будет сложно показывать результат работы. Можно попасть в петлю непрекращающихся правок и постоянных переделок.
Вышеперечисленное — исследования, общение с бизнесом, аналитика — может сделать дизайнер, менеджер продукта или аналитик, если есть такой специалист в компании. Это зависит от компании и бюджета на проект.
Если есть выделенные аналитики, то зона ответственности между ними для целей разработки приложения может распределяться следующим образом:
Проектирование
По сути это создание скелета приложения: дизайнер понимает, где какая будет информация, раскидывает контент по экранам и определяет, сколько экранов будет в каждом пользовательском сценарии.
Чтобы проверить эту логику на практике, дизайнер собирает черновик приложения. Там он тестирует связку экранов, проверяет, что компоненты интерфейса расположены в правильном месте и понятно, как с ними взаимодействовать: что-то нужно нажать, потянуть, выделить или удалить.
На этом этапе важно не переходить в визуальный дизайн и не углубляться в вопросы из серии «какого цвета будет кнопка» или «какие сделать скругления у картинки».
Для проектирования чаще всего используют чёрно-белые прототипы — вайрфреймы, которые создаются в графическом редакторе.
Перед вайрфреймами некоторые создают бумажные прототипы — от руки делают эскиз будущего приложения на бумаге.
Бумажные прототипы подходят для быстрого обсуждения идей, чтобы проверить себя и синхронизироваться с командой перед тем, как приступить к работе в графическом редакторе.
Бумага и карандаш — такие же инструменты дизайнера, как и графический редактор.
Когда дизайнер продумывает процессы в приложении, сложно удержать всё в памяти в один момент времени — нужно фиксировать ход мысли. И в этом сложно полагаться на графические редакторы, которые заточены под определённые задачи — например, обработать фотографии или создать иллюстрации. К тому же, когда мы сразу работаем в графическом редакторе, мы вынуждены подстраиваться под его ограничения, то есть не мы управляем инструментом, а инструмент — нами.
Между идеей в голове и её реализацией получается много посредников: интерфейс графического редактора, экран монитора, клавиатура, мышка. А при работе с бумагой идея быстрее становится осязаемой.