Разработка Сайта-Клона Canva

Содержание

#1. Шаг 1: определение концепции
#2. Шаг 2: разработка карты сайта и каркаса
#3. Шаг 3: разработка дизайна клона Canva
#4. Шаг 4: написание и компиляция текстов
#5. Шаг 5: верстка и разработка клона Canva
#6. Компания-разработчик
#7. Технологический стек
#8. Функции клона Canva
#9. Стоимость создания клона Canva

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.

Интеграция с соцсетями. Необходима по двум аспектам:

• Упрощенная процедура регистрации. Избавляет пользователей от необходимости вручную вводить регистрационные и личные данные, так как все необходимые данные можно легко подтянуть с аккаунтов в соцсетях.
• Возможность делиться созданной графикой и фотографиями в социальной сети. Почти всегда главная цель создания изображений и редактирования фото — это их публикация в Facebook или Instagram. Интеграция клона Canva с этими платформами позволит шарить графику с помощью одного клика.

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

Загрузка изображений. Помимо возможности делать фотографии, пользователи должны иметь возможность загружать изображения из своих устройств и различных внешних площадок вроде Instagram, Discord, Twitter, Google Drive или Dropbox.

Редактор изображений. Очевидно, что после того как изображение будет загружено, пользователи захотят его обработать. Вот что с ним можно сделать:

• Редактирование изображений: обрезка кадра, фильтры, улучшения.
• Настраиваемые шаблоны: для упрощения и ускорения создания постов в самых популярных соцсетях, имейл-рассылок, баннеров, логотипов и т.д.
• Каталог изображений: поиск стоковых картинок и фото для фона и вставок, анимации, инфографики, иконок, кнопок, клип-артов, символов, эмодзи и т.п.
• Добавление своей графики: сохраняйте свои изображения, видеоролики и фотографии в редакторе, чтобы использовать их при создании новой графики.
• Скачивание макетов в разных форматах: канва позволяет загружать файлы большинства популярных форматов, в том числе JPG, PNG, PDF и PDF.
• Совместное редактирование изображений: подключите друзей, коллег или родственников для совместной работы над фото, презентациями и т.п.
• Командная работа над проектами: объединяйте пользователей в группы и давайте им задания для совместной работы над вашими проектами.
• Планировщик публикаций в соцсетях: используйте клон Canva для составления календаря автоматических публикаций постов в соцсетях.
• Создание сайтов, прототипов, презентаций, буклетов, баннеров и т.п.

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

Необычные фильтры.  Многие приложения для редактирования изображений стали известны благодаря своим уникальным фильтрам. Например, Prisma, которая превращает фотографии в настоящие картины. Еще можно вспомнить веб-сайт Deep Nostalgia, который оживляет старые фото, или Remove.bg, который с помощью одного клика качественно удаляет фон на фотографиях.

Возможность создавать стикеры, гифки, эмодзи. Еще можно реализовать на сайте вашего клона Canva возможность создавать собственные яркие стикеры и анимированные изображения из собственных фотографий. Что может быть круче, чем эмодзи из фотографий учеников своего класса, коллег или родственников?

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

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

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

Геймификация. Все популярные фоторедакторы превращают процесс коррекции изображения в своего рода увлекательную игру, вовлекая тем самым пользователей в более тесное взаимодействие. Например, можно сделать преобразованное (то есть исправленное) изображение в виде игры на время и для участия в «соревновании дня» и получения голосов от других пользователей.

Стоимость создания клона Canva