Бери и делай: как с нуля создать сайт для любого проекта

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



Loading...
 

В чем суть

О проектировании говорят многие: как пользоваться Axure или Sketch, какие функции должен содержать сайт, как правильно спроектировать страницу товара. Это все, безусловно, очень полезно, но не показывает полную картину происходящего. Чтобы спроектировать большой сайт, нужно потратить сотни часов на исследования, прототипирование и разработку подробного ТЗ. В этой статье я впервые в Рунете покажу все этапы проектирования и результаты по ним, полный динамический прототип (более 150 прототипов) и большое ТЗ (более 200 страниц описания). Все это мы будем делать на примере проектирования аналога крупнейшей в мире Ecommerce площадки Alibaba.com.

Знающие люди сейчас начнут говорить про MVP (минимально работающий продукт) и про вред ТЗ на сотни страниц. На самом деле, проектирование не мешает создавать MVP, а помогает.

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

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


Сценарии поведения

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

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


Динамический прототип

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

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

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

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

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


Контроль качества

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

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

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

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


Техническое задание

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

Особые требования в ТЗ:

  1. Архитектура сайта — прорабатывает архитектор
  2. Требования по нагрузкам — прорабатывает архитектор и тимлид
  3. Сервера и инфраструктура — прорабатывает системный администратор, архитектор и тимлид
  4. Требования по безопасности — прорабатывает специалист по безопасности и тимлид
  5. Требования по SEO — прорабатывает интернет-маркетолог
  6. Требования к дизайну — прорабатывает дизайнер
  7. Требования к верстке — прорабатывает верстальщик
  8. Микроразметка — прорабатывает верстальщик
  9. UML, диаграммы робастности — прорабатывает проектировщик и программист
  10. Разграничение прав доступа — прорабатывает проектировщик

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

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

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

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

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


Подводя итог

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

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

Многие проекты до сих пор начинают делать без проектирования. Силами менеджера проекта или дизайнера. Это путь бесконечных переделок и бесполезной траты огромных денег. Я лично запускал несколько проектов. И когда-то пытался делать это без проектирования. После таких экспериментов мне часто вспоминалась хорошая фраза: «Я не настолько богат, чтобы покупать дешевые вещи». Она отлично подходит по смыслу.


1216 common\models\News

0 Комментариев



или зарегистрируйтесь, что бы оставить комментарий!



Популярные новости

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

Россия вошла в первую десятку стран, где были запущены сервисы Apple Pay и Samsung Pay. Аналитики уже о том, как внедрение новых технологий изменит индустрию платежей. Руководитель компании Дмитрий Коплович пошел немного дальше и выделил несколько глобальных бизнес-трендов, о которых говорит распространение этих систем.Чего ждать в следующем году?

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

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

За первое полугодие 2016 года россияне совершили на 17% больше онлайн-покупок, чем за аналогичный период прошлого года, сообщают аналитики . При этом количество заказов на самой площадке превысило 1,4 млн. Чаще всего покупали кроссовки, смартфоны и чехлы для них, а также детские игрушки и женские платья.О том, кто и когда покупает в российских интернет-магазинах, рассказывает Евгений Иванов, руководитель портала товаров и услуг Tiu.ru.

ВЫ ЕЩЕ НЕ ЗАРЕГИСТРИРОВАНЫ НА BIGSMI.COM?????!!!! нажмите справа вверху регистрация,вбейте все необходимые данные и ваши соц сети. Настройте RSS ленту!!! Зайдите в основной партнерский кабинет САЙТ ГДЕ НАСТРОИТЬ АВТОМАТИЧЕСКИ RSS ЛЕНТУ BIGSMI.COM ВНИМАНИЕ. Для автоматического заработка после подключения rss ленты необходимо постоянное расширение кругов ваших друзей и подписчиков. Без реальных людей у вас в друзьях автоматические репосты не приносят желаемой прибыли так как нет переходов и регистраций в вашу первую линию, а значит не растет ваша сеть. Расширяйте круги ваших потенциальных партнеров в вашей многотысячной сети. Заработок в Big House Center не ограничен. Изучите компанию Big House Center для получения больших источников дохода одновременно с bigsmi.com

Каждое утро Rusbase и рассказывают о трендах в мире бизнеса и технологий на цифрах.

Госдума в третьем чтении закон, который предполагает взимание НДС (18%) с операций в интернете по продаже иностранными компаниями электронных услуг, музыкальных произведений, книг и видеопродукции.

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

Прогнозируется, что к 2020 году оборот ecommerce рынка в России в 2–3 раза до 2,4–3 трлн рублей, при этом доля mobile будет расти.Андрей Судник, основатель и управляющий партнёр шопинг-мессенджера «», рассказывает, зачем и как традиционному ритейлу идти в мобайл.

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

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

Последние новости

 

 

Мы в социальных сетях

Читайте последние новости!