Toderelt.ru

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

Прототипирование сайтов

Прототипирование сайтов

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

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

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

Примеры разработанных прототипов

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

Говоря простыми словами, прототип отражает процесс перемещения клиента по сайту, следуя всем необходимым шагам, предваряющим достижение удовлетворения.

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

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

InVision

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

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

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

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

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

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

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

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

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

Создание прототипа сайта – библиотеки Invision

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

Согласно исследованию от компании UXtools.co, самые популярные инструменты для создания прототипов в 2020 году были:

Исследование инструментов прототипирования от UXtools.co

Давайте рассмотрим первые 7 из них – поговорим о ключевых преимуществах, стоимости и сложности интерфейса.

Figma

Интерфейс программы Figma

Онлайн-сервис, который просто взорвал рынок в 2020 году. Доступ к прототипу из окна браузера и возможности совместной работы не хватало многим командам. Есть также desktop-приложение, но его используют реже. Все файлы хранятся в облаке Figma, поэтому нет необходимости перекидывать их между коллегами.

Основной минус: необходим интернет (кроме десктопной версии, но потом все равно придется отправлять результаты в облако). Также приложение с трудом импортирует файлы других программ (например, если вы решили перенести файлы из Sketch).

Стоимость: есть бесплатная версия до двух редакторов и до трех проектов. Далее за каждого дополнительного редактора или новый проект будет списываться оплата в 15$ месяц или 120$ за год.

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

InVision

Интерфейс программы InVision

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

Почему на втором месте моего личного рейтинга? Из-за ограниченной бесплатной версии и более сложного интерфейса. Все элементы приходится отрисовывать с нуля или импортировать из другой системы.

Стоимость: бесплатная версия до 3 документов и до 10 редакторов. Далее от 9,95$ в месяц и 95,4$ за год.

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

Adobe XD

Интерфейс программы Adobe XD

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

Из плюсов: часть экосистемы Creative Cloud, ориентирован на быстрое наполнение прототипов контентом. Есть русская версия. Файлы Sketch можно открывать в Adobe XD.

Читать еще:  Как открыть ZIP онлайн правильно: ТОП 3 способа

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

Стоимость: есть бесплатная версия для одного редактора и одного проекта. Также сервис бесплатный для тех, у кого есть подписка Creative Cloud. Платная версия от 1 481 рубля в месяц.

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

Sketch

Интерфейс программы Sketch

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

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

Стоимость: есть бесплатная версия на месяц, затем от 99$ в год. Причем покупаются именно обновления, можно по истечении срока пользоваться программой, но без обновлений.

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

Principle

Интерфейс программы Principle

Еще одно приложение для Mac OS, ориентированное на создание анимированных прототипов. В него можно импортировать файлы из Figma и Sketch для наложения дополнительной анимации.

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

Стоимость: 14 дней бесплатной версии (причем считаются именно рабочие дни, а не календарные), далее 129$ в год.

Уровень сложности: средний. Можно даже сказать легкий, если сравнивать с созданием анимации в Adobe After Effects.

ProtoPie

Интерфейс программы ProtoPie

Еще один инструмент, ориентированный на создание интерактивных прототипов. Работает для Mac и для Windows. Позволяет использовать датчики в смартфонах: гироскоп, камера, микрофон и др. Можно спроектировать прототипы взаимодействия между устройствами, например, чат-приложение. Есть импорт из Figma и Adobe XD.

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

Стоимость: 30 дней бесплатной версии, далее 11$ в месяц или 129$ в год.

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

Axure

Интерфейс программы Axure

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

Минусы: меньше возможностей работы с графикой (чем у того же Sketch), стоимость выше, чем у тех сервисов, что рассмотрены ранее.

Стоимость: есть бесплатная версия на месяц, а затем 420$ в год.

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

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

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

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

Вариант 1: Wireframe CC

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

После регистрации вы сможете сохранять часть своих макетов и делиться ими с коллегами и/или заказчиками. Также созданные прототипы можно скачивать в виде обычного изображения.

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

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

