Как создать прототип сайта? типы и методы разработки. 8 инструментов прототипирования (онлайн и оффлайн)

Прототип – это …

«Прототип» – сложносоставная словесная конструкция. В переводе с древнегреческого «πρῶτος» обозначает «первый» и «τύπος» — «оттиск, отпечаток».

Прототип в литературе

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

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

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

Пример использования прототипов в художественных произведениях:

1. Борис Полевой, «Повесть о настоящем человеке», прототип летчика Мересьева – реальный герой Великой Отечественной войны Алексей Маресьев;
2. Михаил Булгаков, «Мастер и Маргарита», прототип главного героя – сам писатель;
3. Виктор Драгунский, «Денискины рассказы», прототип мальчика Дениски – сын писателя.

На фото: слева – иллюстрация к повести Полевого, в середине и слева – олицетворение главного героя – летчик Маресьев:

Прототип в психологии

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

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

Следовательно, понятие «прототип в психологии» можно сформулировать так:

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

А почему мы так решили? Да потому что его поведение совпало с нашим представлением о типичном образе поведения трудоголика, т.е. мы использовали прототип (шаблон) и перенесли его на реального человека.

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

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

Допустим, ребенок любил ходить в школу, ему было интересно, весело. У него сформировался прототип школы как объекта сугубо положительного. Но вот пришла новая учительница, неумная и неадекватная (бывают и такие!), и стала ребенка унижать перед одноклассниками, придираться и т. д.

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

Интерактивный UX-прототип: разбор на реальном примере +14

• 03.03.17 01:58

•
izhanov
•
#323156
•
Хабрахабр

•

•

6600

Веб-дизайн, Usability, Accessibility, Прототипирование

Что дает UX-прототип?

• Значительно сокращает ресурсы по разработке (на 20-40% меньше программно-дизайнерских доработок и изменений).
• Сокращает количество версий продукта (бета может быть уже фактически 3-4 версией).
• Снижает количество ошибок проектирования.
• Дает возможность команде, партнерам и инвесторам быстро показать как будет выглядеть продукт.

В чем отличие UX-прототипа от традиционного

1) Акценты и приоритеты

• размером элементов;
• цветом;
• активностью побуждающих текстов;

Пример: Картинка выше. Показываем на сайте авиабилетов первым делом виде текста УТП — продажа билетов в кредит. Если результаты тестов покажут, что решение неудачное — перенесем вниз.2) Адаптивный или фикс? Размер рабочей областиПример: Видим какова оптимальная ширина страницы и что показывать на мониторах, которые шире (фоновая картинка).3) Элементы навигации по сайту + фильтры, списки и т.п.Пример: CTA-кнопка с реальным текстом и моделированием моментов взаимодействия (изменение цвета по наведению — картинка справа).4) Прелоадеры и подгрузка контентаПример: Прелоадер на странице поиска билета. В прототипе также зашито время его отработки 10 секунд, что близко к реальному поиску.5) Контент и структура сайта6) Картинки, их размер и качествоПример: В демонстрационном прототипе вставлена фоновая картинка. Если она покажет себя хорошо, то будет использована на сайте. Ее размер, вес и время загрузки тоже близки к эксплуатационным, но по ходу теста могут быть изменены.7) Служебные сообщенияПример: Ответы системы в прототипе на последнем последнем этапе.8) Формы и поля ввода

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

Пример: Форма ввода данных для покупки билетов. Также смоделирована возможность залогинивания на месте и выбора паспортных данных из прошлых покупок.9) Тактильность и мобильность10) Технические возможностиПример: Чекбокс «открытая дата». При его нажатии может показываться специальная форма с датами на второй странице. Сотрудники партнерской системы Амадеос могут оценить насколько реализуема эта схема.

Как меняется роль дизайнера, программистов и ТЗ?

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

Итого

1. Позволяет выявить сложности (с контентом, согласованием, терминологией, функционалом и т.д.) на начальном этапе и решать их параллельно с другими процессами.
2. Дает быструю обратную связь, на основе которой можно внести коррективы без дизайнера и программиста.
3. Помогает сразу определиться с важными моментами в интерфейсах и конфигурации. Меньше ответвлений и версий продукта.

ПрототипКак получить максимальный доход с рекламных систем на своем сайте

iPlotz

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

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

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

Напоследок ещё один небольшой обзор бесплатных сервисов для прототипирования:

• NinjaMock – предоставляются основные векторные элементы для строительства макета: прямоугольники, эллипсы, кривые, формы, меню и т.д. Поддерживает все популярные платформы и ОС.
• Mockingbot – сервис для создания прототипов мобильных приложений. Бесплатная версия позволяет вести один полноценный проект. Сервис имеет все необходимые графические элементы, чтобы создавать макеты для AppStore.
• CogTool – сервис создает довольно простые прототипы пользовательского интерфейса. Фишка инструмента в том, что он дает прогноз эффективности макета, а также вычисляет необходимое время на реализацию проекта.

Макет, прототип, серийный образец и вот это всё — учим термины

Tutorial

Чем отличаются друг от друга макеты, прототипы корпусов для РЭА и для чего вообще нужны все эти опытные образцы? Версия Формлаба.

Макет

Wikipedia Макет по геометрическим характеристикам только приближается к серийному изделию. Он изготавливается по несерийным, непроизводственным технологиям и практически из чего угодно (включая палки пластилин ), его задача — проверить дизайн и, может быть, вес реального устройства. Макет может не совпадать с конечным продуктом по реальным размерам, но по пропорциям — должен.

Создание интерактивного прототипа

Ниже мы рассмотрим пример создания прототипа с различными переходами.

Выпадающее меню, открываемое по нажатию на кнопку

Итак, для начала мы сделаем два фрейма: первый экран и меню, которое будет открываться по клику на иконку:

Исходные фреймы

Обратите внимание, что фрейм меню мы располагаем обособленно от фрейма экрана — его расположение в прототипе настраивается при создании события. 1

Выделяем иконку меню и переходим во вкладку Prototype в правой панели

1. Выделяем иконку меню и переходим во вкладку Prototype в правой панели.

2.  Для начала нам надо выбрать триггер в разделе Interaction: вместо None ставим On click (переход при нажатии).

Выбор триггера

3. Теперь надо выбрать вид взаимодействия. Так как задача — показать окно меню поверх экрана, выбираем Open Overlay.

Триггер выбран, Выбор взаимодействия

4. Когда вид взаимодействия выбран, требуется указать целевой фрейм. Выбираем его из списка:

Выбор целевого фрейма

В списке показываются все доступные фреймы

Обратите внимание, что фрейма с экраном в этом списке нет

Список доступных фреймов

5. На данном этапе нам предлагается выбрать несколько настроек, доступных для данного вида взаимодействия (Overlay) — это расположение, настройка «Закрыть при клике в свободную область» («Close when clicking outside») и фон за всплывающим окном («Add background behind overlay»)

Настройка отображения

6. Выбираем анимацию в интуитивно понятном интерфейсе

Настройка анимации

7. У нас также есть кнопка «Закрыть». Выделим ее и добавим событие, закрывающие окно Close Overlay:

Выбор триггера

Выбор взаимодействия

Событие добавлено

Обратите внимания, что взаимодействие Close Overlay не требует указания целевого фрейма — это и есть наш выбранный фрейм.

8. Переходим в режим презентации и смотрим работу прототипа.

Просмотр прототипа (до клика)

Просмотр прототипа (после клика)

Видео работы:

Замена фрейма по нажатию кнопки клавиатуры

Подробное описание работы с клавиатурой читайте в разделе Работа с клавиатурой в прототипах Figma

Интерактивные прототипы Фигмы позволяют настроить взаимодействие не только с курсором (мышью), но и с клавиатурой.

Для настройки взаимодействия с хардварными кнопками в Figma используется триггер Key/Gamepad.

Настройка клавиатуры в прототипе Figma

К кому обращаться?

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

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

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

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

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

https://youtube.com/watch?v=u4F1-yDBoYkVideo can’t be loaded because JavaScript is disabled: Инструменты для прототипирования (https://youtube.com/watch?v=u4F1-yDBoYk)

Существует множество сервисов и программ для прототипирования, но мы рассмотрим только самые популярные.

Balsamiq

Быстрый и простой инструмент для создания каркасов сайтов.

https://youtube.com/watch?v=xCQ0GBITgCkVideo can’t be loaded because JavaScript is disabled: Как создать прототип сайта в Balsamiq Mockups (https://youtube.com/watch?v=xCQ0GBITgCk)

Principle

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

https://youtube.com/watch?v=c_y8JNrivnMVideo can’t be loaded because JavaScript is disabled: Урок по Principle: Анимация для дизайнера (https://youtube.com/watch?v=c_y8JNrivnM)

Moqups

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

https://youtube.com/watch?v=hiC5XgK9ABQVideo can’t be loaded because JavaScript is disabled: Продающий прототип в Moqups 2016 (https://youtube.com/watch?v=hiC5XgK9ABQ)

InVision

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

https://youtube.com/watch?v=cspvDc5ZgF0Video can’t be loaded because JavaScript is disabled: Обзор программы InVision Studio | 1 из 2 (https://youtube.com/watch?v=cspvDc5ZgF0)

Axure

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

https://youtube.com/watch?v=LLNzIsV05V0Video can’t be loaded because JavaScript is disabled: Быстрое прототипирование в Axure (https://youtube.com/watch?v=LLNzIsV05V0)

Сравнительная таблица инструментов

ПО	Вид	Цена	Экспорт	Возможность командной работы	Проектирует для	Загрузка готовых элементов интерфейса	Черновые макеты / каркасы / вайрфреймы	Дополнительно
Balsamiq	Пробная веб-версия и приложение для MacOS, Windows	Бесплатно 30 дней. Далее $9 или купить полностью за $89	По уникальной ссылке	Нет	Веб и мобильных устройств	Да	Да	Анимация элементов интерфейса из готовой библиотеки, переходы по экранам
Moqups	Веб-приложение + мобильное приложение для просмотра готового дизайна	Бесплатная пробная версия. Неограниченное количество проектов и возможность комментирования за $ 13 в месяц	PNG, PDF. Google Drive и DropBox.	Да	Веб и мобильных устройств	Нет	Да	Визуальный дизайн
InVision	Веб-приложение	Бесплатно	По уникальной ссылке	Да	Android. IOS	Макеты Photoshop и Sketch	Нет	Визуальный дизайн, анимация переходы по экранам, поддерживает жесты
Axure	Приложение для Windows и MacOS	Бесплатная пробная версия 30 дней. Далее от $29 за человека в месяц	HTML и PDF. Возможность выгрузить проекты в облако и делиться через уникальные ссылки	Есть в платной версии	Веб и мобильных устройств	Нет	Да	Анимация, переходы по экранам
Principle	Приложение для MacOS	Пробная версия две недели, далее $129	Экспорт в видео и gif. Возможность просмотреть прототип на мобильном устройстве	Нет	Веб и мобильных устройств	Да	Да	Анимация. визуальный дизайн, переходы по экранам, поддержка разных типов взаимодействия (drag-and-drop, долгое нажатие, скролл)

MODX AjaxForm — документация и примеры построения контактных форм

Полный цикл создания устройства и работа с фабриками в Китае. Доклад Яндекса

Меня зовут Андрей Холодный. Весь мой опыт связан с телекомом: я работал практически во всех крупных провайдерах связи и даже руководил своим стартапом. На моих проектах регулярно возникали задачи разработки и выбора поставщиков роутеров и ТВ-приставок. С конца 2018 года я применяю этот опыт в Яндексе: руковожу командой, которая координирует разработку и производство устройств с Алисой.
Под катом — конспект моего недавнего доклада. В нем два больших блока: про этапы разработки устройства и про общение с фабриками в Китае. Надеюсь, конспект будет полезен тем, кто начинает думать о производстве собственных устройств.

Разбор UI/UX на примере прототипа в Figma и основные принципы

Из песочницы

Кому адресована статья

В данной публикации я хочу помочь начинающим и «не очень» бизнес-аналитикам, менеджерам проектов, владельцам продуктов, желающим сделать свой первый сайт и всем-всем, кому надо сделать макет сайта или приложения, а он не знает с какой стороны подступиться к делу.
В сети интернет масса материалов на эту тему, но в большинстве своем они или слишком поверхностны, либо требуют знания терминологии и опыта работы с конкретной системой для создания прототипов. Не претендуя на «создание золота», я все же надеюсь, что моя статья будет полезна и интересна желающим погрузиться в славный мир создания макетов с помощью современных средств, а не путем создания рисунков в Paint, Word или Excel. То есть, эта статья для «чайников» в части создания рабочих прототипов.
Сначала я кратко опишу, что такое прототип и UI/UX дизайн, потом опишу инструменты для их создания, а в конце статьи пошагово разберу небольшой пример создания прототипа в одном из инструментов – Figma.

