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


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

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

 

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


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

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


 

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

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

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

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

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

 

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

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

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

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

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

Вывод

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

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

Прочитать:

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

Обсуждение (26)
  1. Яна Ходкина:

    Привет, Юля! Отличный обзор!

    Я сама прототипы не создаю, но знаю, что эти сервисы очень полезны для фрилансеров. Благодаря таким сервисам очень удобно согласовывать макет лендинга с заказчиком...

    • :

      Яна, привет. Согласна, разговаривать с дизайнерами и верстальщиками легче. Для согласования проекта прототип и нужен). Кто сам делает одностраничные сайты, тому тоже пригодится, чтобы всё заранее продумать.

  2. Азик:

    Спасибо за информацию! В скором времени буду делать новый дизайн блога!) Так что прототипы создавать придется научиться!)

  3. Азик:

    Оля, у тебя в блоге одна фишка, которая меня раздражает немного)

    Это то, что имя, почта и сайт исчезают постоянно, и мне приходится их опять вводить) на всех блогах сохраняются, только у тебя нет)) Если решишь эту проблему, буду рад))

  4. Игорь Черноморец:

    Привет Олия! Интересный пост! До сих пор он бы мне не пригодился, но так как я тоже начинаю подумывать о новом дизайне своего блог, то закидываю этот пост в закладки! Спасибо!

  5. Юрий:

    Ольга, привет. Зарегистрируйся пожалуйста на форуме БКС. Там все участники общаются между собой. Я там периодически выкладываю свой код страницы БКС (с фотками).

  6. Мария+Зазвонова:

    Ого, для меня прототип это что-то новое...спасибо за интересную статью!

  7. Юрий Йосифович:

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

    • :

      А зачем русская локализация?

      • Юрий Йосифович:

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

        • :

          Видимо, надо снять видео по прототипу, потому что у меня трафик с поисковых систем идёт именно на прототип. Многие ищут видео, не разобраться с интерфейсом программы =)

          • Юрий Йосифович:

            Это сейчас очень актуальная тема, вы даже представить наверное не можете насколько. Я делал магазин по диплому. Так вот, прихожу к заказчику — говорю ему — «Что ты от меня хочешь? Как должен выглядеть магазин?» В итоге я пол дня с ним проговорил, и ничего толком не определил. Если был бы сервис русскоязычный — я бы ему ткнул пальцем — «Рисуй!» — и уже смело смог бы получить примерную картину того, что он хочет увидать. Собственно не у меня одного такие траблы — по этому люди ищут. Также по многим дисциплинам в ВУЗах сейчас нужно сдавать прототипы будущих приложений.

            • :

              Да, чертить с линеечкой прототип — это вчерашний день. Фрилансеры тоже требуют прототип и бриф, чтобы застраховать себя от таких заказчиков, как вы описали.Чего хочу не знаю, сделайте на своё усмотрение, а потом переделайте плиз! ещё 20 раз).

              • Юрий Йосифович:

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

  8. Олег:

    Спасибо, Ольга.

  9. Надежда+Давыдова:

    Да, полезно было почитать. Мне бы времени свободного хотя бы 48 часов в сутки, тогда бы может все успела :)

    • Олия:

      Надежда, привет. Да, время -это наш друг и наш враг. Я вот только с Питера приехала, не знаю за что хвататься :)

Поделитесь своим мнением

Навигация

Следующая статья:

Есть вопросы по теме статьи. Давайте обсудим их в комментариях.