Flamio.ru

Работа и деньги
5 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Как сделать прототип сайта

Как создать прототип сайта онлайн

Разделы

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

Что такое прототипирование сайта

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

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

Требования, применяемые к прототипам:

  1. Разработка прототипа сайта должна проходить в скоростном режиме, особенно при условии, если макет не вызывает сложностей. Сэкономленное время понадобится Вам на создание определенного проекта.
  2. Создание детализации.
  3. Легкое и быстрое внесение корректировок.
  4. Оптимальная реакция на манипуляции пользователей.
  5. Возможность дальнейшей успешной работы специалистов – дизайнеров, менеджеров, программистов, собственника сайта.

Разработка прототипа сайта

Прототипирование сайта возможно следующими способами:

  1. Бумажным.
  2. По средствам программного использования.
  3. Графическими программами.

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

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

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

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

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

Лучшие программы для прототипирования сайтов

UI/UX дизайн – замечательный и один из самых важных нюансов, который потребуется и при создании и при последующем развитии ресурса. В этих целях используют средства, с помощью которых создаётся макет, концепт, прототип (интерактивный или нет) и тому подобное.

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

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

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

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

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

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

  1. Чтобы начать работу, достаточно кликнуть по холсту и тянуть мышку до тех пор, пока не добьетесь необходимого размера прямоугольника, который в дальнейшем будет использоваться в качестве составляющей части проекта.
  2. Затем всплывет «меню», где вы должны выбрать тип преобразования предметов.
  3. При помощи двойного клика на левую кнопку мыши по любому элементу, можно скорректировать функциональные особенности конкретного объекта. К примеру, выбрать цветовую гамму определенной составляющей. Интерфейс пользователя выполнен в виде контекста. Иными словами, его большая часть не появляется, если нет такой необходимости.

При использовании премиум тарифа, появляется возможность использовать многостраничные проекты через личный аккаунт, доступна функция просмотра выполненных манипуляций, кликабельность, а также экспорт в PDF и PNG формат. Стоимость тарифа – 15 долларов за 30 дней использования.

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

  1. Бесплатный режим предусматривает создание трех проектов, что превосходит функциональность иных программ. В случае если это не Ваша основная деятельность, для самостоятельного пользования вполне приемлемо.
  2. Есть возможность выбора закрытого или открытого проекта, отражение наименования устройства, для которого будет создан макет. Также можно создать кастомный проект.
  3. Добавить новый объект можно путем нажатия клавиши «New widget».
  4. Выделяя объект, Вы увидите появившиеся в правой стороне опции для внесения корректировок.

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

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

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

Думаете, такой набор функций будет слишком дорог? Нет – минимальная ставка 15 долларов/30 дней за три активных работы. В случае если Ваша цель – создание одного проекта, то сервис доступен Вам в неограниченном режиме.

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

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

По нашему мнению, этот сервис лучший из освещенной нами пятерки лидеров. Пользователь, желающий создать прототип сайта онлайн, найдет здесь все, что ему нужно. Редактор, а точнее работа с ним отлажена на 100%.

  1. Здесь Вы найдете не одну сотню компонентов, используемых для создания интернет-ресурса, сервиса, а также приложений. После создания страниц их можно просто перетащить на холст из вкладки «Stensils»:
  2. Правая часть отвечает за настройки – размер, цвет, шрифт и так далее. Также есть функция загрузки собственных изображений, достаточно перетянуть или скопировать их с исходного носителя.
  3. Если есть желание или необходимость, можно создать собственный шаблон. Главное отличие рабочего пространства – гибкое управление. Выбор иконок – огромен.

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

Читать еще:  Моделирование сайта онлайн

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

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

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

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

В этой статье вы узнаете что такое прототип и как его создать с помощью 7 онлайн-сервисов.

Что такое прототип сайта

Прототип – макет, или физическая реализация концепта интерфейса. Ещё 15 лет назад, когда о принципе «Mobile first» ещё никто не думал, страница-прототип содержала образцы дизайна всех элементов сайта – заголовков, списков, цитат, абзацев.

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

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

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

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

Далее – 7 вариантов, у каждого свой спектр возможностей, сложность работы и цена. Выбор за вами.

InVision

