Как нарисовать прототип сайта онлайн. Программа для рисования структуры сайта


Как нарисовать прототип сайта онлайн

1.09.2014 // Ольга Бурцева   

Добро пожаловать на блог «Онлайн-бизнес». Давайте поговорим сегодня на тему, как создать прототип сайта. Как-нарисовать-прототип-сайта-онлайн-6 Как известно, прототипированием сайтов занимаются веб-разработчики, дизайнеры, но прототипы одностраничных сайтов делают и блогеры. Например, создавая дизайн-набросок сайта-визитки или лендинга. План статьи.

  1. Что такое прототип.
  2. Зачем нужен прототип сайта?
  3. Сервисы для отрисовки прототипа сайта.

 

О понятии прототип

 Что такое прототип? Прототип — это чертёж или эскиз информационной и функциональной структуры будущего сайта или одностраничника. Проще говоря — это чёрно-белый рисунок с самыми важными элементами (блоками) дизайна сайта и подробной детализацией (по желанию). Давайте посмотрим пример прототипа. Как-нарисовать-прототип-сайта-онлайн 

Зачем нужен прототип?

 

  • 1. Создание прототипа позволит вам заранее продумать все будущие детали вашего успешного проекта и получить более чёткую картину по расположению (структуре) наиболее важных элементов.
  •  

  • Общие ключевые моменты прототипа: Заголовок, логотип, УТП, описание, меню, контакты (обратная связь), расположение изображений, видео, кнопки, система навигации, призывы, отзывы, комментарии, выгоды, общий информационный текст.
  •  

  • 2. Прототип нужен при подготовке ТЗ (технического задания) для фрилансера по созданию сайта. Фрилансер или веб-дизайнер будет иметь более чёткое задание с вашими пожеланиями. Что, в свою очередь, ускорит время разработки и утверждения дизайна.
  •  

  • 3. Отрисовка прототипа на раннем этапе позволит вам сэкономить время, деньги и нервы, так как легко вносить изменения и видеть примерный результат дизайна сайта.
  •  

  • 4. Люди легче понимают картинки, поэтому прототип необходим для упорядочивания мыслительного процесса.
  •  

  • 5. И самое главное. Лёгкость общения на этапе создания дизайна сайта, между заказчиками и исполнителями.

 

Как нарисовать прототип сайта онлайн или онлайн-сервисы для создания прототипа

 1. Moqups  — очень понятный интерфейс онлайн-редактора, много возможностей для отрисовки качественного прототипа. Как-нарисовать-прототип-сайта-онлайн 

2. MockingbirdЭтот онлайн-редактор мне понравился очень! Создавайте, экспериментируйте, просматривайте и сохраняйте свои прототипы. Как-нарисовать-прототип-сайта-онлайн 

Вот что у меня получилось, пример небольшой части продающего одностраничного сайта. Как-нарисовать-прототип-сайта-онлайн 

3. Pidoco - создавайте прототипы в онлайн-режиме. Как-нарисовать-прототип-сайта-онлайн 

Вывод

Онлайн-редакторов для создания прототипов, конечно, сегодня огромное количество, я познакомила вас только с тремя, которые мне больше понравились.Создание прототипа — это творческая работа. Поэтому избегайте шаблонных структур, изучайте дизайны конкурентов, но не делайте однотипные, а придумывайте свои варианты под конкретную аудиторию, товар или услугу, чтобы быть на шаг впереди. Если вы делаете прототип продающего лендинга, читайте статью по ссылке.

 P.S. Сегодня День знаний 1 сентября! Поздравляю Всех, ведь каждый из нас учился в школе. Современная система образования в школах далека от совершенства, но нельзя отрицать тот факт, что школа все-таки прививает очень ценную привычку — учиться и познавать новое. С уважением, Ольга. 

Прочитать:

 Оставьте лайк на удачу.

burzevao.ru

Создание прототипа сайта: разработка и примеры

