Быстрое front-end прототипирование с WordPress

0

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

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

01-featured-opt-small

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

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

О прототипировании

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

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

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

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

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

Точность и функциональность

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

Низкая функциональность, низкая точность

Такие прототипы очень легко создать. Это могут быть простые эскизы или макеты Balsamiq. Имеется минимальное взаимодействие – или вообще отсутствует – и визуально прототип имеет очень мало общего с конечным продуктом.

02-balsamiq-facebook-opt-small

Balsamiq макет Facebook

 

 

Низкая функциональность, высокая точность

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

03-notifications-psd-opt-small

Высококачественный PSD макет уведомлений

 

 

Высокая функциональность, низкая точность

Такие прототипы создать сложнее, однако вы по-прежнему можете с ними справиться без особых проблем. Перед тем, как вы создадите форму входа на сайт/восстановления пароля для крупного сайта, вам, возможно, понадобится протестировать ее работу только в виде HTML и PHP – никаких CSS, JavaScript или раздумий по поводу контекста формы.

04-twitter-opt-small

Twitter без CSS

 

 

Использование front-end фреймворков, таких как Bootstrap или Foundation, может увеличить точность, однако вам придется написать тонну CSS, чтобы сделать его подходящим для вас.

05-bootstrap-opt-small

Макет со средней точностью

 

 

Я по-прежнему рассмотрел бы такие макеты низкой точности, поскольку каждый front-end фреймворк имеет универсальный вид по умолчанию. Такие фреймворки можно взять для тестирования принципов работы, однако они не позволяют увеличить точность до того момента, когда более чувствительные клиенты смогут представить себе окончательный продукт.

Высокая функциональность, высокая точность

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

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

Реальная сложность – это выделение времени, которое тратится на создание таких прототипов. Вот где нам поможет WordPress.

Какой из них использовать

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

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

При выборе модели прототипа необходимо рассмотреть следующие факторы:

  • Насколько хорошее взаимодействие в команде?
  • Насколько крупным является проект?
  • Какой степени визуализации и технической составляющей ожидает ваш клиент?
  • Насколько хорошо вы понимаете продукт, который создаете?
  • Сколько людей вовлечено в проект (помимо программистов и дизайнеров)?

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

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

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

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

Соображения поп поводу высококачественных прототипов

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

Платформа

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

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

WordPress – хороший баланс в данном случае, поскольку он имеет массу полезных функций, объединенных с простым способом добавления страниц. Хочу подчеркнуть, что вы должны использовать ту платформу, которая кажется вам удобной. Если вам нравится Laravel, воспользуйтесь этим фреймворком.

Дизайн

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

Я рекомендую взять уже готовый администраторский HTML шаблон. Многие из этих шаблонов уже используют Bootstrap или Foundation и позволяют иметь под рукой набор элементов. Кроме того, элементы этих фреймворков уже имеют некоторую не слишком универсальную стилизацию, в чем мы как раз и нуждаемся. При помощи некоторой работы их можно легко превратить в WordPress темы, что значительно упростит последующее прототипирование.

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

Глубина функциональности

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

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

Если вы создаете приложение финансового менеджмента, вам, возможно, понадобится потратить время на то, чтобы форма “Добавить транзакцию” работала должным образом. Реальные данные, которые могут быть выбраны и переданы, позволят добавить глубины вашему прототипу.

Прототипирование с помощью WordPress

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

Мне нравится выбирать готовые администраторские HTML темы, которые близки к тому, что именно мы получим в финальном варианте. Вы можете найти массу премиальных администраторских тем на Themeforest, однако вы можете также найти некоторые бесплатные темы с помощью поиска в Google. Для своих примеров я воспользуюсь бесплатной администраторской темой под названием AdminLTE.

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

Законченный пример

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

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

Поделиться: