Хочешь сделать посадочную страницу своими руками ? «Потому что никто не поймет как я хочу!» Хорошо, тогда в этой статье ты узнаешь, как сделать макет landing page всего за один вечер , и научишься максимально доступно объяснять любому дизайнеру свои задумки с первого раза.
Для этого понадобится карта персонажей твоей целевой аудитории, программа Balsamiq Mockups и твоя свежая голова. Ну что ж, начнем!
Итак, этапы создания макета посадочной страницы :
- Создание блоков в прототипе макета;
- Наполнение блоков содержимым;
- Логическая структуризация блоков;
- Оформление блоков с учетом юзабилити и эргономики.
Несложно? Совсем! Это как собрать конструктор лего: есть гора с деталями — основные строительные, мелкие добавочные, готовые конструкции, специфичные детальки, подходящие только для какого-то определенного элемента. И у каждой детали есть различные критерии.
Так же к любому лего набору прилагался «проспект»-инструкция, демонстрирующая в каком порядке собирать детали, чтобы получить, предположим, виллу у моря. Данная статья — это тот самый «проспект», который поможет структурировать все данные о твоем продукте и после — составить макет посадочной страницы.
9/17 Balsamiq Основы работы и обзор интерфейса. Курс по макетам для аналитиков
Эта статья тебе точно поможет, если:
- Ты считаешь, что никто не создаст твой landing page лучше тебя самого;
- Но ты плохо разбираешься в софте и программах;
- А Balsamiq Mockups кажется неуправляемым и диким ;
- И уж тем более ты не хочешь по 3 раза присылать дизайнеру правки и злиться, почему он не видит так, как я хочу .
Я собрала воедино все свои ошибки и типичные ошибки разработчиков посадочных страниц, и теперь делюсь с тобой всей этой инфой. Во время обучения свои первые макеты я создавала по 2-3 дня. А у тебя получится за один вечер. Не трать время впустую, делай всё сразу так, как должно быть.
Хватит лирики, переходим к четким действиям.
Шаг 1. Создание блоков в прототипе макета
Программа Balsamiq Mockups (или просто — Бальзамик) мне при первом открытии показалась дикой с огромным множеством инструментов («Какие из них нужны? Как вставить картинку? Как обозначить, что это будет иконка? Где вообще находится эта кнопка со «скругленными» краями?!»). Поэтому первый мой макет состоял из квадратиков и подписей.
Потом я мучительно долго объясняла дизайнеру, что где должно находиться и как всё должно смотреться… комшар, одним словом. Теперь учись как надо.
Открываешь Balsamiq Mockups, нажимаешь Project — New Mockup, создаешь новый мокап-файл. Перед тобой чистый лист. Поздравляю, ты видишь первый лист своего макета.
В прототипе макета должны быть:
1. Указанная область посадочной страницы
Нужна для того, чтобы визуально воспринимать рамки, в которых ты работаешь, как бы создавать себе представление того, что посетитель твоей страницы будет видеть у себя в окошке. Так же эти рамки помогут дизайнеру приобрести более четкое представление об области, в которой он должен работать. Область обозначается при помощи инструмента Browser.
Быстрое создание прототипа сайта программой Balsamiq Mockups
*После создания рабочей области посадочной страницы я советую тебе скопировать получившийся мокап-файл в качестве 3х экземпляров (нажимаешь правой кнопкой мышки на мокап-файл и выбираешь функцию «Clone»).
2. Хэдер с пространственным расположением элементов
В хэдере *(верхняя часть страницы) тебе нужно будет указать 4 обязательных элемента: логотип, дескрипт логотипа, триггер-яйцо (содержит самое сильное преимущество компании с цифрах), номер телефона с указанием времени приема звонков. Все элементы оформляются при помощи инструмента Text.
*Если твой макет получится «ох какой» длинный, то допускается добавление быстрого меню при помощи инструмента Link Bar;
Источник: dzen.ru
Артём Саннников
Данная книга является руководством для начинающих специалистов в области анализа и обработки данных. В книге рассматривается язык SQL и его процедурное расширение PL/SQL от компании Oracle.
Главная › Программное обеспечение › Balsamiq › Интерфейс Balsamiq
Интерфейс Balsamiq
После того, как мы установили Balsamiq (mockup), можно переходить к следующему этапу — знакомство с интерфейсом. Все мы прекрасно знаем, что интерфейс играет очень важную роль, для всех пользователей. Именно он определяет, будет ли пользователь работать дальше с программным обеспечением или нет.
Интерфейс «Balsamiq» очень простой и интуитивно понятный. Даже если вы ни разу не сталкивались и не работали с Balsamiq, вы уже можете предположить для чего нужен тот или иной блок с функциями, при первом запуске.
Ниже приведён интерфейс, и самые основные области выделены прямоугольной областью. Попробуйте сами предположить, для чего нужен тот или иной блок.
Итак, после того, как вы подумали над предназначением блоков, давайте их разберём.
1. Верхнее горизонтальное меню (позволяет производить настройки проекта и самого программного обеспечения);
2. Навигационная панель для управления прототипами (этот блок с настройками позволяет изменять внешний вид вашего проекта, то есть вы можете управлять вариантами отображения готовых прототипов);
3. Панель инструментов (взаимодействует и оперирует с объектами на холсте);
4. Библиотека шаблонов (готовые элементы интерфейса для создания прототипа);
5. Область управления прототипами (в этой области отображаются ваши прототипы, такая функция отлично подходит для создания больших проектов);
6. Поле для создания прототипа (в этом поле вы можете уже начать рисовать свой первый прототип интерфейса);
7. Выделение объекта (объекты на холсте можно перетаскивать, удалять, дублировать, трансформировать и др.);
8. Свойства объекта (при выделении объекта, открываются его настройки, с помощью которых можно добиться желаемого результата);
С уважением, Артём Санников
Записи по теме
- Импорт в Balsamiq
- Экспорт прототипа (макета) в Balsamiq
- Связь макетов (перелинковка) в Balsamiq
- Выравнивание и отступы в Balsamiq
- Свойства объекта в Balsamiq
- Объекты в Balsamiq
- Масштабирование и перемещение в Balsamiq
- Как удалить макет в Balsamiq
Источник: artemsannikov.ru
11 бюджетных инструментов дизайнера для создания интерфейсов и макетов
Прототипы стали незаменимым этапом профессиональной разработки веб-проектов и программного обеспечения. Прототипы облегчают жизнь всем людям, вовлеченным в процесс создания того или иного проекта: клиенту, менеджерам, дизайнерам и разработчикам. Прототип визуализирует конечный продукт и помогает выявить серьезные проблемы на самых ранних этапах, помогая избежать геморроя на поздних стадиях разработки.
Конечно, первоначальные эскизы, выполненные, к примеру, на бумаге и воплощающие первые идеи дизайнера еще никто не отменял. Но всю дальнейшую работу, в которую будут вовлечены все члены рабочей группы, лучше всего проводить в специальном программном обеспечении, которое поддерживает редактирование, управление версиями и совместную работу.
Сейчас мы рассмотрим 11 сервисов для прототипирования, часть из которых бесплатны, а другая часть — с весьма бюджетными для данной категории программ ценниками.
PowerMockup — плагин для PowerPoint
PowerMockup — это плагин, превращающий Microsoft PowerPoint в инструмент для прототипирования. Он добавляет в PowerPoint новую панель, содержащую сотни элементов и значков, которые можно с легкостью перетащить на слайд.
PowerMockup работает с Office 2007, 2010 и 2013. Однопользовательская лицензия на PowerMockup стоит $59,95; стоимость лицензии для рабочей группы зависит от количества человек в ней.
Moqups — онлайн-инструмент для создания макетов и прототипов
Moqups — интерактивное приложение на HTML5, позволяющее разрабатывать векторные прототипы.
Сервис разработан 6 увлеченными программистами из Румынии, бесплатен и не требует регистрации.
Совсем недавно ребята представили премиум версию, в которой было добавлено несколько интересных особенностей, таких как неограниченное количество изменений макета и онлайн взаимодействие между членами рабочей группы.
Fluid UI — средство разработки прототипов для iOS- , Android- и Windows приложений
Fluid UI — онлайн средство для прототипирования мобильных приложений. Может быть использован как для создания простых макетов, так и сложных высококачественных макетов и прототипов. Сервис содержит библиотеки с элементами интерфейсов для iOS, Android и Windows 8 приложений.
Аккаунт для одного проекта с ограничением в 10 экранов доступен бесплатно. Платные планы начинаются с $29 в месяц.
Wireframe.cc — минималистичный бесплатный онлайн-сервис для прототипирования
Wireframe.cc отличается от других инструментов прототипирования чрезвычайно простым интерфейсом без огромного количества наворотов. Когда вы заходите на сайт сервиса wireframe.cc, вы сразу же можете начать рисовать, перетаскивая элементы мышью по рабочей области. Чтобы сохранить макет достаточно нажать кнопку «Save», после чего сервис сгенерирует уникальный URL, которым вы сможете поделиться с другими людьми или добавить его в закладки.
Wireframe.cc на данный момент бесплатен, премиум-версия с доп. функциями ожидается в ближайшее время.
Axure RP
Цены на это ПО начинаются с $289 за стандартную лицензию. Конечно, такая цена весьма велика. Однако, набор функций программы вполне оправдывает цену для некоторых категорий пользователей.
Axure может быть использован не только для создания простых макетов, но и для создания комплексных прототипов, а также для нормативных документов.
Из особенностей стоит также упомянуть возможность подключать к проекту клиента, чтобы показывать ему результат, отслеживать обратную связь, управлять дискуссией, удобно взаимодействовать с членами команды.
Axure — это десктопное ПО, доступное для Mac OS X и Windows.
Balsamiq Mockups — инструмент для быстрого прототипирования на основе Flash
Balsamiq Mockups — чуть ли не самый известный инструмент для прототипирования.
Продуктом, выпущенным в 2008 году силами одного программиста, в настоящее время пользуются десятки тысяч клиентов. Команда сервиса выросла до 11 штатных сотрудников.
Balsamiq Mockups стремится передать опыт рисования макетов на бумаге, поэтому прототипы выглядят не так формально, как в других программах.
Вы можете использовать Balsamiq Mockups непосредственно в браузере (потребуется Flash) или загрузить в качестве приложения Adobe AIR. Однопользовательская лицензия стоит $79.
Pencil — инструмент для прототипирования с открытым кодом
Pencil — инструмент с открытым кодом для создания GUI-макетов и прототипов. Содержит большое количество встроенных фигур, начиная от элементов общего назначения и элементов блок-схем до элементов управления пользовательских интерфейсов (речь как о десктопных приложениях, так и о мобильных).
Вы также можете скачать пользовательские коллекции элементов из раздела Download на сайте Pencil. Инструмент доступен как автономная версия для Linux, Windows и Mac OS X. Также может быть использован в качестве расширения Firefox.
UXToolbox — инструмент для прототипирования под Windows
С помощью UXToolbox вы сможете создавать макеты и интерактивные прототипы для мобильных приложений, веб-сайтов и десктопного ПО.
Что интересно, программа позволяет в один клик переключаться между скетчем и попиксельно-выверенным прототипом.
После того, как вы закончите работу над проектом, вы сможете экспортировать макет в формат HTML, PNG, XML и Word или распечатать материалы для рабочей группы.
UXToolbox работает с Windows XP и с более поздними версиями и стоит £159 (около $240) за копию.
Mockups.me — инструмент для создания пользовательских интерфейсов
Mockups.me очень похож на Balsamiq Mockups, но имеет ряд преимуществ. В частности у Mockups.me есть приложения для IOS и Android. Кроме того, Mockups.me включает в себя встроенные коммуникационные системы для сбора обратной связи через аннотации и комментарии.
Стоимость десктопной версии Mockups.me — $49, версия для планшета доступна за $19,99, а цены за веб-версию начинается от $99 за год.
Live Wires — приложение для создания прототипов под iPad
Live Wires поможет вам протестировать и создать прототипы непосредственно на iPad. Приложение может быть использовано для создания интерактивных прототипов приложений для iPhone и iPad.
Live Wires включает в себя большую коллекцию легко настраиваемых элементов упрвления.
Прототипы могут быть экспортированы по электронной почте а затем импортированны на другое утсройство.
Live Wires сейчас доступен по специальной начальной цене в $9,99.
HotGloo
Мой любимый инструмент для прототипирования. Ему посвящена отдельная статья.
Резюме
Как вы видите из приведенного выше списка, существует большой выбор доступных инструментов для прототипирования, из которых можно выбирать тот, который подходит именно вам.
Использовали ли вы какой-то из них? Если да, пожалуйста, поделитесь своим опытом в комментариях.
Источник: lifehacker.ru