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

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

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

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

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

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

Mockingbird

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

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

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

Cacoo

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

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

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

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

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

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

12 комментариев к статье “Инструменты и сервисы для создания набросков дизайна”
  1. Креативщик

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

  2. Злата

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

  3. Dem

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

  4. Tod

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

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

  6. burt

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

  7. Yurbasik

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

  8. Дмитрий

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

  9. Tod

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

  10. Ralf

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

  11. Tod

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

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

Оставить комментарий

Внимание! Если вы комментируете впервые, текст будет отправлен на модерацию.
Ваш e-mail не публикуется. Обязательные поля помечены *