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

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

В любой сфере человеческой деятельности есть свои секреты, а значит и потенциал для обмана потребителя. Как показывает опыт, никакие запретительные меры, сертификация и прочие методы законодательного регулирования не спасают потребителя от некачественных товаров и услуг. А спасает только собственная информированность. Только когда сам потребитель понимает, что именно он должен получить за свои деньги, он будет защищен от обмана, а рынок в свою очередь будет подстраиваться под новый уровень запросов. Мы же не купим гнилое яблоко, а продавцы его не предложат. Если нам скажут, что такие яблоки в тренде, мы посмеемся, а если незаметно подсунут испорченное, больше к этому продавцу не придём. Так и в сфере айдентики и графического дизайна. Чтобы заказать логотип и не разочароваться в результате, нужно понимать, что мы покупаем. Знать, что есть критерии качества и какие способы обмана существуют. Давайте попробуем рассмотреть «подводные камни», которые могут вас поджидать при заказе логотипа.

Продажа стоковой картинки за цену нормального логотипа

Логотип заказывают для того, чтобы компания/бренд стали узнаваемыми. Никому не захочется, чтобы его путали с конкурентами. Однако есть исполнители (не поворачивается язык назвать их дизайнерами), которые предлагают заказчикам изображения со стоков под видом оригинальной разработки. Если вам честно сказали, что это изображение взято в сети, лицензия на его использование выкуплена, тогда всё в порядке. Такая работа будет стоить дешевле, потому что фактически не является разработкой логотипа. Такую услугу можно оценить, как, например, совмещение текста с изображением, подбор изображения и т. д. Цена на неё не должна превышать 300-500 руб. Дальше решать вам: сэкономить деньги и принять риск встретить кого-то с таким же лого или всё-таки настаивать на оригинальной разработке, но потратить чуть больше.

Гораздо хуже, когда исполнитель выдает стоковую картинку за свою.

Недавно в соцсетях появился пост: автор просил помочь выбрать из двух вариантов логотипа лучший. Внимание участников группы, в которой появился пост, привлекло то, что оба варианта были весьма непривлекательны. Оказалось, что так называемые логотипы были сделаны так: к популярной стоковой картинке был добавлен текст с названием бренда и всё. Шрифт тоже из готовых, довольно узнаваемый. Такой логотип заказчик мог сделать себе сам бесплатно. Нужно было скачать картинку и добавить к ней текст в любом графическом редакторе. Деньги за это исполнитель запросил приличные, такие суммы берут за оригинальные разработки, которые делают на основе анализа стилей конкурентов и предпочтений ЦА.

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

Как проверить: на все 100% уберечь себя от ошибки трудно. Но можно постараться. Рекомендую всем делать такую проверку перед тем, как подписать акт сдачи-приёмки логотипа.

1. Проверьте наличие похожих вариантов через «Поиск по картинке» Google и Яндекс. Лучше и тем, и другим: так вероятность найти похожую картинку возрастает, поскольку алгоритмы поисковиков немного отличаются.

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

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

1. Если вы знаете, что были использованы стоковые изображения и готовые шрифты, требуйте у дизайнера передачу лицензии (если она у него выкуплена) или позаботьтесь о приобретении лицензии сами.

Перепродажа логотипа, который уже был использован

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

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

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

Изображение, собранное из частей хорошо узнаваемых логотипов

Некоторые исполнители слишком ленивы, чтобы придумывать что-то своё. Но и совсем уж откровенно торговать стоковыми картинками не решаются. В дело может пойти такой приём: логотип соберут из кусочков других логотипов, знаков и картинок. Конечно, в наше время трудно быть на 100% оригинальным, дизайн складывается из взаимного и многократного цитирования. Но есть очень серьёзные различия между цитированием и плагиатом.

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

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

Как защититься: см. пункты выше.

Логотип в ненадлежащем виде/формате

Многие заказчики сталкиваются с такой проблемой: исполнитель передает логотип не в должном виде. Здесь проще рассказать, как должно быть, и вы сами поймёте, как не надо.

Когда работа над логотипом закончена, макет утверждён и внесены все правки и доработки, исполнитель должен передать вам файлы. Эти файлы должны содержать логотип в формате векторной графики (.cdr или.ai). Если есть файл в одном из этих форматов, то вы сможете масштабировать логотип как угодно без потери качества. А также у вас не будет проблем воспроизвести логотип разными видами нанесения (полиграфия, шелкография, термотрансфер и т. д.) и на разных носителях.

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

Дизайнер должен указать коды цветов, использованных в логотипе, в системах CMYK и RGB. Файл нужно правильным образом подготовить. В нём не должно быть различных эффектов, которые не поддерживаются другими программами; необходимо, чтобы контуры были замкнутыми, а невидимые и непечатные объекты отсутствовали.

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

Если у вас есть программы Corel Draw или Adobe Illustrator, то обязательно откройте файл в них и проверьте. Выделите контуры и посмотрите нет ли невидимых объектов, точек, незамкнутых контуров. Если найдёте, отправляйте на доработку.

