Desygner — бесплатный сервис для создания обложек, макетов, постеров и визиток. Программы для рисования макетов сайта


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

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

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

1. Balsamiq Mockups

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

Balsamiq Mockups

2. Mockingbird

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

Mockingbird

3. Mockup Builder

Бесплатное веб-приложение, созданное на Microsoft Silverlight. Как и предыдущий инструмент, данное приложение позволяет создавать макеты для сайтов и приложений, при этом также присутствует возможность быстро предоставить доступ к проекту другим сотрудникам и заказчику. Несмотря на то, что продукт предоставляется пользователю бесплатно, в нём присутствует вполне достаточный функционал, включая поддержку мобильных устройств на iOS и Android. Данный инструмент можно посоветовать начинающим дизайнерам для реализации простых идей и концептов.

Mockup Builder

4. MockFlow

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

MockFlow

5. HotGloo

Данное веб-приложение выделяется среди прочих аналогов невероятно удобным красивым интерфейсом, что делает работу над проектами приятнее. Другими достоинствами HotGloo можно назвать наличие богатого функционала, множества элементов и компонентов, а также удобный drag-and-drop интерфейс.

HotGloo

6. Invision

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

Invision

7. JustProto

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

JustProto

8. Proto.io

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

Proto.io

cmslist.ru

Cоздание макета сайта без специфичных навыков в Photoshop

ОглавлениеСоздание макетов сайтов: развлечение для избранных ->Разработка макета сайта: этапы ->Способ №1. Нарезка макета из шаблона сайта ->Способ №2. Создание макета сайта в почтифотошопе ->Способ №3. Онлайн-инструмент для создания макетов ->

Для начала задумайтесь над тем, почему вы решили создать макет сайта самостоятельно. Эта работа требует разносторонних знаний от человека в области ИТ и дизайна, аналитического и творческого мышления одновременно. А еще некой части вашего времени. Окей, есть 4 причины того, почему вам могло это понадобиться. Если у вас другая – пишите в комментарии, дополню.

Причина #1. Интерес к разработке макетов сайта

Ваши интересы очень специфичны? Мы здесь никого не осуждаем. Самим же стало когда-то интересно, и начали этим заниматься! К тому же, тяга к познанию – наша отличительная черта. Хвалю ваше любопытство.

Причина #2. Разработка макета сайта как вид заработка

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

Кстати, работа веб-дизайнера – это не шутки. Вот здесь ниже я просто оставлю график зарплат в зависимости от стажа (по данным DOU за май-июнь 2016). Ни на что не намекаю. Просто скрытый хантинг.

диаграмма зависимость зарплаты веб-дизайнера от стажа

Причина #3. Составление ТЗ на разработку макета сайта для дизайнера

Часто перед недизайнерами стоит необходимость показать макет веб-сайта – иногда просто для иллюстрации своей идеи, но иногда и для подкрепления ТЗ. Конечно, это не обязательно и грамотный дизайнер сам поймет вашу идею и даже сделает лучше, чем вы ожидаете. Однако если вы точно знаете, чего хотите, лучше это показать, а не рассказывать.

В KOLORO можете заказать макет сайта, и вы получите именно то, что ожидаете. Как это у нас получится? Мы тонкие психологи.

Причина #4. Вам срочно надо нарисовать макет сайта, а вы даже не знаете что это

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

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

Этап 1: структура макета сайта

Обязательно заранее спланируйте архитектуру сайта – что и куда будет вести и как будут взаимосвязаны элементы. Можете сделать это в голове, на бумаге или воспользуйтесь MindMap для построения структуры. Построение MindMap при проектировании сайта поможет вам определиться с количеством страниц, которые необходимо нарисовать. Вы будете иметь детальное представление о проекте в целом. Как это сделать? Можете использовать онлайн-инструменты MindMup или Bubblus.

внешний вид mindmup & bubblus

Удобно также пользоваться приложением Coggle, которое вы можете подключить к Google Drive.

как подключить coggle

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

пример внешнего вида карты сайта

На первом этапе проектирования макета создается mind-map сайта

Этап 2: Создание прототипа сайта

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

Пример структуры сайта: вот.

Устали? Сделайте жизнь проще и закажите разработку сайта в KOLORO. Мы учтем ваши пожелания и вы получите именно то, что хотели.

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

Обычно я пользуюсь двумя наиболее популярными онлайн-инструментами для создания прототипа сайта: Moqups и Mockflow. В обоих случаях есть возможность создавать прототипы бесплатно, но с ограниченным функционалом. Тарифы для первого сайта начинаются от $13/мес. (10 проектов, 1 Гб), а для второго – от $14/мес. (неограниченное количество проектов + 25 Гб в облаке). Еще все рекомендуют Mockingbird. И я порекомендую, но только из уважения к Eminem, потому что здесь 3 проекта обойдутся уже в $12/мес., а бесплатных инструментов меньше.

