Canva — это платформа графического дизайна,
которая позволяет редактировать фотографии, создавать графику, презентации, эмоджи, стикеры, анимацию и другой
визуальный контент для рекламы и постов социальных сетях. Дальше мы подробно расскажем, как разработать клон Canva — веб-платформу с аналогичным функционалом и похожим дизайном.
Шаг 1: определение концепции
На данном этапе вы должны получить четкое понимание того, какой именно продукт вы намерены разработать, какой цели с его помощью
вы хотите достичь и какую целевую аудиторию привлечь. Решения, которые вы примете в ходе этого, во многом определят, как будут протекать все последующие стадии разработки.
Вот о чем вы должны подумать при запуске своего проекта:
- Описание проекта. В общих чертах опишите ваш проект, начиная с функционала и заканчивая уникальной ценностью, которую вы можете предоставить потенциальным пользователям. Кроме того, также нужно сделать краткое описание среды, в которой будет существовать ваш проект.
- Основные и второстепенные цели. Это должны быть сравнительно простые, достижимые и, главное, измеримые цели. При разработке клона сайта Canva целями могут быть количество уникальных посетителей в месяц, количество платных подписчиков, доход. Четкие цели позволят команде разработчиков сосредоточиться на том, что окажет наибольшее положительное влияние на достижение этих целей.
- Аудитория проекта. В случае создания клона Canva это люди, которым нужно легко и быстро отредактировать фото, создать презентацию или другой визуальный контент. Кроме того, иногда целевой аудиторией также являются потенциальные инвесторы, которые могут профинансировать разработку.
- Привлечение. Какие вещи мотивируют пользователей использовать созданную вами платформу? Какие преимущества бренда помогут выделить его среди конкурентов, в том числе на фоне оригинала (Canva)? Что заставит людей оформить подписку и покупать графику (шаблоны постов, шрифты и т.п.).
- Конкуренты. Какие веб-сайты и приложения предлагают вашей целевой аудитории похожие возможности по созданию графики и редактированию фото? Сделайте обзор конкурирующих платформ с учетом их функционала, преимуществ и недостатков, визуального брендинга и стоимости услуг.
Шаг 2: разработка карты сайта и каркаса
На этом этапе
UX-дизайнер создает навигационную карту сайта (sitemap) — схематическое отображение всех экранов и переходов между ними. Эта схема позволяет наглядно увидеть пути пользователей, будь это поисковый робот или человек, и оптимизировать их до минимального количества кликов или других взаимодействий с интерфейсом сайта.
Пример того, как может выглядеть навигационная карта сайта книжного магазина. Источник
Навигационная карта сайта дает возможность веб-разработчикам понять, как будет выглядеть внутренняя архитектура (с какой страницы на какую можно перейти). При этом карта не показывает, как в итоге будет выглядеть дизайн экранов сайта, какой будет
цветовая схема или типографика. Для этого создаются каркасы или макеты.
Каркас — это схематичное представление внешнего вида создаваемого сайта, где большинство элементов дизайна представлены в виде блоков. Благодаря каркасу
веб-разработчик и заказчик могут понять, что будет содержать пользовательский интерфейс площадки, а также где и как эти элементы будут расположены.
Пример каркаса сайта. Источник
Шаг 3: разработка дизайна клона Canva
На этом этапе разработки дизайнеры создают весь графический контент, такой как фон, логотипы, кнопки, анимация, пиктограммы, видео и т.п. Определяется цветовая схема, набор шрифтов и типографика. Выбор всего этого делается исходя из ниши и предпочтений целевой аудитории, то есть данных, которыы бли собраны на этапе определения концепции создаваемой веб-платформы.
Собирается все это воедино в макете (или шаблоне страницы). Макет — это статичное представление полностью готового дизайна интерфейса сайта в том виде, в котором его увидят обычные посетители площадки. Цель создания макета — это демонстрация навигационной структуры, завершенного дизайна сайта и его внутреннего содержимого целевой аудитории и заказчику.
Сравнение каркаса и макета на примере сайта National Geographic. Источник
Заказчик и целевая аудитория отмечают, что им понравилось, а что вызвало вопросы или негативную реакцию. Эта информация используется для усовершенствования площадки. После чего создается новый макет, который снова показывают заказчику и фокус-группе. Этот цикл следует повторять до тех пор, пока
заказчик и пользователи не будут полностью удовлетворены созданным макетом клона Canva.
Когда все довольны макетом, обычно также создают прототип сайта. Это, по сути, интерактивный макет, где работают все анимации, переходы, видео и ссылки, но не работают сами функции сайта. Благодаря прототипу можно наглядно понять, и как будет выглядеть сайт, и как его будут использовать конечные пользователи, что в свою очередь позволит получить более точную обратную связь.
Чем отличаются каркасы, макеты и прототипы. Источник
Шаг 4: написание и компиляция текстов
Написание и сборка текстового контента обычно происходит параллельно с другими этапами создания веб-сайта. На главной странице и в рекламных текстах вы должны посредством текста дать представление о своем сайте (что это за платформа и что с ее помощью пользователь может сделать) и его главные преимущества в сравнении с конкурентами. Также вы должны создать текстовое
оформление сайта: названия и описание всех иконок, разделов, функций и элементов редактора — от инструментов до шаблонов фигур.
Написанием текстов занимаются копирайтеры и редакторы. Причем текст для интерфейса редактора (и приложений) должны писать профильные копирайтеры. Тогда как текст для главной страницы, имейл-рассылок и рекламы может написать и обычный копирайтер (при участии редактора, корректора и маркетолога).
Шаг 5: верстка и разработка клона Canva
Теперь, когада вы определились с концепций, архитектрой и дизайном, можно приступать воплощению сайта клона Canva — верстке и кодированию. Обычно при разработке сайтов сначала реализуют главную страницу, а затем добавлят к ней все другие страницы в соотведствие с навигационной картой сайта. Потом разработчики внедряю CMS и различные фреймворки, а также редактор изрображений — главная составляющая таких онлайн-платформ, как Canva. После чего нужно добавить интерактивность и функционал сайта.
Причем если создать фронтенд (страницы веб-сайта) можно и посредством конструкторов сайтов или WordPress, что удешевляет и ускоряет разработку, то создать редактор изображений и некоторые другие важные функции клона сайта Canva можно лишь посредством кастомной разработки. И поручить ее нужно не фрилансеру, а компании-разработчику, поскольку редактор изображений — это слишком сложное программное обеспечение для одиночной разработки.
Компания-разработчик
Где искать и на какие вещи обращать внимание при выборе технического партнера, подробно описано в статье: «
Как выбрать компанию-разработчика».
Ориентировочный состав команды разработчиков:
- Бизнес-аналитик.
- Руководитель проекта.
- 1 или 2 UI/UX-дизайнера.
- 1 или 2 фронтенд-разработчика.
- 1 или 2 бекенд-разработчика.
- 1 или 2 QA-специалиста.
Технологический стек
- Мобильный SDK — Android или iOS.
- Reak-time Analytics — большие данные, Google Analytics, Hadoop.
- Бекэнд-разработка — Node.js, Python, Java, PHP и Ruby on Rails.
- Frontend для вебсайта — Angular.JS, React.JS, Backbone и
- Отслеживание местоположения — Google Maps и Apple Maps.
- Интеграция платежей — PayPal, Stripe, Braintree, Интернет-банкинг.
- Уведомления — Push.IO, Twilio, Amazon SNS, Карта, AdPushup.
- Облачное хранилище — Google Cloud Storage, Amazon Cloud Storage.
- Базы данных — Cassandra, MySQL, MongoDB, HBase.
- Сканирование QR-кодов — считыватель штрих-кодов ZBar.
- Поддержка и продажи — AppCues, Clearbit Connect, Elevio, GetFeedback.
- Аналитика — Amplitude, Google Analytics, Heap, Mixpanel, Optimizely, VWO.
- Производительность и операции — dmarcian, G Suite.
- Обмен сообщениями — Twilio, Firebase.
- Маркетинг — Mailgun, Mandrill, Segment.
- HR — AngelList Jobs, Lever.
Функции клона Canva
Создание учетной записи. Все редакторы изображений и фото призывают пользователей зарегистрироваться и создать личную учетную запись, которая нужна для сохранения активности на сайте и персонализации. В Canva регистрация нового аккаунта происходит с помощью имейла и аккаунтов в Google, Facebook и Apple.