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

Как сделать прототип веб-страницы: 15 лучших сервисов

Как сделать прототип веб-страницы: 15 лучших сервисов

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

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


Так может выглядеть прототип страницы

Что такое инструменты для прототипирования — и зачем они нужны не-дизайнерам?

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

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

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

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

Стадия 1. Начинаем рисовать

К этой фазе мы подходим с общим знанием о вложенности функций и примерным представлением о переходах между экранами. Можно собирать прототип.

Далее опишу скорее не строгую последовательность действий, а дам список советов, к которым пришел пока работал над проектами.

От lo-fi к hi-fi. Речь о степени детализации и стилизации экранов прототипа. В самом начале проработки, как бы вам ни хотелось, постарайтесь не застревать на одном экране, доводя его до «идеала».

Я застревал, поэтому делал прототип столько, сколько получилось. А клиент, на согласованиях уровня идей (прототип именно их и отражает), не вдается в детали, ему важно увидеть что вы уловили смысл (проверено на нескольких заказчиках).

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

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

Читать еще:  Саундтреки для Prototype

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

  1. От дизайнеров Facebook — мой выбор в категории iOS подборок.
  2. Приложение On Shore. Еще удобнее брать целые экраны, убирая ненужное и добавляя нужное. Увидел этот шаблон слишком поздно, с ним варфреймы получились бы ещё стильнее. Прототип под iOS.
  3. Лучший Android-набор. С примерами расположения элементов. Выручил меня неоднократно. Создан Great Simple Studio.
  4. Шаблоны приложений — русскоязычный сайт об XD, с подборкой классических разделов мобильных приложений.

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

На практике, после проработки 8-9 экранов эти фреймворки дадут о себе знать, потребуют повторного использования. Придерживайте эти болванки рядом с основной рабочей областью и вставляйте как каркас очередного экрана.

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

Тексты Lorem ipsum не создают проблем, хоть и кажутся дурацкими, в условиях ограниченного времени подходят для наших задач. Конечно, «боевые» тексты проекта лучше, но оставьте их на этап тюнинга. Чтобы рыба текста была интереснее, идите к Джулсу из Криминального чтива.

Включаем Prototype. Одноименный режим Adobe XD. В нем мы присваиваем элементам экраны действия, которые мы от них хотим получить. Стрелка «назад» возвращает на предыдущий экран, кнопка «сохранить» сворачивает клавиатуру и отправляет данные на сервер. Взаимодействия в XD тестируются окном предварительного просмотра (Cmd-Enter), которое дает достаточную обратную связь, чтобы убедиться, что приложение работает так, как мы того хотим.

Другие инструменты

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

Justinmind

  • Большой набор элементов;
  • Добавление элементов: перетаскивание;
  • Возможность предварительного просмотра;
  • Есть возможность делиться ссылкой, комментировать;
  • Возможность совместного редактирования;
  • Экспорт в формате HTML для отображения интерактивности элементов;
  • Создание шаблона и его хранение в библиотеке;
  • Каждому пользователю предоставляется 300 МБ, и он может пригласить так много рецензентов, сколько необходимо.
  • В бесплатной версии можно было протестировать только ограниченный функционал;
  • Нет веб-версии;
  • Нельзя редактировать размер элементов вручную, только через настройки (не удобно).

Marvel

  • Есть веб-версия;
  • Очень прост в использовании;
  • Имеются готовые макеты в Sketch библиотеке;
  • Совместная работа над проектом;
  • Возможность комментировать и делится ссылкой.
  • Очень ограниченный функционал;
  • Рассчитан больше на дизайн сайтов;
  • Небольшой выбор элементов в библиотеке.

Invision

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

Mockup

  • Web-версия;
  • Интуитивно понятный интерфейс;
  • Большая библиотека элементов;
  • Удобно в бесплатной версии быстро сделать макет, особенно если не нужно сохранять;
  • Проработана детальная кастомизация элементов: размеры, цвет фона, цвет шрифтов, скругление элементов и т.д;
  • Есть все основные элементы для веб страниц (чекбоксы, серчбары, кнопки, поля и т.д.);
  • Удобное перетаскивание элементов, подсвечиваются расстояния между элементами;
  • Работает автосохранение;
  • Есть возможность настройки интерактивности объектов.
  • Бесплатная версия публикует в общий доступ твой прототип и не разрешает его скрывать;
  • Без сохранения невозможно закинуть свою картинку или иконку;
  • Невозможно залить свой шрифт;
  • Ограниченная интерактивность объектов следующими действиями:
    • Переход на другую страницу;
    • Переход на родительскую страницу;
    • Переход по URL;
    • Переход на следующую страницу;
    • Переход на предыдущую страницу;
    • Вернутся назад;
    • Отображать видимость элемента;
    • Отображать элемент;
    • Спрятать элемент;
    • Скролл к объекту (т.е. на чекбоксы не нажимаются, скролл бар тоже как картинка и т.д.).
  • Нет превью в другом браузере;
  • Отсутствует пипетка с наведением на соседний элемент.