Невидимые точки

Красным показаны области невидимых объектов

Логотип, который трудно/дорого воспроизвести

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

Вряд ли вы сами станете задумываться о таких нюансах, как воспроизведение логотипа различными способами нанесения. А вот грамотный дизайнер сам постарается уберечь вас от ошибки. Самое первое: посмотрите, как лого выглядит в чёрно-белом варианте. Кстати, это также хороший способ проверить качество. Цвет очень маскирует форму, а чёрный, напротив, выявляет все скрытые дефекты. Если лого хорошо смотрится в чёрном цвете - надо брать.

Посмотрите, как логотип выглядит в цвете и в чёрно-белом варианте

В логотипах не рекомендуется использовать много цветов. Оптимально - от двух до пяти. Определённая цветовая гамма создает стиль, а значит узнаваемость. Стоит заранее подумать, как логотип будет воспроизводится разными способами нанесения.

Реальный пример из практики.

Заказчик: спортивная организация.

Заказ: логотип для международных соревнований.

Исполнитель: дизайнер-фрилансер.

Для любых соревнований нужны форма и промо-футболки. Нанесение на текстиль - метод шелкографии. Стоимость печати вычисляется исходя из количества цветов: чем больше цветов, тем дороже. Дизайнер предложил вариант, где использовались 15 цветов. То есть он создал для заказчика существенную финансовую проблему. К счастью, заказчик уже имел опыт и заказал доработку логотипа у другого дизайнера. В итоге количество цветов удалось сократить до пяти без какой-либо потери художественной ценности.

Также нужно быть осторожными с разного рода градиентам. Градиенты сложны при воспроизведении на бумаге, и на экране. Если вы не уверены, что способны добиться высочайшего качества воспроизведения, лучше отказаться от градиента и заменить его каким-нибудь другим выразительным приёмом.

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

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

Резюме

Что делать, чтобы получить хороший результат при заказе логотипа?

1. Думаем, просчитываем и анализируем, какими способами будет воспроизводиться логотип.
2. Заключаем договор.
3. Смотрим макет в чёрно-белом варианте.
4. Просим показать эскизы.
5. Проверяем картинку поиском в Google и Яндекс.
6. Спрашиваем совета на дизайнерских форумах и группах в соцсетях.
7. Проверяем качество макета.
8. Требуем векторный формат.
9. Если используются готовые изображения и шрифты, внимательно изучаем лицензию (права на использование готовых изображений и шрифтов), при необходимости покупаем лицензию.

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

Эти принципы помогут вам избежать распространенных ошибок и усовершенствовать свой рабочий процесс при разработке макетов веб-сайтов.

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

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

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

01. Определите, что означает успех

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

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

02. Сначала изложите свои мысли на бумаге

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

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

03. Начните рисовать структуру

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

04. Добавьте сетку

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

05. Выберите свою типографику

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

06. Выберите цветовую тему

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

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

07. Разделите макет

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

На самом деле не должно быть слишком много условных обозначений на странице: все должно двигаться к этому финалу - «Что я могу здесь сделать?». Подумайте о самом простом макете, который вы можете себе представить для простой цели, и начните добавлять необходимые компоненты. В конце концов, вы будете удивлены, как трудно сохранить его простым.

08. Переосмыслите установленные элементы

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

Некоторые условности существуют, потому что они работают, но иногда они существуют, потому что никто не тратил достаточно времени на их оценку. Важно переосмыслить установленные интерактивные шаблоны всех компонентов, чтобы увидеть, как мы можем их улучшить.

09. Думайте о движении

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

10. Прототип, прототип, прототип

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

11. Бросьте вызов самому себе

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

12. Обратите внимание на детали

В последнее время этим утверждением часто злоупотребляли, но в конечном продукте это не всегда было видно. В зависимости от концепции проекта, это «внимание к деталям» может означать разные вещи.

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

13. Усовершенствуйте каждый компонент

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

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

14. Оттачивайте свою работу

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

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

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

15. Упорядочивайте свои файлы

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

16. Создавая лучший вариант - готовьтесь к худшему

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

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

17. Мучайте свой дизайн, пока вы не начнете его ненавидеть

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

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

18. Делитесь дизайном с клиентами на раннем этапе

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

19. Будьте лучшим другом своего разработчика

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

Этот процесс неверен: некоторые из лучших идей исходят от команды разработчиков, поэтому убедитесь, что вы объединились с ними с самого начала проекта. Обмен вашими концепциями и азартом с ними приведет к лучшим идеям и лучшему выполнению в конце.

20. Представляйте вещи как можно более четко

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

21. Не слишком привязывайтесь к своим идеям

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

22. Следуйте за своим дизайном в разработке

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

23. Показывайте свою работу в прогрессе

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

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

Cacoo позволяет создавать диаграммы в Интернете. Это абсолютно бесплатный инструмент, который дает возможность создавать каркасы, схемы и UML, используя веб-браузер и приложения.