14 мая 2015      Маркетинг

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

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

Зачем нужен прототип?

Одно дело – описать будущий сайт на словах. Совсем другое – увидеть его. А чтобы увидеть, надо нарисовать, то есть разработать прототип.

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

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

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

Так прототипы позволят вам сократить сроки работ по сайту и обезопасить себя от лишних переделок.

Какие бывают прототипы?

Различают прототипы статические и динамические.

Статический прототип – это просто картинка, на которой видно, где и что на странице будущего сайта расположено. Могут быть пояснения: как работает такая-то кнопка, что будет после нажатия на такую-то ссылку и так далее.

Например, так может выглядеть очень простой статический прототип главной страницы интернет-магазина строительных материалов:

А такую картинку мы рисовали перед тем, как начать разрабатывать сайт azconsult.ru. Правда, потом выбрали другой шаблон, поэтому кое-какой функционал поменялся:)

 

Динамический прототип позволяет понять, как будет работать сайт. Здесь можно нажимать на кнопки, переходить по ссылкам и таким образом оценивать взаимодействие пользователя с сайтом.

 

Как сделать прототип?

Статические прототипы можно нарисовать в любой графической программе (Illustrator, Corel Drow, или даже в обычном Paint). Некоторые рисуют в Word или Excel, хотя эти программы дают меньше возможностей для детализации.

Динамические прототипы иногда делают в html. Я слышала, что ещё используют Power Point, но никогда не видела, как это выглядит.

И те и другие прототипы можно создавать и с помощью специальных онлайн-сервисов или программ, например:  https://gomockingbird.com,  http://www.protoshare.com,  http://www.mockflow.com,  http://creately.com. Чуть подробнее я рассказывала о них в статье о сервисах для работы с изображениями.

Наш пример

Как-то раз взялись мы переделывать каталог. В старой его версии тренинги располагались в две колонки с коротким описанием и ссылками на лендинги, а вебинары — в одну колонку и сразу с полной информацией. Вебинаров становилось всё больше, лента каталога становилась всё длиннее, листать её — всё неудобнее. Мы подумали, а нельзя ли сделать покомпактнее?

В старом варианте каталога часть с тренингами выглядела так:

 

Мы попробовали расположить их плотнее:

 

Сразу стало понятно, что так расположить тренинги не получится — некуда поставить описания и кнопки. Если бы мы все эти изменения делали прямо на сайте, потратили бы гораздо больше времени. И ещё нам пришлось бы заплатить исполнителю за каждое «подвинь правее» и «а теперь левее»:).

Вебинары располагались у нас в одну колонку:

 

Как видите, места они занимают много. Поскольку мы были ограничены во времени и технических средствах, глобально переделывать каталог не могли, правки нужны были простые и быстрые, «косметические». Попробовали расположить вебинары в две колонки, а описание вынести на всплывающее окно.

 

Сразу стало ясно, что страница становится пёстрой из-за кнопок и ссылок, для пользователя получается путаница. А ссылку «Узнать больше» могут вообще не заметить. При этом для покупки понадобится закрыть всплывающее окно, а потом уже нажать кнопку «купить», и это тоже не очень-то удобно. Была и другая идея — «Узнать больше» превратить в кнопку, а прочие кнопки перенести на всплывающее окно.

 

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

Как это работает сейчас, можно посмотреть в нашем каталоге.

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

В заключение скажу, что крупные веб-студии часто предлагают разработку прототипа сайта как дополнительную услугу перед созданием самого интернет-проекта, иногда за деньги, иногда в общем пакете. Но фрилансеры и небольшие компании-разработчики это делают редко. Поэтому, если сейчас вы собираетесь заказать сайт или затеяли его капитальный ремонт, не поленитесь — нарисуйте прототип сами. Это точно вам по силам!

 

***

Мария Губина

 

 

Мария Губина, автор проекта «Маркетинг с азов», тренер, бизнес-консультант

 

 

Статьи по теме:

