Как сделать прототип сайта?
Рассказываем о ценности прототипов, а также покажем, как создать прототип сайта по шагам.
15 мин чтения
Что такое прототип сайта
Прототип сайта — это, простыми словами, чертеж или модель будущего сайта. Прототип помогает конкретизировать представления заказчика и определить требования к тому, каким должен быть результат.
Прототипы отличаются по уровню визуальной детализации и объему интерактивных элементов. Прототип может быть просто наброском (скетчем или эскизом) на листе бумаги или проработанной кликабельной многостраничной структурой.
Для чего нужен прототип сайта заказчику
Строить сайт — как строить дом. Представьте, что вы строитель домов на заказ. Вы берете мечты людей о доме и воплощаете их в реальность. Ваши клиенты уже видели дома, которые вы построили, и не могут дождаться, когда вы возьметесь за их собственный дом.
Вот вы уже добрались до обсуждения бюджета, уже становится ясно, что клиенты долго копили на свой дом. Вы чувствуете их волнение, когда они рассказывают обо всех деталях, которые им нужны в своем доме. И вот вы начинаете спрашивать их о цветах красок, светильниках, стиле картин… Но на старте это не главное!
Главное — ни в коем случае не выходить на стройплощадку, не заливать фундамент и не давать старт возведению стен, пока заказчик не утвердит чертежи и план дома — именно эти два фактора во многом определяют масштаб проекта (бюджет и сроки).
Начните с чертежей и плана дома (карта сайта и прототип), утвердите месторасположение, дизайн-проект, график работ и ресурсы и согласуйте с клиентом — таких же целей и помогает достичь прототип.
Чем прототип помогает в проектах:
Задачи, которые решает прототип сайта для команды разработчиков
Прототип помогает собрать максимальное количество пожеланий от клиента, зафиксировать требования к сайту, устранить противоречия в команде, спланировать работу и гарантировать исполнение обещаний.
Виды и примеры прототипов сайта — способ вырастить сайт постепенно
Перед тем, как открыть Figma или Photoshop, нам нужен одобренный клиентом план действий. Для этого как раз хороши прототипы с разной степенью проработки.
1. Эскиз на бумаге (скетч) — хорош для поиска конструкции
Эскиз — это схематичная разметка блоков, из которых состоит сайт. Создать такой прототип можно на бумаге ручкой/карандашом или в онлайн-инструменте (например, в Balsamiq). На данном этапе очень важно поработать руками.
«Работайте руками: сидение перед компьютером днями напролет убивает нас и нашу работу: нам необходимо чувствовать, каково это создавать что-то своими руками.»
«Отойдите от компьютера: компьютер может помочь в редактировании идей, но блокирует генерирование творческого потока — вы начинаете сами себя исправлять, еще толком не сформулировав идею.»
Чем хорош: такой уровень детализации хорош для поиска компоновок и согласования крупным планом разделов сайта (карта сайта). Он не сковывает лишними деталями и помогает разместить ценную информацию.
Прототип сайта — это, простыми словами, чертеж или модель будущего сайта. Прототип помогает конкретизировать представления заказчика и определить требования к тому, каким должен быть результат.
Прототипы отличаются по уровню визуальной детализации и объему интерактивных элементов. Прототип может быть просто наброском (скетчем или эскизом) на листе бумаги или проработанной кликабельной многостраничной структурой.
Для чего нужен прототип сайта заказчику
Строить сайт — как строить дом. Представьте, что вы строитель домов на заказ. Вы берете мечты людей о доме и воплощаете их в реальность. Ваши клиенты уже видели дома, которые вы построили, и не могут дождаться, когда вы возьметесь за их собственный дом.
Вот вы уже добрались до обсуждения бюджета, уже становится ясно, что клиенты долго копили на свой дом. Вы чувствуете их волнение, когда они рассказывают обо всех деталях, которые им нужны в своем доме. И вот вы начинаете спрашивать их о цветах красок, светильниках, стиле картин… Но на старте это не главное!
Главное — ни в коем случае не выходить на стройплощадку, не заливать фундамент и не давать старт возведению стен, пока заказчик не утвердит чертежи и план дома — именно эти два фактора во многом определяют масштаб проекта (бюджет и сроки).
Начните с чертежей и плана дома (карта сайта и прототип), утвердите месторасположение, дизайн-проект, график работ и ресурсы и согласуйте с клиентом — таких же целей и помогает достичь прототип.
Чем прототип помогает в проектах:
- увидеть, все ли учли в проекте, чтобы утвердить сроки и бюджет;
- скорректировать и уточнить пожелания к результату;
- спланировать дальнейшее развитие сайта.
Задачи, которые решает прототип сайта для команды разработчиков
Прототип помогает собрать максимальное количество пожеланий от клиента, зафиксировать требования к сайту, устранить противоречия в команде, спланировать работу и гарантировать исполнение обещаний.
Виды и примеры прототипов сайта — способ вырастить сайт постепенно
Перед тем, как открыть Figma или Photoshop, нам нужен одобренный клиентом план действий. Для этого как раз хороши прототипы с разной степенью проработки.
1. Эскиз на бумаге (скетч) — хорош для поиска конструкции
Эскиз — это схематичная разметка блоков, из которых состоит сайт. Создать такой прототип можно на бумаге ручкой/карандашом или в онлайн-инструменте (например, в Balsamiq). На данном этапе очень важно поработать руками.
«Работайте руками: сидение перед компьютером днями напролет убивает нас и нашу работу: нам необходимо чувствовать, каково это создавать что-то своими руками.»
«Отойдите от компьютера: компьютер может помочь в редактировании идей, но блокирует генерирование творческого потока — вы начинаете сами себя исправлять, еще толком не сформулировав идею.»
Чем хорош: такой уровень детализации хорош для поиска компоновок и согласования крупным планом разделов сайта (карта сайта). Он не сковывает лишними деталями и помогает разместить ценную информацию.
2. Статичный прототип с низкой детализацией (LoFi Wireframe) — превращаем идею в документ для согласования объема работ
Этот этап помогает проработать детали: отточить размеры объектов и пропорции и делать все заметки читабельными для всех участников и клиента.
Чем хорош: превращает свободный скетч в строгий документ с разметкой блоков, который каждый участник команды может изучить и предложить идеи по развитию. Поможет оценить объем работ и согласовать каркас сайта со всеми участниками.
Этот этап помогает проработать детали: отточить размеры объектов и пропорции и делать все заметки читабельными для всех участников и клиента.
Чем хорош: превращает свободный скетч в строгий документ с разметкой блоков, который каждый участник команды может изучить и предложить идеи по развитию. Поможет оценить объем работ и согласовать каркас сайта со всеми участниками.
3. Статичный прототип с высокой детализацией (HiFi) — фаза активной работы с содержанием (текст, иллюстрации, фото)
Функциональное рабочее решение: тексты настоящие, образы поддерживают историю, страницы можно изучать с ноутбука, планшета и телефона. Сайт, как презентация, сообщает ценную информацию аудитории. Работа над эмоцией с помощью цвета, шрифтов и графики вынесена на следующий этап.
Чем хорош: фокусирует на сообщениях и расстановке акцентов на существенных для истории моментах.
Бонус: помогает организовать командную работу копирайтера, иллюстратора, фотографа и дизайнера по всему фронту страниц многостраничного сайта. Особенно полезен, когда каждый из участников ведет несколько проектов одновременно.
Функциональное рабочее решение: тексты настоящие, образы поддерживают историю, страницы можно изучать с ноутбука, планшета и телефона. Сайт, как презентация, сообщает ценную информацию аудитории. Работа над эмоцией с помощью цвета, шрифтов и графики вынесена на следующий этап.
Чем хорош: фокусирует на сообщениях и расстановке акцентов на существенных для истории моментах.
Бонус: помогает организовать командную работу копирайтера, иллюстратора, фотографа и дизайнера по всему фронту страниц многостраничного сайта. Особенно полезен, когда каждый из участников ведет несколько проектов одновременно.
4. Интерактивный прототип с высокой детализацией (Interactive Hi-Fi)
Помогает проработать все поведенческие моменты на сайте: эффекты, анимации, поведение всех элементов при взаимодействии и на различных устройствах.
Чем хорош: когда ставки высоки, помогает
снять все вопросы перед запуском веб-разработки и упрощает тестирование и приемку сайта.
5. HTML-прототип в Webflow или Tilda
Альтернативный подход к созданию прототипов. HTML-прототипы ценят клиенты, которые нацелены на быстрый запуск, рост и доработку проекта прямо на живом. Такой прототип естестественным образом превращается в полноценный сайт.
Чем хорош: идеален для малого бизнеса и стартапов, позволяет запуститься с минимальными затратами и дорабатывать сайт на ходу.
Помогает проработать все поведенческие моменты на сайте: эффекты, анимации, поведение всех элементов при взаимодействии и на различных устройствах.
Чем хорош: когда ставки высоки, помогает
снять все вопросы перед запуском веб-разработки и упрощает тестирование и приемку сайта.
5. HTML-прототип в Webflow или Tilda
Альтернативный подход к созданию прототипов. HTML-прототипы ценят клиенты, которые нацелены на быстрый запуск, рост и доработку проекта прямо на живом. Такой прототип естестественным образом превращается в полноценный сайт.
Чем хорош: идеален для малого бизнеса и стартапов, позволяет запуститься с минимальными затратами и дорабатывать сайт на ходу.
Создание сайта — поэтапный процесс, основа которого не дизайн, а прототип. Созданием понятной структуры и удобного интерфейса обычно занимается веб-дизайнер. Но если вы хотите сделать прототип самостоятельно, я расскажу вам основные правила.
Чтобы понять, что такое прототип, следует разобраться,
кто такой веб-дизайнер
Веб-дизайнер — это специалист, который проектирует логическую структуру веб-страниц, продумывает наиболее удобные решения подачи информации, занимается художественным оформлением проекта. Но откуда ему взять эту информацию? Он не копирайтер, который пишет профессиональные продающие тексты. Он не владелец фирмы, который обладает всеми знаниями о проекте, его сильных и слабых сторонах.
Задумайтесь, может ли дизайнер создать качественный прототип, ничего не зная о вашем бизнесе? Заказчику следует понимать, что прототип делается дизайнером только на основе копирайта — текстов для каждой страницы сайта.
Также важное условие — понимание дизайнером вашей сферы бизнеса. Даже неопытный дизайнер сможет сделать прототип для сайта салона красоты или для интернет-магазина, продающего канцелярские товары. Но если у вас узкая и сложная тематика, вам следует обратиться в фирму, где штат сотрудников, состоящих из маркетолога, копирайтера и дизайнера вместе будут работать над вашей задачей.
Итак, вы решили сами сделать прототип. Вот несколько советов вам в помощь:
Изучите конкурентов
Посмотрите сайты конкурентов не с точки зрения дизайна, а наполнения: как продают товар, как рассказывают о себе. Даже если сайт выглядит ужасно с точки зрения дизайна, но имеет высокую конверсию, это главный пример для изучения. Ваша задача — понять, почему имея непрезентабельный внешний вид, проект находится в топ 10 сайтов этой тематики. Соберите несколько таких сайтов. Вы можете придумать что-то подобное? Как вы заинтересуете своего клиента? На все эти вопросы вы должны найти ответы.
Придумайте идею
Подумайте, в чем задача вашего будущего сайта? Какое предложение выделит вас из конкурентов? Какие вопросы чаще всего задают ваши клиенты?
Например, вы продаете апельсины. Вам нужно рассказать, почему именно ваши апельсины лучшие, предоставить доказательства в виде сертификатов, фотографий и видео, ссылки на отзывы и т.д. Вы можете предложить покупать у вас апельсины по акции, когда каждый 10-й апельсин будет бесплатным. А можете наоборот увеличить цену, подчеркивая премиальность товара и ориентируясь на более обеспеченный сегмент покупателей.
Например, вы продаете апельсины. Вам нужно рассказать, почему именно ваши апельсины лучшие, предоставить доказательства в виде сертификатов, фотографий и видео, ссылки на отзывы и т.д. Вы можете предложить покупать у вас апельсины по акции, когда каждый 10-й апельсин будет бесплатным. А можете наоборот увеличить цену, подчеркивая премиальность товара и ориентируясь на более обеспеченный сегмент покупателей.
Сделайте план
Откройте обычной текстовый редактор и запишите ваши мысли. Постарайтесь их структурировать. Например описание товара, откуда вы экспортируете апельсины, ваш опыт в этой сфере вы вносите в раздел "о нас", а низкую стоимость и скидки на товар — в блок "преимущества". Создайте четкую структуру, добавьте в нее визуальный контент, если он имеется. В нашем примере это фотографии апельсинов, сертификаты, подтверждающие качество товара.
Уберите лишнее
Зная большинство своих заказчиков, я могу выделить ошибку, которая преследует почти каждого — огромные портянки текстов, нескончаемые галереи картинок, подобранные по принципу "чем больше, тем лучше". Много — не всегда хорошо. Часто ванильные описания товара кажутся неправдоподобными, а липовые преимущества "мы профессионалы" или "качественные материалы" просто пропустят мимо.
Напишите тексты
Вы сделали план сайта. Теперь вы четко знаете последовательность блоков. Осталось их наполнить. Но не перестарайтесь! Краткость — сестра таланта. Это правило применимо и к созданию прототипа. Текст должен быть кратким, но емким. Он должен быть структурирован. Нужно стараться минимально использовать сплошной текст, но выделять ключевые смыслы, использовать нумерацию, пункты, колонки.
Мы никогда не требуем от заказчика рисовать прототип. Нам необходим только структурированный текст. Иногда нам предоставляют уже спроектированные прототипы, и это ускоряет процесс разработки. Однако, если вы не обладаете хотя бы начальными знаниями UX-дизайна, скорее всего ваш прототип нам не пригодится и мы вам предложим свой вариант.
Итак, в каком же виде следует передавать прототип дизайнеру:
Итак, в каком же виде следует передавать прототип дизайнеру:
Весь контент в 1 месте
Иногда нам дают информацию в виде ссылок на разные сайты, документы: "Вот это возьмите оттуда, а текст отсюда, а картинки скачайте с той ссылки. И вот еще 5 вордовских файлов, из первого возьмите 5 предложение снизу, а из остальных 10 первых абзацев". Такого быть не должно. Весь контент нужно собрать в 1 документ, все картинки разделить по папкам и собрать в 1 архив.
Иногда нам дают информацию в виде ссылок на разные сайты, документы: "Вот это возьмите оттуда, а текст отсюда, а картинки скачайте с той ссылки. И вот еще 5 вордовских файлов, из первого возьмите 5 предложение снизу, а из остальных 10 первых абзацев". Такого быть не должно. Весь контент нужно собрать в 1 документ, все картинки разделить по папкам и собрать в 1 архив.
Сайт-пример дизайна
Приведите в пример любой сайт, который вам нравится. Стиль и дизайн этого сайта будут взяты за основу, послужат ориентиром для дизайнера. Референс, это важная часть ТЗ, поэтому убедитесь, что он вас полностью устраивает. А если есть замечания, дополните ТЗ: "референс www.site.ru, но мне не нравится шрифт, подберите более округлый и крупный".
Приведите в пример любой сайт, который вам нравится. Стиль и дизайн этого сайта будут взяты за основу, послужат ориентиром для дизайнера. Референс, это важная часть ТЗ, поэтому убедитесь, что он вас полностью устраивает. А если есть замечания, дополните ТЗ: "референс www.site.ru, но мне не нравится шрифт, подберите более округлый и крупный".
Выделите заголовки, пункты, акценты
Информация должна быть разделена на смысловые блоки. Сплошной и длинный текст сложно читать.
Информация должна быть разделена на смысловые блоки. Сплошной и длинный текст сложно читать.
Дополнительные пожелания
Напишите пожелания по картинкам, блокам, кнопкам, формам, всплывающим окнам и другим элементам.
Напишите пожелания по картинкам, блокам, кнопкам, формам, всплывающим окнам и другим элементам.
Вот пример правильного прототипа:
1 блок
Заголовок: "Свежие фрукты с доставкой на дом"
Подзаголовок: "Свежие апельсины, сочные яблоки, мягкие зрелые сливы и множество других фруктов по низким ценам."
Кнопка "Заказать" (переход на всплывающее окно с формами имени, телефона и кнопкой "отправить". Заголовок: "Оставьте свой телефон и мы вам перезвоним")
Этот блок должен быть ярким, мне бы хотелось видеть фотографию фруктов на заднем фоне.
Подзаголовок: "Свежие апельсины, сочные яблоки, мягкие зрелые сливы и множество других фруктов по низким ценам."
Кнопка "Заказать" (переход на всплывающее окно с формами имени, телефона и кнопкой "отправить". Заголовок: "Оставьте свой телефон и мы вам перезвоним")
Этот блок должен быть ярким, мне бы хотелось видеть фотографию фруктов на заднем фоне.
2 блок
Заголовок: "Почему заказывать фрукты следует у нас:"
Следующий текст оформите на свой вкус:
- Доставка в Москве и Московской области
- Собственный склад в пределах города
- Доставка до квартиры в течение 1 суток
Кнопка "Узнать больше" (будет вести на блок ниже, под названием "Мы гарантируем качество нашего товара")
Следующий текст оформите на свой вкус:
- Доставка в Москве и Московской области
- Собственный склад в пределах города
- Доставка до квартиры в течение 1 суток
Кнопка "Узнать больше" (будет вести на блок ниже, под названием "Мы гарантируем качество нашего товара")
3 блок
Заголовок: "Мы гарантируем качество нашего товара"
Тут следует разместить фотографии наших сертификатов, которые находятся по ссылке "ссылка"
Тут следует разместить фотографии наших сертификатов, которые находятся по ссылке "ссылка"
4 блок
Заголовок: "Контакты"
Телефон: +7 999 999 99 99
E-mail: mail@mail.ru
Далее нужно сделать форму обратной связи
Заголовок: "Оставьте свой телефон и мы вам перезвоним"
Поля для ввода имени и телефона и кнопка "отправить"
Телефон: +7 999 999 99 99
E-mail: mail@mail.ru
Далее нужно сделать форму обратной связи
Заголовок: "Оставьте свой телефон и мы вам перезвоним"
Поля для ввода имени и телефона и кнопка "отправить"
Если у вас многостраничный сайт, следует подготовить такой
прототип для каждой страницы.
Если у вас нет прототипа, вам необходимо подготовить копирайт - текстовое наполнение каждой страницы вашего будущего сайта.
Ориентируясь на него, мы можем сами сделать вам прототип.
прототип для каждой страницы.
Если у вас нет прототипа, вам необходимо подготовить копирайт - текстовое наполнение каждой страницы вашего будущего сайта.
Ориентируясь на него, мы можем сами сделать вам прототип.
Другие статьи Nice Studio
Стили в веб дизайне
Эта статья для удобства взаимодействия заказчика и дизайнера. Для быстрой и правильной постановки задачи.
Зачем он нужен и как его сделать. Создание прототипа сайта сложный, но обязательный этап.