Gliffy поддерживает создание бесплатных каркасов сайтов и приложений. Вы можете использовать Gliffy в Интернете, или в виде плагина для различных приложений от Google и Confluence. Тут также поддерживается предварительный просмотр каркасов HTML5.

MockFlow позволяет создавать каркасы приложений через Интернет, или с помощью смартфонов. Приложение способно оценивать юзабилити дизайна.

Tiggzi – это мобильное приложение для разработки каркасов приложений и сайтов предназначенных для мобильных телефонов. Программа позволяет создавать приложения под HTML5 и JQuery работающих на мобильных телефонах. Вы так же можете экспортировать приложения для Android, IOS и Mobile Web.

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

iPhone Mockup это еще один wireframing инструмент, который позволяет создавать макеты для приложений на iPhone. Эта программа тоже очень проста в использовании, нужные элементы нужно просто перетаскивать из панели инструментов.

Pencil Project это еще одно графическое приложение, позволяющее создавать каркасы для веб-сайтов, поддерживающий экспорт каркасов в различных форматах, таких как HTML, PNG и PDF.

iPlotz - это бесплатный инструмент, который позволяет создавать навигацию для веб-сайтов и приложений. Он основан на компонентах, которые можно использовать для создания макета проекта.

Creatly поддерживает создание диаграмм, схем и макетов для различных типов проектов с использованием карт и каркасных элементов. Кроме того, она поддерживает одновременное управление несколькими проектами.

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

Flair Builder - это еще один широко используемый каркасный инструмент, который позволяет создавать макеты для веб-сайтов и многофункциональных Интернет приложений. Поддерживает различные платформы, такие как Windows, Mac и Linux. Программа была построена с использованием Adobe AIR, что обеспечило лучшую интеграцию и легкую установку.

Simple Diagrams - вот еще один простой инструмент для создания диаграмм и каркасов, программа позволяет легко и быстро делать макеты, а главное, она очень проста для понимания. Вы можете просто открыть её и приступить к созданию макета.

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

Студия Николая Саганенко Макет-Мастер предлагает создание макетов высокой сложности в кротчайшие сроки. Бесплатный выезд специалиста.
Для заказа пишите на Этот адрес электронной почты защищён от спам-ботов. У вас должен быть включен JavaScript для просмотра. . Реквизиты компании: ООО "Архитектурный стандарт". Доставка по РФ.

Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».

Подписаться

Макет сайта – это графическая схема веб-страниц

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

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

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

Для чего нужен макет сайта

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

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

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

Макет является неотъемлемой частью ТЗ. Разработчик предлагает варианты, заказчик выбирает понравившийся. В итоге рождается модель, которая позволяет всем участникам двигаться к цели без непрерывных переделок и согласований.

Как сделать макет сайта

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

AXURE

Можно попробовать бесплатно и при необходимости купить за 495$ или 895$ (командная версия). Удобен тем, что можно подключать нескольких пользователей и работать удаленно.

Функция «Preview» позволяет посмотреть каркас сразу в браузере.

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

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

Если вас интересуют инструменты попроще, воспользуйтесь Microsoft Visio. Здесь создается просто статичный рисунок с блоками.

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

Photoshop

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

Sketch

Специализированный редактор для создания интерфейсов. Все его инструменты предназначены для веб-дизайна. Самый большой минус – поддержка только операционной системы MacOS.

KRITA

Бесплатный аналог фотошопа. Поддерживает как MacOS, так и Windows.

GIMP

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

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

Что делать с макетом сайта дальше

Макет – это всего лишь рисунок. Для клиента он дает отдаленное представление о том, как будет функционировать ресурс. Не всегда отличный дизайн оказывается удобным для пользователя.

Поэтому следующим этапом целесообразно создать прототип – интерактивный макет. По исследованиям Якоба Нильсена, проведенным в 2015 году, 67% клиентов предпочитают видеть будущий сайт в действии.

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

Marvel

Бесплатно может работать один пользователь, доступно два проекта. Так как идентификация осуществляется по адресу электронной почты, то можно использовать разные и создавать какое угодно количество прототипов. Но они не будут находиться в одной области, это неудобно. За 12$ можно работать с неограниченным числом макетов, а за 42$ доступ получают одновременно три пользователя.

После создания проекта в него перетаскиваются изображения страниц.

Редактирование заключается в выделении фрагментов и наделении их интерактивными действиями.

Всего доступны три варианта:

1. Переход по ссылке на страницу, на внешний ресурс или создание анкора.
2. Экранные переходы для визуализации событий. Например, смена блоков при наведении.
3. Обработка событий: клик мыши, нажатие на клавишу.

Для имитации перехода между страницами сайта разместите в проекте изображение всех участвующих документов и после выделения фрагмента выбирайте нужный.

Чтобы посмотреть в действии, нажмите «Play». Страница откроется в браузере, а ссылка будет активна.

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

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

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