Я начал изучать графический дизайн, когда мне было 13 лет. Я научился создавать веб-сайты на онлайн-курсах и целый день играл с Photoshop и Affinity Designer. Этот опыт научил меня мыслить как дизайнер.
Я занимаюсь дизайном и разработкой приложений почти год. Я посещал программу в Массачусетском технологическом институте, где вместе с командой работал над Universeat. Два месяца назад я начал работать над новым приложением Crypto Price Tracker, которое я запустил недавно, 28 января.
В этом посте я расскажу о пошаговом процессе проектирования, которому следую, а также на примерах приложения, над которым я работал. Это должно помочь всем, кто хочет изучить или улучшить свои навыки цифрового дизайна. Дизайн - это не только умение использовать программное обеспечение для дизайна, и этот пост не научит вас, как им пользоваться. В Интернете можно найти сотни качественных руководств. Дизайн - это также понимание вашего продукта изнутри, его особенности и функциональность, а также проектирование с учетом конечного пользователя. Вот чему этот пост призван научить.
Процесс проектирования:
- Создайте диаграмму действий пользователя для каждого экрана.
- Создание / рисование каркасов.
- Выберите шаблоны дизайна и цветовые палитры.
- Создавайте макеты.
- Создайте анимированный прототип приложения и попросите людей протестировать его и оставить отзыв.
- Завершите работу над макетами, чтобы все скриншоты были готовы к написанию кода.
Давайте начнем!
Схема действий пользователя
Первый шаг - выяснить, какие функции вы хотите использовать в своем приложении. Когда у вас возникнут идеи, создайте схему действий пользователя. Диаграмма пользовательского потока - это очень высокоуровневое представление пути пользователя по вашему приложению / веб-сайту.
Обычно блок-схема пользователя состоит из 3-х типов фигур.
- Прямоугольники используются для представления экранов.
- Ромбы используются для обозначения решений (например, нажатие кнопки входа в систему, смахивание влево, увеличение масштаба).
- Стрелки соединяют экраны и решения вместе.
Диаграммы пользовательского потока очень полезны, потому что они дают хорошее логическое представление о том, как будет работать приложение.
Вот диаграмма взаимодействия с пользователем, которую я нарисовал, когда только начинал работать над дизайном своего приложения.
Каркасы
После того как вы завершите создание пользовательских диаграмм для каждого экрана и спроектируете пути пользователя, вы начнете работать над макетом всех экранов. Каркасные модели - это, по сути, низкокачественные представления того, как будет выглядеть ваше приложение. По сути, это набросок или схема того, где будут размещаться изображения, ярлыки, кнопки и прочее, с их расположением и расположением. Примерный набросок того, как ваше приложение будет работать.
Я использую печатные шаблоны из UI Stencils для рисования каркасов. Это экономит время и дает красивый холст, на котором можно рисовать и делать заметки.
Вот пример каркаса.
После создания каркасов вы можете использовать приложение под названием Pop и сделать снимок всех своих рисунков с помощью приложения и получить прототип, соединив все экраны с помощью кнопок.
Шаблоны дизайна и цветовые палитры
Это моя любимая часть. Это похоже на витрину. Множество шаблонов дизайна и цветовых палитр на выбор. Я выбираю те, которые мне нравятся, и экспериментирую с ними.
Лучшими платформами для поиска шаблонов проектирования являются Mobile Patterns и Pttrns. А чтобы найти хорошие цветовые палитры, зайдите в Color Hunt.
Мокапы
Это когда вы наконец переходите к использованию программного обеспечения для проектирования. В дизайнерском смысле макет - это точное представление вашего дизайна. Это похоже на то, как если бы вы заходили в это приложение в будущем и сделали из него несколько скриншотов. Это должно выглядеть реалистично и очень похоже на настоящую вещь.
Есть дизайнерские программы и инструменты для создания макетов. Я использую дизайнер Affinity. Наиболее часто используемый инструмент для дизайна iOS - Эскиз.
Вот пример одного из первых дизайнов моего приложения.
Я больше экспериментировал с различными цветовыми палитрами.
Я поделился первоначальными мокапами с друзьями, чтобы они услышали их отзывы. Многим людям понравился золотой градиент и черная схема.
Будьте готовы принимать отзывы и экспериментировать с новыми предложениями! Вы обнаружите, что потрясающие идеи исходят от ваших пользователей, когда вы разговариваете с ними, а не когда лихорадочно просматриваете Dribbble или Behance.
Поэтому я переработал макет и удалил фоновые графики, потому что их создание было технически трудоемким процессом и ухудшало читаемость. Так выглядел обновленный макет.
Мне очень понравилась цветовая схема, значки на панели вкладок и общий макет. Я пошел дальше и спроектировал остальные экраны, следуя тем же принципам дизайна. Это был долгий, но увлекательный процесс!
Когда все мои экраны были готовы, я собрал прототип в Adobe XD и попросил нескольких друзей поэкспериментировать и дать отзыв.
Вот как выглядит мой окончательный дизайн после последних штрихов и прочего.
После того, как все экраны были готовы, я импортировал их в Xcode и начал кодировать приложение.
Вот и все! Я надеюсь, что этот пост поможет вам начать работу с дизайном приложений или поможет вам стать лучшим дизайнером. А если вам понравилась моя программа, вы можете скачать ее здесь.
Я заканчиваю пост одной из моих любимых цитат о дизайне.
«Дизайн - это не просто то, как он выглядит и ощущается. Дизайн - это то, как это работает »
- Стив Джобс