Читать еще:  Утилиты для Prototype

Axure

  • Удобный пользовательский интерфейс;
  • Прототип можно расшарить через облако axure;
  • Богатый функционал для динамики элементов, нажимаются чекбоксы, радобаттоны, кнопки, серчбары и т.д;
  • Проработана детальная кастомизация элементов: размеры, цвет фона, цвет шрифтов, скругление элементов и т.д;
  • Удобное перетаскивание элементов, подсвечиваются расстояния между элементами;
  • Большая библиотека элементов;
  • Можно легко загружать свои картинки, скриншоты, иконки, шрифты;
  • Есть превью в браузере (любом установленном на PC);
  • Можно создавать связи между элементами.
  • Нет веб-версии, только desktop;
  • Нет бесплатной версии, только пробная;
  • Возможность оставлять комментарии только создателем/редактором файла.

Proto.io

  • Есть веб-версия;
  • Удобство выбора типа девайса для создания нового проекта;
  • Большая библиотека элементов (кнопки, радиобаттоны, чекбоксы, списки и т.д.);
  • Удобный интерфейс расположения элементов, рисуются расстояния, магнитятся друг к другу;
  • Удобное масштабирование;
  • Удобное редактирование элемента, цвета, тени, скругления и т.д;
  • Большой выбор интерактивных действий с объектами;
  • Логирование действий пользователя, можно вернуться назад – вперед;
  • Можно загрузить свой шрифт, или пользоваться из библиотеки;
  • Анимация переходов между страниц;
  • Для одного документа можно создать несколько представлений экрана, удобно для * настройки переходов и создания прототипа для полноценного приложения;
  • Встроены UX/UI элементы для мобильных девайсов (кнопки назад, домой, меню);
  • Есть Drag&Drop окно для своих картинок иконок.
  • Отсутствует Пипетка с наведением на соседний элемент;
  • Нет бесплатной версии, только пробная на 15 дней.

Сетка и ширина экрана

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

Для простоты мы создадим прототип для экрана шириной 1 140 пикселей и больше. Чтобы все элементы будущего сайта выглядели лаконично и ровно, при проектировании мы используем сетку из CSS-фреймворка Bootstrap 4.

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

Чтобы сэкономить время и не задавать вручную все направляющие для макета, создадим их автоматически: выбираем пункт меню Arrange → Grid and Guides → Create Guides. В появившемся окне задаём размеры.

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

Всегда ли необходимо проводить ui- тестирование

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

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

Интерактивные прототипы

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

Читать еще:  Prototype 2 - прохождение, гайд, руководство, мануал, FAQ

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

Основные преимущества интерактивного прототипа сайта:

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

Наряду с преимуществами существуют и некоторые недостатки:

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

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

Artifact: User-Interface Prototype

Purpose

The following roles use the user-interface prototype:

  • requirements specifiers, to understand the user interface for a use case
  • system analysts, to understand how the user interface impacts the analysis of the system
  • designers, to understand how the user interface impacts and what it requires from the «inside» of the system
  • those who test the classes, to plan testing activities

Properties

You can make three basic kinds of prototypes:

  • Drawings (on paper)
  • Bitmaps (drawing tool)
  • Executables (interactive)

In most projects, you should use all three prototypes, in the order listed above.

Timing

The user-interface prototype is built early, during Inception or in the beginning of the Elaboration phase, and before the whole system (including its «real» user interface) is analyzed, designed, and implemented.

Note that the main purpose of creating a user-interface prototype is to be able to expose and test both the functionality and the usability of the system before the real design and development starts. This way, you can ensure that you are building the right system, before you spend too much time and resources on development.

In order to achieve this, early testing follows that the prototype must be significantly cheaper to develop than the real system, while having enough capabilities to be able to support a meaningful use test.

Responsibility

A user-interface designer is responsible for the integrity of the user-interface prototype, ensuring that the prototype contributes to a usable user interface according to the requirements from use-case storyboards and boundary objects.

Tailoring

Decide whether a prototype is suitable for your project. Decide whether the prototype includes drawings, bitmaps, and/or an interactive executable. Decide on how much of the user interface to prototype, and the depth and realism of any interactivity. Decide whether the prototype is purely throwaway, or whether some aspects are intended to evolve into the end product.

Ссылка на основную публикацию
Статьи c упоминанием слов:
Adblock
detector