Это идеальное решение, если вам нужно «оживить» готовые макеты Photoshop или Sketch.

Примечание: плагин для Adobe Photoshop и для Sketch поможет отправить проект из редактора прямо в InVision. Работает синхронизация файлов внутри проекта, с рабочим столом либо Dropbox (для этого нужны дополнительные приложения).

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

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

Все действия по проекту фиксируются на вкладке «Activity». Это удобно при групповой работе над макетом: вы точно знаете, кто загрузил файлы или редактировал ваш макет своими кривыми руками (либо довел его до совершенства).

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

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

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

Большой плюс – инструмент бесплатный.

Balsamiq

Нет Photoshop или Sketch? Возможно, Balsamiq – лучший инструмент для вас. Он работает, как приложение для рабочего стола. Есть и веб-версия.

Инструмент содержит внушительную библиотеку встроенных элементов UI для использования в проектах. Это экономит время: вы используете готовые пресеты (например, выпадающие меню или «аккордеоны»).

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

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

Нужно оценить несколько вариантов дизайна? Не вопрос, инструмент предлагает средства контроля версий и историю версий. Можете вернуться назад по времени и оценить, насколько продвинулся ваш дизайн.

Balsamiq предусматривает расширения сторонних разработчиков – можно добавить дополнительные иконки или инструменты управления.

Главный минус – приложение платное. Хотя цены вполне подъемны: версия для десктопа стоит $89 за одну лицензию, веб-версия на 3 проекта – $12 в месяц. Есть бесплатный пробный период на 1 месяц для некоммерческих проектов.

Moqups

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

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

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

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

Moqups – веб-приложение, вся работа проходит исключительно онлайн. Ваши проекты хранятся на серверах разработчика.

Сервис платный, стоимость тарифа зависит от количества проектов и места на сервере.

Базовый тариф на 10 проектов и 1 GB на сервере обойдется в $13. Есть стартовый бесплатный тариф на 1 проект, ограниченный 300 объектами и 5 MB. Для простейшего макета (одностраничного лендинга) и полноценного общения с дизайнером этого вполне достаточно.

Вот что из этого может получиться:

Marvel

Marvel — простой и интуитивный инструмент прототипирования. Его инструмент Canvas создает эскизы и каркасные интерфейсы.

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

Главная фишка Marvel – ориентация на разработку мобильных интерфейсов. При создании нового проекта вы выбираете тип прототипа: сайт, приложение для iPhone, iPad,Android и даже AppleWatch.

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

Добавляйте жесты (протаскивания и т.д.): выбираете активную область, назначаете на неё действие из набора пресетов, смотрите результат. Есть подсказки, так что не запутаетесь.

Печальный момент: Marvel разрабатывался для пользователей MacOS – для них разработчики припасли дополнительные плагины и приложения. Есть, например, плагин для Sketch. Для пользователей Windows и Linux подарочков нет.

Marvel предлагает три тарифа:

  • Бесплатный – на 1 пользователя и 2 проекта.
  • Профессиональный – $12 в месяц, 1 пользователь и неограниченное число проектов.
  • Корпоративный – $48 в месяц, 4 пользователя.

Justmind

Библиотека встроенных элементов позволяет создавать примитивные эскизы и почти готовые интерфейсы. Инструмент Justmind предусматривает библиотеки для десктопных и мобильных приложений. Работает как для iOS, так и для Android и Surface.

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

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

Профессиональный тариф обойдётся в $19 за 1 пользователя в месяц.

Origami

Origami — более узкоспециализированный инструмент прототипирования, так как доступен только для MacOS. Его функции – создавать эскизы и макеты для iPad и iPhone.

Origami содержит 4 главные панели:

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

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

Origami бесплатен, веб-версии нет.

Proto.io

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

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

Гордость разработчиков – продвинутый редактор Proto.io:

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

Разработчики предлагают привязку к учетной записи Dropbox для хранения и загрузки файлов, клиент для iOS и Android и плагины для Sketch и Photoshop.

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

Тариф «Фрилансер» стоит $24 в месяц и позволяет вести 5 проектов. Если вы не работаете в веб-студии, этого хватит с избытком.

Заключение

Этих сервисов достаточно для решения любой задачи, остается только выбрать подходящий.

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

