// Development
// Development
Canva - це платформа графічного дизайну, яка дає змогу редагувати фотографії, створювати графіку, презентації, емоджі, стікери, анімацію та інший візуальний контент для реклами та постів у соціальних мережах. Далі ми детально розповімо, як розробити клон Canva - веб-платформу з аналогічним функціоналом і схожим дизайном.
На цьому етапі ви маєте отримати чітке розуміння того, який саме продукт ви маєте намір розробити, якої мети за його допомогою ви хочете досягти і яку цільову аудиторію залучити. Рішення, які ви приймете під час цього, багато в чому визначать, як відбуватимуться всі наступні стадії розробки.
Ось про що ви маєте подумати під час запуску свого проекту:
Каркас - це схематичне представлення зовнішнього вигляду створюваного сайту, де більшість елементів дизайну представлені у вигляді блоків. Завдяки каркасу веб-розробник і замовник можуть зрозуміти, що міститиме інтерфейс користувача майданчика, а також де і як ці елементи будуть розташовані.
На цьому етапі розробки дизайнери створюють увесь графічний контент, як-от фон, логотипи, кнопки, анімація, піктограми, відео тощо. Визначається колірна схема, набір шрифтів і типографіка. Вибір усього цього робиться виходячи з ніші та вподобань цільової аудиторії, тобто даних, які було зібрано на етапі визначення концепції створюваної веб-платформи.
Збирається все це воєдино в макеті (або шаблоні сторінки). Макет - це статичне представлення повністю готового дизайну інтерфейсу сайту в тому вигляді, в якому його побачать звичайні відвідувачі майданчика. Мета створення макета - це демонстрація навігаційної структури, завершеного дизайну сайту і його внутрішнього вмісту цільовій аудиторії та замовнику.
Коли всі задоволені макетом, зазвичай також створюють прототип сайту. Це, по суті, інтерактивний макет, де працюють усі анімації, переходи, відео та посилання, але не працюють самі функції сайту. Завдяки прототипу можна наочно зрозуміти, і який вигляд матиме сайт, і як його використовуватимуть кінцеві користувачі, що, своєю чергою, дасть змогу отримати точніший зворотний зв'язок.
Написання і складання текстового контенту зазвичай відбувається паралельно з іншими етапами створення веб-сайту. На головній сторінці та в рекламних текстах ви маєте за допомогою тексту дати уявлення про свій сайт (що це за платформа і що за її допомогою користувач може зробити) і його головні переваги порівняно з конкурентами. Також ви маєте створити текстове оформлення сайту: назви та опис усіх іконок, розділів, функцій і елементів редактора - від інструментів до шаблонів фігур.
Написанням текстів займаються копірайтери і редактори. Причому текст для інтерфейсу редактора (і додатків) мають писати профільні копірайтери. Тоді як текст для головної сторінки, імейл-розсилок і реклами може написати і звичайний копірайтер (за участю редактора, коректора і маркетолога).
Тепер, коли ви визначилися з концепцією, архітектрою та дизайном, можна братися за втілення сайту клону Canva - верстку та кодування. Зазвичай при розробці сайтів спочатку реалізують головну сторінку, а потім додають до неї всі інші сторінки відповідно до навігаційної карти сайту. Потім розробники впроваджують CMS і різні фреймворки, а також редактор зображень - головна складова таких онлайн-платформ, як Canva. Після чого потрібно додати інтерактивність і функціонал сайту.
Причому якщо створити фронтенд (сторінки веб-сайту) можна і за допомогою конструкторів сайтів або WordPress, що здешевлює і прискорює розробку, то створити редактор зображень і деякі інші важливі функції клону сайту Canva можна лише за допомогою кастомної розробки. І доручити її потрібно не фрілансеру, а компанії-розробнику, оскільки редактор зображень - це надто складне програмне забезпечення для одиночної розробки.
Де шукати і на які речі звертати увагу під час вибору технічного партнера, докладно описано в статті: "Як вибрати компанію-розробника".
Орієнтовний склад команди розробників:
Інтеграція з соцмережами. Необхідна за двома аспектами:
Завантаження зображень. Крім можливості робити фотографії, користувачі повинні мати можливість завантажувати зображення зі своїх пристроїв і різних зовнішніх майданчиків на кшталт Instagram, Discord, Twitter, Google Drive або Dropbox.
Редактор зображень. Очевидно, що після того як зображення буде завантажено, користувачі захочуть його обробити. Ось що з ним можна зробити:
Незвичайні фільтри. Багато додатків для редагування зображень стали відомі завдяки своїм унікальним фільтрам. Наприклад, Prisma, яка перетворює фотографії на справжні картини. Ще можна згадати веб-сайт Deep Nostalgia, який оживляє старі фото, або Remove.bg, який за допомогою одного кліка якісно видаляє фон на фотографіях.
Можливість створювати стікери, гіфки, емодзі. Ще можна реалізувати на сайті вашого клону Canva можливість створювати власні яскраві стікери та анімовані зображення з власних фотографій. Що може бути крутіше, ніж емодзі з фотографій учнів свого класу, колег чи родичів?
Натхнення. Ви також можете наслідувати приклад VSCO, щоб створити спеціальний розділ для натхнення користувачів на нові творчі подвиги. У такому розділі можна показувати красиві картинці, фото, стікери, презентації та іншу графіку, створену за допомогою графічного редактора вашого сайту.
Налаштування сайту. У цьому розділі користувач може налаштувати інтерфейс сайту під себе і вказати свої переваги, пов'язані з роботою в редакторі: шаблон за замовчуванням, місце зберігання проектів, обрані шаблони тощо. Тут же можна додати інструкції про ліцензії та гайди для редагування фото, налаштування відображення даних, публікації зображень у соціальні мережі.
Спілкування в чаті. Немає сенсу робити з вашого клону Canva щось на кшталт мережі Instagram, однак додавання можливості спілкування між користувачами може стати в нагоді, особливо якщо у вашому редакторі зображень є можливість спільної роботи над проектами. Також буде корисним додати можливість коментувати роботи інших людей і ставити їм оцінки, якщо вони публічні.
Гейміфікація. Усі популярні фоторедактори перетворюють процес корекції зображення на свого роду захопливу гру, залучаючи тим самим користувачів до тіснішої взаємодії. Наприклад, можна зробити перетворене (тобто виправлене) зображення у вигляді гри на час, а також для участі в "змаганні дня" та отримання голосів від інших користувачів.