Как спроектировать веб проект
Время на чтение: 30 минут
Перечень необходимых навыков:
Перечень необходимых навыков:
Инструменты проектирования
Навык #1
Mindmapping
Когда у вас возникает идея и ее необходимо разбить на более мелкие идеи, то здесь можно применить майндмэп. Для этого вам необходимо написать главную мысль в самом начале. Все остальные блоки будут исходить из первоначальной.
Например, если вам необходимо спроектировать сайт, то центральной мыслью может стать главная страница вашего сайта. А все дочерние страницы уже будут исходить из нее.
Также майндмэп может быть вам полезна если необходимо структурировать контент, который вы собираетесь размещать на сайте.
Предположим, у вас есть какая то ключевая идея для статьи. И вам необходимо разбить ее по ключевым мыслям/абзацам. Для этого вы пишете название статьи, а каждый следующий смысловой блок это ветка исходящая из названия
Например, вы хотите написать статью про выбор породы собаки.
Название "Как выбрать породу собаки" это ключевая мысль, а из нее уже могут исходить какие породы бывают, на какие факторы стоит обратить внимание, где найти собаку такой породы и т.д.
Предположим, у вас есть какая то ключевая идея для статьи. И вам необходимо разбить ее по ключевым мыслям/абзацам. Для этого вы пишете название статьи, а каждый следующий смысловой блок это ветка исходящая из названия
Например, вы хотите написать статью про выбор породы собаки.
Название "Как выбрать породу собаки" это ключевая мысль, а из нее уже могут исходить какие породы бывают, на какие факторы стоит обратить внимание, где найти собаку такой породы и т.д.
Для того чтобы составлять майндкарты есть ряд инструментов. Отличаются они между собой по цене, возможности работы в онлайне, экспорте данных.
Mindmaping: Miro
Miro это инструмент для создания майнд карт, которым пользуются даже в кремниевой долине. Ключевое преимущество это то что сервис очень сильно заточен на совместную работу.
Есть шаблоны для создания майндмэпов но их не так много. Зато для структурирования больших массивов информации хорошо подходит. Сохранение происходит автоматически. И еще важно что в бесплатной версии можно создавать три файла, а внутри этих файлов может быть неограниченное количество майндкарт.
Miro это универсальный инструмент, он работает не только с майндкартами. Много задач, с которыми сталкивается продакт менеджер вполне можно решить с помощью miro: от презентации до логической схемы для программистов.
Есть шаблоны для создания майндмэпов но их не так много. Зато для структурирования больших массивов информации хорошо подходит. Сохранение происходит автоматически. И еще важно что в бесплатной версии можно создавать три файла, а внутри этих файлов может быть неограниченное количество майндкарт.
Miro это универсальный инструмент, он работает не только с майндкартами. Много задач, с которыми сталкивается продакт менеджер вполне можно решить с помощью miro: от презентации до логической схемы для программистов.
Mindmaping: Mindmeister
Инструмент который предназначен исключительно для майндкарт.
Потому что с одной стороны есть множество шаблонов для того чтобы начать работать с майндкартой и понять как можно организовать данные. С другой стороны, ради каких либо других задач придется идти в другой инструмент.
При этом есть ограничения по количеству карт в бесплатной версии. Не больше 3 штук. Но зато есть расширения для браузера и возможность вставить ваш файл с майнд картой на сайт. Есть совместная работа.
Потому что с одной стороны есть множество шаблонов для того чтобы начать работать с майндкартой и понять как можно организовать данные. С другой стороны, ради каких либо других задач придется идти в другой инструмент.
При этом есть ограничения по количеству карт в бесплатной версии. Не больше 3 штук. Но зато есть расширения для браузера и возможность вставить ваш файл с майнд картой на сайт. Есть совместная работа.
Mindmaping: XMind
В Xmind отличается сам процесс работы с файлами. Если в miro и mindmeister сохранение файлов происходило автоматически, то в этом инструменте необходимо руководствоваться сохранением данных.
То есть вы составляете майндмэп и при этом можете сохранить его себе локально на компьютер и переслать как обычный файл. С одной стороны удобно, с другой стороны программа может зависнуть, или вы можете забыть сохранить файл.
При этом в бесплатной версии можно создавать сколько угодно файлов, что большой плюс. Важно еще чтобы при пересылке файлов у получателя тоже была установлена это программа.
Cам инструмент Xmind узкоспециализированный под майндкарты. Поэтому есть несколько удобных шаблонов.
Xmind имеет особый режим который называется Zen. Суть в том что программа открывается на весь экран и вы перестаете видеть разные уведомления и сосредотачиваетесь только на контенте который создаете.
То есть вы составляете майндмэп и при этом можете сохранить его себе локально на компьютер и переслать как обычный файл. С одной стороны удобно, с другой стороны программа может зависнуть, или вы можете забыть сохранить файл.
При этом в бесплатной версии можно создавать сколько угодно файлов, что большой плюс. Важно еще чтобы при пересылке файлов у получателя тоже была установлена это программа.
Cам инструмент Xmind узкоспециализированный под майндкарты. Поэтому есть несколько удобных шаблонов.
Xmind имеет особый режим который называется Zen. Суть в том что программа открывается на весь экран и вы перестаете видеть разные уведомления и сосредотачиваетесь только на контенте который создаете.
Wireframes
Wireframe это инструмент, когда вам необходимо отобразить дизайн в очень низкой детализации. Этот подход закрывает два очень важных вопроса: что должно быть на странице и где это должно размещаться.
Условно, с помощью квадратов вместо картинок, и линий вместо текста можно сформировать что-то вроде документации для дальнейших этапов.
Условно, с помощью квадратов вместо картинок, и линий вместо текста можно сформировать что-то вроде документации для дальнейших этапов.
Wireframing: Miro
Внутри miro есть отдельный блок, который содержит элементы для создания wireframes. Хорошо подходит для тех кто рядом с майндмэпом решил собрать еще и сам бизнес процесс в wireframes.
Чаще всего продакты выбирают этот вариант, потому что выполняют и другие задачи в Miro.
Чаще всего продакты выбирают этот вариант, потому что выполняют и другие задачи в Miro.
Wireframing: Figma
Для дизайнеров и в целом для тех кто умеет работать с инструментом Figma можно собрать вайрфреймы прям там. Тем самым можно одновременно спроектировать пользовательский опыт и уже по нему в дальнейшем строить полноценный дизайн.
Для этого можно использовать готовые UI kits для низкоуровневого прототипирования.
Для этого можно использовать готовые UI kits для низкоуровневого прототипирования.
Wireframing: Lucidchart
Если miro это инструмент который привычен продактам, и они чаще собирают wireframe там, а figma больше знакома дизайнерам, то Lucid.app это выбор привычный для разработчиков.
Дело в том что там легко можно запроектировать базу данных. А еще там есть несколько шаблонов вайрфреймов сразу под готовые проекты вроде интернет магазина.
Дело в том что там легко можно запроектировать базу данных. А еще там есть несколько шаблонов вайрфреймов сразу под готовые проекты вроде интернет магазина.
Дизайн
Создать детализированный прототип до того как приступить к разработке звучит очень выгодно. Для того чтобы выполнить такую задачу существует ряд инструментов по протипированию и созданию макетов.
Дизайн: Figma
В гонке инструментов для дизайнеров наметился явный лидер по темпам роста.
В гонке инструментов для дизайнеров наметился явный лидер по темпам роста.
Ключевые особенности Figma за счет чего ей удается так расти это:
- возможность пользоваться программой вне зависимости от того какая у вас операционная система.
- удобная совместная работа над одним макетом (идеально для команд с несколькими дизайнерами)
Ключевые особенности Figma за счет чего ей удается так расти это:
- возможность пользоваться программой вне зависимости от того какая у вас операционная система.
- удобная совместная работа над одним макетом (идеально для команд с несколькими дизайнерами)
Дизайн: Sketch
Отличный инструмент для дизайна пользовательских интерфейсов и для графики. Но! Только для iOS.
Ключевые особенности:
- Большое количество плагинов
- Живое и значительное сообщество (а следовательно и инструкции и гайды)
- Есть только триальная версия на 30 дней. После этого придется купить платную версию.
Ключевые особенности:
- Большое количество плагинов
- Живое и значительное сообщество (а следовательно и инструкции и гайды)
- Есть только триальная версия на 30 дней. После этого придется купить платную версию.
Дизайн: Adobe XD
Для тех кто постоянно работает с такими инструментами как Photoshop или Illustrator то Adobe XD это логическое дополнение для работы с пользовательскими инструментами.
Ключевые особенности:
- Хорошо подходит для тех кто уже работал с продуктами Adobe
- Создание сложных прототипов на основе макетов
Ключевые особенности:
- Хорошо подходит для тех кто уже работал с продуктами Adobe
- Создание сложных прототипов на основе макетов
Тесты дизайна
После того как разработан дизайн или уже сделан полноценный продукт - необходимо тестировать насколько эффективно пользователи справляются с задачами. Эту эффективность можно мерить на разных этапах. В момент того когда есть только прототип и дизайн и в момент когда уже разработан полноценный продукт.
Тестирование дизайна: Maze.co
В чем суть: вы разрабатываете прототип например в Figma. Прописываете задание, которое должен выполнить пользователь. И запускаете исследование. После чего отправляете ссылку на исследование maze и собираете статистику, кто справился с заданием а кто нет, и почему.
Тестирование дизайна: Яндекс Вебвизор
Когда у вас уже разработан продукт, можно подключить к нему Вебвизор и смотреть записанные сессии по тому как пользователи взаимодействуют с вашим продуктом.
Это словно если вы стоите за плечом у пользователя в тот момент например когда он совершает покупку.
Крайне полезная штука, но есть два нюанса:
- сессии в бесплатной версии хранятся не больше 30 дней
- вебвизор может замедлить работу фронта сайта, но не всегда это создает видимый эффект
Дополняя информацию с вебвизора еще и картой скроллов и кликов, можно уже делать выводы о том как пользователи взаимодействуют с вашим продуктом.
Это словно если вы стоите за плечом у пользователя в тот момент например когда он совершает покупку.
Крайне полезная штука, но есть два нюанса:
- сессии в бесплатной версии хранятся не больше 30 дней
- вебвизор может замедлить работу фронта сайта, но не всегда это создает видимый эффект
Дополняя информацию с вебвизора еще и картой скроллов и кликов, можно уже делать выводы о том как пользователи взаимодействуют с вашим продуктом.
Тестирование дизайна: Hotjar
Похожая штука на вебвизор только с тарификацией по количеству записанных пользовательских сессий.
Есть одно уникальное отличие: вы можете поставить виджет для сбора обратной связи на любую из страниц и получать пользовательскую обратную связь в конкретной ситуации.
Есть одно уникальное отличие: вы можете поставить виджет для сбора обратной связи на любую из страниц и получать пользовательскую обратную связь в конкретной ситуации.
Расскажи как тебе этот материал?