Wireframe-CC-interface-i-gotovii-prototip-saita

Разница между платной и бесплатной подпиской в том, что вы можете работать сразу над несколькими макетами в одном аккаунте (при платной подписке). Также некоторым элементам в премиум-аккаунте можно задавать анимацию и т.д. Всё это можно без проблем экспортировать в PDF и PNG, в то время, как во free-версии экспорт сильно ограничен. Платная подписка, на момент написания этой статьи, стоила 15$ в месяц.

Читать еще:  Как стримить на Ютубе правильно: лучшие способы

Вариант 2: Wires

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

Glavnaya-stranitza-na-saite-Wires

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

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

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

Sozdanie-novogo-proekta-na-Wires

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

Instrumenti-dlya-sozdaniya-prototipa-saita-v-Wires

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

Nastroika-parametrov-elementov-v-redaktore-Wires

Сервис очень прост и имеет базовые возможности для редактирования первичного дизайн-макета. Некоторые дополнительные возможности, а также снятие ограничений по количеству работ в аккаунте можно убрать. Цена за месяц премиум-подписки – 10$.

Вариант 3: InVision App

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

Glavnaya-stranitza-InVision-App

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

Rabota-s-prototipom-v-InVision-App

Возможно, некоторые пользователи могли бы предположить, что стоить такое «удовольствие» будет немало. На самом деле здесь есть только один вариант подписки, которую нужно оплачивать каждый месяц. Цена – 15$.

Вариант 4: NinjaMock

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

NinjaMock-stranitza-s-prototipom

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

  • Создание первого пробного макета – бесплатно;
  • Создание одного проекта – 4$;
  • Создание трёх и более проектов 10-12$.

Primer-maketa-saita-v-NinjaMock

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

Вариант 5: Moqups.com

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

Moqups.com-glavnaya-stranitza

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

Читать еще:  Как сделать стилус для смафртона из обычных предметов?

Primer-rabochey-oblasti-v-Moqups.com

Для небольшой задачи есть бесплатный аккаунт. В данном случае из библиотек сервиса вам будет доступно только 300 элементов. Также бесплатный тариф позволяет работать только с одним проектом.

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

Вариант 6: Photoshop

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

Primer-razrabotki-saita-v-Photoshop

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

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

Улучшить интерфейс сайта или приложения

Сервисы для работы с внешним видом интерфейса проекта: анимация элементов, настройка блоков навигации.

Коллекция решений для интерфейса CodyHouse Framework

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

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

Решения для интерфейса

Интерфейс каталога

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

Есть много бесплатных вариантов, платные доступны в Pro-версии, она стоит 89 долларов в год

Улучшенный MV-фреймворк JSBlocks beta

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

Обычно фреймворки обрабатывают только клиентскую часть, но есть платформа JSBlocks beta — комплексный улучшенный фреймворк, который работает еще и с базами данных и службами.

JSBlocks beta данных подходит для создания проектов любой сложности — простых пользовательских интерфейсов и комплексных приложений, за это отвечает модуль jsblocks MVC (Model-View-Collection). Примеры проектов на GitHub: TodoMVC и E-shopping.

Код запросов пишется на HTML, так что не надо изучать новый синтаксис. JSBlocks beta легко освоить, для использования достаточно скопировать и вставить код элемента, продолжить работу с документацией и стартовым шаблоном. Есть API.

Как работать в JSBlocks beta: обучение.

Product Tour — отзывчивый тур по сайту или приложению для пользователей

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

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

Для этой цели существует Product Tour — инструмент для создания пошагового руководства по использованию сайта или приложения. Он реализован с помощью CSS и JQuery, подстраивается под размер устройства пользователя.

Пример механики демонстраций

Программирование веб-сайта

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

Готово. Вы восхитительны!

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

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

голоса
Рейтинг статьи
Ссылка на основную публикацию
ВсеИнструменты
Adblock
detector