Как создать прототип сайта и не продать душу дьяволу?
Зачем нужно проектирование сайта?
Чтобы говорить на одном языке, давай сначала разберемся, зачем нужен прототип сайта? Создание сайта окутано мраком. Сложные термины, куча специалистов и не понятно, кто чем занимается. Лучше разберем все на аналогии, которая будет понятна каждому.
Строительство дома. Мы с тобой знаем, что у дома должна быть крыша, окна, чтобы любоваться видом и дверь. Вроде все легко и просто. Берем материалы, инструменты и начинаем строить дом мечты. Но на выходе получили противоположный результат. Дверь не закрывается, окна покосились, в крыше дыры, да и в целом дом похож на сарай, переживший ядерную войну. Что пошло не так? Мы начали сразу строить, без чертежей, плана дома и необходимых расчетов.
Аналогичная ситуация будет при создании сайта, если мы проигнорируем этап проектирования сайта. Прототип - это чертеж будущего сайта с проработанной структурой и логикой, кроме этого должно быть проработан UX. Интерфейс сайта должен быть интуитивно понятен пользователю. Поэтому часто называют UX прототип. Как сделать, чтобы будущий сайт был удобен пользователю и эффективен для бизнеса? Не переживай, сейчас разберемся.
Этапы проектирования сайта, чтобы сделать как надо
Хватит про дома, душа просит приключений. Ты капитан торгового судна, трюма забиты до отказа колумбийским кофе. Выходим в открытый океан и… Что дальше? Куда плыть? Какая страна купит наш кофе? А вдруг они пьют только чай или что покрепче?
Нельзя создать прототип без целей и аналитики. Иначе нас ждет судьба корабля, который так и будет дрейфовать набитый никому не нужным грузом. Есть три составляющие, которым стоит уделить особое внимание. Сильные и слабые стороны бизнеса, собирательный образ пользователя и решения конкурентов.
Интеллект карта бизнеса
Сильные и слабые стороны. Первый шаг развития - это понять текущую ситуацию. В этом поможет интеллект карта бизнеса. Распиши все преимущества компании, сильные и слабые стороны, лучшие кейсы и именитых клиентов, ценности и подобные вещи. Чем подробней будет карта, тем проще будет структурировать информацию.
Анализ целевой аудитории сайта
Это не должен быть формат “мужчины от 30 до 40 лет”. Такое определение аудитории не даст ровным счетом ничего. Какие отличия в интерфейсе будут для мужчин 30 лет и для мужчин 18 лет? Изучите 40-50 профилей ваших клиентов в социальных сетях. Сделай собирательный портрет по функциональным ролям, опиши увлечения, любимые сайты и приложения, каким телефоном и компьютером пользуется, какой контекст использования будет для нашего проекта. Это поможет понять устоявшуюся модель поведения, это нужно, чтобы интерфейс был привычным и знакомым.
Анализ сайтов конкурентов
Посмотри решения отечественных и зарубежных коллег, зарегистрируйся и изучи все разделы. У тебя появится представление сильных и слабых сторон интерфейсов конкурентов. На этом этапе собери референсы крутых проектов, передашь их дизайнеру, чтобы увеличить шансы крутой реализации.
Это самый минимум, который нужно сделать перед началом созданием прототипа сайта. В идеале нужно проработать возможные действия пользователя, информационную архитектуру, карту сценариев, выявление страхов и возражений нашей собирательной персоны. Окееей. Провели исследование, собрали всю информацию, теперь о том, где лучше делать прототип.
Выбираем программу для проектирования сайта
Эта тема заслуживает целой серии статей. Здесь с тобой обсудим обзорно, чтобы ты знал, что загуглить и попробовать. Только перебрав решения, можно найти то, которое больше всего подходит тебе.
Прототип в Balsamiq
Бальзамик - очень простая программа для создания быстрых прототипов. Немного мультяшный стиль поможет не отвлекаться на контент, а сделать акцент именно на логику и структуру.
- Собственная база элементов
- Стоимость от 9$
- Только английский язык
- Устанавливается на компьютер
Прототип в Figma
Популярный инструмент у дизайнеров, фигма один из лидеров на рынке проектирования интерфейсов. Есть бесплатный тариф, если делаете разово для себя - то это отличный вариант.
- Пробный период и бесплатный тариф
- Возможность работать в команде
- Облачное решение
- Только английский язык
- Можно передать прототип в фигме, дизайнеры часто рисуют в фигме.
Прототип в Axure
Акшур - более сложное решение для прототипа сайта. Это профессиональное решение и более дорогое, чем представленные сервисы, но если вы обладаете минимальными знаниями в верстке сайтов - это решение может отлично подойти для реализации сложных анимаций и сценариев.
- Профессиональный инструмент, доступен функционал JavaScript
- Стоимость от 29$
- Только английский язык
- Устанавливается на компьютер
Прототип в Tilda
Тильда - единственный инструмент из статьи доступный на русском языке. Это одно из ключевых преимуществ данного сервиса. Кроме этого тильда проста в освоении.
- Есть бесплатный тариф
- Облачное решение
- Работа из готовых блоков
- Русский язык
Остался всего один вопрос по прототипу.
Привлечь профессионала или сделать самостоятельно?
Разработка прототипа сайта на первый взгляд кажется простым, нет картинок, все черно-белое, достаточно накидать блоки. Давай разберем, почему лучше заказать прототип у специалиста, а не делать самому.
Предпроектная работа и UX прототип - это фундамент твоего будущего проекта. Это облегчает работу всем. Дизайнер видит, что ему делать, верстальщик и программист понимают функциональную логику. Даже если у тебя есть миллиметровая бумага, карандаш и линейка, даже нарисовав ровные линии, не обладая нужными знаниями ты не сделаешь чертеж дома. Здесь ситуация аналогичная.
Прототип сайта должен соответствовать многочисленным правилам дизайна и верстки, например соблюдений разрешений, отступов и компоновка элементов по модульной сетке. Ведь какой смысл прототипа, если он не может превратиться в реальный проект?
Опытный UX проектировщик имеет за плечами десятки и сотни реализованных проектов, которыми пользуются тысячи пользователей. Такой опыт позволяет создавать удобные и продуманные интерфейсы.
У тебя сломалась машина. Ты можешь потратить время, разобраться и починить, а можешь обратиться в сервис, где подобные проблемы решают ежедневно. Может случиться так, что после твоего ремонта станет только хуже и потребуется более дорогой ремонт. Есть риск, что прототип, собранный собственноручно придется перезаказывать, т.к. будет содержать нереализуемые или крайне неудобные решения для пользователя. Это может быть губительно для всего проекта, даже если заложен серьезный бюджет на маркетинг.
Инвестировать в UX прототип или потратить время и сделать самостоятельно каждый решает для себя сам. Все зависит от бюджета, сроков и уровня проекта. Прототип лендинг для тестирования ниши лучше сделать самостоятельно, порталы, сервисы и интернет-магазины - доверить UX специалисту. Интуитивно понятный интерфейс формирует лояльную аудиторию и увеличивает прибыль бизнеса.