www.azconsult.ru

Онлайн приложения для создания макета или прототипа сайта | Ресурсы

19 августа 2010

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

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

Создание макета или прототипа сайта

А необходимо ли создание макета сайта?

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

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

В этой статье (первой в обзоре) мы подготовили большое количество всевозможных онлайн инструментов для создания макета. Несмотря на то, что все эти инструменты позволяют делать качественные и простые для понимания макеты, порой простой карандаш или ручка могут быть не менее удобными средствами при проектировании прототипа. Именно по-этому многие разработчики сочетают обе возможности, воздавая макет на бумаге, и впоследствии перенося его на экран с частичными доработками. Главный плюс такого варианта в том, что с электронным прототипом будет проще работать, он позволяет редактировать и дорабатывать детали наиболее оперативно. Ведь внести небольшое изменение и распечатать макет, гораздо удобнее, чем полностью перерисовывать его заново вручную.

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

Во второй части мы подробно расскажем о программах для разработки прототипа. После прочтения наших обзоров у вас будет огромных выбор более чем из 15 приложений.

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

Pencil ProjectPencil Project скорее большой плагин для FireFox, нежели онлайн сервис или веб-приложение. После его установки создавать схемы, макеты и пользовательские интерфейсы можно будет прямо в браузере, а благодаря простому интерфейсу и большому количеству всевозможных инструментов и функций (многостраничные документы, богатая поддержка текста, экспорт html, png, файлов OpenOffice и многое другое) разработка будет упрошена до минимума.

ProtoSharePhotoshare предоставляет собой простой инструмент для создания каркасов сайта. С помощью этого сервиса вы сможете создать прототип любой сложности т.к. сервис обладает всеми необходимыми инструментами. Вид интерфейса и его удобство настолько тонки, что окно для работы никогда не будет казаться переполненным и даст достаточно места для работы.

Hot GlooОчень удобное и популярное средство для разработки макетов. Яркий и простой интерфейс с гигантским набором инструментов, функции и всевозможные средства для создания, редактирования и калибровки прототипа сайта. Различные привязки, функции перетаскивания элементов, обширное количество свойств у объектов … перечислять полезные функции можно бесконечно. Нельзя не отметить возможность поделиться наработкой с коллегами и простой функцией передачи файлов при работе в команде. Но, при большом количестве плюсов всегда есть и минус. Для использования сервиса на полную мощность придется заплатить от 7 до 48 долларов в месяц, в зависимости от выбранного тарифа.

MockFlowMockFlow — онлайн и оффлайн сервис с обширной библиотекой шаблонов и различных элементов, количество которых позволяет свободно управлять разработкой и тем самым делать оригинальные и технически сложные прототипы. Приложение распространяется как в свободном доступе, так и в платном варианте. При оплате безлимитного пакета (цена составляет 4.91$ в месяц) вы получаете доступ ко всем макетам, дисковую квоту в 500МБ для хранения информации, экспорт в PDF/PPT, командный чат и много других разнообразных функций.

MockFlowЕще одно очень популярное и невероятно функционально приложение. Главное отличие от «собратьев» в том, что Balsamiq — Adobe Air приложение, поэтому оно работает как на Windows, так и Mac или Linux. Более 75 встроенных компонентов для пользовательского интерфейса, более 185 значков и куча генерируемых компонентов. Экспорт готового прототипа в формат PNG или PDF и, конечно же, удобный и быстро осваиваемый интерфейс, который позволит сосредоточиться именно на разработке.

MockFlowОнлайн приложение для создания как прототипов, так и блок-схем и диаграмм. Частично переведено на русский язык и имеет бесплатную версию с ограниченным функционалом (ограничение снимается путем регистрации). Из всех приложений, рассмотренных в статье, у Creately самый простой интерфейс и наименьший выбор компонентов, тем не менее для создание простых макетов или же блок схем лучшего сервиса и не придумать.

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

womtec.ru


Смотрите также