Теперь о личном впечатлении. Moqupsудобнее и интуитивно понятен даже с первого посещения. Здесь много готовых блоков и иконок – как раз то, что нужно, чтобы быстро пройти этап прототипирования. Кроме того, элементы удобно центрировать относительно середины страницы или других элементов. Немного мешает ограничение в 300 объектов для страницы в бесплатном режиме – для макета одностраничного сайта может быть маловато. Есть возможность вставлять элементы с воркфрейма Bootstrap. Mockflow позволяет делать чуть меньше, и с ним нужно пару минут разобраться и привыкнуть к нему, однако большее количество пространства на диске может кого-то привлечь.

пример того как выглядит макет сайта в moqupsпример того как выглядит макет сайта в Mockflow

Прототипы сайта в Moqups и Mockflow

Как запрототипировать будущий сайт?

Рассмотрим на примере Moqups как можно создать прототип страницы с текстом для блога.

Шаг 1. Добавляем шапку (текст можно изменить).

шаг 1 в создании прототипа с Moqups

Шаг 2. Добавляем блок для картинки и надпись (заголовок статьи). С помощью стилей можно удобно менять размер, шрифт и прочее форматирование текста.

шаг 2 в создании прототипа с Moqups

Шаг 3. Добавляем текст и задаем ширину колонки. Все блоки удобно центрируются относительно середины страницы.

шаг 3 в создании прототипа с Moqups

Шаг 4. Текст надо бы разбить картинкой. Да и ширина колонки слишком большая, 500 рх будет лучше. К счастью, можно ее быстро поменять. Большой плюс: выделенные элементы уменьшаются относительно друг друга и мой блок с картинкой тоже уменьшился.

шаг 4 в создании прототипа с Moqups

Шаг 5. Добавим сайдбар (боковую колонку), здесь уже будет просто. Разместим поле для поиска и блок для подписки на рассылку (с привлекательной картинкой и яркой кнопкой).

шаг 5 в создании прототипа с Moqups

Шаг 6. Допустим, наша статья получилась такой маленькой. Еще можно добавить опрос и рейтинг статьи. Получился аккуратный прототип странички для блога. Добавляйте другие элементы по своему вкусу.

шаг 6 в создании прототипа с Moqups

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

пример создании прототипа с Moqups

Прототип приложения для смартфона

Этап 3: Делаем красивый макет сайта: выбираем цвет

От удачного выбора цветов зависит восприятие сайта и бренда пользователями. Не советую полагаться на свои силы – подбор удачного оттенка может занять часы. Поэтому рекомендую использовать готовые палитры цветов для веба. У Google недавно вышел подробный гайд по удачным цветам для материального дизайна (тренд веб-дизайна). Эти цвета гармонично сочетаются, и вы можете быть уверены в их привлекательности. С помощью Materialpalette можно удачно подобрать два цвета – основной и акцент, а также посмотреть, как они будут выглядеть в интерфейсе. Немного больше цветов на Material Design Colors.

выбор удачного цвета

Представили сайт? Сделали прототип? Выбрали цвета? Теперь можно перейти к созданию самого макета. Предлагаю вам несколько способов.

Внимание! Здесь не будет советов по тому как сделать макет сайта в фотошопе – это тема для отдельной статьи, здесь более простые способы.

или существующих сайтов

Этот способ подойдет вам, если вы хотите:

  • разобраться в основных инструментах Photoshop;
  • найти разные референсы для своего будущего сайта и собрать их воедино;
  • почувствовать себя дизайнером на пару часов;
  • продемонстрировать веб-дизайнеру или агентству (например, нам :) наиболее подробное видение сайта;
  • подкрепить ТЗ на разработку сайта не только «вот здесь кнопочки призыва, а тут разделитель и лидомагнит».

Плюсы такого подхода к разработке макета:

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

Минусы:

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

возможность кастомизации макета сайта

Как это делается

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

! Если вы будете делать «рагу» из разных сайтов, не забывайте где-то в блокнотике карандашиком писать исходники. Это упростит дальнейшую разработку дизайна и верстку макета.

Макеты сайтов под Wordpress

Наиболее популярная CMS - это Wordpress. Например, здесь вы найдете много современных шаблонов для этой CMS. Зачем? Сайт на шаблоне ускоряет запуск проекта в разы, однако он не будет уникальным. Хотя, если вы будете использовать оригинальные иллюстрации, изображения и креативный подход – даже шаблонный макет можно переделать до неузнаваемости. Главным преимуществом является то, что ваш сайт гарантированно будет адаптивным и вообще красавцем в плане отображения на разных устройствах.

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