Что такое прототип в литературе

Это слово пришло в нашу речь из древнегреческого языка. Его можно перевести как «первообраз». В том, что такое прототип, легко разобраться, вспомнив сюжет знаменитого романа «Отцы и дети». Прототипом главного героя в произведении Тургенева, по мнению многих литературоведов, является Добролюбов. Хотя есть мнение, что определенные черты Базарова автор создал под впечатлением других своих современников – Преображенского и Павлова.

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

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

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

Другие примеры из литературы:

• «Мастер и Маргарита». Прототипом главного героя является Булгаков.
• «Собачье сердце». У профессора Преображенского есть несколько прототипов, современников писателя. Среди них хирург С. Воронов, врач А. Замков, биолог И. Иванов, физиолог И. Павлов.
• «Повесть о настоящем человеке». Прототип главного героя произведения Бориса Полевого – Алексей Маресьев.

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

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

В кинематографе значение слова «прототип» полностью соответствует значению литературного термина. Сценарист создает образ будущего киногероя на основе характерных особенностей реально существующей личности. А в 2007 году на экраны вышел телевизионный фильм «Ликвидация». Прототипов у главного героя этой картины несколько. Среди них подполковник милиции Давид Курлянд, сотрудник УГРО Виктор Павлов.

Основные принципы прототипирования

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

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

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

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

Тестировать, а не валидировать

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

Не наступайте на эти грабли и будьте готовы к любому результату.

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

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

Прототип практически ничего не говорит о каждой конкретной странице

Да, сформировать доверие к проекту и вызвать определённые эмоции ничуть не менее важно, чем правильно расположить блоки на странице. А доверие и правильные эмоции — епархия двух специалистов: редактора (он же контентщик) и дизайнера

Одна сторона медали — текст определённого объёма, правильная подача, эмоциональная окраска, другая — грамотно подобранная графика, шрифты, цвета, расположение и оформление. Но продаёт вся медаль, а не какая-то её сторона. Или не продаёт.

Что полезнее для заказчика или фокус-группы: не очень аккуратный «почти конечный» дизайн страницы с «почти конечными» текстами, цветами, фотками, шрифтами — или чёрно-белая страничка с текстом из «Яндекс.Рефератов» и прямоугольниками с подписью «фотка улыбающегося ребёнка»?

Задачи прототипирования

Прототипирование представляет собой этап, в ходе которого создается упрощенная версия будущего продукта.

Упрощенная версия может создаваться для того, чтобы понять:

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

Также прототип бывает нужен, чтобы увидеть: удастся ли вообще получить те характеристики будущего продукта, которые хотелось бы.

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

7 площадок для дизайна сайта. Что выбрать?

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

Сервисы в этой сфере разделены на две группы по основному функционалу: к первой относятся площадки, дающие возможность создать непосредственно дизайн — Figma, Adobe XD, Sketch, InVision Studio — в них вы не соберете сайт, но разработаете его прототип и дизайн-макет. Вторая группа сервисов имеет расширенный функционал, здесь дизайнер может создать сайт с нуля: от прототипа до реализации — Pixli, Webflow и Tilda

Figma, Adobe XD, Sketch, InVision Studio: разработка дизайна и прототипов

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

Язык основанный на прототипах?

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

Точнее, свойства и методы определяются в свойстве  функции-конструктора объектов, а не в самих объектах.

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

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

То есть относится к тому же объекту, что и .

Давайте посмотрим на пример, чтобы стало понятнее.

Просмотр и экспорт прототипа

Готовый прототип можно сразу открыть в браузере, поделиться через серверы Axure или экспортировать как HTML.

Просмотр

Посмотрите, как выглядит и работает прототип в браузере с помощью Preview.

Вот пример из Axure в Google Chrome. Панель навигации справа показывает структуру сайта и при необходимости позволяет оставить комментарии.

Публикация и экспорт

Готовый прототип легко опубликовать на сервере Axure, а затем просто дать ссылку заказчику. Также можно сгенерировать HTML-файлы и использовать их локально или на своём сайте.

Нажимаем кнопку Publish в правом верхнем углу и выбираем Publish to Axure Share, если нужно опубликовать прототип, или Generate HTML Files, если нужно скачать его на компьютер.

Подведем итоги

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

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

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

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

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

@ivashkevich

01.09.2017 в 17:04

4753

+40