+7 495 589 08 53
советыв области web-разработки и рекламы

Этап создания прототипа при создании интернет-ресурса

Прототип сайта - это схематическое изображение блоков на страницах будущего сайта, без дизйна и сильной детализации. Это тот самый детальный план веб-страницы, который так необходим на начальном этапе проектирования.

Существует два типа прототипов интерактивный и статичный, при этом в российской практике именно wireframe (то есть статичная сетка) называется прототипом.

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

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

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

Итак, зачем digital-агентства создают прототип сайта, и почему клиенту стоит настаивать на его наличии?

  1. Прототип позволяет спроектировать информационные блоки и принцип размещения информации и уже на начальном этапе продумать взаимодействие посетителей на сайте.
  2. Есть отличная возможность, затрачивая минимум ресурсов быстро отработать несколько рабочих гипотез и при необходимости легоко внести правки в проект на начальном этапе.
  3. Создание прототипа, а в особенности интерактивного прототипа, позволит сократить число доработок, вызванных не совпадением ожиданий заказчика и готовым проектом, и соответственно оптимизировать сроки разработки.
  4. И заказчик и студия смогут чеко понять какая информация и в каком объеме должна быть на сайте, а дизайнер сможет рисовать отталкиваясь от контента.

Что стоит точно учитывать при согласовании прототипов:

  1. Все «негармоничные» места лучше исправлять сразу, а не откладывать на этап дизайна.
  2. Лучше сделать больше правок на этом этапе, чем менять логику работы страницы на этапе дизайна, и уж тем более программирования.
  3. Подумайте как будет себя вести сетка на разных разрешениях, в том числе и на мобильных устройствах, с «реагирующим» дизайном.

Библиотека плохих и хороших сеток вам в помощь.

http://wireframes.tumblr.com/

http://www.flickr.com/groups/ilovewireframes/

Мария Грох
Стратег агентства Bataline
Понравилась статья? Поделись с друзьями!
Денис Баталин
Креативный директор Bataline
Клиент желает заказать баннер 6×3 метра. Присылает почтой картинку. GIF 3×3 см и официальную заявку, типа...
«Прошу изготовить...» и .т.д. Подпись «Зам директора Иванов И.И.»
Пишу ему:
— Я не могу напечатать эту картинку. Нужно другое разрешение.
Через час получаю гневное письмо:
«Печать плаката разрешаю! Генеральный директор Бубин А.А.»
Антон Иванов
Ведущий дизайнер и проектировщик интерфейсов Bataline
Дизайнер: Мне нужен Ваш логотип и гайдлайны, чтобы я мог разработать шапку для Вашего сайта, согласно вашей корпоративной символике.
Клиент: Окей, я скину вам его по факсу!
Михаил Соколов
Bitrix-разработчик
Идут программист и веб-дизайнер по улице. Прямо перед носом у них падает кирпич. Затем еще один.
- Тетрис! - подумал программист.
- Выпадающая менюшка! - подумал веб-дизайнер.
Алексей Глубоков
Исполнительный директор
Ну нам кажется это нужно сделать в стиле грез, это же для мужчин в основном раздел. Заходишь на пляж, а там хаотично девушки красивые пролетают. Штук двадцать. Летают, летают… А потом хопа... и енот!
Антон Иванов
Ведущий дизайнер и проектировщик интерфейсов Bataline
Вот этот макет просто замечательный, и шрифт красивый, иллюстрация отлично вписалась. И красный цвет такой яркий! Но давайте уберем картинку, все буквы напишем одной высоты и черного цвета, а фон пускай будет белым
На шапке календаря нарисовать два логотипа и под ними с одной стороны мясорубку, в которую рука опускает пару купюр, а откуда должен вылезать фарш — там пачки купюр, сложенные друг на друга. Это и умно (потому что мясорубка — это изначально умное решение), и это просто, потому что вручную трудно, и это надежно, потому что ты точно знаешь, какой будет результат.
Михаил Парамонов
Эксперт Bataline по поисковому продвижению
Отправоено несколько скринов дизайна будущего сайта заказчику для утверждения. Заказчик присылает в ответ:
— Да. Мы разочарованы. Картинки не щёлкаются, затемнения картинок не работают, видео не играет и даже не щёлкаются ссылки!
Роман Баталин
Руководитель отдела продаж
— В шапке сайте должна быть красивая и большая иллюстрация на тему леса и охоты, потому что все охотники очень любят разглядывать картинки, а потом читать.
Мария Грох
Руководитель проекта ihunter
— Меня интересует разработка сайта-визитки. На нем должна быть возможность заказывать товары, оплачивать кредитной картой, регистрироваться, добавлять фотки и переписываться с друзьями.
Алексей Зуев
Специалист отдела социальных медиа Bataline
— А вам дизайнер, который логотип рисовал, кроме этой картинки точно ничего не оставлял? нам просто нужен вектор для работы, jpg не подходит.
— Не, ну там был файлик, но он не открывался и я его удалила...
Михаил Парамонов
Эксперт Bataline по поисковому продвижению
Отправить заявку Задать вопрос эксперту
5 причин заказывать разработку сайта в Bataline
Задай вопрос эксперту по разработке сайтов
Денис Баталин креативный директор
  • Вопрос от клиента:
    Как лучше всего контролировать сотрудников, работающих на фрилансе? Проблема, с которой мы часто сталкиваемся — ощущение, что сотрудники вместо того, чтобы работать, видимо развлекаются.
  • Вопрос от клиента.:
    Какие креативные инструменты вы используете в работе?
Поделитесь нами:
Или напишите нам: Написать

Напишите нам несколько слов о вашем проекте и оставьте, пожалуйста, контактную информацию. Мы свяжемся с вами немедленно!

Сообщение отправлено.