пример шаблона сайта

Что дальше? Подбираем размер макета сайта, режем и клеим

Когда вы уже освоились в шаблоне, можно приступать к его нарезке. Отлично, если разрешение вашего экрана 1920 рх или больше – это позволит просто делать скриншоты частей сайта и соединять их в редакторе. Работа с макетом начинается с шапки (header), далее – разные блоки (body), в конце – подвал (footer).

Вам понадобится:
  • удобный инструмент для снимка выбранной области (screen capture tool), я использую Lightshot – он предлагает сохранить изображение в отдельный файл или копирует его в буфер обмена;
  • Photoshop – для склеивания нарезанных частей изображений.

Этапы создания макета для сайта на основе шаблона

Шаг 1. Выбираем ширину макета сайта

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

Откройте Photoshop и задайте ширину макета сайта 1920 рх. Этого будет достаточно для того, чтобы увидеть, как сайт будет выглядеть в браузере. Если у вас разрешение меньше – ставьте такую ширину, которую позволяет монитор. Насчет высоты пока не беспокойтесь – здесь сложно угадать и все равно придется растягивать/сужать область.

задаем ширину макета сайта

Шаг 2 . Продолжаем создание макета сайта в Photoshop

Подберите в шаблоне такую шапку, которая вам нравится. Вырежьте ее с помощью удобного инструмента, откройте документ в Photoshop и вставьте туда (Ctrl+V). С помощью инструмента перемещения (V) поместите шапку вверху. Мне нравится шапка с topbar, где есть контактная информация о компании.

Шаг 2.А. Делайте сразу правильный макет сайта

Теперь у вас есть два пути – изменять текст в изображении или писать сопутствующий текст в текстовом файле. Что удобнее? Все зависит от ваших целей. На личном опыте могу сказать, что лучше это сделать в макете, сразу подобрав шрифт и размеры. Так безопаснее и будет WYSIWYG в действии (What You See Is What You Get, «что видишь, то и получишь»).

Шаг 3. Идем к успеху

Наполняйте свой макет разными блоками и редактируйте их согласно своим нуждам. На данном этапе можно не играться с цветами, если у вас нет навыков использования Photoshop. Для того чтобы увеличить высоту макета, используйте инструмент «Рамка» (С).

Что получилось

пример макета сайта

Спустя пару минут размышлений, нарезки и склеивания наиболее понравившихся кусков, у меня получился структурированный макет страницы «О нас»

О чем не стоит забывать

  1. Называйте каждый слой с блоком адекватно, согласно тому, что там есть. Иначе потом совсем потеряетесь.
  2. При подборе шрифта надо выбрать разный размер для заголовков и основного текста. При этом лучше руководствоваться библиотекой веб-шрифтов Google Fonts. Не забудьте отфильтровать кириллические шрифты.

выбор шрифта для макета

Вам подойдет способ №2, если:

  • у вас нет Photoshop (совесть не позволяет или нет места на диске) или вы еще не научились им пользоваться;
  • вы хотите познакомиться с HTML кодом и CSS стилями без вмешательства в разметку;
  • вам нужен интерактивный макет сайта.

Советую шикарный бесплатный инструмент для создания макетов Macaw. Для работы с программой ее надо скачать и установить – дело пары минут. В программе можно в визуальном режиме практически верстать макет, потому что вы сразу сможете опубликовать его и увидеть HTML-код и CSS. Немного подробнее о работе программы. У Macaw есть существенный недостаток – она создает неадаптивную веб-страницу. Как с этим бороться? Здесь уже понадобятся навыки верстальщика, чтобы подключить фреймворк (например, если делать макет сайта под Bootstrap). Однако если нужно просто показать работающий макет коллегам – Macaw отлично подойдет.

как выглядит неадаптивный шаблон сайта

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

Для начала работы запустите программу у себя на компьютере. Вашему вниманию представляется пустой документ с шириной страницы 1200 рх с сеткой макета сайта. По умолчанию между столбцами есть отступ (padding), поэтому между созданными элементами будет расстояние. Рисовать вам придется только в пределах колонок, потому что если вы выйдете за них, блоки будут отображаться друг под другом. Так что следите за ними.

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

сетка редактора

Вы можете изменить ширину рабочей области, потянув ее справа, или задав размер самостоятельно

Что дальше? Макетируем

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

Шаг 1.

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

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

Внутри другого контейнера будет логотип, а внутри следующего – меню. Для отдельных элементов меню не нужно создавать отдельные блоки, достаточно установить приемлемое расстояние между словами (word spacing).

работа с редактором шаг 1

Шаг 2

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

шаг 3 в работе с визуальным редактором

