статичный макет что это
Виды макетов и их классификация
Макетирование – разновидность проектного моделирования, которая позволяет получить точное представление о предмете и его свойствах. Макеты помогают понять структуру, размеры, пропорции, цветовое и фактурное решение объекта. Создание макета является обязательным этапом проектирования, без которого невозможно определить достоверность расчетов и жизнеспособность будущего объекта.
Существуют разные классификации, которые разделяют макеты в зависимости от их роли, функции и задач проектирования. Условно макеты подразделяются на две большие группы: архитектурные и технические. Для их изготовления проектировщику нужно обладать обширными знаниями и практическим опытом. В первом случае – знаниями основ архитектуры, во втором – знаниями техники и механики.
Помимо этих двух видов выделяют планировочные, промышленные, концептуальные, подарочные, рекламные и другие макеты. Остановимся более подробно на каждом виде, выделим отличительные черты и особенности каждого из них.
Архитектурные – это макеты зданий и сооружений. Они позволяют продемонстрировать масштабы проекта, организацию пространства, соотношение объекта с его окружением. Архитектурные макеты используются как в государственном, так и частном строительстве. К ним относятся как модели отдельных домов, так и проекты районов города. Для этого вида макетов характерна высокая точность и наличие большого количества деталей, например, дорожной разметки, озеленения, парковок и других значимых для проекта особенностей.
Планировочные или градостроительные макеты создают общее представление о планировке объекта – жилого комплекса, квартала, территории завода, лесопарковой зоны. Цель их создания – получения представления об расположении отдельных частей проекта относительно друг друга, коммуникационных связях и инфраструктуре.
Промышленные макеты создаются при строительстве заводских комплексов, комбинатов, фабрик и других предприятий. Они могут быть общими, и отображать комплекс сооружений и окружающую инфраструктуру, или детальными – макеты цехов, участков, вспомогательных построек.
Концептуальные макеты выражают идею или замысел проекта, показывают план заполнения пространства, стиль, концепцию. Детали на таких макетах отсутствуют, основная задача – правильно преподнести проект и показать, насколько он будет вписываться в окружающую среду, выглядеть рядом с другими строениями.
Технические макеты – это проекты машин, механизмов и другой техники. Это подробные детальные макеты, описывающие внешний вид объекта, внутреннее устройство, особенности работы. Выделяют стендовые технические макеты, которые являются ничем иным, как копией реального агрегата. Мастерски изготовленный, проработанный в деталях стендовый технический макет может стать подарочным.
Подарочные макеты – достаточно широкое понятие. Сюда могут относиться и архитектурные, и технические, и даже концептуальные макеты. Часто они являются отображением какой-нибудь памятной даты, выраженным в конкретном объекте. Модели военной техники, самолетов, кораблей, копии памятников – все это подарочные макеты. Отличительная черта этого вида – памятная упаковка, подставка, надпись.
Рекламные макеты часто выполняются с использованием современных технических средств. Его задача привлечь внимание, показать потенциальному клиенту выгоды и достоинства проекта. Такие макеты чаще всего яркие, красочные, с большим количеством деталей. Например, макет жилого комплекса может иметь декоративную подсветку, оформленную придомовую территорию с припаркованными автомобилями и фигурками людей. Современные рекламные макеты выглядят эффектно и требуют вложения сил разных специалистов.
Как уже отмечалось выше, классификация макетов достаточно размыта, так как каждый из них, как правило, совмещает в себе признаки сразу нескольких видов. Мы перечислили несколько наиболее популярных, но это далеко не полный список всех существующих видов макетов. Помимо уже названных выделяют демонстрационные, театральные, проверочные, интерьерные, натурные и другие виды. Чаще всего название вида макета отражает суть его назначения.
Макеты могут быть не только статичными, но и подвижными. Такие макеты часто используются для развлекательных целей. Например, макеты достопримечательностей, городов и даже стран. Размеры макетов варьируются в широких пределах – от нескольких сантиметров до сотен метров. Особенно эффектно выглядят максимально реалистичные копии объектов с движущимися механизмами, мелкими деталями и подсветкой.
Для изготовления макетов используются разные материалы – бумага, дерево, металл, пластик и другие. Создание макетов требует большого количества знаний и практических навыков. Показателем качества макета и профессионализма автора являются не столько его сложность и наполненность элементами, сколько соответствие поставленной перед ним задаче.
Виды макетов и их классификация: Основы макетирования: Смирнов В.А.
Доброго времени суток, уважаемые пользователи проекта МоделистЪ — Путь к Мастерству.
С вами снова на связи Дмитрий Игнатычев — ваш проводник мире масштабного моделирования!
Теперь пришла пора разобрать типологию макетов. Сколько существует основных типов и видов макетов, для отображения чего они используются, насколько условна данная классификация — Вы узнаете из этой главы нашего учебника.
| Смирнов В.А. |
| Краткий курс обучения профессиональным приемам макетирования и технического моделирования |
ВИДЫ МАКЕТОВ И ИХ КЛАССИФИКАЦИЯ
Все макеты, можно подразделить на архитектурные и технические. Понятно, что для изготовления и тех и других, макетчику нужны определенные знания и навыки. В первом случае это элементарные знания в области архитектуры, во втором случае нужны, хотя бы элементарные знания техники, механизмов.
Макеты условно можно подразделить на виды и типы. В зависимости от масштабов и назначения макеты могут быть:
Это макеты гражданских общественных и частных зданий. Это могут быть макеты отдельных домов, коттеджей, а так же микрорайонов, кварталов. Как правило, они выполняются с подробным наполнением (дорожная разметка, МАФы, озеленение, стоянки автомобилей и т.д.)
Макеты планировочные. Дающие общее представление о планировке большого участка местности, части города, территории крупного завода. Такие макеты дают общее представление о расположении крупных значимых объектов на определенной территории.
Макеты, показывающие инфраструктуру промышленных предприятий, заводов, комбинатов, фабрик. Они могут отображать как комплекс сооружений, так и отдельную часть, например отдельного участка, цеха и т.д.
Такие макеты должны отображать саму идею, концепцию заполнения пространства, участка местности, в едином стиле, замысле. Деталировка на таких макетах отходит на второй план, главное выразить идею. Так же эти макеты должны отображать, как новое наполнение пространства архитектурными элементами будет гармонизировать с окружающей средой, с уже имеющимися строениями и объектами. Задача такого макета красиво подать и раскрыть замысел.
Это макеты машин, механизмов, любой техники. На таких макетах показывается не только внешний вид механизма, но зачастую принцип действия, взаимодействия нескольких частей. Бывают технические макеты стендовые. Это полная внешняя, масштабная копия какого-либо вида техники, механизма. Тщательно и скрупулезно сделанные технические макеты-копии часто становятся подарочными макетами.
Как правило, это макеты, предназначенные в подарок какому-либо лицу, или же организации. Они отображают памятное событие, выраженное в конкретном объекте или в абстрактной, но легко узнаваемой конструкции. Чаще всего это макет техники (самолет, танк и т.д.) к которой имеет отношение поздравляемый. Хотя это может быть и архитектурное изображение, копия памятника, здания и т.д. Подарочные макеты характерны еще и тем, что имеют, как правило, защитный футляр, красиво выполненную подставку с табличкой (на ней обычно пишут название изделия, его характеристики, поздравление и т.д.)
Макет более точно отображает архитектурные решения, цветовой и световой подход. Такой макет должен наглядно показывать потенциальному клиенту или заказчику, как будет выглядеть строение, в котором он будут жить или работать. Куда выходят окна, где стоянка для автомобилей, как будет озеленен двор или придомовая территория. Особенно эффектно такие макеты выглядят с масштабной подсветкой (фонарные столбы, декоративное освещение на газонах, освещение входных дверей, рекламные щиты и стенды). На таких макетах, для наглядности расставляют копии автомобилей, фигурки людей и т.д.
Перечисленные здесь виды и типы макетов весьма условны, поскольку каждый макет, как правило, совмещает несколько вышеуказанных признаков. К тому же список видов макетов можно продолжить. Есть еще макеты:
По названию можно вполне понять для чего тот или иной вид макеты предназначается.
Еще макеты бывают статичные, стендовые, динамичные, с подсветкой и без. Подсветка может быть внутренняя (встроенная), бывает внешняя. Макеты могут содержать в себе движущиеся части, которые особо важны для передачи смысла всего объекта в целом, или для оживления и придания особой реалистичности.
8 простых способов добавить динамики в статичные дизайн-макеты
Материал этой статьи является следствием моих дизайн-экспериментов и выводов за последний год-полтора непрерывного дизайн гринда. Я неустанно собирал ui kit’ы, экспериментировал с контентом в плейсхолдерах, стилями, тенями текстами и состояниями, чтобы понять влияет ли это на конверсию. Иначе говоря, смогу ли я увеличить продажи дизайн-продуктов для Figma, если добавлю немного визуальной динамики в статичные дизайн-макеты, чтобы сделать темплейты интереснее и функциональнее.
Ниже я продемонстрирую несколько простых приемов, как добавить немного полезных эффектов в обыкновенные статичные прототипы. Качество от этого не пострадает, появится визуальное разнообразие в повторяющися элементах. Возможно это поможет сделать ваш лучший шот на Dribbble или выиграть несколько очков в глазах клиента или тим-лида, т.к. использование этих приемов демонстрирует вас как исполнителя внимательного к UI деталям.
Если я внедряю какую-то фишку в дизайн, и вижу как растут метрики на сайте, мне трудно быть уверенным в том, какое действие вызвало эти изменения. Однако по мере того, как развивался мой сайт, я стал подмечать рост числа постоянных посетителей, которые зачем-то возвращаются. Если люди не покупали продукты, то они вновь и вновь появлялись, чтобы поглазеть на что-то. Но на что?
Увы, я пока не нашел способа определить метрики тех или иных визуальных приемов, с которыми я регулярно экспериментирую. Я попытался провести анализ всех своих UI наработок и систематизировать из подсознательного в удобный и понятный список простых трюков, чтобы сделать дизайн чуточку веселее. Возможно это просто прикольно и цепяет глаз, возможно от этого растут подписчики, возможно это что-то из ближайшего будущего, а возможно не имеет никакого смысла. Как я сказал выше, я не могу быть уверен, что показатели посещаемости и просмотра страниц моего сайта растут именно благодаря этим приемам добавления “визуальной динамики” в статичные макеты. Но мне нравится думать, что UI эффекты, которые я опишу ниже прямо или косвенно повлияли на мой общий прогресс.
Итак, я расскажу о том как добавление состояний в статичный прототип добавляет ему немного динамики, показывая некоторое событие. Поехали!
Если на вашем артборде используется множество карточек, блоков и других однотипных элементов, то один из выборки можно “приподнять” тенью. Этот прием уместен как для крупных элементов, например карточек, так и для мелких UI-компонентов, например, разделов меню в боковой навигаци. Создается ощущение, что мы навели на карточку курсор и можно кликнуть:
Преимущество интерактивных прототипов при презентации дизайна
Статичный макет не лучшее решение
Прежде чем рассказать вам об удивительном решении, позвольте мне нарисовать картину проблемы.
Дизайнеры обычно создают дизайн сайта с использованием Photoshop, Sketh или Illustrator, используя несколько слоев и файлов для отображения разных страниц, функций и размеров экрана. Затем, после многократного обсуждения между заинтересованными сторонами (и ожидая одобрения), проекты либо реализуются дизайнером, либо передаются на верстку другому разработчику.
Но возникает много вопросов, когда при верстке, разработчики просят разъяснить детали дизайна. В зависимости от степени сложности, дизайнерам приходится постоянно принимать участие, объяснять функции и элементы дизайна, что приводит иногда к раздражающему трехстороннему сотрудничеству и большим расходам на конечную реализацию проекта.
Возникает много вопросов и у заказчика, статичный макет не может отобразить всю функциональность дизайна, его интерактивность, поведение анимации и адаптивность на различных устройствах.
Это неэффективно, но есть выход
Давайте погрузимся в эти преимущества и объясним, почему они так ценны для дизайнеров и клиентов. Чем больше вы сможете оценить живые прототипы, тем больше вы привыкнете к их эффективному использованию, и тем счастливее будут ваши кленты.
Прототипы ближе и быстрее к окончательному продукту
Когда прототип одобряется клиентом, то время до конечного результата не большое, потому что прототип уже изначально является бета-версией сайта. Это значительно быстрее, чем необходимость заключать контракты с разработчиками для реализации ваших проектов в коде или ждать месяцы реализации сайта. Мы избегаем делать сайт дважды, один раз в Photoshop и один раз в коде.
Подумайте, как при использовании Photoshop вы можете создавать элементы дизайна, которые на самом деле невозможны с использованием HTML и CSS, что может заставить вас перепроектировать их при создании реального сайта. Использование сразу HTML и CSS для создания прототипа гарантирует, что все, что вы конструируете, возможно в конечном продукте.
Также не будет сюрпризом для вас, что при реализации конечный продукт и прототип выглядят именно так как и задумано, но для статических макетов в отличие от прототипов это не всегда так. Шрифты особенно печально известны тем, что в Photoshop и в Интернете они отличаются по-разному, что часто приводит к изменениям шрифтов в последнюю минуту. Это приводит нас к:
Прототипы легче визуализировать
Визуализация конечного продукта может быть чрезвычайно сложной. Несомненно, дизайнеры могут легко визуализировать конечный продукт из макета. Но у клиента, однако, есть проблемы с представлением, чтобы оценить потенциал его красоты и функциональности.
Вот где действительно работают рабочие прототипы. Вместо того, чтобы передавать своим клиентам серию PSD, изображений или рисунков по email, где все статично и безжизненно, мы даем им живой пример, с которым они могут понять как все будет в конечном продукте, включая анимацию, адаптивность и тд.
Вам должно быть важно, чтобы ваши клиенты нажимали на кнопки и ссылки, чтобы они могли видеть, как они меняются, увидеть микро-анимацию интерфейса, вместо того, чтобы просто поместить их в папку PSD. Чем проще клиенты оценивают ваши дизайнерские работы, тем быстрее происходит обсуждение, утверждение и реализация проектов.
Прототипы упрощают проектирование
Прошли те дни, когда у нас был только стационарный PC и браузер IE 6 для просмотра веб-страниц. Это 2018 год, и люди теперь просматривают веб-страницы с размером экрана от 3 до 100 дюймов, в разных пропорциях, ориентациях, плотности пикселей и разрешениях. Просто посмотрите на некоторые из возможных устройств, на которых может быть открыт ваш сайт:
Как вы можете видеть, мы просто не можем создать единый статический дизайн из картинок с фиксированной шириной и ожидать, что он будет соответствовать требованиям наших клиентов. Без удобства для мобильных устройств пользовательский опыт будет страдать. Да даже Google фактически теперь наказывает сайты за то, что они не являются мобильными.
Вот почему кто-то создает как минимум два PSD, один для мобильных и один для рабочего стола, а может быть, еще пару для планшетов, а также ориентацию на пейзаж и портрет. Это хорошо, но это также и большая работа.
Напротив, создание интерактивного прототипа с использованием дружественной для мобильных устройств структуры, такой как к примеру Bootstrap (коллекция интерфейсных инструментов для быстрого создания веб-сайта), Webflow и других, упрощает создание сайта, который адаптивный с самого начала.
Пример отзывчивого сайта на Webflow Gallio Template
В итоге
Рабочие прототипы предлагают огромные преимущества по сравнению со статичными макетами и могут значительно улучшить, ускорить и понять качество вашего дизайна. С рабочим прототипом, который с первого дня показывает бета продукт в жизни, клиент может намного быстрее понять и протестировать весь функционал будущего сайта, что значительно уменьшает количество отказов во время презентации дизайна и правки во время реализации проекта.
Прототип сайта: что это такое и зачем он нужен
Работу над сайтом обычно начинают с макета: обсуждают цели и задачи, а затем продумывают структуру и оформляют прототип. Примитивный макет можно нарисовать на салфетке. Но чем сложнее задача и ответственнее проект, тем выше требования к прототипу.
У нас за плечами несколько своих проектов, над которыми работали целые команды. Скажем честно: макет на салфетке — дурь. Чтобы сделать нормальный прототип, мы используем специальные онлайн-инструменты и сервисы. О них мы сделаем подробный обзор в декабре. А сегодня начнем с основ: рассказываем, что такое прототип сайта и как начать над ним работу.
Что такое прототип сайта
Прототип сайта — это макет, черновик, схема если хотите. Он помогает схематически визуализировать основные элементы и функции вашего будущего портала. Вы наглядно изображаете структуру, элементы интерфейса, расположение иллюстраций и кнопок, меню и иконок. Рисуете черновки, по которому разработчики и дизайнеры будут создавать готовый продукт.
Прототип — это изображение результата. Прототипы могут отличаться по уровню детализации. Они могут быть нарисованы на 2–3 страницах А4 или иметь полноценную разветвленную структуру в Фигме с кликабельными элементами. Как бы не выглядел прототип, его задача — изобразить итоговый результат, который хочет увидеть заказчик и должен воплотить в жизнь исполнитель.
Вот так может выглядеть прототип страницы, нарисованный на бумаге. Его сложно править, добавлять или убирать элементы. Зато на его основе можно быстро собрать цифровой макет. Подойдет для начала работы над сайтом.
А вот цифровой прототип, нарисованный в программе. Он уже больше похож на сайт. Его элементы легко менять между собой, корректировать концепцию и проверять юзабилити. По такому прототипу разработчик будет делать сайт.
Зачем прототип заказчику
Будущий владелец сайта с помощью прототипа решает сразу несколько задач:
Отсутствие представления о том, как должен выглядеть сайт — нормальная ситуация для заказчика. Обычно у него есть задача: «хочу продавать через интернет». А ко всем остальным моментам, включая внешний вид сайта, применяется мерило «нравится/не нравится». Часто из-за этого члены команды конфликтуют. Прототип поможет устранить разногласия и прийти к единому видению на старте.
Другой момент — бюджет. На этапе прототипирования можно моделировать разные наборы функций и элементов, выбрать наиболее удачные и так оптимизировать расходы на разработку. Верстальщику не придется несколько раз переделывать результат, заказчик сэкономит на разработке.
Зачем прототип команде разработчиков
С прототипом работать проще и продуктивнее:
Прототип — часть технического задания. Разработчик может быть гуру верстки сайтов, но какой от этого смысл, если ТЗ составлено устно? Макет — схематическая визуализация технического задания. Утвержденный макет гарантирует, что заказчик не изменит резко своих требований. А если изменит, всегда можно показать ему макет и доказать свою правоту.
Какие бывают прототипы сайтов
Разные. Вы можете нарисовать примитивный эскиз на салфетке, а можете — интерактивный макет с высокой детализацией проработки и кликабельными элементами. Объем работы над прототипом зависит только от сложности проекта и бюджета. Чем сложнее и дороже сайт, тем детальнее и объемнее должен быть рабочий вариант макета.
Эскиз на бумаге
Подойдет «на берегу», чтобы найти наиболее удачную конструкцию. Берете карандаш, лист А4 и делаете схематичную разметку блоков. Вы сможете найти удачную компоновку элементов и создать общее видение без лишних деталей. Можно увидеть общую картину и нарисовать целую карту сайта. Размещайте на таком эскизе только ценные элементы, а детали опускайте.
Примерный набросок интерфейса сайта, эскиз с отображением переходов. Такой макет подойдет для старта работы и общего представления архитектуры.
Макет с низкой детализацией
Такой прототип страницы сайта еще называют LoFi Wireframe. Его рисуют на основе примерного эскиза. Помогает упаковать идею в цифровой документ и согласовать примерный объем работ.
На этом этапе прорабатывают общие моменты: размеры и пропорции блоков, разметку, структуру и каркас. Каждый участник процесса разработки дает свои замечания, выдвигает гипотезы и идеи для развития. Обычно макет с низкой детализацией не содержит контента — это страница с примерным представлением блоков в виде геометрических фигур. Простейший цифровой прототип выглядит вот так.
Макет с низкой детализацией. Глубина проработки на этом этапе не так важна, как общая структура и каркас.
Макет с высокой детализацией
Когда примерная структура готова, начинают работать с содержанием: текстами, иллюстрациями, описаниями и подписями, иконками и фотографиями. Контент формирует основной посыл и помогает расставить акценты, донести до аудитории ценное сообщение бизнеса. Текст должен давать объяснение, иллюстрации — формировать образы, а общая картинка — создавать историю.
Над детализацией и глубиной проработки обычно работает команда: дизайнер, иллюстратор, копирайтер, фотограф (для интернет-магазинов и продуктовых сайтов). С таким прототипом проще организовать командную работу, когда у каждого участника своя функциональная задача.
Страница прототипа с высокой глубиной проработки. Есть описания, заголовки, характеристики продукта, изображение иконок, тексты кнопок, примеры отзывов. Уже похоже на полноценную страницу сайта.
Статичный макет
Это прототип в виде графического изображения. Возможность взаимодействия с таким макетом отсутствует, элементы не кликабельные. По сути, это просто картинка, как бы скриншот будущего сайта. Сначала черновик разрабатывают статичным, чтобы оптимизировать ресурсы на разработку. Дизайнер просто рисует шаблон, который будет размножен и перенесен на остальные страницы. Делать сходу интерактивный прототип нет смысла — потому что примерно в 100% случаев будут доработки. А проще перерисовать все в фотошопе, чем переделывать интерактивные элементы.
Статичный макет с детализацией. Кликнуть по элементам не получится, потому что по сути это картинка, а не сайт.
Интерактивный макет
Или Interactive Hi-Fi. Когда есть визуальное представление и часть контента, беруться за проработку поведенческих моментов. Дизайнер смотрит, как отображаются анимации, визуальные эффекты, как работают переходы и слайдеры, как ведут себя элементы сайта при взаимодействии, как всплывают формы и фильтры, как кнопки реагируют на пользовательские действия на разных гаджетах.
По сути, это уже рабочий вариант сайта. Только прототип. Он помогает зафиналить дизайн перед запуском веб-разработки, проработать детали, упростить тестирование и согласовать окончательный результат. С таким макетом можно взаимодействовать и даже вставлять кликабельные ссылки. Interactive Hi-Fi создают при разработке сложных сайтов, когда выделен серьезный бюджет и нужен безупречный результат с минимальным количеством косяков.
Интерактивный прототип похож на рабочий сайт. Можно кликнуть по каждому или почти по каждому элементу и проверить, как он реагирует. Будущий сайт будет выглядеть именно так. Интерактивный макет позволяет зафиналить концепцию и приступить к веб-разработке.
Процесс разработки хорошего прототипа
Прототип сайта — результат взаимодействия целой команды, которая не раз собирается, не раз вносит правки и много, иногда очень много работает. Бывает, что создание хорошего прототипа занимает больше времени, чем остальная разработка.
Ниже мы собрали ключевые шаги — как ориентир. Каждый из них достоин отдельного материала, есть о чем рассказать и чем поделиться. Используйте эти этапы как ориентир для своих будущих проектов. Это не руководство к действию, а краткое описание нашего опыта. Попробуйте перенести его на свою команду.
1. Обсуждение и постановка целей
Все начинается с постановки целей. Команда собирается и обсуждает цели будущего продукта. Допустимы размытые формулировки, но их лучше избегать. Чем яснее и конкретнее будут сформулированы цели, тем грамотнее будут гипотезы, которые вы будете формулировать.
Обсудите, чего вы хотите добиться с помощью сайта и какие инструменты в этом помогут. У бизнес-ресурса может быть разный набор целей, он зависит от специфики предпринимательской деятельности. От этого зависит и профиль портала. Например:
2. Формирование гипотез
Когда есть цели и примерное понимание того, какой ресурс нужен, мы выдвигаем гипотезы. Это предположения, которые мы будем проверять с помощью сайта. От гипотез обычно отталкиваются при формировании структуры. короче: определитесь, что именно вы будете проверять с помощью сайта и используйте эти гипотезы при прототипировании.
Допустим, мы собираемся продавать на сайте ноутбуки. Мы предполагаем, что фильтр, который будет подбирать компьютеры под задачи покупателя, уменьшит количество касаний с момента перехода и до момента отправки заявки, а также даст более высокую конверсию.
Вот вам и гипотеза. При разработке прототипа мы можем проверить потенциальное количество касаний при наличии и отсутствии такого фильтра на главной. Другой пример.
Допустим, мы разрабатываем интернет-магазин. Мы знаем, что большое количество полей при заполнении формы отпугивает покупателей и конверсия сильно снижается. Мы предполагаем, что 2-шаговое заполнение формы сократит количество действий покупателя и повысит конверсию. Еще на странице товара мы предложим выбрать количество единиц, вписать имя и номер телефона. А на втором шаге (в корзине) останется заполнить только адрес доставки.
Еще одна полноценная гипотеза. Когда мы будем проектировать сайт, сформулированные гипотезы помогут со структурой.
3. Исследование
На этом этапе команда погружается в сам продукт и изучает бизнес-процессы в компании. Понимание бизнес-процессов позволяет принимать более эффективные решения, делать сайт продолжением бизнеса клиента. Иначе есть риск, что компания и разработанный для нее сайт будут существовать отдельно друг от друга. Нехорошо.
Исследование — вопрос бюджета. Если он сильно ограничен, исследованием пренебрегают: просто делают сайт, который не учитывает бизнес-процессы. А потом начинают вылазить косяки.
Например, у нас недавно появился клиент — онлайн-витрина товаров для животных. Изначально это офлайн-магазин, который в период пандемии решил продавать товары через интернет. Заказали лендинг с незамысловатым дизайном, который человек собрал на коленке. С сайтом-то все хорошо — все работает. Но когда его запустили, оказалось, что у магазина нет CRM-системы.
В итоге вместо упрощения, работа менеджера сильно усложнилась: все заявки приходится фиксировать вручную, записывать на бумажке, собирать уведомления о новых заказах с почты. Ни о какой клиентской базе и управлении взаимоотношениями говорить не приходится.
Такая ситуация возникла, потому что пренебрегли исследованиями бизнес-процессов. На аналитику просто не было бюджета. Но сейчас уже все хорошо — подключили OkoCRM, все стабильно, работать стало проще.
4. Прототипирование
Прототипирование — преобразование целей, гипотез и результатов исследований в конкретные требования к продукту. Сначала мы описываем примерные требования к интерфейсу словами: требования к навигации, количество разделов, количество страниц, иконок, элементов и блоков, общий функционал, функционал фильтра и пр. Получается такая выжимка на много страниц. И только потом переходим к прорисовке эскиза с низкой глубиной проработки деталей.
Первые наброски — уже прототип. Их согласует каждый участник команды, вносит свои замечания и правки. Потом смотрит главный и высказывает свое впечатление. Этот процесс цикличен и повторяется с каждым новым этапом разработки макета.
5. Проработка деталей
Когда есть общее представление, макет начинает обрастать контентом и деталями. Чем выше степень детализации, тем проще и результативнее тестирование. На выходе должен быть продукт, который даст представление о работе будущего проекта. Вы сможете определить проблемные места, сможете продумать логику интерфейса и определить путь пользователя от первого касания до оформления заказа.
Итерация с проработкой деталей — финал прототипирования. Теперь можно работать над дизайном. Но это уже совсем другая история…
Немного про инструменты прототипирования
Макет на салфетке развивает вашу фантазию и мелкую моторику. Но его мало — нужен прототип сайта онлайн. Есть несколько приложений, которые сильно упростят вашу работу с макетом. Их подробный разбор мы сделаем в декабре в продолжение темы. А пока коротко 4 хороших инструмента:
Figma. Просто топчик, который используют примерно все. Отличное приложение для создания прототипов и дизайна интерфейсов. Можно работать совместно с командой и расшаривать проекты для демонстрации черновиков руководству или заказчику. Сами пользуемся и людям советуем.
Интерфейс Фигмы очень минималистичен — для профессионалов все просто и понятно.
Axure. Наверное, самая популярная в мире приложка для прототипирования и спецификации сайтов, приложений. Подойдет для глубокой проработки даже в сложных проектах. При этом достаточно простая — поковыряйтесь 10–15 минут в интерфейсе и уже сможете делать простенькие макеты.
В интерфейсе Акшур сможет разобраться даже неподготовленный пользователь. Попробуйте приложение, если Фигма окажется слишком сложной.
Sketch. Векторный графический для MacOS. Отлично подходит для проектирования интерфейсов веб-ресурсов, если вы работаете на «яблоке». Предлагает большие возможности для детализации, но не подойдет тем, кто сидит на Виндовс и Линуксе. Увы.
Скетч отлично справляется с интерфейсами, но только на яблочных устройствах. Сам интерфейс мало чем отличается от конкурентов. Все просто и понятно.
Adobe XD. Адобовский редактор для разработки пользовательских интерфейсов. Отлично подходит для создания интерактивных прототипов. Проблема в том, что он платный. Если вы только начинаете работать с макетами, начинайте с бесплатных инструментов.
Адобовский редактор радует функционалом, но не радует ценами.
А вообще, если вы ортодокс и не признаете все вот эти новомодные инструменты и штуки, используйте фотошоп. В связке с Marvel или Invision вы сможете собрать простенький, но вполне себе годный макет, который не будет стыдно показать людям и команде.