Инструменты и сервисы для создания набросков дизайна

С чего начинается разработка любого сайта? Правильно, с идеи, но, что потом? Потом у всех по-разному, кто-то сразу включает свой любимый HTML-редактор, кто-то ищет похожий шаблон и так далее. Подходы у каждого свои, но многие дизайнеры (реже разработчики) часто схожи в одном — они зачастую игнорируют стадию «наброска». В то время как это очень важная стадия — я уже подчеркивали этот момент в статье 6 основных этапов разработки сайта, повторюсь и снова.

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

Когда вы работаете с заказчиком, это существенно упростит вам сотрудничество. Если утвердить такой макет с клиентом, вероятность того что придется в корне переделывать базовый шаблон, существенно снижается. Даже если вы разрабатываете сайт для себя, набросок — это как хороший план, который всегда сэкономит много времени. К тому же вы сами может быть заказчиком. В этом случае с помощью «каркаса» будет намного проще объяснить исполнителю то чего вы хотите.

С помощью чего лучше делать наброски? Я люблю бумагу, поэтому для себя предпочитаю «набросать» что-то на бумаге. Это достаточно быстро и удобно, но есть один недостаток — в процессе креатива, нужно 200 раз что-то менять, перетасовывать, добавлять, а это означает что придется не единожды перерисовать все заново. Поэтому хорошим вариантом является использование специальных программ или веб-сервисов для создания «каркасов». Подобная публикаций идеально бы подошла для Вебдванольных заметок, но коль уж речь о дизайне сайтов, впору разместить ее здесь.

Большинство подобных программ/сервисов не бесплатны. В них нет ничего особенно, деньги берутся за то что это по сути профессиональные инструменты, то есть профессиональные разработчики могут с их помощью зарабатывать деньги. Нам такие не нужны, поэтому о них я думаю смысла рассказывать нет. Так же не буду рассказывать про всевозможные десктопные приложения, поэтому что они редко являются кроссплатформенными, то есть не универсальны целиком и полностью. Рассказу лучше про два отличных бесплатных веб-сервиса, которые специально для вас нашел.

Mockingbird

сервис создания наброса дизайна

Знакомство с подобными сервисами я начал с Mockingbird. Первое что меня порадовало — он бесплатный. Второе — без проблем работал на любых браузерах Mozilla/Google Chrome/Opera. Третье — в Mockingbird можно создать структуру сайта, что-то вроде сайтмепа. Принцип работы Mockingbird достаточно прост — вы перетаскиваете нужные элементы будущего сайта на страницу, тем самым формируя ее внешний вид. После этого можно показать заказчику или поделиться с друзьями одним кликом, выслав им ссылку.

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

Cacoo

Cacoo хорош по-своему. Я бы предпочел его Mockingbird когда речь идет о достаточно простых, единообразных (имеется в виду, с одинаковым макетированием для всех страниц) проектов, как например, блоги. Я вот тут даже немного вам «набросал» простой бложик для примера:

создание наброска дизайна

Почему Cacoo хорош для таких задач? Сервис содержит богатую библиотеку элементов, то есть, вернее даже множество библиотек (вы можете имитировать даже нарисованный от руки эскиз).  При чем этот сервис не ограничивается одними лишь сайтами, там можно рисовать всякие «сетевые диаграммы» или блок-схемы. Где были разработчики когда я учился в институте — обе задачи периодически возникали, приходилось использовать Word:) На сайте разработчиков Cacoo есть небольшое видео-превью:

Хотя, конечно, лучше потестировать сервис на практике. Мне кажется с Сасоо работать было более удобно и, пожалуй, приятнее чем с Mockingbird. Но, это уже на уровне личных предпочтений, оба сервиса достаточно хороши.

Как и с помощью чего делать наброски — решать вам. Я делаю так — если нужно для себя, рисую на бумаге, если для кого-то, воспользуюсь Сасоо или Mockingbird. И вам, если вы еще не взяли себе за правило создание набросков, очень советую попробовать. Пользу оцените достаточно быстро!

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

Понравился пост? Подпишись на обновления блога по Дизайн Мания RSSRSS, Дизайн Мания RSSEmail или твиттерtwitter!
А еще можно опубликовать ссылку на статью в своем блоге:
Опубликовать в twitter.com        

Комментариев - 12 для поста Инструменты и сервисы для создания набросков дизайна
  1. ]]> Креативщик ]]> (Август 29, 2010)

    Круто!!! Не знал что такое есть…

  2. ]]> Злата ]]> (Август 30, 2010)

    Спасибо за подробное описание. Я обычно пользуюсь Balsamiq Mockups. Ну и конечно великой полезной штукой — тетрадью в клеточку.

  3. ]]> Dem ]]> (Август 30, 2010)

    Тоже не подозревал, что такой софт существует… Пойду тестить, авось в работе и пригодится, рутину облегчит.
    Александр, а оффлайновый софт какой есть подобный?

  4. ]]> Tod ]]> (Август 31, 2010)

    Dem, насчет офлайнового софта не знаю.

  5. ]]> fontan ]]> (Сентябрь 2, 2010)

    офлайновый софт — это альбом, карандаши и фломастеры! ))))))))))))))))))))

  6. ]]> burt ]]> (Сентябрь 11, 2010)

    Оффлайновый софт — Axure

  7. ]]> Yurbasik ]]> (Сентябрь 14, 2010)

    Первый сервис понравился за свою простоту, второй за функциональность.
    сейчас иду первый тестить

  8. ]]> Дмитрий ]]> (Сентябрь 16, 2010)

    Что по оффлайновому софту, так респект и уважуха MS Visio. Там есть все, что нужно не только для компоновки блоков, а и для минимального дизайна… если руки есть и заточены в верную сторону.
    Есть, конечно, некоторые неудобства, но не критичные. ИМХО зе good

  9. ]]> Tod ]]> (Сентябрь 18, 2010)

    Да, Visio, знаем-с, проектировал на нем пару штук, хотя он больше не для дизайна использовался, вроде структуру локальной сети там рисовал, на Cacoo похож.

  10. ]]> Ralf ]]> (Июль 16, 2011)

    Отличный онлайн-сервис!!! а вот вопрос, из такого наброска можно сайт сделать? имеется ввиду нарезка изображения, или какие варианты есть?

  11. ]]> Tod ]]> (Июль 18, 2011)

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

  12. ]]> Aleksej ]]> (Январь 27, 2012)

    Не нормально, каркас то можно сделать, пригодится.

Оставить комментарий
для статьи Инструменты и сервисы для создания набросков дизайна