Как выбрать сервис для создания прототипа сайта: 9 инструментов

    24 Июл, 2017 Маркетинг, Продажиинструменты для создания лендинга, лендинг, прототип

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

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

1. POP

Самый простой способ сделать прототип лендинга – это рисунок от руки. Макет рисуем на бумаге, затем фотографируем и после этого преобразуем в программе POP. Но, признаться, проще и аккуратнее нарисовать отдельный макет прямо в программе. Для этого в POP есть несколько самых необходимых функций: вставить картинку, нарисовать область прямоугольной или круглой формы, указать, где разместить текст (или прямо написать тот, который подскажет копирайтер).

Процесс создания прототипа в программе POP. Минимум функций, зато и минимум усилий

Программа простейшая. Здесь не получится крутого прототипа. Минимум инструментов для минимума задач. Но при этом POP поддерживает любой девайс: iPhone, iPad, Apple Watch, Apple TV, Android. Здесь есть также рабочая сеть, куда можно позвать коллег и клиентов, чтобы обсуждать весь нехитрый процесс. И, конечно, POP интегрируется с Dropbox.
Стоимость: от 14$ в месяц. Есть бесплатная версия.

2. Balsamiq

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

Прототипирование в Balsamiq: как на бумаге…

Программу используют непосредственно в браузере или загружают в качестве приложения Adobe AIR.
Работает на Mac или Windows, интегрируется с Google Docs.
Стоимость: от 12$ в месяц. 30 дней бесплатного тестирования.

3. InVision

Это приложение для преобразования статических макетов в прототипы и мокапы с интерактивными элементами, то есть средство «оживления» макета. InVision
имитирует полноценную работу будущего сайта. На нем можно связывать макеты отдельных страниц в прототип. Кроме того, это отличный инструмент для работы в студии. Программное обеспечение включает несложные инструменты drag-and-drop, благодаря которым процесс проектирования UX-проектов становится легче.

Invision: простые инструменты оживят ваш макет

Проект можно тестировать в браузере, на мобильнике и в режиме реального времени. Приложение позволяет подключать к обсуждению коллег и заказчиков, причем общаться можно как в чате, так и с помощью персональных приватных комментариев: дизайнеру, разработчику, заказчику.
Функционирует на основе браузера, поддерживает все браузеры. Работает с iOS и Android. Интегрируется с Dropbox, Google Drive, Box, GitHub, Slack и другими программами.
Стоимость: от 15$ в месяц. Есть бесплатная версия.

4. PowerMockup

PowerMockup – это простой набор инструментов, подходящий тем, кто любит работать в PowerPoint. Он своего рода дополнение к PowerPoint, встроен в пакет Microsoft Office и предлагает дополнительные возможности и эскизы для прототипирования. Имеется множество разнообразных UI-элементов пользовательского интерфейса и порядка 650 значков. Библиотеку форм можно пополнять своими элементами.
В PowerMockup коллеги могут работать над проектом вместе, файлы легко экспортируются в PNG, JPEG, BMP, в векторных графических символах, таких, как WMF или EPS, а также видео и документах PDF. Благодаря принадлежности Microsoft Office работа возможна также в Word и Excel. К примеру, делаем спецификацию в PowerPoint, а после открываем ее в Word.

PowerMockup: поможет сделать прототип прямо в PowerPoint

PowerMockup доступен только для Windows.
Стоимость: от 60$ (разовый платеж). 30 дней тестирования.

5. Axure

Это профессиональный UX-инструмент, помогающий разработчикам создавать уже сложные интерактивные прототипы. Делает веб-приложения, работает на Mac и Windows. Здесь удобно перетаскивать элементы, форматировать и менять размеры виджетов, создавать страницы, папки, также очень легко тестировать виды будущего лендинга под различные устройства. То есть, можно быстро визуально редактировать, а также скачивать библиотеки для виджетов. В программе имеется поддержка фреймов под iOS, а также библиотеки для iPhone, iPad и Android.
Axure удобен для прорисовки диаграмм, аннотаций, спецификаций. В программе можно делать целые сайты. Во время работы над проектом формируются файлы HTML, Javascript, CSS.

Разработка прототипа в Axure: максимум возможностей для дизайнера