Шаг 3. Создание интерактивного макета сайта

Продолжаю перетаскивать блоки и вставлять в них текст. Кнопку создаю при помощи специального инструмента «Кнопка» (логика!). Macaw позволяет создавать интерактивный макет с разными состояниями кнопок и возможностью переключения между страницами.

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

особенности работы с редактором макета

Если нажать File -> Publish, вы получите готовую страничку, у которой можно будет просмотреть HTML-код и CSS в разных вкладках. Это очень удобно, если вы хотите увидеть, как выглядит разметка.

Что получилось

Получилось как-то так. Здесь для сравнения, слева склеенные куски отредактированного шаблона, справа – макет, созданный в Macaw. Большой плюс программы – вы можете вставлять кнопки, добавлять им ссылки, создавать разные страницы и переходить между ними. Только не забывайте об иерархии контейнеров и не потеряйтесь в них.

сравнение шаблона и самого макета

Особенности такого способа создания макета сайта:

  • чтобы понять тонкости работы программы, надо потратить дополнительное время;
  • даже когда уже вник в программу, все еще иногда не понятно, почему она ведет себя так, а не иначе;
  • об адаптивности можно забыть, если не доделывать самому;
  • действительно удобно создавать макет и даже немного разобраться в верстке – можно увидеть, как взаимодействуют элементы и вообще какая структура;
  • в стилях могут появляться такие вещи «width: 16.6666666666%», которые надо будет исправлять; просто необходимо понимать, что здесь WYSIWG, а не больше.

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

Удобный инструмент для создания инфографики, которым я пользуюсь уже давно – сервис Creately. Здесь есть десятки и сотни компонентов для создания UI дизайна под разные устройства (больше под мобильные). Вам точно понравится, покажу некоторые из них.

функционал инструмента creately

Еще здесь удобно редактировать элементы, добавлять текст (и даже делать кнопки со ссылками!). В общем, всего за пару минут у меня уже получилось то же самое, что и в Macaw, только аккуратнее. Однако такой макет не сделать сильно интерактивным. К этому способу не будет шагов т.к. сервис хорошо интуитивно понятен. На скрине я постаралась максимально отобразить возможности сервиса.

работа с инструметом по созданию макетов сайта creately

Возможности сервиса Creately

В Creately мне нравится, что:

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

На этом все. Это были те способы, к которым я пришла на том или ином этапе творческого развития. Если вы нашли пользу в этом материале – мы счастливы.

P.S. Данная статья является ознакомительной и не позволит вам стать веб-дизайнером. За серьезными знаниями придется еще много покопаться в интернетах.

koloro.ua

Сервис для создания макета сайта: лучшие представители

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

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

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

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

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

Содержание:

  1. Balsamiq Mockups
  2. Mockingbird
  3. Mockup Builder
  4. MockFlow
  5. HotGloo
  6. Invision
  7. JustProto

Balsamiq Mockups

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

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

Mockingbird

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

Mockup Builder

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

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

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

MockFlow

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

HotGloo

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

Invision

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

JustProto

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

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

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

Резюмируя, можно сказать, что начинающим стоит обратить внимание на программы MockFlow и Mockup Builder. Профессионалам будут интересны HotGloo, Balsamiq Mockups и Mockingbird, желающим работать в команде рекомендуются Invision и JustProto.

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

С уважением! Абдуллин Руслан

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

abdullinru.ru

Desygner — бесплатный сервис для создания обложек, макетов, постеров и визиток

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

Desygner templates

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

Desygner theme

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

Desygner editor

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

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

Desygner download

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

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

Desygner →

lifehacker.ru

простой редактор для создания прототипов сайтов и приложений

Moqups - это бес­плат­ное веб-при­ло­же­ние для раз­ра­бот­ки маке­та сай­та или мобиль­но­го при­ло­же­ния.

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

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

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

MoqupsИнтер­фейс редак­то­ра Moqups

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

MoqupsФраг­мент интер­фей­са сер­ви­са Moqups

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

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

MoqupsСохра­не­ние про­ек­та в Moqups

Резуль­та­ты сво­ей рабо­ты мож­но сохра­нить в биб­лио­те­ке сер­ви­са для про­дол­же­ния рабо­ты над ним в даль­ней­шем. Закон­чен­ные про­ек­ты вы смо­же­те экс­пор­ти­ро­вать в фор­ма­те PDF или PNG на свой ком­пью­тер или в облач­ное хра­ни­ли­ще Google Drive и Dropbox. Если же вы хоти­те про­де­мон­стри­ро­вать создан­ный вами про­то­тип в Интер­не­те, то к вашим услу­гам спе­ци­аль­ная ссыл­ка для рас­про­стра­не­ния.

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

te-st.ru


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