Серия стримов мастер-классов по проектированию интерфейсов от Захара Дня

Во время серии стримов я спроектировал интерфейс приложения, которое мне нужно разработать, рассказал о том, как именно я принимаю решения, ответил на вопросы зрителей.


Общие вещи

Мастер-класс бесплатный в формате стрима. Записи я не планировал выкладывать, но по просьбам зрителей выложил. Они, а также все созданные во время стрима файлы, доступны через сервис Patreon.

Что за продукт

Я изучаю разработку под платформу iOS. Для саморазвития в этом нелёгком деле, я придумал приложение для безопасной личной переписки, а именно, для шифрования данных.

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

Тайминг

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

Готово далеко не всё, но достаточно, чтобы перейти к написанию приложения. Остальное можно доделать в процессе. Хороший повод продолжить стримить.

Проектирование (или дизайн)

От общего к частному

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

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

Вайрфрейминг

Этот англицизм обозначает работу на низком уровне детализации. Обычно я рисую каракули на iPad Pro. До того, как он вышел, я работал на бумаге. На стриме я работал в Sketch, чтобы было наглядно, хотя на работу ушло больше времени, чем планировалось.

Вайрфрейминг — проектирование с низкой детализацией

Я начал проектировать именно с веб-версии. За три часа первого стрима получилось спроектировать 60% механики веб-приложения.

Проект приложения за три часа

Мобильная версия

На втором стриме я доделал веб-версию и спроектировал 60% механики мобильного приложения. В работе использовались стандартные элементы из библиотеки iOS, на этой стадии нельзя тратить время на рисование кнопочек.

Вайрфрейминг мобильного приложения на стандартных элементах и на элементах сделанных ранее

За второй стрим получилось спроектировать 40% веб версии и 60% мобильной. Пришло время заняться визуальной частью интерфейса.

Разработка визуальной концепции

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

На начальном этапе наибольшую важность представляет структура интерфеса. Цветовую схему можно будет поменять в любое время практически моментально.

Аккуратный интерфейс без «дисней ленда»

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

Макеты веб-приложения под экраны разных устройств

Оставшиеся 40% механики мобильного приложения, визуальная концепция интерфейса под веб с проверкой на планшете — результат третьего стрима.

Визуальная концепция интерфейса мобильного приложения

После девяти часов проектирования, наконец-то руки дошли до интерфейса мобильного приложения, из-за чего всё и начиналось.

Многие элементы были перенесены из веб версии, но на мобилке совсем другая навигация. Её пришлось полностью переработать, потому что стандартный iOS Tab Bar оказался излишним для такого простого приложения.

В начале стрима немного обсудили какая вообще навигация бывает на iOS, рассмотрели всякие новшества, например навигацию SnapChat и повсеместные хэндлбары в современных приложениях.

Мобильный UI

За стрим получилось покрыть 60% мобильного интерфейса и было решено провести пятый стрим. А запись этого стрима также доступна на Patreon.

Финализация работы

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

Мобильный UI

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


Для тех, кто меня не знает

Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, Aic, Ценципер, Тинькофф Банк, Wylsacom, и некоторых других. Подробнее о результатах этой деятельности смотрите в нашем видео «Hello, World!».

Я также являюсь создателем курса-бестселлера в Moscow Coding School, который прошли сотрудники многих известных компаний: Look At Media, Kaspersky Lab, МТС, Avito, Leo Burnett, BBDO, Ad Index, Readymag, Yandex, и т.д. Подробнее об этом вы можете прочитать в моей статье «Мой путь от самообразования до преподавания за последние пять лет».

Вы можете узнать подробней обо мне в моих Facebook и Instagram, также я иногда пишу статьи на Medium. Публичные стримы будут проходить на YouTube, подпишитесь и нажмите на колокольчик, если вы хотите, чтобы вам пришло оповещение. Также, я публикую информацию на странице Hack Exchange в Facebook и в Vk.

Делитесь знаниями с друзьями. Знания должны быть доступны!