Есть возможность бесплатной работы в течение месяца. Наши дизайнеры используют Axure.
Стоимость: от 300$ (разовый платеж).

6. Principle

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

Прототипирование в Principle

Работает на Mac, удобна пользователям Mac OSX благодаря похожим элементам интерфейса. Сложна из-за необходимости правильной организации файлов Sketch перед синхронизацией.
Стоимость: 129$ (разовый платеж). 14 дней бесплатного тестирования.

7. Fluid

Программа работает с мобильными приложениями. В ней можно сделать прототип для Android, iOS, а также Windows. По сути, это приложение для браузера на HTML5. Также проста в использовании, с быстрым функционалом, позволяет сразу же оценивать результат на мобильнике. Имеет библиотеку из более 1500 элементов. С Fluid легко редактировать перетаскиванием, создавать анимации, программа поддерживает жесты, действия на прикосновения, drag-and-drop, повторение шаблона на страницах и переходы между ними, библиотеки iPhone и Android, работу со своими изображениями и скриншотами. Готовый макет можно переводить в различные форматы, в том числе в PDF и HTML. Есть возможность совместного рабочего процесса с коллегами.

Читать еще:  Создание сайта самостоятельно на яндексе

Рабочее пространство для создания прототипа в Fluid

Сервис облегчает задачи программистам: с ним легче разобраться со структурой, функциональностью проекта, представить все в конечном варианте. Таким образом, оптимизируется вся разработка и связь с базой данных. В Fluid проще собирать все экраны в один проект.
Стоимость: от 15$ в месяц. Есть бесплатная версия.

8. Framer

Это инструмент для продвинутых. Здесь прототип разрабатывается в коде, c использованием языка CoffeeScript. Но не стоит пугаться, создание кода во Framer — достаточно увлекательный процесс, программа снабжена инструкциями, освоить ее может даже неподготовленный. Во Framer можно делать интерактивные анимации. Пользователям нравится то, что программа заставляет как следует продумывать логику и структуру дизайна.

Framer: прототипирование в коде

Работает на Mac. Интегрируется со Sketch и Photoshop. Во Framer возможно все в рамках JavaScript — например, использование живых данных или акселерометра .
Стоимость: от 129$ в год.

9. Flinto

Еще один давно известный инструмент. С его помощью также можно делать интерактивные прототипы. Здесь представлены все нужные инструменты для создания анимаций, а также специальная система, с помощью которой можно работать с несколькими экранами приложений. Можно выбрать две версии: Flinto Lite, а также Flinto for Mac. Последняя обладает широким функционалом для создания анимаций, мощная удобная программа. Ее быстрее всего освоить тем, кто работал на Mac OSX. Имеется плагин для Sketch, это упрощает воссоздание дизайнов. Есть недостатки: Flinto for Mac работает с шаблонами под мобильники и прототипом здесь возможно делиться исключительно с теми, кто установил Flinto for Mac.

Процесс создания прототипа в Flinto for Mac

Стоимость: от 20$ в месяц.

Какой сервис выбрать?

Ваш выбор будет зависеть от задачи и бюджета. Простой макет, который поможет собрать мысли воедино, можно создать в программе, вроде POP или PowerMockup. Для более масштабных проектов используйте многофункциональные программы типа: Axure, Fluid, Principle.

Главное, что вы должны понимать, — это то, что даже лендинг на шаблоне нуждается в прототипировании. Внимание к деталям на этом этапе предупредит появление багов.

Прототипирование сайта – важный этап

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

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

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

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

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

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

Я выбрал один из таких сервисов, чтобы посмотреть, как это работает и сделать простенький прототип сайта.

Официальный сайт: Moqups | Цена: от $13 в месяц

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

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

Так выглядит прототип главной страницы:

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

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

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

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

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

Итак прототип сайта утвержден, вы отдаете его дизайнеру и получаете готовый дизайн.

Итоги

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

Если у вас нет опыта работы со специальными сервисами типа (Moqups), а сроки жестко ограничены, то на листе бумаге вы набрасываете структуру сайта и показываете свой эскиз при встречи с клиентом или посылаете э-почтой.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 0 ):

    Для добавления комментариев надо войти в систему.
    Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

    Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

    Ссылка на основную публикацию
    Adblock
    detector