В прошлых статьях мы только готовились к созданию сайта: анализировали конкурентов, составляли семантическое ядро и многое другое. Теперь переходим к непосредственной разработке, которая начинается с подготовки прототипа.
Что такое что такое прототип сайта
Прототип - это макеты страниц будущего сайта в виде блоков, с их описанием и расположением. Правильное распределение блоков улучшает его юзабилити. С помощью таких элементов вы можете направлять движение пользователей, чтобы они посещали те страницы, которые нужны вам, например коммерческие/продающие.
Как правило, прототип составляется для основных страниц сайта с разным расположением элементов. К таким элементам относятся: меню, текстовые блоки, логотип, картинки, формы заказа и др.
Прототип сайта пример:
Зачем нужен прототип сайта
Прототип нужен для быстрого согласования заказчика и исполнителя. С помощью прототипа страниц сайта можно определить его удобство для пользователей, расположение информации и внешний вид страниц (но не является показателем красоты).
В конечном итоге, разработанный прототип дизайна сайта даст вам гарантию, что вы получите то, что хотите.
Проектирование страниц сайта
Перед тем как сделать прототип сайта, нужно продумать его функционал, структуру и навигацию. Это нужно для того, чтобы знать, куда в итоге привести/подтолкнуть посетителя. Подробнее об этом можете прочитать по указанным ссылкам.
Как создать прототип сайта:
- Изучите удобство сайтов со схожей тематикой.
- Представьте себе сайт с точки зрения обычного пользователя: что бы вы хотели увидеть в первую очередь?
- Определите расположение логотипа и меню своего сайта.
- Укажите расположение графических элементов. Картинки привлекают внимание в первую очередь, но они не должны отвлекать и перебивать важный текст.
- Особое внимание надо уделить расположению элементов навигации. Постарайтесь расставить блоки так, чтобы важная информация всегда была "под рукой". Например, не надо размещать вверху блок "популярные материалы". Сначала посетитель хочет посмотреть картинку, потом краткое описание, и если его это заинтересует - он захочет прочитать подробности. Только после прочтения информации ради которой он пришёл на эту страничку, можно предложить почитать и другие популярные материалы. Всему своё время: всё на нужном месте. Это называется проектирование юзабилити сайта.
- Продумайте постоянные/не меняющиеся элементы. Например, если это прототип странички товара, то на нём обязательно должно быть указано расположение картинок, цен, кратких характеристик и остальных показателей, которые есть у всех товаров. Если какого-то элемента может не быть, то это считается дополнительным элементом. Прототип страницы должен предусматривать вид сайта и с этим элементом и без него.
- Сделайте описание всех элементов. Некоторые элементы сайта требуют развёрнутое пояснение. Чаще всего это касается интерактивных элементов, с которыми может взаимодействовать посетитель. Опишите, что произойдёт при кликах по кнопкам, картинкам и другим элементам. Например, откроется ссылка в новой вкладке или обычный переход на другую страницу, появится всплывающее окно или откроется дополнительный скрытый текст. Старайтесь описать всё как можно подробнее. Даже если вы сейчас всё отчётливо понимаете, то потом можете забыть про это.
Где сделать прототип сайта
Конечно, для того чтобы нарисовать прототип сайта можно вооружиться листочком и ручкой, а можно использовать один из бесплатных сервисов для создания прототипа сайта из списка, который мы подготовили для вас:
- Cacoo - бесплатно можно сделать прототип на 6 страниц.
- Gliffy - 5 страниц в бесплатном аккаунте.
- MockFlow - есть бесплатный вариант, с урезанным функционалом.
- Pencil - дополнение Firefox, открытый проект.
- Serena Prototype Composer - бесплатная программа.
Если вы знаете бесплатные программы/сервисы, которые мы несправедливо обошли стороной, напишите об этом в комментариях.
Заключение
Теперь вы знаете обо всех нюансах, которые нужно учесть при создании прототипа сайта, с чего начать и какие использовать для этого инструменты. Имея готовый прототип, вам будет намного легче взаимодействовать с исполнителем, и понимать, что в итоге у вас получится.
В случае, если вы не хотите заниматься этим самостоятельно, вы всегда можете обратиться к нам. Наши программисты проработают прототип страничек сайта, который совместит ваши требования и наши знания. Всего 3000 тенге за прототип одной страницы.
