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

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

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

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

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

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

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

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

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

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

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

Запись первого стрима доступна на Patreon.

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

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

Запись второго стрима доступна на Patreon. Sketch файл с вайрфреймами веб и мобильной версий также доступен на Patreon.

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

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

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

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

Третий стрим доступен в записи для просмотра на Patreon.

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

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

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

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

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

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

Запись пятого стрима и финальный Sketch файл доступны на Patreon.

Меня зовут Захар День, я дизайнер и веб-разработчик, занимаюсь созданием цифровых продуктов (приложений) от идеи до реализации, развиваю в Школе дизайна НИУ ВШЭ кафедру «Дизайн и программирование», наши студенты уже работают в таких компаниях, как: Сбербанк Технологии, 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.

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